为何以及如何轻松消除渲染阻塞资源
在网络发展的早期，第一批网页是用一种简化的 XML 版本（称为 HTML）构建的。白色配黑色文字。如果您看到带有蓝色下划线的短语，您就知道可以点击它。如果它是紫色的，您就知道您已经点击过它了。
生活很简单。
如今，HTML 通常是网页中最小的部分。当浏览器请求页面时，它会获取 HTML，然后必须将其分解并下载资源。
- CSS
- JavaScript
- 图片
- 字体
- …以及提供用户体验所需的其他外部文件
并非所有资源都是平等的。一些必须加载的资源实际上会减慢网页的显示速度。这些资源被称为“渲染阻塞资源”，本文将向您展示一些可用于减少网站上渲染阻塞资源数量的策略，以及如何手动或使用 SiteGround Optimizer 插件应用它们。
消除阻塞渲染的资源意味着什么？
“渲染”是“显示”的专业术语。在本文中，每当我们谈论渲染时，我们指的是将您的网站显示在屏幕上的过程。
考虑到这一点，渲染阻止就是任何暂停或减慢该过程的行为。
在网络发展的早期，所有内容都按照 HTML 中的编码 学生数据库 顺序加载。如果您的 HEAD 中有 5 个 JavaScript 标签，而这些标签都必须在 HEAD 完成之前加载、编译和执行，那么这些标签可能会降低您网站的速度。这就是我们开始将 JavaScript 标签放在页脚中的原因，这样它们就不会阻止页面显示。
渲染阻塞资源的类型
加载到您的网站的每种资源都有可能成为阻止渲染的资源。
- 如果图像很大并且需要时间加载 如何使用退出意图弹出窗口来吸引潜在客户 则它可能会成为渲染阻塞资源
- 如果 JavaScript 必须在页面的 <head> 中执行，那么它可能是一个阻止渲染的资源
- 如果您的 CSS 很大并且您的页面直到全部加载完毕才能显示那么它可能是一个阻止渲染的资源。
- 如果您从另一个站点加载任何资源，并且该站点比您的站点慢，那么该资源就可能是一种阻塞渲染的资源。
- 如果您有很多插件，每个插件都有自己的 CSS 和 JavaScript 文件，那么这些都可能会阻止渲染资源。
简而言之，HTML 中任何需要加载的内容都可能成为阻止渲染的资源。
如何测试我的网站是否有阻止渲染的资源？
网络上有很多工具可以显示你的网站如何加载。我最喜欢的是这两个：
浏览器中的“检查元素”选项：
我偏爱能够以“瀑布”形式显示页面加载情况的工具。武汉手机号码列表 所有现代浏览器都会显示瀑布显示的基本版本。只需右键单击网页，单击“检查”，然后找到“网络”选项卡即可。
完成后，重新加载页面。你应该看到类似这样的内容：
上图右侧显示的是“网络”选项卡。最右侧的小条是“瀑布”显示。它们告诉我加载任何给定资源需要多长时间。页面下方的细蓝线告诉我页面实际开始渲染的时间。因此，此页面上的许多资源在页面加载之前就加载了，这可能不太好。这意味着在这个特定页面上，我可能还有一些改进空间。
当您只是在摆弄东西时，此视图非常有用，但它实际上只告诉您计算机上的加载速度有多快。这可能不是一个真正的指标。例如，我所有的开发工作都在本地进行。从同一台计算机上运行的服务器将内容加载到我的浏览器中的速度并不能告诉我太多信息。
这就是为什么当我认真测量事物时，我会使用像https://www.webpagetest.org/这样的在线工具。
网页测试：
如果您访问 WebPageTest 并输入您的 URL，您将获得 轻松消除 更准确的现实情况。此外，您可以调整设置以获得所需的精确测试。
大多数情况下，我建议您像我一样做：
- 首先测试桌面
- 选择离您的网站托管地较远的服务器
- 除非你特别需要其他浏览器，否则请选择 Chrome
