WordPress的加速移动页面:你需要知道什么

加速的WordPress移动页面

自从2015下半年以来,加速移动页面WordPress的概念以及其他网站技术一直在讨论。网站开发者,WordPress的人,搜索引擎优化专家,和其他人与内容的创建或管理一直在谈论AMP项目。

但是AMP项目到底是什么呢?我们知道加速移动页面”指的是可以,好,加快你的页面在移动。理想情况下,与不使用AMP的网站相比,使用AMP的网站加载速度更快,并提供更好的用户体验。其他条件不变。

然而,是它吗?Should you just activate AMP on your WordPress website and forget all about it?本文回答所有的问题与加速移动web开发人员使用WordPress的页面应该意识到。

Accelerated Mobile Pages for WordPress: What developers need to know

AMP是什么?吗?

加速移动页面是一个开源项目,自称是:

对许多人来说,在移动网络阅读是一个缓慢的,笨重的和令人沮丧的经历,但这并不一定是这样。The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.

https://www.youtube.com/watch?V= WRPKROFQRQ0Q

安培的支持许多行业领导者–谷歌,,Pinterest甚至WordPress网站

别弄错了,谷歌确实是认真对待AMP。Search results on mobile devices already carry the AMP sign:

谷歌加速新闻网页

此外,即使是本地的Android应用程序,比如新闻和天气应用程序,也会携带支持它的页面的AMP签名:

AMP导致安卓

因此,这不是你可以完全忽略的东西。

开发人员应该知道音箱吗?吗?

我们知道HTML web页面往往构成,CSS and JavaScript.AMP关注这三个。它附带了一套自定义元素和规则让你坚持。

这是什么在加速移动WordPress的页面:

AMP的定制的HTML元素

大多数媒体中心的HTML元素定制放大器。这里的目标是替换和扩展已有的HTML元素的功能,这样你不需要大量的JavaScript完成的任务。

然而,这不是全部。放大器也有自己特殊的HTML元素,例如:AMP Pinterest,,amp-twitter,,amp-youtube,,放大器分析,,安普安姆,,amp-lightbox,,安培旋转木马,和安培广告

你可能从上面的名字猜到了,的一些元素是用来嵌入第三方内容。为什么如此?因为在处理外部内容时,如广告或嵌入的鸣叫,AMP需要定制元素,使其能够更快地加载所需的内容。你经常遇到移动广告加载太慢了,挂了整个页面?AMP试图治愈。

同时,记住,标准的HTML元素(img,,音频,,视频iframe)所取代amp-img,,amp-audio,,安培视频AMP IFRAME

所以,你想知道是否使用这样的专门元素是值得的?考虑这个:amp-img标签目前提供了绝对的srcset支持,即使是旧的浏览器不支持。

For a full list of AMP's custom components and their service-specific implementation,退房官方文件

自定义规则的音箱

CSS和JavaScript时,AMP已经习惯了规则。如果你真的认真支持AMP的编码,一定要严格遵守。

首先,如果你是自定义JavaScript的粉丝,为了创建闪亮的元素,忘记所有。AMP不允许定制的JavaScript。然而,你可以利用上面提到的自定义元素来达到同样的效果:安培旋转木马amp-lightbox。换句话说,音箱有自己的JS库,这可能是唯一的图书馆你可以把。

外部字体,另一方面,支持,but only from the popular sources such as Google Fonts.

然而,the biggest custom rules are for CSS.CSS几乎总是应内联。这使得使用外部样式表比平时更加复杂。当然,许多WordPress开发人员用于链接外部样式表。如果是这样的话,在处理WordPress的加速移动页面时,可以使用PHP函数将样式表的内容内联输出。

同时,最重要的是,50岁以下的CSS代码应该是KB。许多流行的框架,当缩小,倾向于运行在80 - 90 KB大小。所以这个特定的规则肯定是你需要知道的东西。

For implementation examples,一定要检查AMP文档

最后,AMP also has a special CDN,即谷歌AMP缓存,可以用来取回,缓存和提供所有有效的与页面。如果你的网站没有一个CDN,这可能对你有用。如果,然而,你已经使用CDN,Google AMP Cache is not required.

最大的问题是:AMP能使一切变得超级快速吗?吗?

对上述问题的回答略显开放。如果你的网站是劣质的,或者如果你有移动游客UX投资几乎为零,AMP可以给你极大的鼓舞。

然而,你应该知道AMP不是银弹。在一天结束的时候,,提高页面加载时间的技术已经存在了很长一段时间——预取,prerendering,延迟加载,等。AMP试图把所有的随着性能优化调整,并提供一个平滑的移动浏览体验。

加速移动页面WordPress和其他工作先加载至关重要的元素,这样客人可以马上开始浏览页面。此后,它加载剩余的媒体。

自然地,上述方法,以及编码规则的地方,显示AMP更多地关注优化和效率。它不是“improve your page speed a million times!”解决方案,许多人声称它。

现在,你真的应该使用加速移动页面WordPress网站吗?吗?

AMP(见肯定是快)但它并不是唯一的方法来让你的页面更快。然而,速度不是这里唯一的考虑因素。有一个实际的方面的东西以及。AMP的速度增长,你最好用它而不是忽略它。以“AMP”出现在搜索结果中,和别人谈论它的重要性,错过AMP可能并不是最明智的选择。

另外,如果你仍然感到困惑,遵循黄金法则:谷歌推荐AMP主要用于新闻网站和博客文章。对于其他一切,如你的着陆页,或投资组合的网站,你可以解雇AMP。

幸运的是WordPress用户,有一个神奇的免费插件,负责一切你:

你可以将它安装在你的网站,你马上就准备好了!它有它的缺点,虽然。这就是约瑟夫德瓦克指出在他的后音箱系列。Worth a read for sure if you're interested in running Accelerated Mobile Pages for WordPress properly.

你觉得加速移动页面?尝试过了吗?请在下面的评论中分享你的观点。

别忘了加入我们加快你的WordPress站点上速成班。通过一些简单的修复,你可以减少加载时间,甚至50 - 80%: