如何优化您的网站以适应移动用户？
你确定你的网站是移动友好的吗？
你知道google引入了一个叫做mobile-first的新政策吗？
越来越多的网络用户放弃了台式电脑，转而使用移动设备浏览和购物。
响应式网页设计使得在所有平台上都能够创建可用的网站成为可能。但是，即使如此，响应式设计只是移动用户体验优化策略的一小部分。
如果您想要真正的性能优化，您还需要考虑其他选择。
这就是为什么我们如此强调将您的网站作为移动优先体验构建的原因。简单来说，移动优先意味着您的设计和内容首先针对移动用户进行了优化。
话虽如此，这篇文章并不是关于设计一个全新的网站的。相反，我们将会讨论一些基本的移动优先设计原则，并花一些时间关注优化移动用户体验的技术细节。
以移动设备为重点进行设计
网络主要是为台式电脑用户提供服务的原则而建立的。真正的网络，在技术上的真正进步，最好在美丽的全屏显示上展示。但是智能手机和其他移动设备也是存在的，是时候开始适应移动优先设计的概念了。
除了常识性的响应式设计之外，你还应该在移动优先的网页设计中实现哪些设计元素呢？
- 优先级。 移动屏幕受到可用显示空间的限制。此外，移动屏幕以垂直方式呈现内容，而不是台式机上更宽的水平结构。这意味着您必须使用优先级进行设计。哪些元素对用户来说最重要？如果有cta按钮，移动用户能够轻松地看到它们吗？
- 内容优先，颜色次之。在移动设计中，你可以做一些有趣的事情，但肯定不能像在桌面设计中那样。所以，首先要让内容展示出来。使你的文字和其他内容部分易于阅读和访问。移动屏幕对分散注意力的视觉元素不太宽容。
- 简单导航。在移动设备上，你不能随便点击任何地方然后返回到主页。当然，除非你事先计划了这种导航方式。而且你应该这样做。尽可能尝试使用返回顶部小部件，以及无缝的固定标题栏。
检查你是否做得正确的最好方法是使用你的手机（我经常这样做！）并访问你的网站。仔细检查一下事物的感觉和流程。
如果你坐在咖啡馆里或在机场等待飞机，轻轻拍拍旁边的人的肩膀，礼貌地请他们帮你检查一下你的网站。然后坐下来听听他们的反馈。大多数情况下，你会对人们对你网站用户体验的感知方式感到惊讶。
资源优化
你有多经常因为个人喜好而使用图像，而不是基于用户体验？这种情况确实会发生，如果你要创造性地去做，了解媒体优化的工作方式是很有价值的。
视觉元素，如照片、插图、图标和视频是网页上最大的带宽消耗者。
虽然没有一个确定的网页大小适用于所有人，但是小一些的网页大小意味着更快的加载时间是常识。
那么，你如何减少一些额外的kb或甚至mb的视觉内容呢？
- 调整图像大小。听起来很简单，对吧？但是，我已经无法计算有多少次我浏览移动网站只是为了加载背景中的1980 x 1200图像。相反，当适当时，应该提供全尺寸照片作为替代链接。根据所需的尺寸，调整大小可以减少总图像大小高达80%。然而，对于移动设备来说，最多不超过600-700像素的范围是完全没有理由的。
- 使用压缩减小文件大小。图像压缩/优化是使用第三方软件减少图像中存在的颜色数量的过程。这可以在不损失图像固有质量的情况下大幅减小文件大小。如果需要帮助压缩图像，可以参考我们全面的图像压缩工具集合。
- 探索替代文件格式。每个人都听说过png和jpeg文件格式。毕竟，它们是网络上的事实图像标准。但这种情况不会持续很久。数字图像传递的最新技术围绕着webp和svg文件格式。例如，svg可以自动缩放到屏幕大小，从而减少加载特定视觉组件所需的资源数量。
移动优先的用户体验优化是一种有意识的事情。冲动地设计意味着您不考虑您决策的长期影响。而有意识的方法可以帮助您从头开始以移动用户为中心构建。
有见地的：与直观的移动设计理念保持一致，您不必在移动设计中重复使用相同的视觉组件。在移动端用一些颜色背景代替一些背景图片不会损害用户体验。始终寻找节省带宽的方法，即使是微小的。
预加载和延迟加载
在需要花费大量时间阅读的页面上加载所有媒体资源是必要的吗？它可以帮助在用户访问之前渲染外部页面吗？
首先让我们看看preloaders，也称为浏览器提示。
预加载是页面告诉浏览器潜在导航机会的方式。例如，用户可能从页面a访问页面b。
通过预加载，用户可以在点击页面a上的导航链接之前渲染页面b。
请记住，预加载并不总是有效的，最终决策取决于浏览器。设备类型和带宽等因素被单独权衡。
最常见的预加载类型是什么？
- 预加载。 这种类型表示特定的url很可能是下一个导航选择。如果浏览器同意请求，它将自动缓存重要的页面资源，从而使下一个页面加载速度更快。
- 预渲染。 与上述类型只获取某些资源不同，预渲染将缓存整个页面。所有渲染的内容都存储在用户设备内存中。
- dns预获取。 dns预获取将解析指定的dns，不会做其他任何操作。因此，如果用户在您的站点上作出具体的“转折”，您实际上减少了导航所需的时间。
- 预连接。 与上述相同，但还建立了与tcp和tls连接的连接和握手。
一些预加载器的代码示例是什么？
由于预加载器使用动态html标签，您可以像预加载google字体或为在wordpress中预加载javascript资产创建自定义脚本。
顺便说一句，如果您使用wordpress，那么wp rocket可以帮助您大大提升站点性能。
现在您更了解预加载器了，让我们谈谈另一个热门话题：延迟加载。
什么是延迟加载？
无论您访问新网页（博客文章或静态网站）时，浏览器都会获取整个页面内容，然后将该内容作为本机浏览体验提供。在大多数情况下，您被迫下载整个页面，而实际上看不到除页面折叠之外的任何内容。
而使用延迟加载时，浏览器被告知仅加载（渲染）用户视口内的内容。因此，如果在某个页面上添加了大小敏感的照片或视频，只有当您的浏览器屏幕达到该部分时，这些文件才会显示。
如果您担心可能出现的seo问题，不必担心。yoast已确认google会渲染使用延迟加载的页面，并将其视为另一种性能提升信号。
我推荐使用的库是layzr.js——简单而有效的图像延迟加载！该脚本也在项目的主页上激活，因此您可以实时观看其执行情况。wordpress用户可以在公共插件存储库中找到数十个延迟加载插件。
web缓存
web缓存基于复制页面的版本的概念，可以随时向用户呈现。页面在首次访问网站页面时被缓存。当新用户尝试访问该页面时，web服务器将显示缓存版本，而不是提供实时版本。
任何类型的缓存的目标都是提高网站性能并减少所需的后端资源。根据您的缓存解决方案，您可以配置自定义间隔和其他基于触发的事件。
web缓存中最流行的名称包括varnish、squid和memcached。但请放心，市场上还有很多其他解决方案，特别是如果您是wordpress用户。
您还可以考虑注册一个cdn。
什么是cdn（内容分发网络）？
内容分发网络使用全球分布式服务器集群来提供极快的内容传递。cdn可以快速传输网络上的所有流行内容类型：视频、照片、javascript等。如今，大部分网络流量都经过某种形式的cdn。
关于内容分发网络要记住的一件事是，当在高需求的网站上使用时效果最好。因此，如果您每月只为几千名访问者提供服务，可能很难看到明显的改进。尽管如此，cdn是改善网站加载时间、降低带宽成本、增加内容可用性和加强整体安全性的绝佳解决方案。
如果您没有使用cdn的经验，我们建议尝试使用cloudflare – 他们提供永久免费计划，是一个很好的开始学习的平台。如果cloudflare不能达到您的期望，可以参考我们关于市场上最好的免费cdn提供商的帖子。
amp（加速移动页面）
google的amp项目是移动优化的超级加强版！本质上，amp会剥离页面的基本要素，以提供超快的加载体验，但也将内容可读性作为优先考虑。鉴于页面速度的重要性，你能否拥有勇气对几乎瞬间的加载时间说不？
好吧，所有这些时髦的词听起来很棒，但amp是如何工作的？
amp是一个精简的html页面，对可以显示的内容有一定限制。由于限制了执行脚本等操作，这导致加载时间更快，性能更好。
例如，javascript在amp中不起作用。当然，除非您使用github上提供的amp js库。使用js库可以实现某些结果，比如避免广告拦截器，但如果您想要真正的性能，那么原始的amp是更好的选择。
amp的有趣案例研究：
提交前进行测试
在当今时代，没有理由不为项目准备一个单独的演示环境。大多数云托管平台默认提供演示环境，所以请与您的提供商确认是否可以访问演示环境。
什么是演示环境？
嗯，最快解释这个概念的方法是看看您当前的线上网站。
这个网站就是您所谓的生产网站 – 代码、脚本和内容的实时版本构成的网站。在这个上下文中，演示环境是您生产网站的副本，是一个“假”的网站。在这个演示环境中，您可以进行更改或添加新功能，而不会破坏您的线上网站。
我总是回想起ashley harpp的帖子“在提交之前测试更改”，这个帖子给了我很多启发。
她对我们如何“欺骗”自己以避免某些事情的看法是一个明显的例子，说明我们在犯错时不愿意承担责任。尽管如此，ashley的帖子还包括了有关设置本地分段环境的有用工具的链接。
测试并没有听起来那么可怕。但是当你在生产服务器上意外删除整个数据库时，它肯定让人恐惧！
部署结构化数据标记
结构化数据标记通常被称为schema标记。它是一种提供有关网站内容的更多背景和详细信息的元数据。因此，添加这些结构化数据标记将帮助您的移动网站获得更多来自搜索引擎的支持。因此，搜索引擎将更准确地理解您内容的含义。
此外，结构化数据标记使用一种标准化格式（如json-ld、microdata或rdfa）对某些网站组件进行注释。
这包含有关产品、评论、评级、价格、日期、事件位置等信息。最终，搜索引擎将在扫描您的页面时提取这些数据，并用它来在serp中突出显示丰富的片段。
要应用结构化数据标记，您可以使用各种链接_25>模式标记生成器工具。使用该工具，您可以轻松地将结构化数据标记应用到您的网站上。您可以选择最适合您内容的模式，并创建所需的代码片段。
将结构化数据标记添加到您网站的html后，使用google结构化数据测试工具确保其正确性。
实现语音搜索选项
由于siri、google助手、alexa等虚拟助手的日益普及，启用语音搜索选项的网站越来越受欢迎。为了缩短浏览时间并增加灵活性，人们现在正在利用语音搜索选项。它帮助他们快速获取所需的信息并在不输入任何内容的情况下完成活动。
以下是您可以遵循的策略来实现语音搜索优化您的网站：
应用长尾关键词
语音搜索主要采用自然语言的查询形式。当使用语音助手时，用户通常用更随意的口吻说话。因此，通过使用长尾关键词优化您的内容，并回答关于您的类别或专业的常见问题。此外，考虑到访问者可能会问的具体问题，然后以清晰简洁的方式在您的内容中回答。
提供清晰简洁的回答
语音助手通常使用基于知识图或突出片段的信息来提供简洁、清晰的回答。因此，如果您可以以直接回答常见查询的方式来组织您的内容，那么您的网站被选择为语音搜索结果的可能性就会大大增加。
改善网站导航和结构
确保您的网站导航简单易懂，方便语音助手进行爬取和识别。只需优化导航菜单、标题和内部链接，以实现顺畅的用户体验。这将改善通过语音助手检索和检索您的材料。
锁定特色片段
特色片段是通过语音搜索结果获得关注的最佳方式，因为它们在搜索结果的顶部突出显示。因此，以这样的方式构建您的材料，使其被抓取并显示在特色片段中。例如：简洁而有效地回答问题，使用项目符号，以及以表格或列表的形式组织数据。
总结
为了实现流畅的移动体验，优化您的网站并不难。您只需要一点决心，并愿意在本文中介绍的方法上进行应用。您可能已经熟悉像内容缓存和延迟加载这样的内容，但是暂存环境或预加载器呢？
希望本文能对移动网站优化的现状有所启发。