跳到主要内容

如何审核移动设备可用性

2024-05-22

移动设备现在占全球流量的 60% 以上，这使得移动设备可用性比以往任何时候都更加重要，以便为所有用户提供包容性的体验。

介绍​

移动设备现在占全球流量的 60% 以上，这使得移动设备可用性比以往任何时候都更加重要，以便为所有用户提供包容性和丰富的体验。

为如此庞大的用户群体提供有损的移动体验，不可避免地会对用户满意度和网站性能产生影响。

本教程展示了如何使用 Screaming Frog SEO Spider 对网站进行审核，以大规模地使用 Lighthouse 识别常见的移动设备可用性问题。

请注意 - 需要 SEO Spider 许可证 才能执行以下移动设备友好性审核。

1) 连接到 PageSpeed Insights​

单击顶部菜单中的“Config > API Access > PageSpeed Insights”以连接到 PSI。

有两种运行 PageSpeed Insights 的选项：“Remote”（远程）和“Local”（本地）。

Lighthouse 集成到 SEO Spider 中

  • Remote（远程）– 这意味着 Lighthouse 在远程服务器上的 URL 上运行，数据通过 API 返回到 SEO Spider。 这需要一个免费的 PageSpeed Insights API 密钥，可以通过按照我们的 PageSpeed Insights 集成 指南中的步骤轻松创建。 优点是它不会消耗本地机器的资源来运行 Lighthouse。
  • Local（本地）– 这意味着 Lighthouse 直接在用户的机器上运行。 不需要 API 密钥。 优点是它可以用于需要身份验证才能访问的站点，并且不像远程 API 那样每天限制为 25k 个查询。

这两种选择都很好用，大多数用户不需要过多考虑使用哪一种。

移动设备友好性（和速度）检查可以在“Metrics”（指标）选项卡下查看，并且应该已经启用 - 除非之前已禁用它们。

PSI 移动设备友好性检查

由于 Lighthouse 将运行，因此对于某些用户来说，同时执行速度审核可能是有意义的。 请参阅我们关于 如何审核 Core Web Vitals 的教程。

现在选择“Account Information”（帐户信息）选项卡上的“Connect”（连接）。

单击“Connect”（连接）到 PSI API

这意味着启用了 PSI 和移动设备可用性检查，并且可以随时对任何已抓取的网站进行检查。

2) 启用移动设备备用配置​

通过顶级菜单导航到“Config > Spider > Crawl”，然后选择“Crawl”（抓取）和“Store”（存储）移动设备备用链接。

移动设备备用 URL 配置

这允许 SEO Spider 抓取 rel="alternate" 链接元素中包含的 URL，并发现 URL 的单独移动版本（如果存在）。

3) 抓取站点​

在顶部的 URL 栏中输入要执行移动设备可用性审核的网站，然后单击“Start”（开始）。

抓取站点以查找移动设备可用性问题

然后，SEO Spider 将开始抓取网站。

4) 查看“Mobile”（移动设备）选项卡​

“Mobile”（移动设备）选项卡 包含抓取中的所有页面，以及一个 PSI 状态列，指示何时分析了移动设备可用性。

“Mobile”（移动设备）选项卡有 6 个过滤器，用于常见的移动设备问题，例如未设置视口、点击目标大小、内容大小不正确、难以辨认的字体大小等。

移动设备可用性选项卡

每个问题在列中都有一个 Lighthouse 分数。“100”表示通过，而“0”表示审核失败。

右侧的“Overview”（概述）选项卡 和“Issues”（问题）选项卡 都将实时填充在页面上发现的任何与移动设备相关的问题。

移动设备问题包括 –

  • Viewport Not Set（未设置视口）– 没有视口 meta 标签的页面，或者没有包含文本 width= 的 content 属性的视口 meta 标签。 设置视口 meta 标签允许在所有设备上正确调整宽度和缩放比例。 如果未设置此项，移动设备将以桌面屏幕宽度呈现页面并缩小它们，从而使文本难以阅读。
  • Target Size（目标大小）– 点击目标太小或周围没有足够空间的页面，这意味着它们在移动设备上难以交互。 点击目标（也称为“触摸目标”）是触摸设备上的用户可以使用的按钮、链接或表单元素。 尺寸或间距不足也会给行动不便的用户或任何在控制精细动作方面遇到困难的用户带来挑战。 点击目标的大小必须至少为 24 x 24 CSS 像素。
  • Content Not Sized Correctly（内容大小不正确）– 内容小于或大于视口宽度的页面，这意味着它可能无法在移动设备上正确呈现。 Lighthouse 会标记宽度不等于视口宽度的页面。
  • Illegible Font Size（难以辨认的字体大小）– 字体大小较小的页面，这可能会使用户难以在移动设备上阅读。 Lighthouse 将标记字体大小小于 12px 的页面，这些页面占页面文本的 40% 以上。
  • Unsupported Plugins（不支持的插件）– 具有浏览器插件（如 Flash、Silverlight 或 Java Applets）的页面，大多数移动设备和浏览器不支持这些插件，搜索引擎也无法对其进行索引。
  • Mobile Alternate Link（移动设备备用链接）– 包含指向移动版本的 rel="alternate" 链接元素的页面。 虽然这是一个可以接受的设置，但这意味着在单独的 URL 上为每个设备提供不同的 HTML。 这通常不如响应式设计方法有效。

有关每个问题的更多详细信息，请参阅我们的 移动设备可用性问题 库。

5) 使用较低的 Lighthouse 详细信息选项卡进行分析​

可以通过单击顶部窗口窗格中的 URL，然后单击较低的“Lighthouse Details”（Lighthouse 详细信息）选项卡来查看移动设备可用性问题的详细信息。

“Lighthouse Details”（Lighthouse 详细信息）选项卡

可以使用“Export”（导出）按钮单独导出 URL 的此数据。

6) 批量导出移动设备可用性问题​

可以在“Reports > Mobile”（报告 > 移动设备）菜单下批量导出移动设备问题，包括 Lighthouse 中的详细信息。

移动设备可用性导出报告

这将导出在所有 URL 的“Lighthouse Details”（Lighthouse 详细信息）选项卡中看到的详细的移动设备问题数据。

7) 监控进度 API 进度​

执行的移动设备可用性检查通常比抓取本身慢，因为它们在 Lighthouse 中运行，因此有几种方法可以密切关注进度。

“Mobile”（移动设备）选项卡中的“PSI”列将在查询后填充“Success”（成功）或“Error”（错误）。 当它为空时，尚未处理。

PSI 状态列进度

右侧的 API 选项卡和进度条也都会显示到目前为止已检查的 HTML URL 的进度。

PSI API 选项卡

一旦达到 100%，所有页面都将在 Lighthouse 中针对移动设备可用性问题进行审核。

支持​

本教程应帮助用户使用 SEO Spider 在任何网站上大规模执行移动设备可用性审核。 如果您遇到任何问题，请查看以下指南和常见问题解答 –

或者，请通过 support 联系我们，我们可以提供帮助。