Optimize CSS loading strategy and improve web rendering speed

This article discusses the way browsers load CSS files and their impact on web rendering speed, and introduces several optimization strategies to help you improve your user experience.

Problem: CSS blocking rendering

If you have used Google Page Speed ??Insights, you may have seen a tip like this:

The browser uses DOM and CSSOM to render web pages. CSS is located on the critical rendering path, which means that the browser must download and process all HTML and CSS information to start rendering, which can cause delays and impact the user experience. External style sheets in particular will cause multiple round trips between the browser and the server, causing a time difference between the completion of HTML download and the rendering of the page.

Concept of key CSS

While HTML is crucial for page rendering, not all CSS is critical. What users are most concerned about is the content of the visible area (viewport) of the page. Therefore, common optimization strategies are delaying or asynchronous loading of blocking resources, or inline key parts into HTML.

Optimization strategy

The following are some commonly used optimization methods for developers:

1. Minimize render blocking with media types and media queries: Split external CSS into different files (e.g. style.css, print.css, other.css) and use the appropriate media type and Media queries refer to them. For example:

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">

The browser downloads all style sheets, but prefers non-blocking style sheets.

2. Use the preload command: preload command to tell the browser to obtain specific resources in advance. Combined with the onload event of JavaScript, you can implement asynchronous loading style sheets:

<link rel="preload" as="style" href="style.css" onload="this.rel='stylesheet'">

At present, the browser support of preload is limited, and you can use the polyfill provided by Filament Group.

3. Filament Group's solutions: Filament Group's policies include: inline critical CSS into HTML and load non-critical CSS asynchronously using HTTP/2 Server Push. They use the LoadCSS library, which contains polyfills that do not support preload browsers.

4. Put the stylesheet link in the body of the document: This method does not rely on the concept of "above viewport", but instead places the stylesheet link before its corresponding HTML content to implement the page Render the content in sequence. For example:

<link rel="stylesheet" href="/site-header.css">
<main>...</main>
<link rel="stylesheet" href="/article.css">

Conclusion

The way the browser downloads style sheets may block page rendering and affect user experience. Several optimization methods introduced in this article can help you solve this problem and improve the loading speed of web pages. Which method to choose depends on the size and complexity of your website.

FAQs (FAQs)

• What is the critical rendering path (CRP)? Why is it important for fast-loading websites? CRP is a sequence of steps for a browser to convert HTML, CSS, and JavaScript into screen pixels. Optimizing CRP can speed up web page loading and improve user experience.

• How to optimize key rendering paths? CRP can be optimized by reducing file size, minimizing the number of critical resources, and shortening critical path length. For example: compressed files, inline critical CSS, delayed non-critical CSS and JavaScript, and use asynchronous loading.

• What is a render blocking resource? How do they affect website loading speed? Render blocking resources are files (usually CSS and JavaScript files) that block web pages from displaying until they are fully downloaded and processed. They delay web rendering and slow down loading.

• How to eliminate render blocking resources? You can eliminate render blocking resources by delaying non-critical CSS and JavaScript, inline critical CSS, and asynchronous loading of files.

• What is the difference between synchronous loading and asynchronous loading? Synchronous loading blocks web page rendering until the file is fully downloaded and processed; asynchronous loading allows web pages to continue rendering while downloading files.

• How to inline the critical CSS? Why is this beneficial? Inline key CSS is to place CSS directly in HTML documents, not in external files. This eliminates the need for separate network requests, thereby reducing the time required to render a web page.

• What is JavaScript's role in critical rendering paths? JavaScript can operate DOM and CSSOM, but if it is not handled properly, it will also block the rendering process.

• How to increase website loading speed with compressed files? Compressed files will delete unnecessary characters (such as spaces and comments) in the code, reducing file size and speeding up downloads.

• What tools can be used to analyze and optimize critical rendering paths? Tools such as Google PageSpeed ??Insights, Lighthouse, and WebPageTest can help analyze and optimize critical rendering paths.

• How to optimize key rendering paths to improve user experience? Optimizing critical rendering paths can reduce web page loading time and improve user experience. Faster loading speeds can improve user satisfaction and potentially improve search engine rankings.

(Some content of this article is provided by SiteGround)

The above is the detailed content of Tackling Render Blocking CSS for a Fast Rendering Website. For more information, please follow other related articles on the PHP Chinese website!