如何消除渲染阻塞资源从你的WordPress网站reybet雷竞技下载

你是否曾经创建过一个WordPress网站并喜欢它的一切?然后，立即开始讨厌它后，意识到它需要永远加载?

缓慢的加载速度不仅对你和你的访问者来说是个麻烦，而且在搜索引擎优化方面也会让你付出很大的代价。自2010年以来，谷歌算法已经出现在排名决策中考虑了加载速度，所以较慢的页面在结果页面上显示较低的位置。

您可能熟悉较差页面性能的共同罪魁祸首 - 过多的内容，未压缩的图像文件，托管不足，并且缺少少量的缓存。但是，播放中还有另一个经常被忽视的犯罪者：渲染封锁资源。reybet雷竞技下载

不要让我错了 - CSS和Javascript很棒。没有CSS，网站将是纯文本的墙壁。没有JavaScript，我们将无法为我们的网站添加动态，交互式，从事元素。但是，如果在错误的时间执行，CSS和JavaScript都可以在您的凹陷网站性能。

原因如下:当一个网络浏览器首次加载一个网页时，它在将其显示在屏幕上给访问者之前解析所有页面的HTML。当浏览器遇到一个指向CSS文件、JavaScript文件或内联脚本(即HTML文档本身中的JavaScript代码)的链接时，它会暂停HTML解析以获取和执行代码，这会减慢一切。

如果你优化页面性能在WordPress中，渲染阻塞资源可能是罪魁祸首。reybet雷竞技下载有时这段代码在第一次加载时运行很重要，但大多数时候它可以被删除或推到队列的最后。

在这篇文章中，我们将向您展示如何从您的WordPress网站提高你的表现。

1.识别呈现阻塞资源。reybet雷竞技下载

在进行任何更改之前，您首先需要定位渲染阻塞资源。reybet雷竞技下载最好的方法是使用免费的在线速度测试谷歌的PageSpeed Insights工具。粘贴你的网站的URL，然后点击分析。

当扫描完成后，谷歌会给你的网站分配一个总速度分数，从0(最慢)到100(最快)。在50到80范围内的分数是平均的，所以你会希望落在这个范围的上半部分或以上。

要识别减慢页面速度的渲染阻塞文件，请向下滚动到机会，然后打开消除渲染阻止的资源reybet雷竞技下载手风琴。

图片来源

您将看到文件列表放慢页面的“第一个绘制” - 这些文件会影响初始页面加载时浏览器窗口中显示的所有内容的加载时间。这也被称为“折叠高于折叠”内容。

注意所有以.css和.js扩展名结尾的文件，因为这些是你需要关注的。

2.手动或使用插件消除渲染阻塞资源。reybet雷竞技下载

现在你已经发现了这个问题，有两种方法可以在WordPress中修复它:手动修复，或者使用插件。我们将首先介绍插件解决方案。

几个WordPress插件可以减少WordPress网站上渲染阻塞资源的效果。reybet雷竞技下载我将覆盖两个流行的解决方案，自动优化和W3总缓存。

如何消除渲染阻塞资源与自动优化插件reybet雷竞技下载

Autoptimize是一个免费插件，可以修改您的网站文件以提供更快的页面。自动优化通过聚合文件，缩小代码（即，通过删除冗余或不必要的字符来减少文件大小），延迟加载渲染拦截资源。reybet雷竞技下载

因为你正在修改你的站点的后端，记住使用这个插件或任何类似的插件时要小心。使用Autoptimize消除渲染阻塞资源:reybet雷竞技下载

1.安装和激活Autoptimize插件。

2.从你的WordPress仪表盘，选择，设置> Autoptimize。

3.下JavaScript的选项，选中旁边的复选框优化JavaScript代码?。

4.如果旁边的盒子总js文件吗?检查，取消选中它。

5.下CSS选项，选中旁边的复选框优化CSS代码?。

6.如果旁边的盒子总css文件吗?检查，取消选中它。

7.在页面底部，单击保存更改和空的缓存。

8.使用Pagespeed Insights扫描您的网站并检查改进。

9.如果PageSpeed Insights仍然报告渲染阻塞JavaScript文件，返回设置> Autoptimize并检查旁边的框总js文件吗?和总css文件吗?。然后,单击保存更改和空缓存再次扫描。

如何使用W3总缓存插件消除渲染块资源reybet雷竞技下载

w3total Cache是一个广泛使用的缓存插件，帮助解决滞后的代码。使用W3 Total Cache消除渲染阻塞JavaScript:

1.安装并激活W3 Total Cache插件。

2.一个新的性能选项将被添加到你的WordPress仪表板菜单。选择>一般设置。

3.在里面使变小部分，勾选旁边的复选框使变小,然后设置贬低模式来手册。

4.点击保存所有的设置在底部使变小部分。

5.在仪表板菜单中，选择性能>贬低。

6.在里面JS旁边的部分JS贬低设置，确保启用检查框。然后,在业务领域，打开第一个嵌入的类型下拉选择使用“推迟”非阻塞。

7.下JS文件管理，从中选择您的活动主题主题下拉。

8.参考你之前扫描的PageSpeed insight结果。每一项消除渲染阻止的资源reybet雷竞技下载结束.js，点击添加一个脚本。然后，从PageSpeed Insights复制JavaScript资源的完整URL，并将其粘贴到文件的URI字段。

9.一旦你粘贴了PageSpeed Insights报告的所有渲染阻塞JavaScript资源，点击reybet雷竞技下载保存设置和清除缓存在底部JS部分。

10。在里面CSS.旁边的部分CSS贬低设置，选中旁边的复选框CSS贬低设置确保贬低方法设定为结合和贬低。

11.下CSS文件管理，从中选择您的活动主题主题下拉。

12.每一项消除渲染阻止的资源reybet雷竞技下载在您的Pagespeed Insights扫描结果中结束.css中，单击添加样式表。然后，从PageSpeed Insights复制CSS资源的完整URL，并将其粘贴到文件的URI字段。

13.一旦你已经粘贴在所有渲染阻塞CSS资源报告的PageSpeed Insights，点击reybet雷竞技下载保存设置和清除缓存在底部CSS.部分。

14.使用Pagespeed Insights扫描您的网站并检查改进。

如何消除渲染阻塞JavaScript手动

插件可以为你处理后端工作。然后，插件本身只是添加到你的web服务器的更多文件。如果您想限制这些额外的文件，或者只想自己处理编程，您可以手动处理呈现阻塞的JavaScript。

为此，找到<脚本>您的网站文件中的标签为您的Pagespeed Insights扫描中标reybet雷竞技下载识的资源。他们会看起来像这样：

< script src = " resource.js " >

<脚本>标记告诉浏览器加载并执行由SRC.（源）属性。此过程的问题是此加载和执行延迟浏览器的网页解析，这会影响整体加载时间：

图片来源

要解决此问题，您可以添加异步（异步）或推迟属性到渲染资源的脚本标记。reybet雷竞技下载异步和推迟如下所示：

< script src = " resource.js“异步>
< script src = " resource.js”推迟>

虽然它们对加载时间的影响类似，但这些属性告诉浏览器做不同的事情。

的异步属性表示浏览器在解析页面的其余部分时加载JavaScript资源，并在加载后立即执行该脚本。执行脚本会暂停HTML解析:

图片来源

脚本的推迟属性在页面被解析时也被加载，但是这些脚本被延迟加载，直到第一次呈现之后，或者直到更重要的部分加载之后:

图片来源

的推迟和异步属性不应该在同一资源上一起使用，但是一个属性可能比另一个更适合于特定的资源。通常，如果非必要的脚本依赖于在它之前运行的脚本，请使用推迟。的推迟属性可确保脚本在前面必要的脚本之后运行。否则，使用异步。

3.重新运行站点扫描。

修改后，通过pagesspeed Insights对你的网站进行最后一次扫描，看看你的修改对你的分数有什么影响。

希望有一个明显的改进，但不要担心如果没有。许多因素可以抑制页面性能，并且您可能需要更多地挖掘以找到性能不佳的来源。

4.检查你的网站是否有漏洞。

除了重新扫描，检查您的页面，以确保您的网站工作。页面是否正确加载?所有的元素都出现了吗?如果出现故障或无法正确加载，请撤消更改并排除问题。

如果您已经达到了反复尝试各种速度提高最小的措施的程度，那么最好考虑一下其他加快页面速度的方法，而不是冒险破坏您的网站。

优化WordPress网站的性能

许多因素影响着你的用户在你的网站上的体验，但很少有比加载时间更重要的。当你对WordPress网站的内容或外观做出重大改变时，你应该始终考虑这些改变对性能的影响。

既然您已消除渲染阻止的资源，您应该通过分析已知的其他功能来继续优化您的网站的速度。reybet雷竞技下载尝试将定期速度测试纳入您的网站维护计划 - 在任何潜在的问题之前保持对您的成功至关重要。