WordPress网站如何使用WP Rocket删除未使用的CSS

WordPress网站如何使用WP Rocket删除未使用的CSS

WordPress网站如何使用WP Rocket删除未使用的CSS

  在网站建设优化中,不管是WordPress建站、还是Python建站,我们会经常做的就是检测网站的加载速度,比如使用Google PageSpeed Insights时,通常会遇到这样的情况,提示“Remove unused CSS”,让你去优化删除未使用的CSS代码,对于不懂代码的人来说,看着只有几KB的文件,想要去优化改善却无从下手。

WordPress网站如何使用WP Rocket删除未使用的CSS

  虽然也有许多的教程和插件,但是太多的插件也可能会导致网站加载更慢。幸运的是,WP Rocket 3.9的版本已经有这个功能了,本文晓得博客将为你介绍怎么使用WP Rocket删除WordPress网站未使用的CSS文件。

什么是WordPress未使用的CSS

  WordPress CMS内容管理系统中未使用的 CSS 是加载到您网站上但实际上并不需要用于显示页面的CSS代码。

  未使用的代码会使访问者的浏览器需要更长的时间来加载呈现页面,从而使得用户体验不好,较慢的网站加载时间甚至会影响您的搜索排名,从而导致您网站的流量减少。

  在Google PageSpeed Insights中,详细说明了哪些 CSS 文件正在影响您的加载时间。

  .screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal!important;
  }

  上面的CSS代码“.screen-reader-text”,假如不会在网站的主题中使用,并且网站上现有的页面也不会使用该段代码。

  在这种情况下,上面的代码就是未使用的CSS,它的存在只是减慢了网站速度,所以需要彻底的将其从样式表文件中删除。

怎么删除WordPress未使用的CSS

  有几种不同的方法可以减少WordPress 网站上未使用的 CSS。比如使用插件、借助第三方网站压缩。

  但是,要完全删除 WordPress 中所有未使用的 CSS 将是一项艰巨的任务,本文我们晓得博客仅向您展示使用WP Rocket插件删除未使用 CSS 的方法。

  使用WP Rocket插件方法比较简单,而且也不许额外的安装插件,可以很好地改善WordPress 网站上 CSS 文件的交付,包括删除大部分未使用的 CSS。

  首先,需要安装并激活WP Rocket插件。有关更多详细信息,请参阅有关如何安装WP Rocket插件教程

  激活后,您需要点击访问“设置”->”WP Rocket”->“文件优化”选项卡。

WP Rocket插件设置优化CSS

  接下来,向下移动鼠标,可看到Remove Unused CSS(Beta)选项,需要选中选项旁边的框。然后,按照提示激活此选项。

WP Rocket插件启用删除未使用CSS功能

  当您激活删除未使用的CSS复选框时,将在后台为您的网站生成已使用的CSS,并将其添加到每个已处理页面的 HTML 中。

  在处理 CSS 时,您将看到一个进度条,需要注意的是:这个过程不是立竿见影的,可能需要一些时间,这将取决于您网站的复杂性。

wp rocket插件删除未使用css后效果

  完成后,您可以继续使用 Google Pagespeed Insights 再次测试您的网站性能。

总结

  以上是WordPress网站如何使用WP Rocket删除未使用的CSS的全部内容,希望本文能帮助您了解如何删除未使用的CSS,让你的网站在搜索引擎中表现更出色。 

  推荐:WP Rocket插件配置教程

5/5 - (3 votes)

Claude、Netflix、Midjourney、ChatGPT Plus、PS、Disney、Youtube、Office 365、多邻国Plus账号购买,ChatGPT API购买,优惠码XDBK,用户购买的时候输入优惠码可以打95折

Chatgpt-Plus注册购买共享账号
滚动至顶部