目录
您可能正在手机上阅读这篇博文。
针对移动设备优化您的 WordPress 网站是与受众建立联系的关键，这就是为什么您应该关心 WordPress 移动优化的原因。但是，如果您的网站在从移动设备访问时速度很慢怎么办？有哪些方法可以从移动设备加速您的网站？
谷歌表示，如果您的网站加载时间超过 5 秒，您 90% 的移动用户可能会立即离开您的网站。如果您投入了大量精力来为您的网站增加流量，那么遗憾的是访问者甚至不会花时间与您的内容互动。那是白费的钱！
在本文中，我们将为您提供一些加速 WordPress 移动网站的性能提示，包括针对移动设备优化内容的最佳方法。我们将向您展示如何让每个人都能更轻松地浏览，无论您的访问者使用何种设备。这将确保一流的移动用户体验和在 WordPress 上对您的移动网站的智能优化，即使使用插件也是如此。
如何测试移动页面速度
提高移动网站速度之前的第一步是测量其当前性能。您需要评估网站的运行状况和移动用户体验的整体速度。
要进行此类审计，我们建议您使用 Lighthouse 技术。Lighthouse 可让您轻松了解网站在桌面和移动设备上的性能。值得一提的是，移动设备和桌面之间的指标具有不同的阈值：
让我们深入研究市场上可用的工具来衡量移动页面的性能。
PageSpeed Insights 是一种 Google SEO 工具，可以测量和分析任何 URL 的加载时间。
要获得良好的移动 PageSpeed 得分，请确保您的指标在以下阈值内：
| 指标 – 权重 | 良好 （绿色） | 平均值（橙色） | 不良（红色） |
| 第一次内容绘制 – 10% | 0- 1.8 秒 | 1.8 秒 – 3 秒 | > 3 秒 |
| 速度指数 – 10% | 0 -3.3 秒 | 3.3 – 5.8 秒 | > 5.8 秒 |
| 最大的内容绘制 – 25% | 0 – 2.5 秒 | 2.5 秒 – 4 秒 | > 4 秒 |
| 互动时间 – 10% | 0 – 3.8 秒 | 3.8 秒 – 7.2 秒 | > 7.2 秒 |
| 总阻塞时间 – 30% | 0 – 200 毫秒 | 200 – 600 毫秒 | > 600 毫秒 |
| 累计布局偏移 – 15% | 0 – 0.10 | 0.10 – 0.25 | > 0.25 |
您还可以直接从 Chrome 浏览器使用 Chrome Dev Tool 生成移动效果报告。按照以下步骤启动移动报表：
- 访问您的网站
- 从顶部菜单中打开 “developer tools”
- 选择 “Lighthouse” 选项卡
- 选中“设备”部分下的“移动设备”框
- 点击 “Generate Report” 按钮。
GTmetrix 是一个免费工具，用于测试您的页面在桌面上的性能。但是，您需要一个 PRO 帐户才能检查移动设备上的性能。在 Lighthouse 的支持下，它可以为您的页面生成分数并提供可操作的建议。
有许多设备可用。使用 PRO 在几种不同的移动设备上检查您的网站可能会很有用。
Webpagetest 是一个免费工具，可以帮助您识别 WordPress 网站上加载缓慢的移动页面，并对其进行微调以使其尽可能快。
WebPageTest 允许您从许多移动设备测试您的网站：
这是一个非常用户友好的工具，可以在移动设备上和多个位置测试您的 WordPress 网站。如果您想了解您的移动网站在美国和澳大利亚的表现，这一点非常重要！
您需要做的就是选择一个区域并相应地运行报告。
| 如果您发现某个区域比另一个区域慢，您可能需要尝试CDN。CDN 为远离您的 Web 服务器的人缩短了加载时间。 |
为什么您的 WordPress 网站在移动设备上运行缓慢？（常见原因）
1. 移动设备不同于桌面
区别 #1：智能手机处理器与台式机处理器
移动式处理器通常以效率为先，性能次之。移动设备的 CPU 架构比台式机弱。这意味着它们在处理速度方面不太强大。
区别 #2：网络速度（网络延迟）
网络带宽是指信息从一个点传输到另一个点的速度。此速度通常以兆位 （Mbps） 为单位。
高 Mbps 数字意味着更多的流量可以不间断地流经连接。网络延迟是将数据发送到网络所花费的时间。通常，移动网络比台式机具有更重要的网络延迟。
2. 您没有提供针对移动设备优化的图像
图片通常是减慢 WordPress 网站速度的罪魁祸首。它们需要专门针对移动设备进行优化。要使内容在小屏幕上可读，需要按比例缩小图像大小。
3. 您没有启用移动缓存
网站通常充满了需要加载图像和视频的数据。有时，这可能需要一段时间！缓存将自动使这些元素可用，因此您将来再次查看页面时不必等待，从而在速度较慢的连接或移动设备上节省时间。
4. 您使用滑块、预加载器或动画
布局或设计的不稳定性可能会对移动用户产生负面影响，尤其是在他们没有预料到的情况下。过多的滑块和动画会减慢页面速度，影响 SEO 和转化率。如果布局突然偏移，Google 会以较低的 CLS（累积布局偏移）分数惩罚您的网站。这个 Core Web Vital 将影响您的最终用户体验分数并影响您的 SEO 可见性和流量。
5. 您安装了太多插件
安装新插件会影响您的移动网站的速度，并且安装过多的插件也会导致安全漏洞和性能低下。插件可能会通过发出额外的 HTTP 请求和添加数据库查询来减慢您的网站速度。某些插件需要自定义样式或脚本，从而导致额外的 JS 文件加载到页面和 CSS 文件中。
6. 手机可能变慢的其他原因
布局是每个网站的关键元素：浏览器会计算出页面上元素的大小和位置。没有它们，您将无法组织您的内容或为用户创建吸引人的布局。如果你有很多元素要加载并且 JS 很重，浏览器需要一段时间才能弄清楚位置和尺寸。
另一个性能不佳的罪魁祸首是您对第三方脚本的依赖，例如跟踪器、访客会话、外部服务 – 例如 Instagram 提要。
您是否认识到您的移动网站是这些问题之一？还行！留在我们身边，让我们看看如何在移动设备上访问您的网站时优化网站的速度。
如何优化您的 WordPress 移动网站以提高速度
我们列出了 WordPress 移动优化的所有技术，以提高您在 Google PageSpeed Insights 上的移动分数。让我们深入了解速度优化技巧，以提升您的移动 WordPress 网站。
1. 使用响应式 WordPress 主题
响应式 WordPress 主题将使您的网站在手机或平板电脑上看起来一样好，无论通过哪种设备查看。
如何知道主题或页面构建器是否响应式？
- 检查模板的定制器或选项。例如， Astra 主题在构建自定义标头时提供移动视图：
- 开始构建您的页面并查看页面构建器提供的选项。Divi 或 Elementor 页面构建器具有这种类型的响应式部分。
2. 启用 Mobile Caching
移动缓存是减少应用程序及其服务器负载的常用技术。为了使这些应用程序和游戏高速流畅运行，需要有某种形式的缓存（又名“存储的本地数据”），这样它们就不需要持续的下载请求。目标是减少带宽使用、网络感知延迟，甚至电池消耗。
✅ 看看我们的列表，收集所有最好的 WordPress 缓存插件。
3. 优化移动设备图像
移动设备图像优化是指以可提高用户手机参与度的格式创建和交付高质量图像的过程。
我们建议您遵循以下技术，以确保您的图像在移动设备上得到很好的优化：
- 调整图像大小以节省带宽：640 x 320 像素通常是一个很好的标准。您还可以将“4：3 纵横比”作为移动设备上图像的经验法则。
- 压缩图像以缩小文件：在图像的质量和大小之间找到适当的平衡。在下面的示例中，质量没有受到影响，但我的文件大小从 517 KB 变成了 70.3 KB！
- 选择正确的文件格式：WebP 是您可以在移动设备（和桌面）上使用的最佳图像格式。它为 Web 上的图像提供卓越的无损和有损压缩。下图显示了压缩后的文件大小。
我们可以得出的结论是：
- WebP 的文件大小比 PNG 和 JPG 小 25%，但质量相同
- WebP 的加载速度（由于文件大小）比 PNG 或 JPG 图像快。
我们有一份可用于优化图像的最佳插件的完整列表。请随意查看。
4. 对图片和视频实施延迟加载
图像优化的最后一个关键是在移动设备上延迟加载您的图像和视频。延迟加载脚本会延迟加载访客尚未查看的图像。
我们提供了可用于实现延迟加载的最佳插件的完整列表。
5. 使用 CDN 优化图像交付
优化图像交付是提高移动页面速度的关键步骤。您可能需要多个服务器来提高世界上任何地方的渲染数据的速度。这正是 CDN 正在做的事情。
6. 缩短首字节时间
这个想法是尽快向移动设备上的访问者显示一些内容，这样他们就不会认为您的网站很慢。这一切都是为了给人留下良好的第一印象。
如果可能，您需要有一个支持 Gzip 压缩的快速托管服务提供商和一个缓存插件以减少服务器处理时间。
7. 消除渲染阻塞资源（JS 和 CSS）
当 PSI 告诉您消除阻止渲染的资源时，这意味着您应该避免在网站代码的顶部加载不必要的资源。如果你那里有很多无用的 JS 和 CSS，浏览器将需要更长的时间来呈现你的移动网站的可见部分。
解决方案是内联提供关键的 JS 和 CSS，并推迟所有非关键的 JS 和样式。您还可以删除未使用的代码以节省一些额外的加载时间。换句话说，您需要优先考虑浏览器首先加载的内容。
如果您不想使用 WordPress 插件，您可以使用 defer 和 async 属性并自己应用标签。
8. 减少页面重量
较轻的页面在移动设备上加载速度会更快。页面繁重通常是由视频、图像、脚本、样式和字体引起的。减少页面重量的最佳方法是优化图像、实施文本压缩 （GZIP） 并组合/缩小代码。
9. 摆脱任何可能挑战手机的东西（如果可能）
避免为移动访问者使用任何滑块、动画、预加载器或弹出窗口。如果您希望加载所有这些元素，那么您最终将增加页面大小、加载时间和更多的 HTTP 请求。保持简单，通过尝试在本地缓存数据来选择静态图像。
甚至 Google 页面体验也依赖于视觉稳定性、移动友好性和侵入性插页式广告。如果你想让你的排名好，不要在移动设备上使用不必要的繁重元素，如布局、属性和 JS。
10. 通过 CDN 交付您的整页缓存
除了缓存之外，您还可以使用内容分发网络服务，就像 Cloudflare APO 的服务一样。正如我们之前解释的那样，CDN 意味着访问者永远不会离您的服务器太远，无论他身在何处。想象一下，您的页面在巴黎需要 1 秒，在纽约需要 2 秒，在悉尼需要 4 秒。如果您使用 CDN，则无论移动用户身在何处，页面都应该均匀加载。
11. 正确管理和展示您的广告
尽量不要在首屏显示任何广告，并延迟加载它们，直到它们到达视口。换句话说，这意味着在必要时才投放广告。
您还应该制作自适应广告，通过自适应 C-T-A 在移动设备上很好地展示它们，让用户感觉像是互动的。
使用像 Advanced Ads Pro 这样的插件来控制在移动设备上展示广告的时间和位置。
是时候应用所有技巧了！
发表回复