PRPL是一种让网页加载变得可交互、更快速的模式,包含以下四个:
- Push (或者 preload): 给用户推送最重要的资源
- Render: 尽快的渲染最初始的路由
- Pre-cache: 提前缓存剩余的资源
- Lazy load: 懒加载其他路由或者次要资源
本文我们将学习这些技术的综合运用,当然也可以单独使用。
预加载重要资源 (Preload)
Preload 是一个声明性质的fetch request,告知浏览器要尽可能快的请求到该资源。可以通过以下方式预加载重要资源,使用 <link>
标签,带上 rel="preload"
的属性,放在 <head>
标签中。
<link rel="preload" as="style" href="css/style.css">
浏览器会给这个资源分配更高的优先级,而且不影响 window.onload
的事件执行。
尽可能快的渲染初始路由 (Render)
如果你的资源影响了你的 First Paint,Lighthouse会给你一个警告。
Lighthouse建议,使用重要的资源使用inline的内嵌的方式,而其他资源可以采用 async
的方式异步加载。这样可以有效地减少与服务器的交互次数,避免渲染被阻塞,不过也有个缺点,就是这些代码无法被单独缓存,也不利于开发维护。
另一种方式提升首屏的速度就是服务端渲染 (server-side render) 你的初始路由。这样可以给你的用户立马展现内容,其他资源也依然会下载、解析并执行。但这样会大大的加大HTML文件的有效负载 (payload),影响页面可交互的时间 (Time to Interactive),因为用户看到的页面只是内容的展示,等js和css全部执行完,load事件回调完毕,页面才可以交互。
没有一个单一的正确的答案来减少首屏时间,选择内联资源或者是服务端渲染,还是看对你的网页带来的收益与缺点的一个权衡。
提前缓存资源 (Pre-cache)
通过激活一个代理,service worker
可以帮你优先从缓存中获取资源,这不仅仅是应用在离线上,用户第二次访问的速度也能大大提升。
可以使用google提供的三方库 workbox
来将 service worker
集成到你的项目中。想要了解更多相关的,可以参考:https://web.dev/service-worke... 。
懒加载 (Lazy load)
如果你的网站加载了太多的资源,Lighthouse会提示你:
这包括所有类型的资源,但特别大的 JavaScript 会消耗浏览器很多时间去解析和执行,Lighthouse会有另一种提示:
为了首次加载更小的JavaScript,可以尝试拆分bundle,按需加载剩下的资源。
如果你成功的拆分了bundle,给重要的chunk加上preload,浏览器会提高下载的优先级。
在js都拆分了之后,懒加载也都加上了,你可能还会遇到下面的问题:
如果你的网页上有很多图片,请把屏幕之外的图片都延后加载。详情可以参考:https://web.dev/use-lazysizes...
总结
你应该已经对PRPL的模式有了一定的了解,要记住的是并非所有技术都要去实施,以下任何方面的优化对性能都有显著的提升:
- Push (或者 preload): 给用户推送最重要的资源
- Render: 尽快的渲染最初始的路由
- Pre-cache: 提前缓存剩余的资源
- Lazy load: 懒加载其他路由或者次要资源
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。