Who is affecting the page loading speed of the website and consuming traffic

Who is affecting the loading speed of website pages?

In the process of website production, in order to improve the corporate image and facilitate users to understand the company and products, a large number of relevant pictures are often added. If the pictures are used improperly (too many pictures, pictures that are too large), more system resources will be consumed when loading, thereby affecting the loading time of the entire page. Therefore, it is very important to do a good job of picture optimization.

So how do you modify and optimize images?

1. Control the image size

(1) For local images

Since the images placed on the web page will be directly packaged into the program package, a picture that is too large will cause the package size to be too large and the loading time to be longer. At the same time, a picture that is too large will also cause the rendering time to be longer, so the producer needs to compress the size of the image as much as possible.

The creator can optimize and modify the image in the following ways:

• For images that do not require transparent format, it is recommended to use JPEG format instead of PNG format.

• Whether it is PC or mobile, use the WebP image format. In the case of lossy compression, the changes before and after the compression are not easily noticeable to the naked eye, but the size can be significantly reduced. (Note: WebP is a new generation of image format launched by Google in 2010, which is superior to the current JPEG format in terms of compression. Under the same quality, the size of WebP format images is 40% smaller than that of JPEG format images. Using the WebP format for website images can greatly improve the loading speed of the website).

(2) How to enable the WebP image format on the website:

1) Steps to enable WebP with one click: http://help.eyingbao.com/products/webp.html

2) After enabling the Webp image format, what should I do if some images are not clear? You can modify the image quality in the image control properties, but please note that the higher the image quality, the larger the image size and the slower the website will open.

The operation steps are as follows: http://help.eyingbao.com/products/wangzhanshangtupianbuqingxizenmechuli.html

Note:

• Make sure there are no redundant and useless image resources on the web page.

• Be aware of images that are loaded by default, but may never be rendered afterwards, such as Sliders, Accordions, and Image Galleries.

• In order to shorten the time required to render key images, the Yiyingbao system uses delayed loading of less important images.

(3) Accelerating image CDN processing

In the Yiyingbao website building system, except for ICON images, all others will be deployed on CDN. For such network images, there is no need to compress them.

(4) Image lazy loading

The image component of the Yiyingbao website building platform provides lazy-load technology, and the image defaults to lazy loading function:

2. Quickly check large images on web pages

You can use the developer tool Network to check the image loading time and size. The specific operations are as follows:

(1) All browsers have developer debugging mode. Take Chrome as an example. After opening a page, press ctrl+shift+i, or click Inspect in the right-click menu to enter developer mode. Click the Network tab.

(2) Click "Img", then click Size in the list to sort the image sizes. Mainly optimize images larger than 50K and use image processing tools for optimization.

3. Optimize the image and re-upload it for publication

Re-upload and publish the optimized image to complete the function. You can also directly enable the Webp function in the website management backend with one click.

The above are the main solutions for optimizing website page images to improve loading speed. If your website pages also have the problem of images being too large, then optimize them according to the above methods!