WordPress速度优化思路
网页加载就像开车上山,服务器是车引擎,PHP、MySQ之类是汽油,网络是道路,车重是页面大小,资源加载顺序是档位,服务器状态是车辆状态。要想速度快,得选速度快稳定的服务器,使用最新版本PHP,使用CDN,尽量减小页面代码,优化资源加载顺序。
WordPress速度优化方法
1.图片压缩插件
2.Wp Rocket、FlyingPress 或 LiteSpeed Cache 等缓存插件
3.Perfmatters 或 Asset CleanUp Pro 资产清理插件
1- 降低服务器负担
现在Elementor,Woocommerce,Wp Rocket缓存插件等对服务器的要求越来越高,小配置服务器很容易堵塞。如果稍微爬虫多,页面多更容易堵塞。最好的方法之一是适当升级服务器配置,能处理更多并发和访问量。
除了升级配置,优化网站降低服务器压力也很有效果,还省钱。下面是经过我们实践能有效降低服务器压力的方法。
使用Cloudflare/服务器Cron代替Wp_Cron
WP_Cron是WordPress内置的PHP函数,用于定时执行一些计划任务,比如检查Wordpress版本、主题和插件的更新,定时发布文章,执行插件的一些定时任务等。
Wp-cron的触发需要访客点击访问,不会自动执行。每个访客访问都会触发wp_Cron,要是访问的人多服务器负担就会加大,速度变慢。禁用Wp-cron,改用服务器的定时计划任务Cron代替,可以大大减轻服务器负担同时保障页面加载速度。
禁用wp_Cron:使用FTP进入网站根目录文件夹(网址xxx.com那个文件夹),找到并且编辑wp-config.php文件,增加下面一行即可。
下图是添加代码后的样子↓
服务器Cron和Cloudflare Cron Triggers 二选一启用。
启用服务器Cron:登录您的虚拟主机控制面板(cPanel 等)并找到 Cron Jobs 功能。将下面代码中的网址更改为你的网址后复制全部代码粘贴进去,设置为每隔5分钟启动一次,()。
一些主机可能有限制并迫使您使用更长的时间间隔(30 分钟及以上)。没关系,尽量用最低的。即使是你自己的服务器, 5或10分钟这个频率也足够了。
如果是使用宝塔面板,进入计划任务,按下图建立计划任务即可。脚本内容跟上面的一样。
启用Cloudflare Cron Triggers:Cloudflare CDN也可以添加Cron任务来代替wp_Cron,在Cloudflare仪表板中的Workers > Manage Workers > 选择您的 Worker > Triggers打开外部链接
降低Wp Rocket预加载和删除无用CSS频率
Wp Rocket之类优化插件的缓存预加载和生成关键CSS功能非常占用服务器资源,需要调整频率降低CPU压力。有一个客户的2H2G VPS服务器安装了3个新网站,没有访问量,设计简单,没被攻击,全天候卡死。我排查了很久才发现是WpWP Rocket v3.12版本改进了预加载功能提升速度,同时也导致CPU占用过高的问题。禁用预加载功能后服务器马上恢复正常。
如果不想禁用缓存预加载功能,可以调整预加载频率,添加下面代码到“外观” > “主题文件编辑器” > “functions.php 最下面即可”。
如果添加下面代码后问题改善不大,可以把URL数量继续降低,把另外2个数值提高试下。
添加代码后过一会服务器恢复正常,如果点击 清理缓存或者生成关键CSS会临时满负荷,过一会等预加载/生产关键CSS任务完成恢复正常。
如果你的服务器有几个网站,并且都安装了Wp Rocket,即使调整预加载频率也依然会卡。因为“删除未使用的CSS”功能也会导致CPU超负荷 (“异步加载CSS”不会) ,需要降低频率。
Wp Rocket有一个官方插件可以降低“删除未使用的CSS”频率,下载安装即可。默认每次运行处理100条URL,安装后调整为50。所需的Cron间隔默认为60 秒,安装后调整为120秒。
同时建议把Wp_Cron禁用,改用服务器Cron,对降低CPU使用率很有帮助
优化网站配置、插件、和页面搭建
有一次在搭建一个客户网站About Us页面时,在Elementor Tab小部件内容框中插入了页面短代码,导致页面卡死打不开,Elementor也无法正常打开该页面。服务器运行堵塞、CPU直接拉满,重启也无济于事。把页面短代码删除后一切恢复正常。
数据库/PHP版本过高也会增加服务器负荷,出现卡死情况。PHP目前建议安装8.1版本性能更好,7.4开始落后,8.2及以上版本有些插件主题不兼容会出现很多错误。
低配置服务器安装了高版本数据库也会造成卡顿。1-2G内存建议安装数据库MySQL 5.6版本,极速安装。2-4G内存安装5.7版本,极速安装。8G或者以上安装8.0版本,编译极速安装都行。
宝塔也要配置好才能发挥服务器性能,Swap一定要设置,MySQL和PHP也要根据运行情况调整参数。宝塔论坛有很多教程,多去看看
推荐下面2篇文章
有些插件编写质量不高很卡,甚至有死循环。遇到网站卡顿先试下逐一关闭插件直到问题解决,找到问题插件逐一修改可能影响的设置看下是否设置问题,或者换个插件如果有备份插件和自动扫描插件(防火墙插件),备份、自动扫描频率不要设置那么高,不然会给服务器造成很大负担。
2- 选用速度快的轻量主题和插件
WordPress速度优化最好最快的方法就是从根源解决臃肿,一劳永逸。WordPress卡主要是因为安装了速度慢的主题、插件,加载一大堆无用代码,甚至有些代码书写不规范导致死循环。改用速度快的主题和插件,尽量少安装插件,卡顿问题就解决一大半。
主题:主题的代码基本都是核心代码,牵连甚广,互相依赖,很难甚至无法禁用和延迟加载。如果选了一款速度慢的主题基本没多少优化空间。主题一定要选速度快,同时兼顾一些必要功能,自定义程度高。
很多人选主题都是选功能多、复杂好看的(例如Avada,Woodmart),一测速度傻眼了。想要什么功能和设计通过安装插件去实现,不要使用主题去实现!插件的代码一般是独立的,禁用或者延迟加载相对容易很多。
如果你网站的主题速度慢,建议更换主题。我们推荐Astra pro高级主题,key激活,可后台在线更新。轻量化速度非常快,深度集合Woocommerce新增很多功能,点点鼠标轻松完成设置。
插件:插件也是非常影响网站速度的一个因素,很多插件编写质量不好,在前端加载了一大堆JS代码。并且这些代码无法被禁用、延迟加载。尽量选轻量化的插件,只在前端加载少量代码。
我们有优化网站速度服务,优化客户网站速度时发现他们很喜欢安装一大堆插件。在前端加载一大堆JS、CSS,这是导致网站速度不快的根本原因。
尽量不使用或者少使用第三方脚本,这些插件非常影响加载速度,例如:
流量跟踪/转化插件——Google Analytics、Hotjar 等。
社交媒体插件——Facebook Pixel、“喜欢”按钮等。
第三方广告插件——Google AdSense、Media.net 等。
一些 A/B 测试工具——Google Optimize、VWO 等。
在线客服插件——Tawk.To、Tidio、 Live Chat等。
建议用尽量少的插件去实现尽量多的功能。例如使用Elementor Pro的话就可以用它制作幻灯片、文章目录、弹窗广告、表单等,没必要再去安装相同功能的插件。除非你的页面不是使用Elementor搭建。
例如Rank Math Pro Seo插件已经具备重定向,404监控,Schema结构,关键词排名跟踪,安装谷歌分析代码等功能,使用它的话一个插件功能顶几个插件。
速度快的插件推荐:
SEO插件推荐 Rank Math Pro,安装包体积不到Yoast的一半,前端加载代码少,轻量化同时功能又全又牛逼;
翻译插件推荐TranslatePress,也是轻量化,速度比其它翻译插件快,前台加载代码少;
文章目录插件推荐Fixed TOC,轻量化,响应式设计;
表单插件推荐Fluent Forms Pro,号称速度最快表单(form)插件;
防火墙推荐Wordfence,这是平民能负担得起+效果最好+速度最快的安全插件;
自动备份插件/搬迁网站插件推荐UpdraftPlus,易用功能强大速度快;
产品过滤插件推荐Pofily,速度快,功能强大,和CURCY货币切换插件兼容;
货币切换插件推荐CURCY,速度快,功能强大,容易使用和Pofily兼容;
心愿单插件推荐TI WooCommerce Wishlist,功能强大,容易设置,美观;
Cookies提示栏插件推荐免费的Cookie Bar,轻量化前端加载不到5kb代码,非常快;
社交分享插件推荐Novashare,专为速度而生,不影响页面加载速度,同时功能强大;
3- 不要安装过多大型插件
治理污染最有效方法是从源头消除污染,只要不乱安装乱七八糟的插件,网站再差也不会差到哪里去,随便安装个缓存插件以及图片压缩插件速度都能起来。特别提醒,尽量不要使用监控/跟踪转化、Elementor第三方扩展(Addon)、Woocommerce配套插件。
我优化一个电商网站时,其它页面都很快谷歌测试手机和电脑端去到95以上。可是产品详情页手机端非常慢,评分30左右,总加载时间4秒多。查看源代码发现脸书广告,谷歌跟踪代码,paypal付款代码等第三方平台JS代码加起来有接近400KB,难以优化。
付款插件和表单插件也有几个,说到底就是建站不熟,什么都想要安装一大堆插件实现功能。其实大多数网站一开始很长一段时间没有流量,安装这些跟踪插件没有任何意义纯粹是拖慢网站速度,降低转化率。
链接谷歌站长工具和谷歌分析就够了,通过Rank Math SEO插件链接话还可以本地托管代码,不会影响速度。少安装前台功能性插件,选轻量速度快的插件是最好的网站速度优化方法,从源头解决问题。
4- 使用系统字体或者本地托管字体
字体对网站速度的影响非常大,常规字体有4种:系统字体,网络安全字体,本地托管字体,网络字体。按速度从高到底排序:系统字体 > 网络安全字体 > 本地托管字体 > 网络字体。如果要提升页面加载速度一定要使用系统字体或者网络安全字体,本站diiamo.cn就使用系统字体。
谷歌字体和本地托管字体的好处是字体很多(包括各种艺术字体和自定义字体)。一种字体拥有各种粗细(常用的是400和700)和效果(斜体等),因此包含几个字体文件。只加载用到的粗细和字符集文件能极大减小字体文件总体积。
也要避免重复加载字体,例如主题设置加载Montserrat字体,Elementor也加载Montserrat字体会导致加载2次。使用谷歌浏览器的开发者工具(按F12),进入“网络”版块查看总共加载哪些字体有没有重复。
不同类型字体区别
系统字体:就是操作系统默认字体,存放在本地电脑(手机)里面,直接就可以显示出来,无需去服务器下载,因此速度最快!强烈推荐使用系统字体,我们搭建的网站都是使用系统字体。
系统字体在不同的操作系统显示效果是不一样的,也只有一种字体。
默认字体 | 操作系统 |
---|---|
-apple-system (San Francisco) | iOS Safari, macOS Safari, macOS Firefox |
system-ui | macOS Chrome, Windows Chrome (new versions) |
BlinkMacSystemFont (San Francisco) | macOS Chrome |
Segoe UI | Windows Vista and newer |
Tahoma | Windows XP |
Roboto | Android, Chrome OS |
Oxygen / Oxygen-Sans | KDE |
Fira Sans | Firefox OS |
Droid Sans | Android (old versions) |
Ubuntu | Ubuntu |
Cantarell | GNOME |
Helvetica Neue | macOS versions < 10.11 |
Arial | All |
sans-serif | All |
网络安全字体:绝大多数操作系统都有预装,因为字体在不同操作系统/设备的显示效果一样所以被称为"安全字体"。它们存在于操作系统里面,因此加载时无需下载显示速度很快,推荐使用。
WordPress常用的网络安全字体有:Arial、Tahoma、Verdana、Times New Roman、Helvetica、Courier New、Georgia、Trebuchet MS、Times。
本地托管字体:存放在网站服务器里面的字体就叫本地托管字体,字体网址为网站网址。加载网页的时候需要去网站服务器下载字体,显示速度比系统字体和网络安全字体慢一些。
一般会把谷歌字体之类的网络字体下载存放到服务器变成本地托管字体使用。优点是跟网络字体一样拥有多种字体,也兼顾了加载速度。
网络字体(谷歌字体):指第三方字体,存放在第三方服务器里面,其中谷歌字体是佼佼者。下图红色框就是网络字体,比较具有艺术性,所以很多人使用。因为需要去第三方服务器下载字体,因此网络字体(谷歌字体)速度很慢,大大增加页面加载时间。
一般网络字体会加载几种粗细的字体,一个页面可能需要加载4-5个(甚至更多)字体文件,一种字体体积可能渠道200-300kb,对速度影响非常大。如果使用谷歌字体,必须要本地托管。
下图是路人甲的网站,测速显示页面总加载时间5.7秒非常慢,加载了13个网络字体,字体总加载时间3秒多。如果这个网站改用系统字体,速度马上可以提升3秒左右!图标字体:其实除了上面4种字体还有图标字体,就是下图的这种图标(icon),只不过做成了字体格式,最有名的是Font-Awsome。这里不详细讲,感兴趣自己了解
如何更换字体?
上面说到要想速度快得换成系统字体或者本地托管字体,下面是更换字体教程。注意:更换字体需要把主题以及Elementor之类页面构建器字体都更换。
更换主题字体:进入主题的字体设置。下图是Astra主题字体设置,第一个选项“继承”就是系统字体,不同主题的字体设置位置和界面不一样,自己百度下。
如何本地托管谷歌字体?
如果使用谷歌字体等网络字体,建议打开Astra Pro主题的“预加载本地字体”和“本地加载谷歌字体”功能,会自动把网络字体下载到服务器变成本地托管字体,大大提升字体加载速度。推荐你们购买Astra Pro主题的原因之一在这里,优化速度的方方面它都想到了。
使用Cloudflare Fonts
如果你使用Cloudflare CDN,可以使用它的Cloudflare Fonts功能本地托管谷歌字体
按下图启用Cloudflare Fonts,启用后会直接在 HTML 页面内联Google Fonts样式,以阻止从 Google 服务器提取这些样式。另外,它还会在 Cloudflare 边缘缓存字体来减少延迟。也就是在CDN层面托管谷歌字体。
5-使用主题搭建页眉等全站范围内容
页眉处于首屏内容最顶部位置,访问页面时优先加载、显示它。所以页眉的显示速度直接决定了页面的显示速度以及客户体验,非常重要。使用主题搭建页面是速度最快,最好的方法!
6-禁用不必要功能和代码
它可以禁用多达几十项多余功能/代码,进入插件下载页面查看具体禁用内容列表。有些禁用功能和Perfmatters等插件功能一样,只在其中一个插件启用相应功能就行。
1-禁用 WOOCOMMERCE 膨胀
2-禁用 WooCommerce Admin,这会使您的后端变重。关闭出现在管理面板不同位置的所有 WooCommerce促销活动。减少在网站前端和后端后台加载的 CSS 和 javascript 脚本的大小。
3-WOOCOMMERCE 管理员
4-WooCommerce Admin 的功能继续越来越多地融入 WooCommerce 的商家体验中。使用以下选项,您可以有效地禁用 WooCommerce 管理、分析、主屏幕和其他使您的管理面板变慢的功能:
5-禁用 WooCommerce 管理员
6-禁用营销中心
7-WOOCOMMERCE 促销活动
8-WooCommerce 不断尝试通过向您的管理面板添加唠叨来推广和宣传附加组件。现在您可以关闭或隐藏它们:
7-尽量减少内联CSS
内联CSS就是输出到HTML里面的CSS,而输出到单独CSS文件里面的是文件CSS。内联CSS的优点是加载速度很快,比文件CSS快。
如果把影响内容显示的关键CSS输出为内联CSS会加快页面显示速度,因此很有插件会输出内联CSS,Wp Rocket生成的关键CSS也以内联CSS方式输出。
内联CSS有2个弊端,一是会增加DOM体积,减慢内容的解析和显示速度;二是内联CSS无法被缓存,导致客户每访问一个页面都需要重新下载重复的内联CSS,如果输出为文件CSS被缓存后客户访问同类型页面就不需要再下载相应CSS,速度快些。
现在对CSS的主流处理方法是把CSS输出到文件里面,然后利用Perfmatters之类插件生成关键CSS优先加载,大大提升加载速度。因此很有必要减少内联CSS,把CSS输出到CSS文件中
8-优化图片加载
这个也是速度优化的重中之重,页面大小中有一半以上是图片。压缩图片和延迟图片加载能极大减小页面体积,从而提升加载速度。可以说凡是速度慢的网站,基本都会有图片都没优化到位问题。
大部分新手做出来的网站都有图片体积过大的问题,下图是一个我们速度优化客户的网站,图片体积太大了卡死。PNG格式应该改成JPG,再压缩下体积页面大小至少减少9M多,速度快不少。
压缩图片体积只需安装图片压缩插件并且设置好就行
图片的延迟加载(懒加载)也使用插件实现,下面教程提到的 Perfmatters 和 Wp Rocket 插件都有图片延迟加载功能,选择一个插件查看其设置教程图片延迟加载部分,按教程设置就行,我们推荐使用Perfmatters延迟加载图片。
9-使用CDN
Cloudflare是免费CDN里面佼佼者,效果最好。甚至比一些付费CDN效果还好,全球节点200多个。Cloudflare注册设置教程百度一下,十分方便。在下面有Wp Rocket设置教程链接,教程里面有链接Cloudflare的方法。
平时编辑文章和产品会直接刷新缓存,可是如果是使用elementor之类修改页面布局和内容建议先打开Cloudflare的开发者模式。打开后在接下来3个小时内会自动绕过缓存,修改的内容可以实时显示出来,3小时后会自动关闭开发者模式,恢复缓存。
10-托管视频
大部分新手做网站视频会直接上传到媒体库,前端直接调用播放↓,这样速度会非常慢!而且非常吃服务器性能,造成服务器卡顿进一步减慢加载速度。还有些人很喜欢在banner放自动播放的背景视频,显得有档次。
视频跟图片一样非常影响加载速度和服务器负担,建议把视频上传到Youtube.com等第三方平台托管,通过播放网址链接到网站显示播放就行,这样播放视频不会占用服务器带宽和资源,是最好的方法!
建立一个Youtube账号,专门上传视频,视频简介放上网站网址对SEO有很大帮助!建议大家不要再直接上传视频到媒体库直接使用。
11-清理数据库
很多插件被卸载后会在数据库残留一些表和数据,以便以后再安装那些插件时可以恢复相应设置和数据。定期清理被卸载插件残留在数据库的垃圾可以加快老网站速度,释放磁盘空间。
Wp Rocket或者Perfmatters之类插件的数据库清理功能无法清除被卸载插件残留的表,建议安装Wp Optimize 或 Advanced Database Cleaner Pro 清理。
安装Wp Optimize插件后点击进入“数据库”清理界面。
如果有安装UpdraftPlus备份插件,数字1那里要勾选。然后全选所有优化项,点“运行所有选定的优化”开始优化。优化需要一段时间,建议按下面步骤同时进行另外一个优化。
12-优化搜索功能
13-调整防火墙
14-删除未使用CSS、JS
15-安装缓存插件
16-生成关键CSS、延迟加载JS
更多高级进阶优化教程(付费)
检查优化效果
到此wordpress速度优化教程结束,优化后马上使用谷歌测速工具检测网站速度。如果优化到位电脑端分数应该95~100分,总加载时间1秒内。手机端分数85~95分,总加载时间2秒内。
如果是国内网站,推荐使用站长工具速度。
如果分数和总加载时间不理想,查看测速工具优化建议看下哪些内容没优化到位,针对性优化就行。有啥疑问或者遇到困难下方评论留言。
本文内容来源于公开网络,出于传递信息之目的整理发布。原文版权归原作者所有,若涉及侵权请先提供版权后联系我们删除