WordPress中的移动速度优化(2020年指南):如何改善网站的移动负载时间和PageSpeed等级

希望加快您的移动WordPress网站的速度?


本教程介绍了移动缓存,自适应图像和AMP(加速的移动页面). 您在桌面网站上进行的大多数优化都会转移到您的移动网站上. 这就是为什么进行诸如升级PHP版本和减少服务器响应时间之类的事情也有帮助的原因.

移动WordPress速度优化

如何测试WordPress网站的移动速度
我建议 GTmetrix的移动测试 由于它为您提供了专门针对移动网站速度的全新PageSpeed建议,因此它可以衡量加载时间,并且您可以展开每个项目以确切查看需要在移动网站上优化哪些元素.

1. GTmetrix移动测试
免费的GTmetrix帐户, 您可以在Android上测试您的网站。 PageSpeed标签仅对移动设备有效,而YSlow与台式机相同。如果您未使用自适应图像,则PageSpeed标签会显示按比例缩放的图像错误,以及重定向错误和您的移动加载时间.

2. Google PageSpeed Insights
Google PageSpeed Insights有一个“移动”标签,可告诉您针对移动设备的优化。然而, 您不应该使用PageSpeed Insights 无论如何,因为强调的是分数(而不是加载时间),而分数甚至无法衡量,因此请改用GTmetrix或其他工具.

3.与Google一起思考
与Google一起思考 也不是很好就像PageSpeed Insights一样,建议有些宽泛(使用GTmetrix,您实际上可以扩展建议以查看哪些插件,脚本和图像使您的网站变慢了)。 Think With Google不会这样做.

用Google Mobile Speed思考

4. Google Analytics(分析)
您可以在下面查看您页面的每个移动加载时间 行为 > 网站速度 然后为手机和平板电脑流量添加细分。的 速度建议 标签也可能会有所帮助,但再次提及Google PageSpeed Insights建议,这些建议根本没有用.

1.启用移动缓存

大多数缓存插件,例如WP Rocket和 WP最快的缓存 有一个选择 移动缓存.

移动缓存

如果您的缓存插件没有移动缓存,请确定它是否至少支持它。如果没有,请考虑使用具有此功能的缓存插件。有些还可以选择创建 移动设备的单独缓存文件 这样可确保缓存特定于移动设备的元素(如果您使用的是诸如WP Touch,WP Mobile Detect或JetPack的移动主题之类的移动插件,这将非常有用).

预加载移动缓存而不是桌面
缓存插件可以选择预加载桌面缓存或移动缓存,但不能同时加载两者。如果大多数访问者正在通过移动设备查看您的网站,并且您希望快速加载许多特定于移动设备的设计元素,则可以选择预加载移动缓存而不是桌面。您可以通过以下方式启用移动设备预加载 WP Rocket的助手插件. 对于其他缓存插件,Google会查看它们是否选择启用移动设备预加载而不是标准预加载.

WP火箭说:

2.使用自适应图像

如果您在GTmetrix的移动测试中测试站点时提供的缩放比例图像不是100%,则使用自适应图像应该可以解决这些错误.

自适应图像 检测到您访问者的屏幕尺寸,并自动创建,缓存和交付设备合适的网页嵌入式HTML图像的重新缩放版本。”

步骤1:在GTmetrix(Android)上测试您的网站,以查看在移动设备上按比例缩放的图片错误.

GTmetrix移动测试

在手机上提供缩放图像

第2步:在GTmetrix中找到推荐的图像宽度.

最大背景宽度

第三步:从以下位置安装自适应图像插件 短像素 要么 自适应图像.

ShortPixel自适应图像

第三步:在您的插件设置中,设置 背景最大宽度 到GTmetrix提供的尺寸(在“按比例缩放的图片”部分)。保存更改。 WebP支持,延迟加载图像,智能裁剪和删除EXIF数据还有其他一些设置.

背景最大宽度

第四步:在GTmetrix(Android)中重新测试您的网站,并投放缩放后的图像应为100%.

GTmetrix移动测试

3.启用Cloudflare Mirage

云耀斑

“ Mirage旨在通过两种主要方式来加快图像加载速度:1)为屏幕较小的设备提供较小的图像;和2)仅在图像出现在视口中时才“延迟加载”图像。这两项优化的主要目的是提高移动设备上的Web性能。”

这是Cloudflare的一项专业功能,但您不需要使用它,因为那里有免费的延迟加载功能和自适应图像插件,它们的功能相同。幻影是一个替代品.

云耀幻影

4.使用自适应主题和插件

自适应主题和插件自然适用于移动设备.

为什么这很重要?因为就像自适应图像一样,您网站上的其他元素也会自动调整大小以适合移动屏幕,从而使其加载速度比桌面版本快.

我个人使用StudioPress及其创世纪框架,Yoast也使用了它们.

响应式设计

基于设备的缓存 是某些CDN的功能。它可以让您根据用户的设备缓存特定元素,但是仅当您的WordPress网站不支持移动设备时才应使用它.

5.修复移动重定向

如果您在GTmetrix中看到“最小化重定向”错误,则可能是以下原因之一:

  • 您已更改为HTTPS或WWW,但未更新链接
  • 您在Cloudflare中使用转发URL设置页面规则
  • 编码错误或配置错误的插件正在重定向网站流量
  • Cloudflare SSL选项与您的服务器配置不兼容(请参阅 教程

如果使用Cloudflare,则可以使用 移动重定向选项 他们说“将移动设备访问者自动重定向到针对移动设备进行优化的子域。重定向是在Cloudflare网络的边缘进行的,从而消除了到原始服务器的往返,从而缩短了加载时间–这在移动网络上尤其有价值,因为移动网络提供的内容比wifi慢。

最大限度地减少重定向错误

服务器级别的安装程序重定向
如果您拥有移动子域(或与此相关的任何重定向),则最好在服务器级别进行设置,以免遭受WordPress攻击。服务器级重定向比插件更快.

6.减少服务器响应时间

您的服务器(托管)是 WordPress优化指南中的#1因素.

通过Google PageSpeed Insights运行您的网站以检查您的 服务器响应时间 应该是 <像Google推荐的200毫秒。 GoDaddy和 脑电图 (Bluehost,HostGator,iPage,Site5)对于慢速服务器是臭名昭著的。这是 在Twitter上众所周知 以及在Facebook网上论坛中。加入 WordPress托管Facebook组 并查看在托管上进行的民意调查.

减少服务器响应时间

SiteGround 和 云道 通常是#1和#2。许多人已经迁移并在Twitter上发布了他们的新加载时间-有时差异可能长达8秒。根据您的预算和需求,SiteGround(共享)和Cloudways(云)都是不错的选择,但两者都比GoDaddy和EIG好得多。两者都将免费迁移您.

SiteGround和Cloudways都将免费迁移您.

切换到SiteGround

SiteGround加载时间迁移

Bluehost到SiteGround GTmetrix

HostGator到SiteGround

SiteGround GTmetrix

SiteGround Google PageSpeed见解

SiteGround 100满分

HostGator到SiteGround的迁移

Joomla上的SiteGround响应时间

切换到SiteGround托管

SiteGround Rocket Imagify Combo

Joomla GTmetrix网站上

SiteGround PageSpeed见解

SiteGround On Joomla

2019年托管投票

2017-WordPress-托管-FB-民意调查

Elementor托管建议

2019年7月托管建议

WordPress主机投票2018年8月

共享主机投票2017

2019-托管民意调查

去托管公司

WordPress-Hosting-Poll-2017

托管主机轮询

2016-WordPress-托管-FB-民意调查

Elementor的最爱托管

2018托管建议

Managed-WordPress-Hosting-Poll-2017

2019-主机民意调查-1

高速主机投票

WordPress主机投票6月1日

SiteGround-推荐

7.不要使用AMP

安培 (加速的移动页面)是一个Google项目,可以使移动页面的加载速度更快,同时在移动搜索结果中为您提供AMP标记.

但是,AMP还可以完全改变您的移动设计.

金斯塔的 转化次数下降了58% 在添加AMP时,它们已恢复为正常的移动页面。我还决定不使用AMP,因为设计看起来不太好。有一些AMP插件可以帮助您进行设计,但仍然非常有限,您可能会对结果感到失望。而且,如果您决定添加AMP然后将其删除,则需要进行额外的工作,因为您需要设置重定向并采取其他措施来恢复到正常的移动页面.

您正在牺牲设计和转换的速度。 AMP值得吗?我不使用.

Google上的AMP

我曾经使用过AMP,但是此后将其删除:

amp页

如果决定使用AMP,请使用AMP For WP插件
如果您要添加AMP,则可能应该使用 AMP for WP插件. 在我见过的所有AMP插件中,它具有最多的自定义选项(甚至 AMP插件 由Google和Automattic支持)。还有 酵母胶 & 安培 这也有最少的选择.

功放

Cloudflare AMP实际URL

Cloudflare说 AMP真实网址 “意味着页面可以存储在AMP缓存中,并可以从页面快速提供服务,同时在浏览器的导航栏中显示原始网站的网址。”

您可以在Cloudflare的速度设置中找到此设置:

Cloudflare AMP Real

8.台式机优化成功转移到手机上

大多数台式机速度优化将延续到您的移动网站.

我说的是:

  • 添加CDN
  • 优化图像
  • 优化插件
  • 清理数据库
  • 升级PHP版本
  • 升级服务器/主机
  • 配置一个好的缓存插件
  • 优化外部脚本(例如Google字体)

如果您的移动设备和台式机需要在GTmetrix中工作,那么一开始我不必担心太多。启用移动缓存(在您的缓存插件中),然后严格关注您的GTmetrix建议以及WordPress速度优化的主要因素.

如果您在WordPress插件库中搜索“移动速度”,几乎没有任何东西可以优化专门针对移动设备的WordPress网站。从桌面优化开始!

9.运行PHP 7.3+

这非常容易,可以使您的网站 快2-3倍.

WordPress PHP基准测试

首先,登录您的托管帐户,然后转到PHP版本管理器,然后确保您运行的是主机支持的最新PHP版本。一些托管公司比其他托管公司更快地发布更新的PHP版本,但理想情况下,您应该运行PHP 7.3或更高版本。您也可以使用 显示PHP版本插件 查看您当前使用的版本.

PHP更新

有时,不兼容的插件可能会在升级PHP版本时导致错误。这意味着它们的维护状况不佳,您应该考虑删除或替换这些插件。与往常一样,在升级之前进行备份,但是您始终可以还原到较早的PHP版本.

10.设置CDN

绝对没有理由不使用 Cloudflare的免费CDN.

他们在全球拥有200多个数据中心。通过使用这些数据中心在您的网站上托管大量文件,您可以减少 地理距离 在服务器和访问者之间(WordPress优化指南中的建议)。您还将带宽消耗转移到Cloudflare,这可以节省CPU消耗和托管费用.

要设置Cloudflare,请注册一个免费帐户,从Cloudflare获取2个名称服务器,然后在您的域名注册机构中更改名称服务器。传播大约需要24小时.

设置多个CDN
多个CDN =更多的数据中心=更快地交付您的内容。小型网站应该可以使用Cloudflare,但是如果您对速度比较认真或拥有大型网站,则可以考虑使用StackPath或KeyCDN之类的其他CDN(我使用Cloudflare + StackPath)。尽管Cloudflare需要更改名称服务器,但其他CDN则容易得多。他们将为您分配一个CDN URL,大多数缓存插件都有一个用于或使用的字段 CDN启用[R.

多个CDN

11.优化图像

根据GTmetrix,可以通过3种方式优化图像:

  • 服务缩放的图像:将大图像调整为较小的尺寸
  • 优化图像(无损压缩):尝试使用ShortPixel,Imagify或Smush
  • 指定图像尺寸:在图片的HTML或CSS中添加宽度和高度

GTmetrix仅显示单个页面的错误。这就是为什么最好先优化出现在多个页面上的图像(徽标,边栏和页脚图像),然后逐步浏览最重要的页面。最好也开始 缩放图像 因为这需要裁剪/调整图像大小并重新上传它们。 GTmetrix会告诉您未缩放图像和具有未缩放图像的正确尺寸 没有指定的宽度+高度 在HTML或CSS中.

创建图像尺寸备忘单
我建议为滑块的尺寸,全幅博客图像,特色图像等创建一个“图像尺寸备忘单”。这样,您可以在上传之前对其进行裁剪并调整其大小为正确的尺寸,而不必再次提供缩放后的图片错误.

12.优化插件

太多的插件或任何CPU使用率很高的插件(尤其是那些使用外部脚本的插件),即使在移动设备上,也会减慢您的网站速度。在安装新插件后,我非常挑剔我要使用哪些插件并测试我的GTmetrix报告。始终使用最快,最轻巧,可靠的插件.

资产清理 非常适合加速插件。它使您可以查看某些页面上正在加载的插件,脚本和样式,然后在不需要加载的内容上有选择地禁用它们。如果您还没有这样做,我会100%建议使用资产清理.

  • 避免使用高CPU插件:避免使用慢速插件列表。常见的慢插件包括社交共享插件,投资组合,滑块,统计信息,备份等.
  • 用更快的插件替换高CPU插件:需要进行一些研究,但将您的任何高CPU插件替换为更快,更轻巧的插件.
  • 删除不需要的插件:您可以用代码替换插件(例如,直接插入GA跟踪代码,使用Facebook窗口小部件代替插件或在HTML + CSS中创建目录吗?可以用代码替换的任何插件都可以吗?.
  • 不要将JetPack用于几个模块:首先,在调试设置中禁用所有当前未使用的模块。接下来,如果仅将JetPack用于几件事情,您真的需要JetPack吗?以放慢网站速度而臭名昭著。您希望找到一个仅具有相同功能的非-肿插件.
  • 查找最慢的插件:使用GTmetrix Waterfall选项卡或Query Monitor(按组件查询的选项卡)查看最慢的插件。如果某个插件在您的PageSpeed + YSlow报告中多次显示,则也可能是一个指示符.

13.优化外部脚本

外部脚本 是从外部网站拉取请求的任何内容.

最常见的外部脚本是Google字体,Google Analytics(分析),Google Tag Manager,AdSense,地图,社交共享插件,嵌入式视频,Gravatars甚至Facebook Pixel.

GTmetrix中的外部脚本

一些第三方脚本很容易优化:

  • Google字体 可以使用WP Rocket,Autoptimize甚至资产清理功能进行组合和本地托管。最小字体和粗细!
  • 谷歌分析 可以使用WP Rocket或CAOS Analytics进行优化.
  • 嵌入式视频 可以使用WP Rocket,WP YouTube Lyte进行延迟加载并用预览图像替换iframe,或者使用 轻松嵌入YouTube.
  • 将浏览器缓存添加到Facebook Pixel 可以使用WP Rocket的附加组件完成.
  • 社交分享插件 需要更新“赞计数”(至少其中有很多)。这仅需要找到轻量级的社交共享插件并进行测试.
  • 未使用的JetPack模块 应该被禁用(在调试设置中找到它们).

其他第三方脚本不是那么容易:

  • 谷歌的AdSense 可以异步加载, 懒加载, 或者您可以尝试Cloudflare的 SG轨道炮 这有助于加快动态内容的速度。但是,这些可能难以实现,并且AdSense绝对可以杀死GTmetrix得分和加载时间。这就是为什么我推荐会员营销的原因.
  • Google跟踪代码管理器 仅应用于大型,未经优化的站点。否则,加载时间通常弊大于利.

14.预连接和预取

预连接和预取使浏览器更容易 预期第三方的要求 (Google字体,分析,AdSense,嵌入式视频和其他外部网站).

Mozilla

“ DNS请求在带宽方面很小,但延迟可能会很高,尤其是在移动网络上。通过推测性地预取DNS结果,可以在某些时候减少延迟,例如当用户单击链接时。在某些情况下,延迟可以减少1秒。”

如何预取DNS请求
Pre *派对资源提示 具有以下功能:DNS预取,预呈现,预连接,预取和预加载(这是它们的 定义)。如果您的网站上有第三方脚本(Google字体,Analytics(分析),YouTube视频,Gravatars等),这些功能将很有帮助。复制此清单 共同的外部领域 (或添加您自己的)并将其添加到Pre * Party或WP Rocket.

预取DNS请求

15.使用更好的缓存插件

并非所有的缓存插件都一样.

WP Rocket通常在Facebook民意测验中排名第一,并获得最佳的桌面和移动负载时间(以及GTmetrix得分)。那是因为WP Rocket具有比其他缓存插件更多的功能。如果要使用另一个不具有这些功能的缓存插件,则需要安装大约6-7个额外的插件,而WP Rocket则内置了所有这些功能.

结果?

您网站上的插件更少,但更多的速度优化功能和更好的结果.

大多数高速缓存插件未包含的WP Rocket功能:

  • 数据库清理:内置于WP Rocket,或使用WP-Optimize.
  • 延迟加载:内置于WP Rocket,或使用WP YouTube Lyte.
  • 心跳控制:内置于WP Rocket,或使用心跳控制.
  • 本地Google Analytics:内置于WP Rocket,或使用CAOS Analytics.
  • 本地Google字体:内置于WP Rocket,或使用OMGF或SHGF.
  • 预取DNS请求:内置于WP Rocket,或使用Pre * Party Resource Hints.
  • Facebook Pixel浏览器缓存:内置于WP Rocket(没有其他插件可以这样做).
  • CDN:内置于WP Rocket(Cloudflare +多个CDN),或使用CDN启动器.

2016年最佳缓存插件民意测验

2019缓存插件民意调查

斯威夫特vs WP火箭

2016缓存插件民意调查

最佳缓存插件2018投票

wp火箭vs w3 totla缓存

16.清理数据库

经常清理您的数据库可防止它变得肿.

您可以使用 WP优化 或WP Rocket安排每周或每两周进行一次数据库清理(但建议进行备份)。通常,应删除设置中的所有内容(未经批准的注释除外)。数据库表通常由您删除的插件留下,每次编辑帖子时都会创建一个帖子修订,您应该清空垃圾箱文件夹,依此类推.

WP-优化清理数据库

我还建议使用Perfmatters或Clearfy将后期修订版本限制为2-3,禁用自动草稿,并禁用pingback +引用。我称这些为“其他优化”并使用 金斯塔的香水 具有以下功能(还可以让您有选择地禁用插件和脚本):

性能特征

经常问的问题

&#x1f680;进行桌面优化还可以改善移动加载时间?

是的,几乎所有在台式机上进行的优化都会缩短移动加载时间。这就是为什么最好先修复这些问题的原因.

&#x1f680;在WordPress中提高移动速度的最简单方法是什么?

使用自适应图像插件(例如,来自ShortPixel的插件)来确保为移动设备正确调整图像大小。如果您为移动网站使用单独的子域,请确保正确设置了重定向,并且在GTmetrix中没有出现重定向错误.

&#x1f680;哪些台式机优化功能可以转移到移动设备上?

托管,升级PHP版本以及优化图像,字体和插件都可以转移到移动设备上,这对您的移动设备和台式机速度都具有很大的影响。很重要!

&#x1f680; Google PageSpeed Insights的行动建议如何??

与Google PageSpeed Insights相比,关注GTmetrix的Waterfall选项卡要好得多,因为它可以准确告诉您哪些元素加载时间最长,并且建议更具体。大多数WordPress社区告诉您甚至不要关注Google PageSpeed Insights,而应专注于GTmetrix.

&#x1f680;测试移动负载时间的最准确方法是什么?

我更喜欢GTmetrix的移动测试工具,可以通过注册免费的GTmetrix帐户来使用它,然后在Android上测试您的网站.

在WordPress移动速度方面需要帮助?

在评论中向您发送您的GTmetrix报告,我很乐意提供一些建议。或者,如果您想雇用我的团队,并且我想让您的WordPress网站(移动和台式机)更快,我们还提供了GTmetrix报告前后的WordPress速度优化服务。.

干杯,
汤姆

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map