网页设计师可以做些什么来加速移动网站

我最近为网页设计师客户写了一篇关于页面速度及其重要性的博客文章。 在写这篇文章之前我不知道的是，她的代理机构正在努力优化他们的移动网站以提高速度。 结果，她回来找我，担心发表一篇关于她的机构尚未成功采用的策略的帖子。

虽然她被撕裂了。 她了解移动页面速度对用户体验以及代理对 SEO 的重要性。 然而，他们的重点一直是制作美观且有效的设计。 页面速度优化之类的事情总是留给开发人员担心。

最后，我们决定继续发布它，直到他们可以对自己的网站以及客户的网站进行适当的优化。 与此同时，它让我想到：

设计师在创建移动网站时可以做些什么来帮助开发人员优化速度？

开发人员已经通过以下方式优化前端性能：

• 快速网络托管
• CDN
• 清洁编码实践
• 缓存
• 缩小
• 图像优化
• 和更多

那么，还有什么剩下的吗？

对我来说，这很像搜索优化的处理方式。 作为一名作家，我负责页面优化，而我将内容交给开发人员进行技术 SEO 工作。 Web 设计人员和开发人员可以轻松解决每个驾驶室中的速度优化部分。

了解移动网络上“慢”的含义

有许多工具可以帮助您分析页面速度并实施各种修复以改进它们。 一种特别有用的工具称为 Lighthouse。 唯一的一点是，它适用于 Web 开发人员。

相反，我建议网页设计师使用另一个名为 Test My Site 的 Google 测试工具。

这仅适用于那些想要快速评估其移动网站速度的人。 您需要做的就是在字段中输入您的域名并让测试运行。

与其他网站速度测试相比，我喜欢这个工具的地方在于，它都是用外行的方式为您详细说明的。 在这种情况下，我的网站“慢”，即使在 4G 网络上提供服务。 尽管多年来我们一直被告知访问者愿意等待 3 秒来加载网页，但 Google 认为 2.9 秒太长了。 （我完全同意。）

您可以从 Google 获得一份扩展报告，告诉您如何加快移动加载时间，但这些建议与您在开发方面所做的更新没有什么不同。 例如：

我们已经知道这一点。 但是，如果您（或您的开发人员）尚未实施任何这些修复，那么这是一个很好的清单。

也就是说，我没有将您指向此工具，因此您可以一遍又一遍地进行相同的优化，期望相同的结果。 他们总是对精神错乱的定义说什么？

相反，我认为您应该将其用作快速直觉检查：

我的移动网站在 Google 眼中是否足够快？ 不？ 然后，它在您的访问者眼中也不够快。

“

如果您想真正将这一点带回家，请滚动到“测试我的网站”分析页面的底部，并通过影响分析计算器计算您的数字：

如果您不完全相信您需要进一步降低 3 秒的移动速度，请查看仅 0.5 秒对您的月度底线的财务影响。

网页设计师可以做些什么来优化移动网站的速度

在您采用以下设计技巧和策略时，让 Web 开发人员处理所有必要的速度优化，例如缓存和文件缩小：

1. 从 CDN 托管字体

在为移动体验设计字体时，您必须担心的事情已经够多了，您可能不想听到这些……但是在加载时，自定义 Web 字体很糟糕。 事实上，最近有两个案例研究证明了为什么自定义 Web 字体不利于页面加载速度。

值得庆幸的是，CDN 最终可能会成为您的救命稻草。

停机猴子示例

第一个来自停机猴子。 在本案例研究中，Downtime Monkey 通过各种优化将页面速度提高了 58% — 其中两个与他们如何为网站提供字体有关。

对于他们的 Font Awesome 图标，他们决定从 CDN 托管它们。 然而，Font Awesome 自己的 CDN 被证明不可靠，所以他们改用 Bootstrap CDN。 结果，这为他们节省了每页加载 200 到 550 毫秒。

对于他们的谷歌字体“小屋”，他们决定从谷歌 CDN 托管它。 然而，有趣的是，当他们之后在网站上进行页面速度测试时，他们收到了与字体相关的优化建议。

似乎他们放在网站头部的链接减慢了页面的渲染速度。 因此，他们必须实施一种解决方法，允许字体异步加载，而不会在加载时损害页面的显示。 他们使用 Web Font Loader 解决了这个问题，结果每次页面加载节省了 150 到 300 毫秒。

布莱恩杰克逊的测试

Kinsta 的首席营销官 Brian Jackson 为 KeyCDN 撰写了一篇文章，展示了在网站上提供自定义 Web 字体的最佳方式。

您可以在他的示例中看到他提出了一些优化建议，例如限制哪些样式和字符集可在网站上使用。 然而，真正有趣的是他对 CDN 托管的实验。

首先，他隔离了最流行的 Google 字体并测试了它们通过 Google 的 CDN 加载的速度：

Open Sans 加载速度最快。

但这不应该自动使 Open Sans 成为您尝试加快网站速度的最佳选择。 毕竟，Opens Sans 是一种必须从 Google 的服务器提供的 Google 字体。 与不从外部来源提取的网络安全字体 Arial 进行比较时，情况如下：

Arial 以将近 200 毫秒的速度击败 Open Sans。

在我们继续之前，我只想说这是解决字体加载缓慢的一种方法：与其使用外部托管的字体，不如使用您的系统字体。 使用它们进行设计可能不那么令人兴奋，但它们不会强迫用户坐下来等待您的网站加载，从而在此过程中让您的访问者和客户付出代价。

您可能会认为下载和托管您的 Google 字体会更有意义。 这样一来，您就不必在使用哪种字体上做出妥协，并且可以缩短正常加载速度的时间。 正确的？

嗯，Brian 也很好奇，所以他做了一个测试：

从本地服务器提供服务时，Open Sans 的加载时间为 0.530 毫秒。 这不是一个巨大的差异，但它显然不是正确的方向。

那么，结论是什么？ 好吧，你有几个选择。

1. 您可以使用网络安全字体，并首先避免使用外部托管字体所带来的问题。
2. 您可以使用 Google 字体并确保它是通过 Google 的 CDN 托管的。
3. 您可以下载 Google 字体并将其上传到您自己的 CDN（如果您可以从那里更快地加载它的话）。

无论哪种方式，从加载速度更快的位置托管字体和图标都可以帮助您优化网站的性能。

2.停止使用繁琐的设计元素

下面的列表在某种程度上是对以前讨论过的主题的重新散列，所以我不想浪费你的时间来尝试在这里重新创建轮子。 但是，我确实认为这种删除不必要的设计元素（尤其是较重的设计元素）以优化移动体验的策略值得在这里总结一下：

停止页面广告

当我写到你应该在移动网站上放弃的元素时，我称广告是你可以轻易丢弃的东西之一。 我仍然坚持这个信念。

首先，广告是由第三方提供的。 每当您必须调用另一方的服务器时，您在等待他们将内容传送到您的页面时，都会进一步增加您自己的加载时间。

其次，仅美国就有超过 26% 的人口在他们的设备上使用广告拦截技术，因此他们无论如何都不太可能看到您的页面广告。

相反，请使用将广告从您的网站上移开的获利方法，增加您自己的现场转化率，并且不会耗尽您的服务器资源：

• 再营销
  让您的跟踪像素跟踪网络上的访问者，然后在其他人的网站上投放您自己的广告。
• 每次点击付费
  如果您可以在 Google 中确定按点击付费的广告公式，那么您可以赚到很多钱。
• 社交媒体广告
  如果您的网站定期发布新内容并且您有令人信服的报价，则这些特别容易运行。

停止弹出窗口

我知道谷歌说移动弹出窗口在某些情况下是可以的。 但是，如果您正在使用 WordPress 或其他内容管理系统构建网站，并且您正在使用插件来创建这些弹出窗口，那将会减慢您的加载时间。 它可能不会太多，但你会注意到差异。

ThemeIsle 决定对某些插件如何影响 WordPress 网站速度进行一些分析。 以下是他们测试每个插件对加载时间的影响时发生的情况：

诚然，一些插件被编码为比其他插件更轻量级，但在加载时间上总会有某种差异。 根据该数据，差异可能小至 0.01 秒，大至 0.29 秒。

如果您知道弹出窗口在移动网络上并不是真正的犹太洁食，为什么还要碰运气呢？ 取而代之的是，将促销优惠、cookie 通知或公告放在您的网页上。

停止繁琐的联系渠道

不要忘记您网站的联系渠道。 特别是，您必须小心设计移动表单。 当然，其中一部分与用户填写一个实际需要多长时间有关。 但是，您还应该考虑冗长或多页的表单对加载速度的影响。

一般来说，您的移动表单应该是精简的——只包含绝对必要的内容。

还有另一种思想流派需要考虑。

您可以完全放弃联系表格，这是我在谈论用聊天机器人取代移动表格的趋势时讨论过的。 有些网站已经删除了他们的表格并留下了常见问题解答、电子邮件地址和电话号码等信息，供访问者在需要联系时使用。 从加载的角度来看，这肯定会减轻负担。 我只是不知道它是否适合用户体验。

3.创建一个单页网站

上面的技巧将是最简单和最快的方法，因此如果客户或 Web 开发人员向您提出网站太慢的问题，您绝对应该从那里开始。 但是，如果页面速度测试仍然显示网站加载时间超过 2.5 秒，请考虑采用不同的方法重新设计网站以优化速度。

正如 Adam Heitzman 在 Search Engine Journal 的一篇文章中所说：

“单页网站通常更容易转换为移动设备，用户发现它们易于导航。”

但这是否意味着单页网站的加载速度总是比多页网站快？ 当然不是。 但是，大多数专业设计师出于非常特定的目的选择单页设计而不是多页设计。 DevriX 有一个很好的图表总结了这一点：

需要明确的是，我并不是建议您将您的网站变成单页应用程序 (SPA)。 如果您想通过服务人员加速客户的数字资产，PWA 是一个更好的解决方案。 （关于下一点的更多信息。）

相反，我的建议是，如果您的客户满足某些条件，您可以将多页网站转换为单页网站：

• 专注于极其狭窄和单一的企业。
• 不需要太多内容来表达他们的观点的网站。
• 您需要为其排名的关键字范围有限。

也就是说，如果您正在设计一个符合这三个标准（或至少三分之二）的网站，您实际上可以将您的网站移动到更简单的单页设计。

由于单页网站迫使您事半功倍，有限的内容和功能自然会创建一个轻量级的网站。 即使您确实稍微突破了限制，您仍然可以像 Tempus 那样为移动设备创建一个加载速度更快的网站：

这个单页网站的酷炫之处在于它不会吝啬出售豪宅所需的大量图像。 然而，它的移动网站加载时间为 2.1 秒。

另一方面，并​​非所有单页网站的构建都考虑到了速度。 以开发者 Davide Marchet 的网站为例：

由于动画超载，页面在移动设备上加载需要 5.4 秒。 您甚至可以从 Think with Google 提供的屏幕截图中看到这一点。 那里看到的图像实际上是在背景中加载第一个动画时出现的消息。

因此，如果您希望使用单页设计来解决您网站的性能问题，我建议您要小心。 设计需要简单，超级专注并且不受脚本和动画效果的影响，这些脚本和动画效果会抵消将内容缩减到一页的好处。

4. 将您的移动网站变成 PWA

根据 Google 的说法，每个 PWA 都具有三个特征：

1. 可靠的
2. 快速地
3. 引人入胜

速度是渐进式 Web 应用程序的固有组成部分，这要归功于它们所构建的服务工作者。 因为服务工作者存在于 Web 浏览器之外并且不依赖于用户网络的速度，所以他们可以更快地为访问者加载缓存的内容。

我还要说，因为 PWA 的设计更类似于原生移动应用程序的设计（至少是它的外壳），这迫使设计本身比移动网站更加精简。

如果您在实施所有您应该做的传统性能优化后努力加快您的网站速度，那么现在是将您的移动网站变成 PWA 的好时机。

让我告诉你为什么：

想象一下，您正计划和朋友一起去芝加哥旅行。 你在酒吧或咖啡店讨论这次旅行，然后意识到你不知道该住在哪里。 因此，您在其中一部智能手机上搜索“芝加哥市中心酒店”。

您还没有考虑购买房间； 你只是想研究你的选择。 因此，您单击 Google 为您提供的两个热门列表的网站链接。

这是 Best Western River North Hotel 的渐进式网络应用程序：

这是位于芝加哥市中心附近的 Palmer House Hilton 的网站：

对于初学者来说，PWA 的外观更好看，也更容易在智能手机上导航，因此它将在那里赢得主要积分。 还有速度问题：

River North Hotel 在移动设备上的加载时间为 2.4 秒，而其竞争对手 Hilton 在 4 秒内加载。 （您实际上可以在希尔顿屏幕截图中看到该网站尚未完全加载。）这是访问者肯定会注意到的差异。

即使我们没有在竞争网站之间进行并排比较，River North Hotel 的 PWA 也会将其以前的移动网站从水中吹走。

为他们开发 PWA 的机构 Brewer Digital Marketing 分享了他们进行转换后发生的事情。 该酒店的收入增加了 300%，通过 PWA 预订的夜数增加了 500%。

5. 将您的网站或博客转换为 AMP

我们要感谢 Google 为移动网络提供的另一个快速设计技巧。 这个被称为加速移动页面，简称 AMP。

最初，发布 AMP 是为了帮助出版商精简他们的博客或新闻页面，以便在移动设备上更快地加载。 但是，AMP 是一个 Web 组件框架，您可以使用它来设计整个网站或仅设计其中的特定部分（如博客文章）。 实施后，页面几乎可以立即从搜索中加载。

为什么 AMP 加载速度如此之快？ 有几个原因：

使用 AMP，您只能在您的网站上加载异步 JavaScript 和内联 CSS，这意味着您的代码不会阻塞或延迟页面呈现。

图像也是加载时间变慢的另一个原因。 但是，AMP 通过在资源（例如图像、广告等）之前自动加载页面布局来解决这个问题。将其视为一种延迟加载的形式。

它还有很多其他功能，但基本思想是它消除了倾向于拖累网站的元素，并迫使设计师主要依赖轻量级 HTML 来构建他们的页面。

如果您想看到一个实际的例子，您可以查看几乎所有领先的数字杂志或新闻网站。 如果您不熟悉 AMP 内容，只需在 Google 搜索中查找网页名称旁边显示的闪电图标即可。 像这样：

Gizmodo 是 AMP 内容的一个很好的例子：

事实上，当 Gizmodo 在 2016 年过渡到 AMP 时，它在性能方面看到了巨大的提升。 它的页面速度提高了 300%，因此页面展示次数增加了 50%。

如果你真的想充分利用 AMP 速度，Mobify 建议将 AMP 与你的 PWA 配对。 这样，您可以为访问者快速加载您的网页：

Mobify 报告 AMP 的加载时间（来源：Mobify）

然后，使用 PWA 维持这些快速加载时间：

Mobify 报告 PWA 的加载时间（来源：Mobify）</>

请小心使用 AMP 和 PWA。

看看上面的表格，你会发现一些网站已经实施了这些快速设计策略，但它们仍然没有超过谷歌的 2.5 秒移动加载基准。 仅仅因为两者都有更快加载网页的承诺，这并不一定意味着您的网站会自动闪电般快速。

包起来

随着谷歌在桌面端奖励移动网站方面做得更多，这实际上并不是一个你可以长时间使用的问题。 您网站的所有版本（尤其是移动版）都必须针对用户体验进行优化。

这意味着必须优化设计、代码、内容以及其中和周围的所有其他内容。 一旦开发人员处理了传统的性能优化以加快网站速度，就该让设计师自己做出一些改变了。 在某些情况下，简单的更改（例如如何通过网站提供字体）会有所帮助。 在其他情况下，可能需要考虑更激烈的问题，例如将您的网站重新设计为 PWA。

首先，考虑您客户的网站加载速度有多慢。 然后，检查是什么导致了移动设备上的最大问题。 一点一点地修剪脂肪，看看您作为设计师可以做些什么来补充开发人员的技术速度优化。