为了提高页面加载速度，您可以通过仅调整页面的 HTML 代码来延迟 CSS 和 JavaScript 资源。
CSS、字体和 JavaScript 等资源被视为渲染阻塞。这意味着浏览器在实际呈现页面内容之前需要时间来加载它们。
所以这些资源的文件越大，加载它们的时间就越长，用户看到页面内容的时间就越长。
要检查页面加载速度和渲染阻止资源，您可以直接在浏览器 (Chrome) 中使用Lighthouse工具。这是衡量 Web 性能的重要工具之一。
为了防止渲染阻塞资源减慢您的页面速度，您可以实施下面列出的小 HTML 更改来解决此问题。
延迟 CSS
处理 CSS 负载的正确方法是将样式拆分为关键 CSS 和非关键 CSS。
- 关键- 这些样式是显示即时内容所必需的，一旦页面加载（首屏），用户就会看到。
- 非关键- 这些样式用于不立即可见的内容（首屏下方），因此可以稍后加载。
对于关键的 CSS，您可以在style页面头部的标签中定义样式：
<style type="text/css">
.site-headline {
font-size: 42px;
font-weight: 600;
color: #444;
line-height: 1.75;
letter-spacing: 0.3px;
}
</style>
link然后通过为标签添加附加属性来异步加载其余样式。
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
分解它：
- 该属性的
preload值rel告诉浏览器在需要渲染页面时立即加载资源。 - 该
as属性指定由<link>. - 该
onload属性处理 CSS 加载。在它将onload处理程序设置null为避免重复调用并更改rel属性值之后。
注意：在不执行 JavaScript 的情况下，使用noscript带有标准的标记link作为后备解决方案。
<noscript><link rel="stylesheet" href="styles.css"></noscript>
延迟媒体
您可以延迟加载媒体，以进一步提高页面的加载速度。延迟加载意味着只有当用户滚动靠近它时才会加载类似图像的媒体。
图像和 iframe
您可以为或标签添加loading="lazy"属性。imgiframe
<img src="funny-cat.png" alt="Funny cat" loading="lazy">
<iframe src="https://youtu.be/AActXSWxsRo" title="Lazy Loading images" loading="lazy"></iframe>
视频和音频
对于video和audio标签，您可以添加一个preload="none"属性。
注意：preload="none"不适用于该autoplay属性。
<video preload="none">
<source src="funny-cat.webm" type="video/webm">
<source src="funny-cat.mp4" type="video/mp4">
</video>
虽然最好使用原生 HTML 属性来延迟图像和其他媒体，但它们仍然缺乏完整的浏览器支持和可定制性（例如，您不能延迟加载背景图像）。您可以在我详细解释的文章中查看如何实现延迟加载。
延迟 JavaScript
为避免延迟脚本，您应该将它们包含在结束body标记之前。但情况并非总是如此。您可能希望在内容呈现之前或期间获取数据或包括分析。
要延迟脚本，您可以使用两个 HTML 属性之一：
deferasync
该defer属性意味着脚本将“在后台加载”并且不会阻止内容呈现。该脚本将在DOMContentLoaded事件上执行。
<p>...content before script...</p>
<script defer src="scripts/fetch-data.js"></script>
<!-- visible immediately -->
<p>...content after script...</p>
该async属性意味着脚本将与内容渲染并行加载，并且可以立即执行。
<!-- Google Analytics is usually added like this -->
<script async src="https://google-analytics.com/analytics.js"></script>
defer有关更多详细信息以及和属性之间的差异，async我强烈推荐javascript.info 文章。
