大家在做谷歌或者百度优化的时候,经常看到在 Pingdom、 GTmetrix 或 Google 官方工具中的”外部 js/CSS 组合”警告了吧?其实你并不孤单,我也是,因为这是许多 WordPress 网站站长常犯的错误。比如当有10个或更多的 CSS 文件从 CDN 或子域(外域)加载时,此警告通常就会显示。解决这个问题的一种方法就是连接你的 JS/CSS 文件,或者将它们合并起来,减少数量,达到只在一个请求中加载它们的目的。

 

如果你仍然在 HTTP 上运行,并且还没有迁移到 HTTP/2,那么你可以按照下面的教程学习如何合并外部的 CSS 文件。现在超过77% 的浏览器在运行 HTTPS 时支持 http/2了,包括还有许多 CDN 和 web 托管提供商。需要注意的是,Pingdom 暂时好像还不支持 http/2,因为它使用的是 Chrome 的旧版本。

开始合并 JS/CSS

由于我之前想尝试不用插件来达到目的,但是折腾了很久,经常出错,所以,后来放弃了,就自己筛选插件来解决,节约时间成本。外部  JS/CSS 警告通常在使用 CDN 时出现,因为你将 这些文件托管在一个外域上,比如 CDN.domain. com,你所能做的只是简单地将你的 这些文件连接到你的 web 服务器上。一旦将它们合并在一起,你将大概率不再看到此警告,因为它将在单个请求中加载它们。我试了一些插件,发现还是这个好,建议大家使用免费的 WordPress 插件 Autoptimize,由歪果仁大神 Frank Goossens 开发。

 

这个插件是属于轻量级的,大小只有176kb。我当时下载的时候,目前有超过600,000个活跃的安装,5星评分为4.7分。这个插件可以帮助你连接你的脚本文件,缩小文件大小,以及将样式表移动到页脚位置。

 

你可以从 WordPress 官网插件库去下载,或者去在你的 WordPress 控制面板中”添加新插件”下搜索它。一旦安装后,你可以进入设置,并启用”优化 JS/CSS 代码”选项。选择连接(合并)你的 JS/CSS 文件。如果你使用了 CDN,注意请确保输入你的 CDN 网址。

 

如图,都勾选下:

 

【HTML 优化篇 】如何在 WordPress 中合并外部 JS/CSS 文件?

 

启用以上设置后,最终你将看到这些文件在一个”自动优化 xxxxx.css”文件中,因说明插件生效了:

【HTML 优化篇 】如何在 WordPress 中合并外部 JS/CSS 文件?

版权声明:

 本网站的所有文字、图片资料,均由作者亲自整理创作,任何媒体、网站或个人未经本网协议授权不得复制、转载、转贴或以其他方式复制发布/发表,请尊重我的劳动成果,侵权必究,谢谢。

 

 

    版权声明:

     本网站的所有文字、图片资料,未标注转字的均由作者亲自整理创作,如需复制、转载、转贴等方式发布/发表,请以锚链接的方式显示原文出处,请尊重我的劳动成果,侵权必究。本网站转载的文章如有侵权的地方请及时联系本人,核对后会第一时间删除!

阿沐
1625139774@qq.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注