专注国内外云服务器
分享建站技术教程

如何通过预加载 (Preload) 关键资源以提高网站加载速度

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

预加载允许您指定在页面加载期间立即或很快需要的资源(例如字体、图像、JavaScript 和 CSS)。 在您网站的每个页面的部分顶部添加一个link rel='preload'标签。

比如:


打开网页时,浏览器会从服务器请求HTML文档,解析其内容,并为引用资源提交单独请求。作为开发人员,您知道页面需要的所有资源以及哪些资源最为重要。您可以使用这些知识提前请求关键资源,加快加载的过程。本文介绍了如何使用  来达成此目的。

预加载的工作原理

预加载最适合用于浏览器通常较晚发现的资源。

在本例中,Pacifico字体是在样式表通过 @font-face 规则定义的。浏览器只有在完成下载和解析样式表后才会加载字体文件。

通过预加载某个资源,您希望浏览器可以比正常发现它更早地获取该资源,因为您认为它对当前页面很重要。

在本例中,已预加载了Pacifico字体,所以下载会与样式表并行进行。

关键请求链代表着浏览器优先处理和获取的资源顺序。 Lighthouse会将位于该链第三层的资产识别为后期发现的资产。您可以使用预加载关键请求审计来确定要预加载的资源。

您可以通过在HTML文档的头部添加带有 rel="preload" 的  标记来预加载资源:


浏览器会缓存预加载的资源,以便在需要时立即可用。(它不会执行脚本或应用样式表。)

在实施预加载后,包括Shopify、Financial Times和Treebo在内的许多网站在以用户为中心的指标(例如Time to Interactive 和First Contentful Paint)等方面,都实现了1秒的改进。

浏览器会根据情况执行诸如 preconnect 和 prefetch 等资源提示。而另一方面,preload 对浏览器来说是强制性的。现代浏览器已经非常擅长对资源进行优先级排序,这就是为什么谨慎使用 preload 并且只预加载最关键的资源那么重要。

load 事件后大约3秒会触发Chrome中的控制台警告。

所有现代浏览器均支持 preload

有助于修复以下两种类型的警告:

1.预加载密钥请求

预加载关键请求是Web字体的常见警告。Font Awesome是您可能会看到的一种非常常见的字体。

预加载关键请求

2.渲染阻塞资源

通过预加载,您还可以修复渲染阻塞资源警告,因为资产以非阻塞方式加载。

消除渲染阻塞资源

如果您正在预加载图像,它还可以帮助降低最大内容绘制 (LCP) 时间。

可预加载资源

有许多不同的资源可以预加载。

公共资源

其他资源

注意:在撰写本文时,Chrome存在一个未解决的bug,即预加载请求比其他更高优先级资源的获取速度更快。在解决此问题之前,请注意预加载的资源如何“跳过队列”并比应有的时间更早地被请求。

预加载CSS中定义的资源

在浏览器下载并解析CSS文件之前,不会发现这些文件中使用 @font-face 规则定义的字体或背景图像。预加载这些资源可确保在下载CSS文件之前获取它们。

预加载CSS文件

如果您使用了关键CSS方法,那么CSS将分成两部分。渲染首屏内容所需的关键CSS内联在文档的 中,非关键CSS通常使用JavaScript延迟加载。在加载非关键CSS之前等待JavaScript执行会导致用户滚动时呈现延迟,因此最好使用  更快地启动下载。

预加载JavaScript文件

由于浏览器不执行预加载的文件,因此预加载有助于将获取与执行分开,这可以改善Time to Interactive等指标。如果您拆分JavaScript包并仅预加载关键块,则预加载效果最佳。

如何实现rel=preload

实现 preload 最简单的方法是在文档的  中添加一个 标记:

  

提供 as 属性可帮助浏览器根据其类型来设置预获取资源的优先级,设置正确的标头,以及确定资源是否已存在于缓存中。此属性可接受的值包括: script 、style 、font 和 image 等等。

请查看Chrome Resource Priorities and Scheduling文档,详细了解浏览器如何确定不同类型资源的优先级。

注意:省略 as 属性或使用了无效值,就相当于XHR请求,这时浏览器不知道它获取的内容,因此无法确定正确的优先级。它还可能导致某些资源(例如脚本)被获取两次。

某些类型的资源,例如字体,以匿名模式加载。对于这些资源,您必须设置 preload 的 crossorigin 属性:

注意:没有设置 crossorigin 属性的预加载的字体将被获取两次!

另外, 元素还接受 type 属性,它包含链接资源的MIME类型。浏览器使用 type 属性的值来确保资源仅在其文件类型受支持时才被预加载。如果浏览器不支持指定的资源类型,它将忽略  。

请尝试通过预加载web字体提高网页性能。

您可以通过 Link HTTP标头预加载任何类型的资源:

Link: /style.css>;; as="style"

在HTTP标头中指定 preload 的一个好处是,浏览器不需要解析文档来发现它,这在某些情况下可以提供一些小幅改进。

使用webpack预加载JavaScript模块

如果您使用了创建应用程序构建文件的模块打包器,则需要检查它是否支持预加载标签的注入。在webpack 4.6.0或更高版本中,它通过在 import()中使用magic comments(魔法注释)支持预加载:

import(_/* webpackPreload: true */_ "CriticalChunk")

如果您使用的是旧版webpack,请使用第三方插件,例如preload-webpack-plugin。

预加载时要记住的事项

小结

为提高网页速度,请预加载浏览器来发现较晚的重要资源。预加载全部资源会适得其反,因此请谨慎使用 preload,并衡量它在现实中的影响。

via https://web.dev

文章来源于互联网:如何通过预加载 (Preload) 关键资源以提高网站加载速度

赞(0)
未经允许不得转载:吾上云 » 如何通过预加载 (Preload) 关键资源以提高网站加载速度
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们