Home > Article > Web Front-end > Will CSS loading affect page loading speed?

Will CSS loading affect page loading speed?

王林Original: 2024-02-18 21:52:06940browse

Whether CSS loading will block page rendering is a common question. This article will explore in detail the impact of CSS loading on page rendering and provide specific code examples for demonstration.

First, we need to know how CSS loading affects page rendering. When the browser parses HTML, if it encounters an external CSS file, the browser will pause the parsing of the HTML and then start downloading the CSS file. Only after the CSS file is downloaded and parsed by the browser will the browser continue parsing the HTML. This means that CSS loading will block the rendering of the page.

To demonstrate this, we can create a simple HTML file that contains an external CSS file and a placeholder element. We will define a background color in the CSS file and apply this style on the placeholder element in the HTML. We'll then use the developer tools to view the rendering process of the page.

The HTML code is as follows:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="placeholder"></div>
  <script>
    console.log("This is a placeholder element.");
  </script>
</body>
</html>

The CSS code (saved as styles.css) is as follows:

.placeholder {
  width: 200px;
  height: 200px;
  background-color: red;
}

If we open that HTML file and view the console output, we will notice To This is a placeholder element. will be output only after the CSS file is loaded. This shows that CSS loading does block the rendering of the page.

However, there is a situation where CSS loading does not block page rendering. If we place the CSS file in the tag of HTML, and use the <link> tag's rel attribute value to be preload, the CSS file will be loaded asynchronously without blocking the rendering of the page. Here is an example of the modified HTML code:

<!DOCTYPE html>
<html>
<body>
  <div class="placeholder"></div>
  <link rel="preload" href="styles.css" as="style">
  <link rel="stylesheet" href="styles.css">
  <script>
    console.log("This is a placeholder element.");
  </script>
</body>
</html>

In this example, we put the link to the CSS file in the tag and used &lt rel attribute of ;link> tag to asynchronously load CSS files. If we open the HTML file again and look at the console output, we'll notice that This is a placeholder element. is output before the CSS file is loaded. This means that the rendering of the page will not be blocked by the loading of CSS files.

To summarize, CSS loading will block the rendering of the page unless we use asynchronous loading. Asynchronous loading of CSS files can be done by placing the <link> tag inside the tag and using the preload## of the rel attribute # value to achieve.

Therefore, when optimizing web page performance, we can consider inlining key CSS code into HTML, which can avoid CSS loading blocking page rendering. Non-critical CSS can then be loaded asynchronously to improve page rendering speed.

The above is the detailed content of Will CSS loading affect page loading speed?. For more information, please follow other related articles on the PHP Chinese website!

css html this 异步性能优化

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Five recommended responsive layout frameworksNext article：Five recommended responsive layout frameworks

See more

Will CSS loading affect page loading speed?

Related articles