修复Google PageSpeed消除以上折叠内容中的渲染阻止JavaScript和CSS

解决渲染阻止Javascript和CSS

Google PageSpeed [1]测试“在折叠内容中消除渲染阻止JavaScript和CSS”提议您在HTML完全加载后提供网站的JS和CSS文件 - 因此，不要暂停HTML加载下载它们。

渲染阻止脚本定义：在解析完整的HTML DOM之前加载的脚本。例如，标头或内容中包含的脚本，而没有任何特定说明，浏览器可以将脚本加载延迟到HTML绘制之后。

在首屏内容中消除渲染阻止的JavaScript和CSS：展示如何修复它

1. 拥有外部系统为您优化网站
   
2. 使用CDN可以代表您执行所有可能的优化，包括以下三个必要的优化，以解决消除渲染阻塞资源的问题：
   
3. 推迟加载Javascript文件
   
4. HTML加载后加载CSS
   
5. 使用WordPress插件
   

要消除消除渲染阻塞的资源，有很多优化措施是必要的，并且可能需要您自己进行繁琐的工作–此外，您还必须不断寻找Chrome LightHouse和Google PageSpeed中包含的新测试以及其他页面速度测试。

由于该问题与DOM有关，因此不存在消除htaccess代码中的渲染阻止资源的解决方案，DOM意味着网站内容以及加载所包含资源的顺序，例如Javascript和CSS，但不仅如此。这些不能在Htaccess中触发，而只能在HTML DOM内容中触发。

如果您解决了台式机的这些问题，那么您将同时消除移动设备的渲染阻止资源，因为两者完全相同！

Did you know that you can even have all these steps executed automatically for you by using an external  站点速度加速器   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

推迟加载Javascript文件

为了推迟加载JS文件[2]，您可以将async或defer指令添加到脚本链接。异步不会保证它们以相同的顺序加载 - 因此，如果您有多个脚本应该一个接一个地运行，则延迟优先保证序列：

HTML加载后加载CSS

为了在完整的HTML传输完成后加载CSS，Google建议[3]将这段代码添加到HTML的末尾，例如页尾关闭标记之后和正文关闭标记之前：

为了优化您的网站，删除未使用的CSS代码也是一个好主意，如果您在Web设计中没有知识，则可以繁琐的操作。如果您自己尚未创建网站主题，则可以更愿意使用外部系统代表您的页面上的未使用的CSS代码，例如Ezoice Leap，例如他们的惊人网站的新（和完全免费）版本速度加速器。

通过Google网站速度测试！

这使我能够通过Google PageSpeed [1]测试在网站上消除以上折叠内容中的呈现屏蔽JavaScript和CSS（以及利用浏览器缓存[4]），从移动设备上的分数上升到51图1）到72（图2），并从桌面上的59（图3）增加到79（图4）。

如何消除WordPress中的渲染阻塞资源

要消除WordPress中的渲染阻止资源，必须安装一个插件，如JetPack。

然后，转到必须是管理员的选项，然后转到JetPack选项>写入>性能和速度>选中启用站点加速器，加快映像加载时间，加快静态文件加载时间，并启用延迟加载图片。

学习SEO基础知识：今天注册！

通过我们易于遵循的基础课程掌握SEO的基础知识，可以提高网站的知名度和流量。

开始学习SEO

这将消除WordPress中的渲染阻塞资源，并通过允许JetPack优化您的图像并从其全局服务器网络提供图像和静态文件（如CSS和JavaScript）来加快页面加载速度。

此外，请不要忘记通过使用延迟加载功能关闭屏幕上的加载图像。虽然它曾经困难并且需要外部库以关闭屏幕加载图像，但现在在HTML5中可以本地可能存在！

要在网站上实施延迟加载图像，只需将懒惰的值添加到网站图像的装载量，而最近的浏览器将理解只有在显示它们时应请求和加载这些图像，这意味着用户滚动到图像占位符。

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

最重要的是，延迟加载也适用于IFRames，并且是消除来自网页的渲染封锁资源的重要实现。

一旦渲染阻止资源在主内容之后有加载指令，就意味着HTML DOM，您将在Google Lighthouse测试中获得很多积分，页面速度见解测试或Google Core Web Vitals。

有外部系统为您优化网站

您是否知道您实际上可以代表您解决所有Google PageSpeed问题，而无需注册网站即可进行除注册免费试用和更改DNS之外的大量工作？

使用Ezoic平台的Site Speed Accelerator技术，所有常见的Google PageSpeed问题都将通过其系统解决，该系统将成为您的网站和访问者之间的中介。他们将为您优化网页，然后再将其显示给访问者。

只需在Ezoic平台上免费注册一个试用版即可自己尝试变绿，这将使您的网站在几天之内达到页面速度优化的最高标准：渲染下一代Webp图像，通过删除未使用的CSS来优化CSS和JavaScript和JS，延迟加载图片，调整图片大小，缓存您的网站页面，优化字体，预连接到所有包含的网站等等。

不需要信用卡-您要做的就是免费注册并尝试一下。另外，如果您的网站通过展示广告获利，除了使您的网站变得更快之外，它们还可以通过机器学习和先进的人工智慧来优化广告，从而使您的收入比使用Google AdSense的收入高出几倍。

常见问题

如何在折叠内容中消除渲染障碍JavaScript和CSS？

为了消除对折叠内容的渲染键盘JavaScript和CSS，您应该确保在HTML满载后加载网站的JS和CSS文件。这意味着不暂停HTML加载过程下载这些文件。您可以使用异步或延期属性推迟JavaScript文件，对于CSS，您可以使用特定的代码在HTML之后加载它。像 Ezoic这样的外部优化系统也可以自动处理。

Web开发人员如何解决Google PagesPeed的建议，以消除渲染障碍JavaScript和CSS？

Web开发人员可以通过使用异步加载JavaScript来缩小JavaScript和CSS文件来优化其站点，将关键CSS直接插入HTML，并推迟非临界CSS和JavaScript文件的加载。实施这些策略可以显着改善加载时间和页面分数。

完美的Chrome Lighthouse得分：会发生什么？