In one of my pages, I used several css background settings as images. The images are probably dozens of KB.
Now when I open the webpage for the first time, these places are obviously slow to load. It seems For example, after all the styles are loaded, the pictures are brushed out...
Is there any way to speed up css loading; or in other words, make the loading of these pictures synchronized with the appearance of the page, without leaving some blank space waiting to be loaded!
I use nginx, and have https and http2...
Is there any solution, not necessarily acceleration.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Just be lazy and load decisively, it’s simple and easy to use
Preload images and add the loading layer, the performance is slightly reduced, but the experience is much better
If a page is used in many places, you can first reduce the number of requests, process the image into a sprite image, and then compress the image. In fact, it is still a matter of analyzing the specific problem. It is best to see the more specific code
Static resources can be placed on CDN. If the image is large, preloading or lazy loading is recommended. When lazy loading, it is recommended to use css to occupy the space in advance to avoid unnecessary reflow. Another note: If the image is too large, it is not recommended to use a sprite image.
1. The laziest method is lazyload
First of all, it goes without saying the sprite image. Of course, you also have to look at the size
Secondly, look at the area where the picture is located. If some pictures are not in the immediate viewing area, you can use lazy loading
If none of the above conditions are met, you can reduce the image size through image compression