srcmini本文概述
你确定你的网站适合移动设备吗？
你是否知道Google引入了一项称为”移动优先”的新政策？越来越多的Web用户正在从台式计算机转移, 而是使用其移动设备进行浏览和购物。
响应式网页设计使创建可在所有平台上均匀工作的网站成为可能。但是, 即使那样, 响应式设计也只是移动设备UX优化策略的一小部分。
如果你想实现真正的性能优化, 则还必须考虑其他选择。
这就是为什么如此强调将站点构建为移动优先体验的原因。简单来说, 移动优先意味着你的设计和内容首先针对移动用户进行了优化。
话虽如此, 这篇文章不是关于设计一个全新的网站。相反, 我们将研究一些基本的移动优先设计原则。并且, 花一些时间专注于技术上, 以为你的移动用户优化用户体验。
＃1：在设计时考虑到移动设备
网络主要建立在为桌面用户提供服务的原则上。真正的网络, 技术的真正进步, 最好在漂亮的全屏显示器上显示。但是, 智能手机和其他移动设备是一回事, 是时候开始适应移动优先设计的概念了。
除了常识响应设计之外, 你还应该在移动优先Web设计中实现哪些其他设计元素？
- 优先顺序。移动屏幕限于可用的显示空间。同样, 移动屏幕以垂直方式呈现内容, 而不是台式机更宽的水平结构。这意味着你必须使用优先级进行设计。哪些元素对用户而言至关重要？如果有CTA按钮, 那么对于移动用户而言, 查看它们有多容易？
- 内容至上。颜色第二。你可以使用移动设计来做一些有趣的事情, 但是当然不能在桌面设计的范围内。因此, 首先让位于内容。使你的副本和其他内容部分易于阅读和访问。移动屏幕对分散视觉元素的宽容度要低得多。
- 轻松导航。在移动设备上, 你不仅可以点击任意位置并返回首页。当然, 除非你事先计划进行这种类型的导航。而且你应该。尝试使用Scroll-to-Top窗口小部件, 并尽可能使用无缝粘性标头。
检查你是否执行此权限的最佳方法是使用自己的手机(我一直都在这样做！)并访问你的网站。对事物的感觉和流动进行彻底的检查。
如果你正坐在咖啡馆中或正在机场中等待航班, 请戳一个肩膀, 礼貌地请他们检查你的站点。然后, 坐下来听听他们的反馈。大多数情况下, 你会以人们对你网站的用户体验的看法感到惊讶。
＃2：资源优化；图像, 图标等
为了个人喜好而不是用户体验, 你多久发现一次使用视觉效果？它的确发生了, 而且如果你要发挥创造力, 则必须了解媒体优化的工作原理。
诸如照片, 插图, 图标和视频之类的视觉元素是网页上最大的带宽消耗者。
2018年的平均网页大小。按行业和不同国家列出。
虽然没有每个人都必须设置的网页大小, 但通常的做法是, 较小的网页大小意味着更快的加载时间。
因此, 如何从视觉内容中裁剪一些额外的KB甚至MB？
- 调整图像大小。听起来很简单, 对吧？好吧, 我无法仅依靠浏览一个移动网站多少次就可以在后台加载1980 x 1200张图片。相反, 应在适当时提供全尺寸照片作为替代链接。调整大小最多可以减少图像总大小的80％, 具体取决于所需的尺寸。不过, 对于移动设备而言, 没有理由最多不要超过600-700像素。
- 通过压缩减小文件大小。图像压缩/优化是使用第三方软件减少图像中存在的颜色数量的过程。这样做的程度可以使你的照片不会失去其先天的品质, 但可以大大减小文件的大小。如果你需要压缩图像方面的帮助, 请浏览我们全面的图像压缩工具综述。
- 探索其他文件格式。每个人都听说过PNG和JPEG文件格式。毕竟, 它们是网络上事实上的图像标准。但不长久。数字图像交付的最新和最伟大的技术围绕WebP和SVG文件格式展开。例如, SVG可以自动缩放到屏幕大小, 从而减少了加载特定视觉组件所需的资源数量。
针对移动优先的用户体验优化只是一件事。冲动设计意味着你无需考虑决策的长期影响。考虑周到的方法可以帮助你从头开始考虑移动用户。
有见地：与直观的移动设计理念保持一致, 你不必在移动设计中重复使用相同的视觉组件。消除一些背景图片并在移动设备上将其替换为彩色背景不会对用户体验造成任何损害。始终寻找节省最小带宽的方法。
＃3：预加载和延迟加载
是否需要将所有媒体资源加载到需要花费大量时间才能读取的页面上？而且, 这有助于在用户访问外部页面之前呈现外部页面吗？
首先让我们看一下预加载器, 也称为浏览器提示。
预加载器是页面告知浏览器潜在导航机会的方式。例如。用户可以从页面A访问页面B。
通过预加载, 用户可以在单击页面A上的导航链接之前渲染页面B。
请记住, 并非总是可以预加载, 而是由浏览器做出最终决定。诸如设备类型和带宽之类的因素要分别权衡。
最常见的预加载器类型是什么？
- 预取。此类型表明特定的URL最有可能是下一个导航选择。而且, 如果浏览器同意了该请求, 则它将自动缓存重要的页面资源, 从而使下一个页面的加载速度更快。
- 呈现。上面的类型仅获取某些资源, 而prerender将缓存整个页面。所有呈现的内容都存储在用户的设备内存中。
- DNS预取。 DNS预取将解析指定的DNS, 仅此而已。这样一来, 如果用户在你的网站上进行了特定的”转弯”操作, 那么实际上就可以节省浏览时间。
- 预连接。与上述相同, 但也建立与TCP和TLS连接的连接和握手。
预加载器的一些代码示例是什么？
<link rel="dns-prefetch" href="customURL.com">
<link rel="preconnect" href="customURL.com">
<link rel="prefetch" href="folder/script.js" as="script">
<link rel="prerender" href="customURL.com/preview.html">由于预加载器使用动态HTML标签, 因此你可以预加载Google字体之类的内容, 也可以创建自定义脚本以在WordPress中预加载JavaScript资产。
顺便说一句, 如果你使用的是WordPress, 那么WP Rocket可以帮助你增强网站的性能。
现在, 你对预加载器有了更多的了解, 让我们来谈谈另一个热门话题：延迟加载。
什么是延迟加载？
每当你访问新网页(无论是博客文章还是静态站点)时, 浏览器都会获取整个页面内容, 然后将该内容作为本机浏览体验。在大多数情况下, 你被迫下载整个页面, 而实际浏览的内容并没有超出折叠的范围。
延迟加载会告诉浏览器加载(呈现)仅在用户视口内的内容。因此, 如果在某个页面上添加了尺寸敏感的照片或视频, 则这些文件仅在你的浏览器屏幕到达网站的该部分时才会显示。
而且, 如果你担心潜在的SEO问题, 请不要担心。 Yoast已确认Google确实渲染了使用延迟加载的页面, 并将其视为另一个性能改进信号。
对于使用的库, 我的建议是Layzr.js-简单, 有效的图像延迟加载！该脚本也已在项目的主页上激活, 因此你可以实时查看其执行情况。 WordPress用户可以在公共插件存储库中找到数十个延迟加载插件。
＃4：Web缓存
Web缓存基于复制页面版本的概念, 然后可以随时将页面呈现给用户。页面在第一次访问网站页面时被缓存。然后, 当新用户尝试访问该页面时, Web服务器将显示缓存的版本, 而不是提供实时版本。
任何类型的缓存的目的都是为了提高网站性能并减少所需的后端资源。根据你的缓存解决方案, 你可以配置自定义间隔和其他基于触发器的事件。
Web缓存中一些最受欢迎的名称是Varnish, Squid和Memcached。但是请放心, 市场上还有许多其他解决方案, 尤其是如果你是WordPress用户。
你也可以考虑注册CDN。
什么是CDN(内容交付网络)？
内容交付网络使用分布式服务器的全局群集来提供令人难以置信的快速内容交付。 CDN可以在网络上快速传输所有流行的内容类型：视频, 照片, JavaScript等。如今, 大多数网络的流量都通过某种形式的CDN传递。
关于内容交付网络要记住的一件事是, 它们在需求较高的网站上使用时效果最佳。因此, 如果你每个月只为数千名访客提供服务, 那么很难看到明显的改善。尽管如此, CDN是改善网站加载时间, 降低带宽成本, 提高内容可用性以及增强整体安全性的绝佳解决方案。
如果你没有CDN的使用经验, 我们建议你试用Cloudflare-它们提供了永久的免费计划, 并且是开始学习的绝佳平台。如果Cloudflare达不到你的期望, 请查看我们的帖子, 获取市场上最佳的免费CDN提供商。
＃5：AMP(加速的移动页面)
Google的AMP项目是针对类固醇的移动设备优化！本质上, AMP将你的页面精简为基本内容, 以提供超快速的加载体验, 同时也使内容可读性成为重中之重。鉴于页面速度非常重要, 你是否可以鼓起勇气对几乎瞬时的加载时间说不？
好的, 所有这些流行语听起来都很不错, 但是AMP实际上如何工作？
AMP是一个精简的HTML页面, 对于可以显示哪种内容有一定的限制。由于执行脚本等的限制, 这将导致更快的加载时间和整体性能。
例如, JavaScript不适用于AMP。当然, 除非你使用GitHub上提供的AMP JS库。使用JS库可以使你获得某些结果, 例如避免广告拦截器, 但是如果你想要真正的性能, 那么原始AMP是可行的方法。
AMP实例
如果你是WordPress用户, 则在大多数情况下, 将在插件的帮助下将AMP添加到你的博客中。但是, 如果你使用的是自定义网站, 则首次添加AMP可能会有些挑战。
这就是AMP by Example派上用场的地方。该站点是实际平台的辅助项目, 它详细介绍了AMP可能实现的每个角落。每个组件和效果均随附提供的演示, 因此你可以看到它的外观。
AMP有趣的案例研究：
- Terra通过AMP提升移动收视率
- 印度时报报道的收益率提高了1.5倍
- Fastcommerce通过建立AMP-first为客户推动转化
＃6：在提交之前进行测试
在当今时代, 没有任何理由不要为你的项目提供单独的暂存环境。默认情况下, 大多数云托管平台都提供暂存环境, 因此请与你的提供商联系, 以查看是否可以访问其中一个。
什么是暂存环境？
嗯, 解释这一问题的最快方法是查看你当前的实时网站。
这个站点就是你所谓的生产站点-站点所基于的所有代码, 脚本和内容的实时版本。在这种情况下, 登台环境是生产站点的副本。一个虚拟站点(如果愿意)。在这种暂存环境中, 你可以进行更改或添加新功能, 而不会破坏你的实时网站。
我总是回想起Ashley Harpp的帖子, 不要浪费时间-在提交之前测试更改。
她对我们如何”欺骗”自己避免某些事情的看法是一个很好的例子, 说明了我们在犯错时不想承担责任。不过, Ashley的帖子中还包含用于设置本地暂存环境的有用工具的链接。
测试并不像听起来那样可怕。但是, 当你意外删除生产服务器上的整个数据库时, 这肯定会令人恐惧！
结语
优化你的网站以获得流畅的移动体验并不那么困难。你所需要的只是一点决心, 并愿意在本文中应用概述的方法。你可能已经很熟悉诸如内容缓存和延迟加载之类的内容, 但是登台环境或预加载器又如何呢？
希望这篇文章对移动网站优化的当前状态有所启发。随时发表评论或推荐其他解决方案。
评论前必须登录！
注册