A simple answer from the point of view of the picture:
- lazy loading
reduce the amount of loading during initialization, and achieve the purpose of loading on demand
- http2
reuse TCP connections, compress the size of HTTP packets, etc., using this method, images can not be placed under multiple domain names.
- compress pictures
Common routines, reduce request size
- merge small and commonly used images are sprite or iconfont
common routines, reduce requests
- dns pre-resolution
has a great influence on dns resolution on mobile.
I'll put a few connections:
Wireless performance Optimization: domain name Convergence
Prefetching, preloading, prebrowsing
- reasonably set the image cache mode to enhance reuse and avoid repeated network requests
mainly http response headers such as if-not-modified/ e-tag
- use the test tool to analyze the page loading process
easy to use lighthouse, has now been incorporated into its devtools by chrome.
network throttle
-update
you can try progressive pictures
What does the interlaced option in Photoshop do?
When to interlace an image?
Summary:
xD
the main problem of the landlord is that his picture is too big, and the picture of 3jue 4m is not suitable to be displayed directly on the web page, so the solution:
< H2 > compress the picture before uploading < / H2 >
-
size compression. reduce the size of the image according to the definition requirements, for example, the original image is 4000x3000, is it acceptable to reduce to 2000x1500? Reducing the size of the picture can greatly reduce the size of the picture. The reduction of this size can be realized by using photoshop's automatic batch processing function, or by using some image tool software.
-
size compression. the front end is generally implemented with tools such as gulp. If it is not a professional front end, it is not bad for jpg to be compressed with photoshop. Usually, it is possible to compress the original film of 3Jing 4m to 300cm 400k according to the parameter of 65. Png can be compressed on https://tinypng.com/ , and multiple files can be packaged and downloaded.
< H2 > list diagram and detailed diagram are separated < / H2 >
The
page shows the picture list page, which is a picture of a smaller size, which is sized according to your layout design. After the user clicks on the small image, the user loads and opens the final big image. You can save the picture of the list page on the website you refer to, and the big picture after opening it, and have a look at it. This function of generating small pictures is about to be realized in your php background.
< H2 > Last < / H2 >
Finally, there are the optimization methods mentioned upstairs, the most important of which is, of course, lazy loading, or waterfall flow images.
Picture lazy loading + gzip compression
The lazy loading code for this site is the following, which makes a request, returns a piece of js code, and then executes this code to add a new image to the container container.
Picture 3-4m, which in itself is a problem
