在建立自己的网站时，你可能会忘记移动端页面速度是谷歌的排名因素之一。虽然这可能不是网站无法在搜索结果首页排名的主要原因之一，但这种情况不会持续太久。
让我来摆出事实：
从2019年7月开始，谷歌开始了移动优先索引计划[1]。这是因为现在通过移动设备访问互联网的用户[2]比其他任何设备都多。
（图表由Visualizer提供。）
平均而言，移动端网站需要15秒才能加载完成，这是根据谷歌的研究[3]。还有一点：如果让访问者等待10秒……更别说是15秒，移动端的跳出率会飙升[4]。
如果你想让移动端页面速度问题不再成为吸引访客并将他们转化为忠实客户的障碍，请使用以下方法尽快改善你的移动端加载时间。
如何在10步或更少步骤内提升移动端页面速度
如果你想保持：
- 搜索结果中移动端点击率处于高位……
- 移动端网站跳出率处于低位……
- 移动端转化率持续上升……
那么，移动端页面速度不容小觑。
以下是改善移动端页面加载时间的步骤：
步骤1：选择快速的网络托管
如果你有不可靠的网络托管在背后支撑，那么你在改善移动端页面速度方面做多少工作都没用。
公平地说，如果网络托管公司的服务器处理和向移动端访问者提供网站的时间太长，你不能完全责怪它。你需要自己研究提供商及其基础设施，并确保你选择的方案有助于加快网站的加载时间。
以下是一些需要考虑的事项：
网络托管商的服务器位于哪里？
如果在你或你的目标受众附近没有足够的服务器，加载时间就会延迟。
一个好的做法是寻找在你所在国家或地区提供顶级服务的主机。以下是一些好的起点：
如果你已经购买了虚拟主机计划但对服务器所在位置不满意，你可以随时使用CDN来补充你的托管服务。这些领先的CDN提供商之一可以帮助弥合你的网站与其访问者之间的物理距离。
如果你的网站面向全球用户，你还应该考虑在虚拟主机之上使用CDN。
虚拟主机是否提供利基托管？
例如，如果你正在构建一个WordPress网站，那么研究针对该CMS进行了服务器优化的最佳WordPress主机会是一个好主意。
电子商务网站也是如此，随着库存和流量增长，需要更多的处理能力。顶级电子商务托管解决方案将确保移动流量和交易能够快速处理。
如果你使用的是WordPress以外的CMS，也有针对Joomla和Drupal的托管解决方案。
你购买的是托管托管吗？
通过托管WordPress托管，你不仅可以从深入了解你的CMS的提供商那里获益，还能获得网站维护方面的帮助。
网站维护是网站维护的重要组成部分，对于保持健康的网站加载时间非常有用。如果你能将其中一些工作外包给托管主机，你需要担心的事情就会少一些。
不过，如果你最终没有选择托管托管，也不用担心。我们下面有一些技巧，会教你如何自己进行这些性能优化。
虚拟主机是否以针对移动页面速度优化的技术栈著称？
另一个需要关注的是主机的技术栈。
- 他们是否使用NGINX？
- 服务器是否配备了缓存？
- CDN升级是否可用？
- 服务器是否运行最新版本的软件？
有多种方法可以让服务器快速运行，因此在注册计划之前寻找这些加速措施很重要。如果你需要帮助缩小选择范围，可以从快速WordPress主机开始。（提示：查看页面顶部的相关文章列表，这是一个很好的资源。）
你的托管计划是否可扩展？
最后一件事要考虑的是托管计划的可扩展性。
如果你能一开始就给移动访问者带来惊喜，你可以预期流量会迅速增加。因此拥有一个能够随流量扩展服务器资源的虚拟主机至关重要。
以下托管公司以其可扩展的产品而闻名：Kinsta, Cloudways, WP Engine, InMotion Hosting。
你可能也有兴趣：
步骤2：更新到最新版本的PHP
PHP是我们用于构建WordPress网站及其功能核心的开源脚本语言。无论你是否亲自编写PHP代码，它始终存在于服务器层面，如果不更新，可能会影响移动端页面加载速度。
这份来自Cloudways的基准测试研究解释了使用最新版本PHP的重要性：
请注意，最新版本的PHP每秒可以同时处理更多的HTTP请求。
现在，当你首次设置WordPress网站时，你的虚拟主机应该会自动选择最新版本的PHP。但除非你启用了托管PHP更新，否则你需要自行关注这个问题。
值得庆幸的是，你可以轻松自行更新PHP。
登录你的虚拟主机账户
每个主机的控制面板布局各不相同，所以你看到的内容可能与示例不完全相同。
也就是说，你需要做的只是找到PHP管理器，比如这个来自SiteGround的示例：
查看当前的PHP版本
查找当前使用的PHP版本。
在上面的示例中，SiteGround会自动将服务器更新到最新版本，但仍会告知用户正在使用的版本。
如果需要做任何更改，请打开可用PHP版本列表，选择你想要使用的版本：
⚠️ 记住在升级服务器软件之前先备份你的网站。
第3步：在所有层级实施缓存
作为用户，我们对浏览器级别的缓存很熟悉。通常当我们看不到网页上的最新内容时，就会去调整这些设置：
这允许用户从浏览器中删除网站的存储副本，以便下次访问时显示最新版本。
在网站上使用缓存能带来巨大的性能提升。显然，我们不希望过时信息”卡”在浏览器中，但我们也确实不想让服务器一次又一次地重复处理同一个页面。
通过启用缓存并创建未更改页面的静态副本，服务器的工作效率会大大提升。
你可以使用两种资源来启用缓存。
启用服务器缓存（同时有利于桌面端和移动端页面速度）
这不需要你自行管理。如前所述，重视性能的虚拟主机会在其托管方案中内置服务器缓存。
要确保你拥有所需的所有服务器端缓存，请在托管控制面板中查找。和PHP一样，应该很容易找到：
如果你觉得需要升级缓存（如果有的话），可以在这里进行。
启用网站、数据库和对象缓存
使用WordPress缓存插件，你可以激活所有其他需要的缓存。
这里我以WP Fastest Cache为例。
使用这个插件，你可以快速启用或禁用缓存系统：
这样您就不必纠结于要启用哪些类型的缓存（例如网站、浏览器、数据库、opcode、memcache 等）
此外，此类缓存插件通常还会提供其他加速设置（我们将在下一个技巧中介绍）。
升级版本还能为您提供额外的性能优化功能，例如图片优化、CDN 配置和移动端缓存。
步骤 4：优化代码和资源的处理方式
不仅您的网站及其内容会减慢移动端页面的加载速度，其背后的代码和文件也可能导致问题。
让我们仔细看看 WP Fastest Cache 设置界面的下半部分：
您应该充分利用这些性能优化功能，原因如下：
代码压缩
开发人员在编写代码时，通常会采用便于人类阅读的方式，添加额外的空格、注释和其他格式。但这些对您的服务器来说只是需要处理的多余字符。
通过压缩 HTML、CSS 和 JavaScript，可以删除这些多余的代码，使您的文件大小和代码更易于服务器向访问者交付。
代码/文件合并
根据 HTTP Archive 的数据，服务器在处理每个移动端页面时平均需要处理 69 个 HTTP 请求（即文件）。为了提高这一过程的效率，您应该尽可能合并文件。
除了去除代码中的多余字符外，您还可以将所有文件合并为一个文件。这对于较重的 CSS 和 JavaScript 文件尤其有用。
Gzip 压缩
您熟悉 .zip 文件，也知道我们为什么要用它来传输大量文件以及减小较大文件的体积。Gzip 压缩的工作原理类似，但作用于服务器层面。
Gzip 压缩您的 HTML 和样式表。同样，这样可以减少服务器需要处理的文件数量和大小。
消除渲染阻塞资源
在许多情况下，这是缓存插件的高级功能。话虽如此，这是一个重要的功能，从这份 Google PageSpeed Insights 报告 您就可以看出：
在这个移动端网站的所有性能问题中，最大的问题是 渲染阻塞资源。
基本上，当您的服务器遇到带有内联 CSS 或 JavaScript 的网页时，它会在处理页面更关键的内容之前先尝试处理这些代码。这反过来又会延迟移动端访问者看到网站内容的时间。
但是，通过启用这个性能优化功能，您可以延迟加载非关键代码，让页面上方内容和数据能够更快地显示出来。
步骤 5：清理数据库文件
把您的 WordPress 数据库想象成一个文件文件夹（就像您放在桌上或电脑里的那种）。您把重要信息存储在一个专门且安全的位置，因为您想：“有一天我会用到它。”
但然后你开始清理工作空间，会发现有多少文档其实不需要保留。插件已卸载，但会留下文件。博客文章的修订版本被保存下来，即使你再也不会需要第七个版本。垃圾评论堆积如山。
不用说，您的数据库可能会被旧和不必要的文件及数据淹没。
您可以自己梳理数据库，但这是一项耗时的任务，可以轻松地交给数据库优化插件处理。
WordPress Codex 建议使用 WP-Optimize 来完成此任务。请注意，此插件还会执行其他多项操作，包括缓存和图像优化。
有其他插件可以更高效、更完整地处理这些任务，因此无需通过此插件激活它们。只需专注于提供的数据库优化功能：
这份优化清单实际上会告诉您数据库中哪些地方需要清理——比如“您的数据库中有51个文章修订版本”。只要您知道这些旧版本不需要，就可以继续“运行优化”。
WP-Optimize 现在提供计划清理功能，请务必使用它，这样您的数据库将自动定期清理：
这些看起来可能都是简单的事情，但很容易忽视 WordPress 数据库中隐藏的所有文件。但您能做的任何减少服务器需要查看的文件数量的事情，都是有益的。
第6步：采用精简设计
很容易被最新的 网页设计趋势 冲昏头脑，它们告诉您使用某些元素或功能来提升参与度和转化率。但如果您仔细看这些设计组件，它们都是为了更大的桌面屏幕而设计的。
以弹窗为例。虽然在桌面上它是吸引用户注意力的好方法，但模态弹窗在移动屏幕上可能会非常打扰。
这就是为什么 Google 多年前对移动弹窗进行了惩罚。因此，在设计移动网站（或任何网站）时，只需包含必要的内容。
使用轻量级且响应式的 WordPress 主题
如今许多 WordPress 主题都带有额外功能：
- 预装的插件包
- 预构建的小部件、模块和其他页面模板
- 导入演示时自动安装的图片和视频
- 自定义字体包
- 等等
但这些元素的存在并不会自动导致主题加载缓慢。这一切取决于这些功能的实现程度。
这就是为什么 选择 WordPress 主题 常常感觉像玩俄罗斯轮盘赌，特别是如果您必须付费并花时间配置它才能发现它的实际速度。
您可以做的 Instead 是使用现有数据找到一个核心轻量级的 WordPress 主题。
CodeinWP 对流行的 WordPress 主题进行了速度测试 并展示了一些有用的发现。该文章展示了某些流行主题的加载时间，以便您可以自己决定想使用哪一个（因为没有哪个主题可以满足所有人）。
三秒似乎是测试移动用户耐心的阈值，因此请坚持使用加载速度更快的主题。
将占用资源的元素保持在最低限度
另一个使用轻量级主题创建网站的好处是，这些主题通常会鼓励设计最佳实践。
您不会看到占用大量数据或令人分心的元素，如实时聊天小工具、弹出窗口或自动旋转轮播。相反，您可以专注于改进现有的设计、图片和消息。
您可能需要注意的唯一一点是主题中包含的图片和视频数量。
仅仅因为有一个带有励志引言的图片横幅占位符，或者模板带有背景视频，并不意味着您需要使用所有这些元素。如果您没有值得在给定空间内分享的内容，不要勉强。以下是原因：
根据HTTP Archive的数据，图片是网络服务器最大的压力源之一：
- 移动网站的总大小为1791.9 KB，其中图片通常占879.5 KB。
- 在服务器需要处理的69个HTTP请求中，图片占27个。
因此，只使用您需要的图片（和视频）。这种精简移动设计的方法不仅能帮助您构建简洁的移动设计，还能帮助您保持移动页面较短。由于移动页面需要更多滑动才能到达底部，这是一个需要记住的重要考虑因素。
记住移动用户意图
为了使移动设计更加精简，您可以做的另一件事是围绕移动用户意图来构建您的网站。
Google的微时刻是关于如何以及为什么要这样做的完美示例。
基本上，Google说的是：
消费者行为正在改变，这要归功于移动设备使用量的增长。因此，他们不再像以前那样搜索品牌、体验或产品，也不再像以前那样与网站互动。
特别是移动用户，正在根据以下四个“时刻”搜索信息和网站：
了解到这一点，您应该认真考虑如何立即为移动用户提供这些信息。例如，不要将“预订”按钮或日程安排小工具藏在首页较深的位置或单独的页面上，而是将其放在首屏上方（或者更好的话，放在页眉中）。
这种基于微时刻的设计肯定会改善移动用户体验，但想想它对您的移动页面速度的影响。
如果您能更快地为移动访问者提供他们需要的答案或引导他们采取所需的操作，他们花在自行摸索上的时间就会减少。这将减少他们使用网站搜索栏、滚动浏览每个页面或筛选菜单的需要。
虽然网站停留时间可能会缩短，但您的转化率应该会更高，您的服务器在处理每个新请求时也会更加高效。
第7步：使图片尽可能轻量
无论是在启动画面上还是在博客文章中，图片往往会在网络服务器上占用大量空间（移动网站约一半的重量来自图片）。
由于移动网站的加载速度本来就比桌面版网站慢，因此在WordPress网站上使用图片之前，必须尽可能让图片变轻。
您可以采取以下措施来实现这一目标：
尽可能使用WebP和下一代JPG格式
无论你是从库存图片网站下载图片还是使用自己的图片，你可能没有太多考虑保存它们的文件格式。然而，图片格式可能会对移动网站产生重大影响。
例如，以这个PageSpeed Insights测试为例：
该网站的桌面版本得分为97分（满分100分），Google几乎没有任何关于如何加快速度的建议。另一方面，移动版本只得了75分（满分100分），上述建议被作为降低加载速度的一种方式提出。
根据Google的说法，以下三种图片格式可以提高移动端页面速度：
- JPEG 2000
- JPEG XR
- WebP
但这有一个问题：
WordPress默认不支持这些格式。要使用这些轻量级的新一代图片格式，你需要借助插件。幸运的是，有许多图片优化插件可以帮助解决这个问题。
通过WordPress图片优化插件处理所有图片
要对图片文件进行处理并使其更轻量，你可以做两件事：
- 调整大小。
- 压缩。
现在，你可以在网上使用很多免费工具来完成这项工作。然而，当你正在设计一个网站——这已经是一个耗时的任务——你最不想做的事情就是引入另一个工具和工作流程。
相反，你可以做的是安装一个流行的WordPress图片优化插件并自动化这个过程，这样你就少了一件需要担心的事情。
例如，这就是你如何使用Optimole实现”设置后遗忘”。
首先，你可以在你满意的质量级别应用图片压缩（接近”高”为最佳）：
然后，你可以设置最大图片尺寸，这样过大的图片就不会有机会拖累你的网站：
你还可以应用延迟加载，这样页面下方的图片只会在访问者滚动到它们时才会加载：
这将有助于为实际需要时节省服务器资源。
Optimole还会自动向兼容的浏览器提供WebP图片。所以这也少了一件需要担心的事情。
想要入门帮助吗？请查看本页面顶部相关帖子列表中的图片优化分步指南。它将带你完成整个过程。
第8步：只使用你需要的插件
不一定是你安装的WordPress插件数量会导致移动端页面速度问题。但编码糟糕的插件可能会导致性能问题，那些消耗大量数据的插件也是如此（比如使用实时跟踪或定期调用数据库的插件）。
所以你必须非常谨慎地选择安装哪些插件。
虽然有大多数网站都应该使用的必备插件，但关于完美插件数量没有黄金法则。你构建的网站类型将决定这一点。然而，在试图弄清楚“我真的需要这个插件吗？”时，你应该注意以下几点：
查看评论
WordPress 插件仓库 中用户留下的评论有助于评估插件的质量。
但你需要关注的不仅仅是“我的网站坏了”或“不起作用”这样的评价。
在阅读评论时，寻找“快速”、“缓慢”和“轻量”等关键词。如果在最近一年内看到足够多的关于移动页面速度问题的反馈，你应该立即转向下一个插件。
检查您的网络托管公司
大多数网络托管公司都有他们不希望客户使用的被禁止、被列入黑名单或被拒绝的插件列表。只需搜索您的主机名加上“被禁止的插件”即可找到列表。
插件被禁止的原因有很多，但性能问题是最常见的原因之一。
让我们以 HostGator 的禁止插件 为例：
在这里您会发现以下插件：
- 与网络托管公司功能重复的插件。
- 过度调用数据库或外部 API 的插件。
- 编码粗糙或不再受支持且运行不佳的插件。
- 加载了用户实际上不需要的功能的插件。
因此，如果您不确定从哪里开始精简 WordPress 插件列表，请检查您主机上的禁止插件列表。它会给您一些削减的建议。
第 9 步：减少字体文件的数量和大小
随着时间的推移，我们移动网站上的字体文件大小已经增长了很多。
根据 HTTP Archive 的数据，移动端字体的平均大小：
- 2017 年为 75.2 KB。
- 2020 年为 104.2 KB。
诚然，在减少网站加载重量方面我们有更重要的问题要解决，但减少字体文件的数量和大小仍然很有帮助。
使用更少的字体
不久之前，设计师们还在装饰性字体和布局上玩得很开心。但随着越来越多的用户通过移动设备访问网页，我们在字体设计方面不得不有所收敛。
当屏幕空间有限时，使用过大的字体或不规则的布局是不切实际的。
除了精简移动端文字的装饰性之外，更重要的是将字体变体也保持在最少。实际上，一个网站上使用的字体类型不应超过两种——一种用于标题文字，一种用于正文。这可以使整个网站的阅读体验更加轻松和一致。
选择快速的字体
几年前，KeyCDN 对最快的字体进行了案例研究。
然而，测试并不像“哪种 Google 字体加载最快？”那么简单。如果是这样的话，结果应该是这样的：
但这些是通过 Google API 和 CDN 运行的网页字体。当最快的网页字体（Open Sans）与最快的网页安全字体（Arial）进行比较时，结果是这样的：
这与我们网站面临的其他性能问题类似。您强制数据和资源经过的层越多，您的网络服务器处理它们所需的时间就越长。
因此，就网页字体而言，请尽可能在本地托管字体（使用您自己的 CDN）。如果能找到喜欢的网页安全字体，就使用它。如果实在不行，十大最快的 Google 网页字体之一也可以工作。
压缩您的字体文件
如果讨论字体格式，WOFF 或 WOFF2 是您的最佳选择。首先，它们是在浏览器中接受度最高的字体格式：
目前唯一不支持它的浏览器是Opera Mini（上图中紫色部分）。
除了被广泛支持外，WOFF还自动进行了压缩。根据Google的说法，WOFF2文件大小比其他字体格式小30%。
这不仅仅是Google的建议。W3C建议网站使用WOFF 2.0字体格式，因为它具有更高的压缩效率。
第十步：将您的移动网站转换为更快的格式
有两个网站和网页格式被引入，以帮助我们更好地处理移动设备上的慢加载问题。
这两个格式在这个博客上都有详细介绍，所以我不想在这里花太多时间讨论它们。但是，我想快速总结一下为什么将您的移动网站迁移到这两种格式之一（或两者）可能是有益的：
AMP
AMP是”Accelerated Mobile Pages”（加速移动页面）的缩写。这种页面格式快速的原因有以下几点：
- 它主要依赖轻量级HTML。
- 它使用延迟加载。
- 页面内容缓存在Google Cloud中。
虽然您可以将它用于任何网站，但它特别适合希望提供快速阅读体验的数字出版物和博客。此外，它很容易实现——您只需要一个WordPress插件来转换您的页面。
PWA
PWA是”Progressive Web App”（渐进式Web应用）的缩写。它将移动网页的最佳特性（即搜索性和便利性）与移动应用的最佳特性（即更友好的移动设计和电话功能）结合起来。它也比传统的移动网站快得多。
另一点需要注意的是，PWA可以像移动应用一样离线访问，如果您网站的目标用户生活在覆盖区信号弱或无覆盖的地区，这将是一个很好的选择。
由于PWA将网站放入类似应用的外壳中，您无法选择要转换的网站的哪些页面。如果您想从头到尾创建更好的体验，请将网站构建（或转换）为PWA。
虽然有一些WordPress插件可以帮助将您的网站变成某种程度的PWA，但您最好自己从头开始编写。
准备好提高您的移动页面速度了吗？
随着越来越多的访问者通过智能手机访问我们的网站，我们的网站需要准备好为他们提供最好的体验。唯一的问题是，一些为桌面设计和优化网站的旧方法对移动页面速度并没有太大帮助。
但是，通过使用上述步骤，您可以立即提高您的移动页面速度。
请确保不要止步于此。定期访问您的移动网站以确保它以尽可能快的速度运行是很重要的。借助这些网站速度测试工具之一，您可以轻松监控它，同时获得关于需要修复内容的明确指导。
