有粉丝把他的网站发给我，问为什么我们网站的移动端效果那么差？

其实我想说，不仅仅是你的网站移动端差，是有很多很多的网站移动端表现都特别差。所以我为此专门写出一篇关于移动端页面处理的知识。

移动页面的重要性

移动优先索引，有利于SEO

谷歌已经多次发出公告，优先索引移动端。2015 年谷歌算法变化调整了谷歌显示移动搜索结果的方式，针对移动设备优化的网站比没有优化的网站排名更高。2021年3月起，只有PC版的网页内容将不再被收录，移动优先索引意味着Google蜘蛛将以网站移动端内容作为索引的唯一内容。

移动端的流量普遍大于PC端

如果你做了一段时间的电商，如果你对数据极为敏感的话，那么你就会发现。新时代的流量移动端远远大于PC端。谷歌也是一样，特别是对于电子商务网站而言。所以我们应该重视移动端的表现。

影响网站速度的因素

代码、图片加载、视频加载、服务器配置和地区等

检测网站速度和移动端的工具

检测网站页面速度评分：https://developers.google.com/speed/pagespeed/insights/

检测网站打开速度：https://gtmetrix.com/

上面这两款工具我前面的文章提到过很多次了，这里我就不截图了。我说说下面这两款工具。都是针对移动端的。

https://search.google.com/test/mobile-friendly

你直接把域名放进搜索框，它能够测试出来结果，然后还会给出具体不适应的原因。你可以参照这些因素一一检查。

https://search.google.com/test/amp/result

这是测试你网站有没有做 AMP 页面 的工具，也会给出你具体的原因。

什么是AMP

AMP 是一个由Google 支持的项目 ，旨在通过使用 AMP HTML 的精简代码来加速内容的交付。AMP 是一种为静态内容（不会根据用户行为而改变的页面）构建网页的方法，它允许页面加载并在 Google 搜索中预呈现结果，比常规网站的 HTML 快很多。

AMP的组成部分

下面这一部分内容可能会让你看着有些犯困，因为会涉及到一些代码元素在里面。如果觉得无聊，可以选择略过，直接看下一段。

AMP HTML

AMP HTML 本质上是 HTML，只是会相对的对其有些限制。下面是一个简单的 AMP HTML 文展示：AMP HTML 中的大多数标签都是常规 HTML 标签，但是，一些 HTML 标签会替换为 AMP 特定的标签。这些自定义标记称为 AMP HTML 组件，它们使常见的标记模式易于以高效的方式实施。 AMP 页面 被搜索引擎和其他平台通过 HTML 标签发现。

我们可以选择页面的非 AMP 版本和 AMP 版本，或仅 AMP 版本。

AMP JavaScript (简称 JS)

AMP JS 库可确保快速呈现 AMP HTML 页面。JS 库实现了 AMP 的所有最佳性能实践，例如内联 CSS 和字体触发，它管理资源加载并为你提供自定义 HTML 标签以确保快速页面呈现。AMP JS 使来自外部资源的所有内容都异步化，因此页面上的任何内容都无法阻止渲染。JS 还使用其他性能技术，例如在加载资源之前预先计算每个页面元素的布局以及禁用慢速 CSS 选择器。

缓存

Google AMP 缓存用于提供缓存的 AMP HTML 页面。AMP 缓存是基于代理的内容交付网络，用于交付所有有效的 AMP 文档。缓存会提取 AMP HTML 页面、缓存它们并自动提高页面性能。

AMP的优点加快你网站移动端的打开速度

就这一点？是的，就这一点，但已足够。

对谷歌SEO

虽然 AMP技术并不能直接让你提升排名，但是它可以加快你的网站速度。而网站速度是影响谷歌排名的重要因素。所以它可以让你的SEO效果显著提升。

对用户

曾经看到过这样的数据：研究发现，如果你的网站加载时间超过 5 秒，则 37% 的访问者会选择退出。而移动端，用户选择停留的可能性更更低。在移动设备上浏览时，如果页面加载时间超过三秒，则有一半以上的访问会被退出。

提高用户的转化率

这一点我相信不用我多讲，大家也应该非常清楚。网站打开速度快了，用户的跳出率就会降低，随之而来的就是转化率的增加。

现实AMP 需要懂代码吗

了解了AMP的优点，相信很多小伙伴就会有疑问，那我实现它需要有代码的基础吗。如果你是不懂代码的小白，那我只能很遗憾的告诉你，是的，它需要了解代码。因为 AMP 计划涉及 HTML 代码和编程，因此 你们的IT 部门必须参与其中。或者你还可以找外面的服务公司让他们帮你解决这一难题。