Web page performance optimization

Listen to this article

Websites are usually divided into two parts: front-end and back-end. We can understand that the background is used to implement the functions of the website, such as: performing user registration, changing passwords, commenting on articles, and so on. But what about the frontend? In fact, it should be a performance function. Most of the factors that affect the user's accessibility are related to the optimization of the external pages of the site. Page optimization – this article will give an overview of this process.

The content of the article:

• 1. Optimizing page load time
• 2. Compress all compressible resources
• 3. Site Cache Optimization
• 4. Critical Render Path

1. Optimizing page load time

Better Page Optimization - this is when resources are not loaded at all. Therefore, try to minimize the number of downloaded unnecessary resources.

1. Evaluate if some of your site's dependencies are needed and weigh the pros and cons.
2. Is the dependent load path reliable and will it block the entire page when it is unavailable.

2. Compress all compressible resources

1. The code must be all compressed.
2. Delete unwanted pictures.
3. Use css3 instead of images.
4. Use images with a higher compression ratio. Especially GIFs, some video formats (H.264 or WebM) are much smaller than GIFs.
5. Use WordArt fonts, not images.
6. Provide more modern image formats for users with newer browsers (for example: WebP).
7. Bitmaps with multiple resolutions for different page sizes.
8. Specify a width and height for the image, otherwise clipping may occur.
9. Use HTTP/2. For example, a sprite is a large image made up of many small images, which can reduce the number of HTTP requests. However, it is difficult to cache, and changing the small image will invalidate the cache of all small images. HTTP/2, multiple requests can be initiated from a link, eliminating the need for sprites.

3. Website cache optimization

Browser caching mechanism:

1. Visit the page, request various resources, and the browser checks if there is a local cache.
2. If so, check if the resource is expired. Not expired, use cache directly. When it expires, a request is made to the server.
3. The etag and last-modified header fields will be included in the sent request.
4. The server will use the Etag and last-modified to determine if the resource cached by the browser is not available.
5. If the resource is still valid, return a 304 response code to tell the browser to use the cache. Otherwise, return the updated resource.

According to this set of logic, you can plan your website cache.

How can I notify the browser to update a resource if the resource expires early?

This is usually not possible because the browser sees that the resource is not expired and doesn't make the request at all. But this can be achieved by changing the URL of the resource. Therefore, you need to add a version number or a random tag to the resource's filename. For example style.12.css. That is, don't let the browser cache the html file, otherwise the browser won't query the server until it expires.

4. Critical Render Path

The browser displays the web page with the following steps:

1. Process the HTML markup and build the DOM tree.
2. Process the CSS markup and build the CSSOM tree.
3. Combine DOM and CSSOM into a render tree.
4. Layout according to the render tree to calculate the geometry information of each node.
5. Draw each node on the screen.

Optimizing the critical rendering path means optimizing the rendering process so that the web page can be rendered as quickly as possible.

css

CSS files block rendering. After the browser builds the DOM tree, it must wait for the CSSOM tree to complete. A tag at the top of the document to prevent non-standard CSS and allow the browser to request the CSS file as soon as possible.

Avoid using @import in css files because the browser will only find and load the imported css after the file containing the import has been loaded and compiled. Consider using inline CSS that doesn't require additional requests and doesn't block rendering of the main content.

js

The Java script will not start executing until the CSSOM is built. js also prevents the DOM tree from being built. If async is not marked in the tag.

Now you will understand what page optimization is and how it is built. Understanding these processes will help you quickly optimize your site's pages, reduce requests, and speed up loading.

Reading this article:

• CSS Optimization - 21 Ways to Speed Up Your Website
• Optimizing JS and CSS site code online - a detailed guide

Thanks for reading: SEO HELPER | NICOLA.TOP