一图解读《How To Eliminate Render Blocking Resources》

[OSInsight]

原文地址：https://www.debugbear.com/blog/render-blocking-resources

一句话总结

本文来自 DebugBear 官方博客，关于影响网页性能的 render blocking resources 的介绍以及如何解决带来的问题。虽然文章目的之一是为了宣传其性能检测工具，不过我们确实可以从中了解到 JS、CSS 以及其它各种资源如何在不经意间阻塞页面渲染影响页面性能的。

原文划重点

Render blocking websites can slow down your website and increase Core Web Vitals metrics like the Largest Contentful Paint.
This article explains the performance impact of render blocking resources and what you can do to solve these issues.

渲染阻塞会让网站变慢，增加 Core Web Vitals 的指标。本文介绍了渲染阻塞资源对性能的影响以及如何解决。

JavaScript and CSS files can be render blocking.

JS 和 CSS 文件能够阻塞渲染

Web fonts don't block rendering of the page, but they can block rendering of the text itself. Waiting for web fonts can slow down your First Contentful Paint if no other content is rendered on the page.

字体不会阻塞渲染，但可能会影响文本渲染本身。在没有其它资源的情况下，可能会影响 FCP

Images are not render blocking. They can delay metrics like the Largest Contentful Paint, but the rest of the page will still render fine even if the browser is still downloading an image file.

图片不会阻塞渲染，但可能会影响 LCP

一图解读