如何针对移动用户优化您的网站?

您确定您的网站适合移动设备吗?

您知道 Google 推出了一项名为“移动优先”的新政策吗?

越来越多的网络用户不再使用台式电脑,而是使用移动设备浏览和购物。

响应式网页设计使创建在所有平台上都能在同一水平上工作的网站成为可能。 但是,即便如此,响应式设计也只是移动用户体验优化策略的一小部分。

如果您想要真正的性能优化,您还必须考虑其他选择。

这就是为什么如此强调将您的站点构建为 移动优先体验. 简而言之,移动优先意味着您的设计和内容首先针对移动用户进行了优化。

也就是说,这篇文章不是关于设计一个全新的网站。 相反,我们将研究一些基本的移动优先设计原则。 并且,花一些时间专注于优化移动用户的用户体验的技术细节。

#1:设计时考虑移动设备

网络主要建立在为桌面用户服务的原则之上。 真正的网络,真正的技术进步,最好在漂亮的全屏显示器上显示。 但是,智能手机和其他移动设备是一回事,是时候开始适应移动优先设计的概念了。

除了常识性的响应式设计,您还应该在移动优先网页设计中实施哪些其他设计元素?

  • 优先顺序。 手机屏幕仅限于可用的显示空间。 此外,移动屏幕以垂直方式呈现内容,这与桌面的更宽(水平)结构相反。 这意味着您必须使用优先级进行设计。 哪些元素对用户来说最重要? 如果有 CTA 按钮,移动用户看到它们的难易程度如何?
  • 内容第一。 颜色第二。 你可以用移动设计做一些有趣的事情,但肯定不在桌面设计的范围内。 所以,首先让位于内容。 使您的副本和其他内容部分易于阅读和访问。 移动屏幕对分散注意力的视觉元素的容忍度要低得多。
  • 轻松导航。 在移动设备上,您不能只点击任意位置并返回主页。 当然,除非您提前计划此类导航。 你应该。 尝试使用滚动到顶部的小部件,但也尽可能使用无缝的粘性标题。

检查您是否正确执行此操作的最佳方法是使用您的手机(我一直这样做!)并访问您的网站。 彻底检查事物的感觉和流动方式。

如果您正坐在咖啡馆里或在机场等候航班,请拍拍某人的肩膀并礼貌地请他们为您检查您的网站。 然后,坐下来听听他们的反馈。 大多数时候,您会对人们看待您网站的用户体验的方式感到惊讶。

#2:资源优化; 图片、图标等

您发现自己多久出于个人喜好而不是用户体验而使用视觉效果? 它确实发生了,如果您要发挥创意,了解媒体优化的工作原理是值得的。

照片、插图、图标和视频等视觉元素是网页上最大的带宽消耗者。

2018 年平均网页大小。按行业和不同国家列出。

虽然没有每个人都必须满足的固定网页大小,但众所周知,较小的网页大小等于更快的加载时间。

那么,如何从视觉内容中删除一些额外的 KB 甚至 MB?

  • 调整图像大小。 听起来很简单,对吧? 好吧,我已经数不清我浏览了多少次移动网站,只是为了在后台加载 1980 x 1200 的图像。 相反,应在适当的时候提供全尺寸照片作为替代链接。 根据您所需的尺寸,调整大小最多可以减少总图像大小的 80%。 但是对于移动设备,没有理由最多超过 600-700px 范围。
  • 通过压缩减小文件大小。 图像压缩/优化是使用第三方软件减少图像中存在的颜色数量的过程。 这可以做到一定程度,使您的照片不会失去其固有质量,但可以大大减小文件大小。 如果您在压缩图像方面需要帮助,只需看看我们全面的图像压缩工具综述。
  • 探索替代文件格式。 每个人都听说过 PNG 和 JPEG 文件格式。 毕竟,它们是网络上事实上的图像标准。 但不长久。 最新和最伟大的数字图像传输技术围绕 WebP 和 SVG 文件格式。 例如,SVG 可以自动 缩放到屏幕大小,减少加载特定视觉组件所需的资源数量。
  有多少人拥有 Netflix?

移动优先的用户体验优化只是一件需要注意的事情。 冲动设计意味着您不考虑决策的长期影响。 而有意识的方法可以帮助您从头开始考虑移动用户。

有见地: 与直观移动设计的概念保持一致,您不必在移动设计中重复使用相同的视觉组件。 删除一些背景图像并用彩色背景替换它们——在移动设备上——不会损害用户体验。 始终寻找节省带宽的方法,哪怕是最少量的带宽。

#3:预加载和延迟加载

是否有必要在需要大量时间阅读的页面上加载所有媒体资源? 而且,它是否有助于在用户访问之前呈现外部页面?

让我们先看看预加载器,也称为浏览器提示。

预加载器是页面告诉浏览器潜在导航机会的方式。 例如,用户可能会从页面 A 访问页面 B。

通过预加载,用户可以在点击页面 A 上的导航链接之前呈现页面 B。

请记住,预加载并不总是有效,最终决定权在浏览器。 设备类型和带宽等因素是单独权衡的。

最常见的预加载器类型是什么?

  • 预取。 此类型表明特定 URL 最有可能成为下一个导航选择。 而且,如果浏览器同意了请求,那么它会自动缓存重要的页面资源,这反过来又会大大加快下一个页面的加载速度。
  • 预渲染。 鉴于上述类型仅获取某些资源,prerender 将缓存整个页面。 所有呈现的内容都存储在用户的设备内存中。
  • DNS 预取。 DNS 预取将解析指定的 DNS,而不是其他任何内容。 因此,如果用户在您的网站上进行了特定的“转弯”,您实际上就是在削减导航所需的时间。
  • 预连接。 与上面相同,但也建立连接和握手,使用 TCP 和 TLS 连接。

预加载器有哪些代码示例?

<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="prefetch" href="folder/script.js" as="script">

<link rel="prerender" href="customURL.com/preview.html">

由于预加载器使用动态 HTML 标签,您可以 预加载谷歌字体等内容 或者创建自定义脚本以在 WordPress 中预加载 JavaScript 资产。

顺便说一句,如果您使用的是 WordPress,那么 可湿性火箭 可以帮助您增强您的网站。

现在您对预加载器有了更多的了解,让我们来谈谈另一个热门话题:延迟加载。

什么是延迟加载?

每当您访问新网页时,无论是博客文章还是静态站点,浏览器都会获取整个页面内容,然后将该内容作为本机浏览体验提供。 在大多数情况下,您被迫下载整个页面而实际上看不到折叠上方的内容。

而对于延迟加载,浏览器被告知加载(呈现)仅在用户视口内的内容。 因此,如果将尺寸敏感的照片或视频添加到某个页面,这些文件只会在您的浏览器屏幕到达网站的该部分时显示。

如果您担心潜在的 SEO 问题,请不要担心。 Yoast 已经证实 Google 确实呈现使用延迟加载的页面,并将其视为另一个性能改进信号。

我对图书馆使用的建议是 Layzr.js — 简单有效的图片延迟加载! 该脚本也在项目主页上激活,因此您可以实时查看它的执行情况。 WordPress 用户可以在公共插件库中找到许多延迟加载插件。

#4:网络缓存

Web 缓存基于复制页面版本的概念,然后可以随时将其呈现给用户。 页面在第一次访问网站页面时被缓存。 当新用户尝试访问该页面时,网络服务器将显示缓存版本,而不是提供实时版本。

  修复 Orcs Must Die Unchained 运行时错误

任何一种缓存的目标都是提高网站性能并减少所需的后端资源。 根据您的缓存解决方案,您可以配置自定义间隔和其他基于触发器的事件。

Web 缓存中一些最流行的名称是 Varnish、Squid 和 Memcached。 但请放心,市场上还有许多其他解决方案,特别是如果您是 WordPress 用户。

您还可以考虑注册 CDN。

什么是 CDN(内容分发网络)?

内容交付网络使用分布式服务器的全球集群来提供令人难以置信的快速内容交付。 一个 内容分发网络 可以快速传输网络上所有流行的内容类型:视频、照片、JavaScript 等。如今,大多数网络流量都通过某种形式的 CDN。

关于内容分发网络要记住的一件事是,它们在高需求网站上使用时效果最佳。 因此,如果您每月只为几千名访客提供服务,可能很难看到明显的改进。 尽管如此,CDN 是改善网站加载时间、降低带宽成本、增加内容可用性和增强整体安全性的绝佳解决方案。

如果您以前没有使用 CDN 的经验,我们建议您尝试一下 Cloudflare — 他们提供了一个永久免费的计划,这是一个很好的学习平台。 如果 Cloudflare 没有达到您的期望,请查看我们的帖子,了解市场上最好的免费 CDN 提供商。

#5:AMP(加速移动页面)

谷歌的 AMP项目 是类固醇的移动优化! 从本质上讲,AMP 将您的页面精简到只剩下最基本的部分,以提供超快的加载体验,同时也将内容的可读性放在首位。 考虑到页面速度的重要性,您能否鼓起勇气对近乎瞬时的加载时间说不?

好吧,所有这些流行语听起来都很棒,但是 AMP 是如何工作的呢?

AMP 是一种简单的 HTML 页面,对于可以显示的内容类型有一定的限制。 由于执行脚本等的限制,这会导致更快的加载时间和整体性能。

例如,JavaScript 不适用于 AMP。 当然,除非你使用 GitHub 上提供的 AMP JS 库. 使用 JS 库确实可以让您获得某些结果,例如避免广告拦截器,但如果您想要真正的性能,那么原始 AMP 是最佳选择。

AMP 的有趣案例研究:

#6:提交前测试

在当今时代,没有理由不为您的项目提供单独的暂存环境。 大多数云托管平台默认提供暂存环境,因此请咨询您的提供商以查看您是否可以访问。

什么是暂存环境?

好吧,解释这一点的最快方法是查看您当前的实时网站。

这个站点就是您所说的生产站点——您的站点所基于的所有代码、脚本和内容的实时版本。 在此上下文中的暂存环境是您的生产站点的副本。 如果您愿意,可以使用一个虚拟站点。 在这个暂存环境中,您可以在不破坏实际站点的情况下进行更改或添加新功能。

我总是回想起 Ashley Harpp 的帖子, 不要浪费时间——在提交之前测试更改.

她对我们如何“欺骗”自己以避免某些事情的看法是一个很好的例子,说明我们在犯错时不想承担责任。 尽管如此,Ashley 的帖子还包含指向用于设置本地暂存环境的有用工具的链接。

测试并不像听起来那么可怕。 但是,当您不小心删除生产服务器上的整个数据库时,确实很可怕!

结束语

优化您的网站以获得流畅的移动体验并不是那么困难。 您所需要的只是一点决心,并愿意应用本文中概述的方法。 很可能,您已经熟悉内容缓存和延迟加载等内容,但是暂存环境或预加载器呢?

希望这篇文章对移动网站优化的当前状态有所启发。