我们一直在努力

wordpress网站加速教程:压缩并优化JS+CSS 减少Http请求

想让自己的网站速度更快一些吗?除了压缩你的网站图片、或者是禁用谷歌字体 标签的文章" target="_blank">谷歌字体之外,其实还可以减少你的网站http请求,以及压缩你的JS和CSS文件哦。什么,不知道怎么做?没关系,本文告诉你如何操作。

wordpress-640x346.png" alt="1649599274 Wordpress" width="640" height="346" title="wordpress网站加速教程:压缩并优化JS+CSS 减少HTTP请求 3" srcset="https://www.52pchome.com/wp-content/uploads/2019/08/1649599274-Wordpress-640x346.png 640w, https://www.52pchome.com/wp-content/uploads/2019/08/1649599274-Wordpress-820x443.png 820w, https://www.52pchome.com/wp-content/uploads/2019/08/1649599274-Wordpress-768x415.png 768w, https://www.52pchome.com/wp-content/uploads/2019/08/1649599274-Wordpress.png 1010w" sizes="(max-width: 640px) 100vw, 640px" />

网站速度对谷歌seo有什么影响?

用谷歌的原话:

….Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches….

….今天,我们宣布从2018年7月开始,页面速度将成为移动搜索的排名因素…

https://webmasters.Googleblog.com/2018/01/using-page-speed-in-mobile-search.html

总之一句话:速度很重要

先来看下优化之后的结果:

移动端 Speed Insight 数据变化

20220331_624522fc5e0ea
移动端速度优化前
20220331_624522fc6d691
移动端速度优化后

PC端 Speed Insight 数据变化

20220331_624522fc80add
PC端速度优化前
20220331_624522fc9734a
PC端速度优化后

可以看到当给这个网站做完HTTP请求优化以及CSS和JS的优化之后,用 Google Speed Insight 检测速度得分都升高了。虽然还没有达到绿色的范围,但是没关系,至少我们提升了些速度,优化了用户体验。

Google PageSpeed Insight是什么?PageSpeed Insights是谷歌的一个检测网站打开速度,加载速度的工具。它会分析我们网页的内容,然后生成各种优化建议,以用于加快网页的速度。

在优化之前,先检测一下自己的网站,然后看下是否出现类似下方的错误:

20220331_624522fcb4517

这就意味着,你真的需要优化下你的HTTP请求,以及CSS和JS文件了!

优化完成之后,可以和刚才的案例那样,提升不少分数值,网站会大大的提速!

用什么工具——Fast Velocity Minify

Fast Velocity Minify是一个WordPress插件,小白友好,不需要做过多的设置,一键式减少http请求,压缩CSS和JS文件。我们来看下官方的介绍:

This plugin reduces HTTP requests by merging CSS & Javascript files into groups of files, while attempting to use the least amount of files as possible. It minifies CSS and JS files with PHP Minify (no extra requirements).

这个插件通过将CSS和Javascript文件合并成一组文件来减少HTTP请求,同时尽量减少文件的数量。它使用PHP Minify缩小CSS和JS文件(没有额外的要求)。

https://wordpress.org/plugins/fast-velocity-minify/

如何安装 Fast Velocity Minify 插件?

WP后台 – 插件 – 安装插件 – 搜索 “Fast Velocity Minify” – 下载安装启用

Settings 设置部分概述:

启用 Fast Velocity Minify之后,点击 Settings(设置)。如果你的网站没有设置过特殊的加速插件的话,直接保存默认选项就可以。无需过多操作。下面是几个核心设置板块的概述,可以根据需求自行选择。

URL Options (URL设置):

20220331_624522fce3c4e

这里一般会选择 Auto Detect(自动),但是如果你担心网站中会出现https的链接,那么你可选择第三个——Force HTTPS urls(强制使用https链接)

Disable Google Fonts 阻止请求加载谷歌字体

20220331_624522fd0b5b0

这个非常重要,尤其是对外网访问有问题的用户来说至关重要。谷歌字体加载需要向谷歌发送调用请求。这个会增加页面完整加载的时间。同时谷歌字体并没有想象的那么优秀,预制的字体库足够使用。所以这里干脆就选择第三个 Remove Google Fonts Completely(彻底去除 Google Fonts)

Inline CSS 将CSS元素按照真实请求进行合理排序

20220331_624522fd41733

你可以这么理解,相当于是原来的CSS文件很多,同时并不是每个页面都需要所有CSS文件样式支持。这个功能就是将原来杂乱的调用重新进行的排序。让CSS执行更加的合理。

所以在这里只需要把后四个选项打勾,保存即可。

Javascript 性能优化

20220331_624522fd73801

这边会保持默认,如果你的网站不需要任何的JavaScript,那么你可以在第一个 Disable JavaScript Proccessing选项上打勾就行。

以上就是一些比较核心的设置部分,大家可以根据自己的网站进行详细的设置。当你做完http请求,以及CSS和JS速度优化之后,别忘了压缩一下图片。如果发现网站打开速度依然很慢的话,还可以把谷歌字体屏蔽,然后在设置下CDN加速 标签的文章" target="_blank">CDN加速。

SiteGround主机推荐 标签的文章" target="_blank">外贸主机推荐

SiteGround搞18周年庆,产品包括虚拟主机 标签的文章" target="_blank">云虚拟主机、wordpress主机WooCommerce主机 标签的文章" target="_blank">WooCommerce主机、云服务器 标签的文章" target="_blank">云服务器

计划 促销价格 原价格 购买
Startup $3.99/月 $14.99/月 直达
GrowBig $6.69/月 $24.99/月 直达
GoGeek $10.69/月 $39.99/月 直达
博客声明与版权说明
重要声明
内容性质说明
本博客专注于记录博主个人对服务器产品的测评体验与相关优惠资讯,不从事任何主机、服务器租赁业务,不参与任何交易,亦非中介机构。博客所载信息均来源于网络公开渠道或服务商主动提供,仅供个人记录与交流之用。
免责声明
本博客对所刊载内容不作任何明示或默示的保证(包括但不限于准确性、完整性、时效性),内容不构成任何购买、使用建议或引导。访问者请自行甄别信息,独立作出判断并承担相应风险。
合规使用要求
访问本博客请严格遵守中华人民共和国及所在地区有关互联网的各项法律法规。严禁利用本博客提及的任何内容从事违法违规活动,由此产生的一切法律责任与后果由行为人自行承担。
访问资格
未成年人及不具备独立承担法律责任能力的个人或群体请勿访问本博客。
协议生效
您一旦访问本博客,即视为您已充分阅读、理解并同意接受本声明的全部条款。
版权声明
本站原创内容采用 知识共享 署名 - 非商业性使用 - 相同方式共享 4.0 国际许可协议(CC BY-NC-SA 4.0) 进行授权。
转载、引用请注明原文出处与作者信息。
文章名称:《wordpress网站加速教程:压缩并优化JS+CSS 减少Http请求》
文章链接:https://www.52pchome.com/8750.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。