个人中心

终极WordPress速度优化教程, 秒开页面! 优化思路+方法+工具

WordPress速度优化教程
文章目录
文章目录

WordPress速度优化是大部分建站者的困扰,它很难,同时网上又很难找到系统全面的教程和思路。迪亚莫在这里分享优化速度的思路和一些方法、工具给大家,让小白也能靠自己优化网站速度。

文章中有少数内容是付费内容,是我们辛苦经验所得。购买后可以享受人工服务,如遇问题可联系微信客服一对一分析指导,还能帮你检测网站告诉你应该怎么优化。购买本文付费内容后再购买我们的速度优化服务可以优惠50元。

 

为什么要进行速度优化?

Pinterest 将感知等待时间减少40%,搜索引擎流量和注册量直接增加15% 。COOK 将页面平均加载时间减少 850 毫秒,从而转化次数提高 7%,跳出率降低7%,每个访客的页面量访问量增加10% 。

谷歌说速度是制胜的关键(详情:https://web.dev/why-speed-matters),并把网站速度作为排名评分因素之一。缓慢的网站也会提高跳出率降低客户体验,从而影响以及询盘/ 订单转化率。

如果给网站投放谷歌之类广告,可能客户点击页面扣费后还没显示完全部页面内容就跳出了,浪费金钱。

根据谷歌以及一些机构的研究表明:

  1. 页面加载速度超过2秒,访客开始失去兴趣;
  2. 47% 的访客希望在2秒或更短时间内加载完网页;
  3. 40% 的访客会放弃加载时间超过3秒的网站;
  4. 79% 对网站表现不满意的访客不太愿意再次访问;
  5. Akamai 研究发现网站延迟增加1秒,转化率降低 7%左右。

 

WordPress为什么卡?

这是个伪命题,其实WordPress不卡。全世界40%左右的网站(包括美国白宫政府网站)都是WordPress做的,从这安装量就知道它的魅力。是大部分人不会用,导致它臃肿开始变慢。

很多插件/主题代码编写质量不高,甚至只关注美观和功能没有兼顾到性能和速度。每种功能都有很多插件可以实现,而且不同插件之间需要根据彼此的情况去设置优化。小白哪懂哪个插件快,怎么设置。自己折腾搭建出来的网站自然很卡。

这篇文章根据我们众多外贸站点优化经验汇总而成,能帮你把网站速度优化到1秒左右,简单的页面速度甚至能优化到0.7秒。如果按本教程操作后速度不太乐观,请使用谷歌测速pagespeed insightscs根据分析下是哪些方面没做到位,再翻开教程仔细一步步优化下。速度还是上不去?请在下方评论留言,我们会逐一回复。

测速结果

Pasted 86

 

什么是好的网站加载时间?

谷歌说3秒是个合格线,如果页面加载时间高于3秒客户开始离开。而跨境电商网站应该尽量做到2秒内加载完页面。我们觉得电脑端加载时间应该在1秒左右,手机端2秒左右才有利于提高转化率。

迪亚莫使用Astra Pro+Elementor Pro搭建网站,经过优化后网页电脑端加载时间做到1秒内加载完,手机端2秒内加载完。谷歌测速都是95分以上。

测速结果

网站加载时间并不是唯一标准,“感知时间”才是最重要的指标。在谷歌测试工具中 “Largest Contentful Paint (LCP)” 是衡量感知时间一个重要、以用户为中心的指标。LCP 是指页面首屏内容(即访客第一眼看到的内容)完整显示出来所需的时间,快速 LCP 有助于让用户确信页面是有用的,更愿意浏览。

谷歌建议 LCP 时间应低于 2.5 秒,并将在 2021 年开始使用此标准作为 SEO 排名因素。迪亚莫搭建的网站LCP可以优化到0.5秒左右,遥遥领先竞争对手。

Largest Contentful Paint

 

如何检测网站速度

推荐使用2个工具,一个是GTmetrix,另外一个是谷歌官方测速工具Pagespeed。2个工具使用方法都很简单,输入网址后点击旁边的按钮开始测速。

GTmetrix免费账号只能测试电脑端速度,每日限额测试次数(可注册多账号切换使用)。优点是数据比较详细,有列出页面加载的每一个资源的大小和加载时间。

Pasted 68

 

Pagespeed测速显示的数据没有GTmetrix详细,看不到页面加载的资源数量、大小和时间。优点是可以检测电脑端和手机端数据,并且给出提升速度的专业优化建议。

Pasted 69

 

2个工具的优缺点刚好互补,建议都使用。页面总加载时间以及优化建议以Pagespeed为准,GTmetrix作为辅助查看页面资源加载情况以便调整加载顺序和禁用等。

注意:不要太依赖检测工具的分数!分数高有时候速度不一定快,分数低速度也不一定慢,分数只能拿来作为参考。谷歌官方以及很多速度博主都说分数并不重要。

重点关注下图6个数据,它们决定了首屏内容显示速度以及显示质量,非常重要,尽量让这6个指标都变绿。

Pasted 70

 

WordPress速度优化思路

网页加载就像开车上山,服务器是车引擎,PHP、MySQ之类是汽油,网络是道路,车重是页面大小,资源加载顺序是档位,服务器状态是车辆状态。要想速度快,得选速度快稳定的服务器,使用最新版本PHP,使用CDN,尽量减小页面代码,优化资源加载顺序。

服务器:服务器是速度的天花板,非常重要。不好的服务器响应时间长、数据读取慢、容易运行堵塞降低页面加载。选一个可靠的服务器,做好配置,加快数据处理、传输。

我们推荐Vultr高频主机,它是性价比最高的NVMe磁盘主机,速度快性能好。点击查看主流外贸服务器优缺点对比

我把一个外贸B2B网站复制成2份测速,放Linode服务器(1H1G)的网站移动端分数徘徊在70分左右,放Vultr高频服务器(1H1G)的网站移动端分数直接干到90左右。

服务器软件也对速度有很大影响,如果使用Vultr服务器安装宝塔面板+OpenLiteSpeed软件,速度更快。不过OpenLiteSpeed兼容性和稳定性没Linux好,所以目前不建议使用它。

PHP、MySQ:PHP和MySQL(数据库)就好像是汽车的汽油,低版本相当于#92汽油,高版本相当于#98汽油。版本越高效率越高,速度越快。

PHP目前(2022年11月)建议使用 8.0版本,8.1版本有些插件主题不兼容,建议到2023年中旬再升级到8.1。数据库建议安装MariaDB,比MySQL快,1-2G内存主机建议安装MariaDB10.0版本。

注意:升级PHP可能会导致旧版本插件/主题不兼容,更换MySQL版本可能造成数据丢失。如果是新网站,备份好数据后随便折腾没关系。如果是旧网站有重要数据,先备份再更更换,自己不懂可以去淘宝找人弄。

CDN:网络好比道路,路好车才可能跑得快。常规网络可能类似于土路/水泥路,走不快可能还有坑坑洼洼。CDN相当于高速公路,速度非常快,顺畅。建议使用免费的Cloudflare CDN,点击进入Cloudflare设置教程

页面大小:页面大小类似于车重,越轻的车跑起来越快,又省油。尽量不要使用代码繁重的插件和主题,禁用一些不必要的代码,压缩图片和视频等。下面有教程。

加载顺序:爬坡得用1档有力,平路得用高档速度才快。加载网页资源也要分情况调整资源加载顺序(推迟JS加载,生成关键CSS,预加载等)速度才快。下面有教程。

服务器状态:服务器就跟人一样,压力一大就会死火。尽量减轻服务器的负担,让它稳定顺畅运行,保障页面加载速度。

减轻服务器压力有很多种方法,按照下面教程操作后基本能减少服务器很多不必要的工作,大大减轻负担。同时还可以采用下面方法进一步减轻服务器负担:

  1. 拦截垃圾评论,具体查看《完胜Captcha! 最优WordPress垃圾评论拦截方法 》
  2. 拦截恶意机器人,建议使用Wordfence防火墙插件+Cloudflare (Bot fight mode);
  3. 不要使用服务器赠送的免费企业邮箱,会占用服务器资源,邮件到达率也低;
  4. 禁用缓存插件的预缓存功能(只缓存站点地图)或者降低预缓存频率。

 

WordPress速度优化方法

上面提到的服务器、PHP/MySQL版本先处理好。如果服务器不行那就换服务器,CDN还没用的话就去注册使用Cloudflare,这里不赘述。

速度优化的思路和方法基本都是大同小异,都是通过多插件配合实现。区别是使用不同插件能做到的效果和程度有差异,导致结果也会不一样。

下面优化方法使用的主题/插件并不是唯一,只是我们实践觉得它们效果最好,比较适合大众用户所以推荐使用。如果你们有同样功能的插件觉得用得也不错,可以继续使用不用更换。

只要掌握了速度优化的思路和方法,用啥插件不重要。厨师用啥工具都能烹饪出可口饭菜,如果工具好那就更好了。

此速度优化教程使用的主题和插件列表

  1. Astra Pro主题;
  2. Optimole图片压缩插件或者其它;
  3. Wp RocketLiteSpeed Cache缓存插件;
  4. Perfmatters资产清理插件;

 

1-使用Cloudflare/服务器corn代替wp_corn

WP-Cron是WordPress内置的PHP函数,用于定时执行一些计划任务,比如检查Wordpress版本、主题和插件的更新,定时发布文章,执行插件的一些定时任务等。

Wp-cron的触发需要访客点击访问,不会自动执行。每个访客访问都会触发wp_corn,要是访问的人多服务器负担就会加大,速度变慢。禁用Wp-cron,改用服务器的定时计划任务Corn代替,可以大大减轻服务器负担同时保障页面加载速度。

禁用wp_corn:使用FTP进入网站根目录文件夹(网址xxx.com那个文件夹),找到并且编辑wp-config.php文件Pasted 65,增加下面一行即可。

Add define( 'DISABLE_WP_CRON', true);

下图是添加代码后的样子↓

Pasted 64

 

服务器Corn和Cloudflare Cron Triggers 二选一启用。

启用服务器Corn:登录您的虚拟主机控制面板(cPanel 等)并找到 Cron Jobs 功能。将下面代码中的网址更改为你的网址后复制全部代码粘贴进去,设置为每隔5分钟启动一次,()。

wget -q -O - https://xxx.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1

一些主机可能有限制并迫使您使用更长的时间间隔(30 分钟及以上)。没关系,尽量用最低的。即使是你自己的服务器, 5或10分钟这个频率也足够了。

如果是使用宝塔面板,进入计划任务,按下图建立计划任务即可。脚本内容跟上面的一样。

Pasted 66

 

启用Cloudflare Cron Triggers:Cloudflare CDN也可以添加Cron任务来代替wp_corn,在Cloudflare仪表板中的Workers > Manage Workers > 选择您的 Worker > Triggers打开外部链接,点击查看具体方法

 

2-选用速度快的轻量主题和插件

WordPress速度优化最好的方法就是从根源解决卡顿,一劳永逸。WordPress卡主要是因为安装了速度慢的主题、插件,加载了一大堆无用代码。改用速度快的主题和插件问题就解决了一半。

主题:主题的代码基本都是核心代码,牵连甚广,互相依赖,很难甚至无法禁用和延迟加载。如果选了一款速度慢的主题基本没多少优化空间。主题一定要选速度快的同时兼顾一些必要功能,自定义程度高的 。

很多人选主题都是选功能多、复杂好看的(例如Avada,Woodmart),一测速度傻眼了。想要什么功能和设计通过安装插件去实现,不要使用主题去实现!插件的代码一般是独立的,禁用或者延迟加载相对容易很多。

如果你网站的主题速度慢,建议更换主题。我们推荐Astra pro高级主题,key激活,可后台在线更新。轻量化速度非常快,同时深度优化Woocommerce具备一些实用功能。

插件:插件也是非常影响网站速度的一个因素,很多插件编写质量不好,在前端加载了一大堆JS代码。有些代码禁用/延迟加载的话相应功能又会失效。尽量选轻量化的插件,只在前端加载少量代码。

用尽量少的插件实现尽量多的功能。例如使用Elementor Pro的话就可以用它制作幻灯片、文章目录、弹窗广告、表单等,没必要再去安装相同功能的插件。

例如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-使用系统字体或者本地托管字体

字体对网站速度的影响非常大,常规字体有4种:系统字体,网络安全字体,本地托管字体,网络字体。按速度从高到底排序:系统字体 = 网络安全字体 > 本地托管字体 > 网络字体。

如果要提升页面加载速度一定要使用系统字体或者网络安全字体,本站使用系统字体。谷歌字体和本地托管字体的好处是字体很多(包括各种艺术字体和自定义字体)。

不同类型字体区别

系统字体:就是操作系统默认字体,存放在本地电脑(手机)里面,直接就可以显示出来,无需去服务器下载,因此速度最快!强烈推荐使用系统字体,我们搭建的网站都是使用系统字体。

系统字体在不同的操作系统显示效果是不一样的,也只有一种字体。

默认字体 操作系统
-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。

本地托管字体:存放在网站服务器里面的字体就叫本地托管字体,字体网址为网站网址。加载网页的时候需要去网站服务器下载字体,显示速度比系统字体和网络安全字体慢一些。

一般会把谷歌字体之类的网络字体下载存放到服务器变成托管字体使用。优点是跟网络字体一样拥有多种字体。

网络字体:指的是谷歌字体之类的网络字体,字体存放在谷歌自家服务器里面,字体网址fonts.gstatic.com/xxx。谷歌字体有几百种,还可以免费商用,下图红色框就是网络字体。

Pasted 50

加载页面时需要去谷歌服务器下载字体到本地显示,因为速度最慢。众所周知,谷歌的字体网络并不是很好,下载速度不是很快。最要命的是一般网络字体会加载几种粗细的字体,一个页面可能需要加载4-5个(甚至更多)字体文件,对速度影响非常大。

下图是路人甲的网站,测速显示页面总加载时间5.7秒非常慢,加载了13个网络字体,字体总加载时间3秒多。如果这个网站改用系统字体,速度马上可以提升3秒左右!

Pasted 43

图标字体:其实除了上面4种字体还有图标字体,就是下图的这种图标(icon),只不过做成了字体格式,最有名的是Font-Awsome。这里不详细讲,感兴趣自己了解。

Pasted 46

图标字体大多是本地托管,加载速度也很慢,而且一般一次性加载多个字体文件。尽量使用SVG或者图片代替图标字体,速度提升不少。

Elementor旧版本的图标使用的是本地托管的Font-Awsome图标字体,现在新版本Elementor Pro把Font-Awsome图标字体替换成SVG图标速度提升很多!

检查你的网站使用什么字体,尽量使用系统字体或者网络安全字体,并且只使用一种字体。尽量避免使用谷歌字体,尤其是国内网站。如果必须使用艺术字体,建议把字体上传到网站服务器里作为本地托管字体使用。

使用Gtmetrix.com测试你的网站速度,输入网址点击按钮开始测试。测试完出结果后点击“Waterfall”,再点击“Font”查看该页面使用的字体加载时间。

如果跟下图一样显示空白,红色框第一个数字是0,代表这个页面没有下载字体,使用的是系统字体或者网络安全字体。

Pasted 40

如果有使用本地托管字体或者网络字体的话,会跟下图一样显示字体数量、名字和加载时间。以下图为例,总共加载了13个字体,字体总体积大小375KB, 字体总加载时间3秒多。

Pasted 43

点击其中一个字体,展开查看详情。可以看到下图这个字体的网址是https://fonts.gstatic.com/,这是谷歌字体的统一网址,因此它是谷歌字体(网络字体)。

Pasted 44

 

如何更换字体?

更换字体需要把主题以及Elementor之类页面构建器字体都更换。

更换主题字体需要进入主题的字体设置。下图是Astra主题字体设置,第一个选项“继承”就是系统字体,不同主题的字体设置位置和界面不一样,自己百度下。

Pasted 51

下图“Other Systerm Fonts”下面红色框那几个是网络安全字体。

Pasted 88

显示在“Google”下面的都是谷歌字体。

Pasted 53

如果使用谷歌字体等网络字体,建议打开Astra Pro主题的“预加载本地字体”或者“本地加载谷歌字体”功能,会自动把网络字体下载到服务器变成本地托管字体,提升字体加载速度。推荐你们购买Astra Pro主题的原因之一在这里,优化速度的方方面它都想到了。

Pasted 54

有很多主题没有这2个功能的,这种情况可以使用Perfmatters插件实现。

进入Perfmatters常规设置>Preloading设置,在Preload那里填写本地字体的完整网址,类型选择"Font",勾选“CrossOrigin”,另外2个默认,保存即可预加载本地托管字体。

Pasted 55

Perfmatters常规设置>Fonts设置,“Local Google Fonts”打开即可本地托管谷歌字体。如果你有使用AWS,腾讯云CDN之类会改变资源网址的CDN,把CDN域名输入进去,注意格式:https://cdn.xxx.com 。

如果没有使用CDN或者使用Cloudflare CDN就不填,最好点“保存更改”,自动刷新页面后再点击“Clear Local Fonts”即可本地托管谷歌字体。

Pasted 56

 

如果使用Elementor之类构建器搭建网站,也需要去更改一下字体。先改下设置,方便以后使用。

进入Elementor设置,勾选下面2项,点“保存更改”。

Pasted 57

随便使用Elementor编辑一个页面,进入站点设置。

Pasted 58

进入全局字体设置,每个都替换一下字体。跟主题字体一样,第一个“默认”是系统字体,“系统”下面的是网络安全字体,“谷歌”下面的是谷歌字体。

Pasted 59

“排版”里面的字体也要更换下。

Pasted 60

做完这几个设置,以后搭建新页面默认会使用设置好的字体。

之前已经使用Elementor搭建好的版块如果你单独手动更改过字体的话,现在需要手动再改回来。

先点击版块,左边弹出设置框。

Pasted 61

进入“样式”找到“排版”,点击右边的铅笔图标选择想要的字体点Pasted 63即可。

Pasted 62

 

做完这些清理网站和CDN缓存,再使用Gtmetrix.com测试页面。输入网址点击按钮开始测试。测试完出结果后点击“Waterfall”,再点击“Font”查看页面加载的字体情况。每个页面建议都测试!

如果还是加载旧字体,那就证明页面某个位置还是调用了之前设置的字体。一个个检查下,找出罪魁祸首内容再替换字体。

 

4-使用主题搭建页眉等全站范围内容

页眉处于首屏内容最顶部位置,访问页面时优先加载、显示它。所以页眉的显示速度直接决定了页面的显示速度以及客户体验,非常重要。使用主题搭建页面是速度最快,最好的方法!

很多人使用Elementor搭建页眉,很方便又美观、功能强大。可是速度很慢。因为Elementor涉及到太多相互依赖的JS、CSS,不能卸载、不能延迟加载(不然会显示错误),所以速度无法优化上去。尤其是手机端,谷歌测速总是在90分以下。

页脚、侧边栏、弹窗等也一样,这几种内容尽量使用主题自带的构建器搭建,速度是最快的。我们搭建的网站甚至连文章/产品列表页和详情页都用主题搭建,然后在相应页面使用Perfmatters插件禁用所有Elementor代码,因此速度非常快。谷歌测速手机端分数能去到95-100。

如果你的页眉、页脚、隐私收集弹窗、侧边栏等全站范围显示的内容使用Elementor之类构建器搭建,建议使用主题自带的构建器(外观>自定义>页眉)重新制作,尽量去除Elementor代码。

如果你使用Hello Elementor之类主题,功能十分少,做不出来你想要的效果,建议改用Astra Pro主题,速度快又好看。点击查看我们使用Astra Pro制作的产品列表页/页眉/页脚产品详情页文章列表页文章详情页

可以的话文章/产品详情页、列表页也用Astra Pro制作,好看,速度又快。这些页面的一些功能可以通过单独安装插件实现,例如文章详情页的文章目录可以用Fixed TOC插件实现,产品详情页询盘表单使用Fluent Forms制作。

想在页面增加文字、按钮、表单、图片、视频、表格等内容可以使用ACF字段插件+Hook代码插入方法

 

5-尽量减少内联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文件中。

如果使用Astra Pro主题,有个功能可以把主题CSS输出到文件中,减少内联CSS。

Pasted 90

Elementor “高级设置”里面可以把CSS打印方法设置为“外部文件”,减少内联CSS。

Pasted 89

如果你跟我一样喜欢手写CSS修改某些内容外观,请务必仔细阅读以下内容。一定不要把自定义CSS添加到“外观” > “自定义CSS/额外CSS”里面,因为添加到这里的CSS会作为内联CSS输出到所有页面当中,这会减慢页面加载速度。

最好的方法是手动建立几个空白CSS文件,使用FTP等方法放在子主题文件夹中,再往function.php中添加代码在所有前端页面链接CSS文件。

把自定义CSS写在那价格空白CSS文件里面,然后使用Perfmatters插件在不需要用到那些CSS文件的页面禁用掉相应文件加载就行。这样手动添加的CSS将会以文件形式加载到页面,可以被生成关键CSS也可以被缓存,速度最快!

 

6-压缩图片

这个也是速度优化的重中之重,页面大小中有一半以上是图片。压缩图片和延迟加载能极大减小页面体积,从而提升加载速度。可以说凡是速度慢的网站,图片都没优化到位。

图片优化只要安装图片压缩插件并且设置好就行,具体查看我们另外一篇文章《终极WordPress图片优化教程(Webp, Avif),优化速度必看

至于图片的延迟加载(懒加载)在下面使用Perfmatters插件的时候会分享,按步骤操作就行。

注意:如果图片是通过css代码加载的,而不是在html里面通过img之类标签加载的话,Optimole之类插件是无法压缩图片的。需要先使用TinyJPG在线图片压缩工具压缩图片后再上传到网站媒体库使用。

 

7-安装Cloudflare CDN并且链接网站

CDN是全球分发网络,类似于快递海外仓。举个例子,如果我们直接从大陆寄快递到世界各地给客户速度很慢,我们可以把货物预先存放到各个海外仓库,等客户下单后就从离她最近的仓库发货,这样速度就很快,成本也低点。

使用CDN之后资源加载会更加快速,同时能减轻服务器负担,还有防火墙功能,建站必不可少。Cloudflare是免费CDN里面效果最好的,甚至比一些付费的CDN效果还好,全球节点又多。

Cloudflare注册设置教程百度一下,十分方便。在下面有Wp Rocket设置教程链接,教程里面有链接Cloudflare的方法。

平时编辑文章和产品会直接刷新缓存,可是如果是使用elementor之类修改页面布局和内容建议先打开Cloudflare的开发者模式。打开后在接下来3个小时内会自动绕过缓存,修改的内容可以实时显示出来,3小时后会自动关闭开发者模式,恢复缓存。

Pasted 67

可以登录Cloudflare后台进入缓存设置,打开开发者模式。如果使用Wp Rocket链接Cloudflare的话,在Wp Rocket > Cloudflare里面打开开发者模式,点保存即可。

 

8-安装WP Optimize清理数据库

很多插件被卸载后会在数据库残留一些表和数据,以便以后再安装那些插件时可以恢复相应设置和数据。清理被卸载插件残留在数据库的垃圾可以加快网站速度,释放磁盘空间。

Wp Rocket或者Perfmatters之类插件的数据库清理功能无法清除被卸载插件残留的表,所以需要安装Wp Optimize插件清理,它是最好的免费数据库清理插件。

下载插件安装后点击进入“数据库”清理界面。

Pasted 73

如果有安装UpdraftPlus备份插件,数字1那里要勾选。然后全选所有优化项,点“运行所有选定的优化”开始优化。优化需要一段时间,建议按下面步骤同时进行另外一个优化。

Pasted 74

点击“表”,同理如果有安装UpdraftPlus备份插件就打钩。

Pasted 76

页面往下拉,会看到被卸载插件残留的表,点击“删除”。例如下图是之前安装的Contact Form7残留的表。

注意:使用此表名称的已知插件全部都没安装情况下才可以删除该表,如果有现存插件使用着该表不能删除!

Pasted 77

如果没有可删除的表证明你的WordPress数据库挺干净。

如果清理表后网站出错,去UpdraftPlus备份界面找到优化前的备份数据,点“恢复”。

Pasted 78

完成上面2个清理完后记得卸载Wp Optimize插件,平时用Wp Rocket或者Perfmatters的数据库自动清理功能就行。

 

9-安装Wp Rocket/LiteSpeed缓存插件

缓存插件可以使网页静态化,并且存放在磁盘/内存中。大大减轻服务器压力和资源下载速度,必须安装。如果不是LiteSpeed服务器,建议安装Wp Rocket,效果最好。

如果是LiteSpeed服务器,建议安装LiteSpeed Cache缓存插件,效果比Wp Rocket好。设置教程和用法自己搜索下,这里不详述。

我们可以负担得起,同时效果好的缓存插件非Wp Rocket莫属,搭配Coudflare使用效果杠杠。点击下载GPL授权Wp Rocket插件,点击查看Wp Rocket设置教程

如果不怕折腾又懂点技术可以把Super Page Cache for Cloudflare插件和Wp Rocket一起使用。这个插件一般人用不好,设置也很麻烦。在建站群上看到有些人反馈这个插件不生效,其实不懂用。小白还是只用Wp Rocket吧,别瞎折腾了。

默认情况下Cloudflare最多只能通过页面规则设置不缓存3个页面,如果是电商网站之类需要设置不缓存很多个页面,3条规则可能不够用。

Super Page Cache for Cloudflare是专门为上面提到的Cloudflare制作的缓存插件,它使用Workers能越过Cloudflare 3条页面规则限制,设置不缓存多个页面,更好地控制缓存效果。而且这个插件还能使用Cloudflare的Edge Cache功能,提升缓存效率和速度。

Super Page Cache for Cloudflare插件要求禁用掉其它缓存插件的缓存功能,所以这个插件会导致Wp Rocket的缓存功能失效,其它所有功能不影响(例如压缩CSSS、延迟加载JS、图片懒加载等)。

 

10-优化Elementor速度

有1/5的WordPress网站使用Elementor(简称Ele)搭建,Ele受欢迎程度可见一斑。强大的功能和灵活性也导致Ele代码臃肿,速度慢。一大堆速度博主抵制它,抛弃它。

Ele的主要优点是高效、美观、功能强大,这是古腾堡等速度快的页面构建器说无法比拟的。做网站的最终目的是为了赚钱,高效、美观、功能强大才是产生效益的因素。至于速度有100种方法去提升,没必要为了速度放弃Ele。Ele现在以及未来必定是建站首选工具。

实际上Elementor页面速度也可以做到非常快!如果你使用Astra主题,并且使用配套的Premium Starter Templates模板插件直接导入Elementor模板,压缩下图片安装缓存插件后再使用谷歌测速等测试下速度会发现速度很快!

说Elementor慢的人大多不懂得如何设置和优化,实际上Ele速度有非常大的优化空间,插件团队也很关注速度一直在减少代码量,提升加载效率。我们搭建所有网站统一使用Ele,经过优化后谷歌测速分数都可以做到100分,电脑端加载时间1秒内,手机端2秒内。

因为篇幅问题,我们另外写了一篇文章讲解Elementor速度优化方法,详情请移步《终极Elementor速度优化技巧, 秒开页面》

 

11-优化搜索功能

访客执行搜索时服务器会在整个网站搜索结果,这会极大增加服务器负担,减慢速度。网站页面/产品越多,访客越多,搜索所需要的时间以及对服务器的负担也越多。

对于电子商务网站,改进搜索功能显得尤其重要。电商网站不仅拥有数百或数千个页面,而且搜索是用户寻找产品的主要方式。流量大的电商网站对服务器的性能要求也越高。

因此非常有必要优化搜索功能以减少服务器上的负载,并为用户提供良好的体验。

 

12-安装Perfmatters资产清理插件

资产清理插件也是重中之重,非常有必要!很多插件编写质量根本不过关,即使一些功能没用到也会在前端页面加载一堆无用代码。甚至有些页面根本就用不到某些插件,它们依然在所有页面加载代码。

资产清理插件的作用就是手动禁止每个页面无用的代码,从而减小页面体积加快页面加载速度。最出名又好用的2个资产清理插件是PerfmattersAsset CleanUp Pro

Perfmatters的名气要大点,功能更全面,UI设计更美,设置教程更详细,更多速度优化博主推荐。Asset CleanUp Pro在禁用代码方面和压缩/合并CSS、JS方面更专业,功能更强大,并且可以手动控制每一个CSS的预加载,JS的延迟、异步加载。

我们一开始使用Asset CleanUp,后来发现Perfmatters的生成关键CSS,延迟加载JS,延迟加载图片这3个功能很符合我们的优化思路,所以改用它。插件跟对象一样,讲究合适。你觉得哪款插件的功能比较适合你就选哪个。

 

Perfmatters设置教程

设置教程比较繁杂,不一定每个人都会使用这个插件,所以我们把Perfmatters设置教程放在《资产清理插件Perfmatters下载, GPL授权, 含使用教程》

 

Perfmatters使用教程

这是重中之重,网站速度优化效果好坏就看这里怎么操作。因为每个网站不一样,所以没有固定的操作设置方法,需要先分析网站后再去优化。

我们主要讲解优化思路和优化步骤以及方法,让大家自己掌握技能,举一反三自主优化。购买教程够有啥不明白或者优化后网站效果不明显的联系客服或者留言评论,一对一指导。

 

使用Perfmatters禁用无用资源

先在Assets设置里面启用脚本管理器,点保存。

Pasted 17

启用后在编辑文章、页面、产品的时候后台底部也会出现“脚本管理器”文字,点击后可以进入正在编辑页面的脚本管理界面。Pasted 20

或者在前端页面网址后面加上/?perfmatters按键盘回车键也可以进入相应页面的资源管理界面。例如本站首页地址是https://diiamo.cn,添加脚本管理器后缀变成https://diiamo.cn/?perfmatters。访问后进入下图所示的脚本管理器界面。

Pasted 81

为了方便使用,先进入“设置”界面设置一下。

Pasted 82

按下图设置后点保存。然后点击左上角“脚本管理器”回到资源管理界面。

注意:第三个测试模式打开后只有管理员才能看到禁用资源后的页面效果,访客访问的还是没有禁用资源的页面。禁用完资源测试网站显示和功能正常后记得回来关闭“测试模式”,清理缓存,禁用资源才能生效。

perfmatters 2124

按照上面方法优化后去谷歌点击进入谷歌测速页面测试下。正常情况下电脑端分数应该在95-100分,页面加载时间在1秒内。手机端分数应该在90-100分,页面加载时间在1.5-2.5秒。

如果分数达不到上述标准,很有可能是步骤没做到位,再去仔细看一遍。也有可能是网站服务器、网站主题等不是很快影响了速度。

End

文章过时?有更好看法?有疑问?请在下方评论留言,我们会及时跟进。

推荐文章:
评论 :

发表评论

设为私密评论

邮箱不会被公开,插入网址需去掉https://前缀。

免注册快速登陆

输入用户名密码登录

没有账号? 忘记密码?
购买提示

如需购买请先点击右上角头像注册/登录,登录后如果显示未登录状态请

为了更好的用户体验,该网站使用 Cookies 隐私政策
该网站使用 Cookies 隐私政策