移动网站速度优化终极指南

已发表: 2016-03-09

mobile-speed

我们都被推向移动优先的消费市场，而中小企业在移动优化网站方面仍然落后。 以闪电般的速度测试互联网连接和 4G 标准已经到位，移动用户增长的时机从未如此美好。 根据ComScores 最近的全球移动报告，只有不到一半 (49%) 的前 100 家数字媒体资产的流量和访问者是移动的。 这是一个了不起的统计数据，它认为不适合移动设备的网站可能会失去一半的受众。

对于移动用户来说，唯一最重要的是速度（下图提供了桌面和移动设备的平均加载时间）。

加载时间

本移动网站速度优化指南中讨论的步骤和方法将列出在所有类型的移动设备上优化网站速度所需的所有必要修复。

如何在移动设备上检查您的网站性能？

为了使您的网站对移动设备友好，您需要做的第一件事就是检查其在移动设备上的性能。 您可以使用多种工具来完成此任务：

谷歌移动友好测试- 此工具分析 URL 并报告页面是否具有移动友好设计。 它提供了有关 Googlebot 如何在移动设备上正确查看网页的文档，并提供了有关如何使网页适合移动设备的分步建议。

谷歌页面速度洞察- 此工具分析您的网页并提供建议以使其更快。 此工具提供 3 个优先级指标，即红色（需要修复）、黄色（考虑修复）和绿色（未检测到问题），如下面的屏幕截图所示。

页面速度指标

GTMetrix - 此工具通过从 Google Page Speed Insights 和 Yahoo Slow 获取数据来提供性能报告。 它还提供了一个瀑布图，可用于发现诸如 404 之类的简单问题或更复杂的问题，例如外部资源阻塞页面呈现。

一旦您确定了问题并进行了初步修复，现在是时候通过实施以下建议来进一步加快网站速度了。

如何在移动设备上加速您的网站 - 减少加载时间和提高性能的 8 种方法

以下提示已经过尝试和测试，以提高您的网站在移动设备上的速度。 让我们一一了解这些。

1- 有一个正确配置的 CDN

速度和可访问性是优化搜索的首要考虑因素之一。 通过内容交付网络 (CDN) 利用全球内容缓存是促进 SEO 工作的好方法。 基本上，CDN 是分布在世界不同位置的服务器集合，它们动态缓存网站内容。 它是一项附加服务，可以在现有云托管服务之外使用。 它与包括 WordPress 网站在内的各种服务兼容。

CDN 缓存有助于通过离客户端最近的服务器传送缓存的内容。 反过来，这些通过更短距离的优势最小化延迟并因此加载时间（请参阅下图以了解拥有 CDN 如何显着减少加载时间）。 功能强大的 CDN 还附带基础架构优化，例如 DDoS 攻击保护和 Web 应用防火墙等。

cdn缓存

如何配置 CDN？

  • 向您首选的 CDN 提供商注册并添加您的网站。
  • 更改 DNS 设置以通过 CDN 网络路由流量。 更新A 记录并创建或更新CNAME 记录。 （下面提供了 Incapsula 的屏幕截图。您可以选择任何您喜欢的 CDN 提供商并在 DNS 设置中进行所需的更改）。

dns 指令

  • 就是这样！ 记录更新完成后，CDN 将开始将流量路由到您的网站。

拥有 CDN 将有助于缩短网站加载时间并努力改善用户体验。

2-利用加速的移动页面

10 月，Google 推出了 Accelerated Mobile Pages，以实现更快、更开放的移动网络。 Accelerated Mobile Pages 是特殊格式的网页，它使搜索引擎能够极快地显示内容，同时确保发布者控制其内容的外观和感觉方式。 据估计，使用开源 AMP HTML 代码可以更快地加载移动网站，并通过有效抑制搜索引擎加载时间来最大限度地降低跳出率。

如何在您的网站上实施 AMP？

要在您的网站上实施 AMP，请按照以下步骤操作：

A- 使用 AMP HTML（也称为主页的 AMP 版本）创建主页的单独版本。 下面提供了用于设计您的第一个 AMP HTML 页面的基本代码：

  • <!doctype html>
  • <html amp lang="zh" >
  • <头部>
  • <meta charset="utf-8" >
  • <title> AMP 页面的标题将显示在此处</title>
  • <link rel="canonical" href="此处为非 AMP 版本的 URL" />
  • <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" >
  • <脚本类型="应用程序/ld+json" >
  • {
  • "@context": "http://schema.org",
  • "@type": "新闻文章",
  • "headline": "发布内容的开源框架",
  • "发布日期": "2015-10-07T12:02:41Z",
  • “图片”： [
  • “标志.jpg”
  • ]
  • }
  • </脚本>
  • <style amp-boilerplate >body {-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both; -ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{ from {visibility:hidden}到{visibility:visible}}@-moz-keyframes -amp-start{从{visibility:hidden}到{visibility:visible}}@-ms-keyframes -amp-start{从{visibility:hidden }到{visibility:visible}}@-o-keyframes -amp-start{从{visibility:hidden}到{visibility:visible}}@keyframes -amp-start{从{visibility:hidden}到{visibility:visible} }</ style >< noscript >< style amp-boilerplate > body {-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style></noscript>
  • <script async src="https://cdn.ampproject.org/v0.js" ></script>
  • </head>
  • <正文>
  • <h1>欢迎使用 AMP </h1>
  • </正文>
  • </html>

B-为了插入图像，请使用以下代码：

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800" ></amp-img>

C- 使用通用 CSS 属性修改页面的显示和布局。 下面提供了一个示例样式代码：

<style amp-custom > /* 任何自定义样式都放在这里 */ body { background-color: white; } amp-img { 背景颜色：灰色； 边框：1px纯黑色； } </style>

D- 预览、验证和发布 AMP 页面。

E- 在页面的非 AMP 版本中添加 amphtmltag，以帮助搜索引擎机器人识别您网页的 AMP 版本：

<link rel="amphtml" href="你的网页的AMP版本在这里" />

AMP 页面的实时示例

这是一个 AMP 页面的实际示例这是正常页面. 您可以简单地查看每个页面的源代码，并注意速度和编码方面的差异。

AMP 学习资源

如需查找学习 AMP HTML 的代码，请参阅以下资源了解更多详情：

  • AMPProject.org
  • Github AMP 项目

3- 改善网站结构、内容并增强用户体验

在网站设计方面，网站架构是一个经常被忽视的领域，但它不应该是。 谷歌算法使用来自搜索者的信息，因此良好的用户体验意味着更高的排名。 如果您的网站结构不正确，则页面将需要更多时间来加载，并且用户将离开该网站。 这提供了糟糕的用户体验。

如何改善网站结构？

良好的搜索体验最重要的方面之一是拥有良好的网站结构，因为它有助于优化网站以实现更好的抓取。

为了增强您的网站结构，您必须遵循以下 8 个步骤：

  • 规划您的站点层次结构并保持其逻辑性。 此外，平衡类别和子类别的数量。 下面提供了一个改进的站点结构的示例：

精致的_figure2-1

  • 在命名您的类别和子类别时使用可搜索的关键字。 选择正确的名称将对优化您的网站大有帮助。
  • 具有用户友好的 URL 结构，并确保用户只需点击三下或更少的点击即可到达每个页面。
  • 尽可能多地添加附加链接。 除了增加网站的可导航性外，附加链接还有助于提高品牌声誉、提高点击率并缩短转化渠道。
  • 添加尽可能多的内部链接，但要确保它们都是相关的。 如果您正在寻找有关如何创建可靠内部链接的绝佳示例，请关注 Wikipedia。 增强的和 SEO 友好的内部链接结构将允许链接汁在所有内部页面中平等地传递，并允许每个页面在 Google 上排名良好，从而增加流量和转换。
  • 避免冗余类别和标签的问题。 Yoast 标签优化工具是解决 WordPress 网站上冗余标签问题的好方法。
  • 更频繁地链接到您最重要的页面并在首屏。 为了增加利润，您将最大链接汁传递给您的主要创收页面非常重要。
  • 遵循 2 点击规则，即只需点击 2 次即可从您的主页访问您的创收页面。

如何改善网站内容？

谷歌的排名算法非常重视内容质量。 熊猫更新专门旨在降低其网站上用户友好性较低或不太友好的网站的排名。 您在网站上呈现内容的方式与网站速度有很大关系。

以下是通过提高网站内容的质量和呈现方式来提高网站速度的 5 种方法：

  • 有一个博客。 搜索引擎喜欢独特而新鲜的内容，而拥有一个博客就是为了这个目的。 我建议将您的博客放在 WordPress 上，因为它提供了一些非常有用的插件，旨在减少整体加载时间。 在 WordPress 中创建博客非常简单。 有关分步说明，您可以下载有关如何创建博客的免费初学者指南. 一些可用于优化图像和缓存的插件是：EWWW Image Optimizer ,谷歌图书馆,WP优化和 WP SuperCache .
  • 使用 CSS Sprites来优化图像，因为它有助于将您的图像组合成 1 个一次加载的大图像。

CSS精灵

  • 使用响应式主题，因为响应式主题会考虑速度并加快加载速度。
  • 安装 Google Page Speed 和 MemeCached 在您的服务器上。 这将通过更改该网页上的资源以实施 Web 性能最佳实践来改善网页延迟和带宽使用。
  • 允许用户在您的网站上留下他们的评论。 真正的正面评论和评论是提高网站可信度的重要因素。 Getreviwed.org 是一个与数百名潜在博主携手合作的绝佳平台，他们希望分享他们对您的产品和服务的真实见解。 Disquss 和 Facebook 评论插件加载速度快，并帮助用户添加真实的评论和评论，从而优化您网站的整体内容质量，因为评论是可索引的。 因此，在不影响速度的情况下，您可以在您的网站上添加一些有价值的内容。
  • 使用浏览器缓存并实现 HTML5 Web 存储 API .

4-利用响应式设计

根据 Google 的移动 SEO 指南，响应式设计是 Google 推荐的设计模式。 谷歌还表示，它在移动搜索中将针对移动设备优化的网站排名更高。 此外，响应式设计还具有以下主要优势：

  • 链接指向单个域，从而提高搜索引擎排名。
  • 控制高跳出率，谷歌通常会使用它来降低排名。
  • 用户体验方面的增强，这是一个加分项，尤其是对于真正的受众，而不仅仅是机器人。

响应式设计

加快响应式网站的方法

为了加快您的响应式网站，请使用以下策略：

  • 使用条件加载，用于停止加载各种内容，包括社交小部件、图像、地图等，并且仅加载与特定条件匹配的内容。
  • 使用像Bootstrap这样的框架和基金会提供快速的移动功能和速度。
  • 使用根据可用屏幕尺寸自动调整自身大小的自适应图像。 这减少了加载完整图像文件的必要性。 相反，可以在不更改标记的情况下加载缩减和嵌入的 HTML 图像。
  • 减少 m-dot 重定向，并为您的网页选择单个 URL。
  • 使用FitText 之类的插件这使得字体大小灵活，以适应父元素提供的宽度。

5- 使用站点地图和 GWT 以获得更好的可抓取性

您的网站排名通常取决于小型机器人连续工作并爬过您的网站，根据搜索引擎优化因素对您的内容进行排名和分析。 通过允许爬虫有效地爬取您的网站并最大限度地减少停机时间，以下步骤有助于加快您的网站速度：

  • 创建站点地图并确保避免重复内容。 站点地图非常有用，因为它们为 Google 提供了有关您网页上特定类型内容的元数据，包括视频、图像和移动内容。 例如，站点地图视频条目可以指定视频运行时间、类别和年龄适当性评级，而站点地图图像条目可以包括图像主题、类型和许可。
  • 通过 Google WebMasters 工具优化 Google 抓取速度。 更多帮助，请参考：Google guide on how to change crawl rate .
  • 不断更新内容，因为 Google 漫游器对新鲜内容很着迷。
  • 使用可靠的服务器，并在需要时始终提供 HTTPS 安全站点。

6- 使用 Ajax 和触摸事件代替点击事件

移动用户讨厌点击一个资源然后等待另一个资源加载。 相反，更简单的解决方案是使用支持在触摸表面的不同位置同时触摸的 TouchEvents。 应用在按钮上的此类触摸事件可以大大减少加载时间并增加用户体验。

下图提供了用户在与移动设备交互时可能生成的一系列触摸事件。

触摸事件

此外，建议使用 AJAX，因为它允许从 Web 服务器获取数据，而无需刷新运行代码的页面。

7-优化客户端处理

在移动设备的情况下，由于较慢的 CPU 和较少的内存，客户端处理大大减少。 为了提高页面处理的效率，建议延迟加载图像和脚本等首屏内容。 下载和解析这些脚本可以安全地推迟到onload事件之后。 某些脚本仅在用户启动任何操作（如拖放）后才需要调用，因此，除非用户到达屏幕以便他准备好采取任何操作，否则不应加载此类脚本。

通过这些指导方针和网站基础设施的变化，您可以加快网站速度并获得更高的排名。 您是否实施了任何其他技术来帮助您大大减少网站的加载时间？ 请在下面的评论中告诉我。

精选相关文章：

  • 5 种工具来测试您的网站是否真的适合移动设备
  • 提高网页速度：优化您的 JavaScript
  • 问：我的移动网站应该使用什么 URL？ A：响应式设计

* 主图改编自 Eole . 保留部分权利.