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

Accelerated Mobile Pages for WordPress What You Need to Know 1

自2015年下半年以来,WordPress加速移动页面以及其他网站技术的概念一直在讨论中。网页开发者、WordPress用户、SEO专家以及所有与内容创作、管理相关或想要建立网站的人一直在讨论AMP项目。

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

然而,就这样而已吗?你是否应该在完成制作WordPress网站后立即激活AMP然后就不再管它了?本文将回答与WordPress加速移动页面相关的所有问题,这是使用WordPress的网页开发者应该了解的。

WordPress加速移动页面:开发者需要知道的

什么是AMP?

加速移动页面是一个开源项目,它是这样描述自己的:

对许多人来说,在移动端网页上阅读是一种缓慢、笨拙且令人沮丧的体验——但它不必是这样的。加速移动页面(AMP)项目是一个开源倡议,体现了出版商可以一次性创建移动优化内容并立即在任何地方加载的愿景。

AMP得到了许多行业领导者的支持——GooglePinterest甚至WordPress.com

不要误解,Google确实在认真对待AMP。移动设备上的搜索结果已经带有AMP标识:

news

此外,即使是原生Android应用,如新闻和天气应用,也对支持AMP的页面显示AMP标识:

amp results 1

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

开发者应该了解AMP的什么?

我们知道网页通常由HTML、CSS和JavaScript组成。AMP专注于这三者。它附带了一套自定义元素和规则供你遵循。

以下是WordPress加速移动页面的内容:

AMP的自定义HTML元素

大多数以媒体为中心的HTML元素都经过AMP定制。这里的目标是替换和扩展现有HTML元素的功能,这样你就不需要大量的JavaScript来完成各种任务。

然而,这并不是全部。AMP也有自己的特殊HTML元素,例如:amp-pinterestamp-twitteramp-youtubeamp-analyticsamp-animamp-lightboxamp-carouselamp-ad

你可能已经从上述名称中猜到,某些元素用于嵌入第三方内容。为什么?因为当处理外部内容(如广告或嵌入推文)时,AMP需要拥有自定义元素,以便能够更快地加载所需内容。你有多少次遇到过移动端加载太慢并导致整个页面卡住的广告?AMP试图解决这个问题。

那么,您是否在考虑使用这些专用元素是否值得?好吧,请考虑一下:amp-img 标签目前提供绝对的 srcset 支持,即使对于完全不支持它的旧浏览器也是如此。

有关 AMP 的自定义组件及其特定服务实现的完整列表,请查看官方文档

AMP 的自定义规则

在 CSS 和 JavaScript 方面,AMP 有自定义规则。如果您确实认真考虑使用 AMP 进行编码,请务必严格遵守这些规则。

首先,如果您喜欢使用自定义 JavaScript 来创建闪亮的元素,请忘了这一切。AMP 不允许自定义 JavaScript。但是,您可以使用上面提到的自定义元素来达到相同的效果:amp-carouselamp-lightbox。换句话说,AMP 有自己的 JS 库,而这可能是您唯一可以求助的库。

另一方面,外部字体是受支持的,但仅支持来自 Google Fonts 等热门来源的字体。

然而,最大的自定义规则是针对 CSS 的。您的 CSS 几乎总是应该内联的。这使得使用外部样式表比平时更复杂。当然,许多 WordPress 开发者习惯于链接外部样式表。如果是这样的话,在处理 WordPress 的加速移动页面时,您可以使用 PHP 函数来内联输出样式表的内容。

此外,最重要的一点是,CSS 代码应该小于 50 KB。许多流行的框架在压缩后往往会有 80-90 KB 或更大。所以这个特殊规则肯定是您需要注意的。

有关实现示例,请务必查看 AMP 文档

最后,AMP 还有一个特殊的 CDN,即 Google AMP Cache,可用于获取、缓存和交付所有有效的 AMP 页面。如果您的网站还没有 CDN,它可能对您有用。但是,如果您已经在使用 CDN,则不需要 Google AMP Cache。

重大问题:AMP 能让一切都变得超级快吗?

上述问题的答案略微开放。如果您的网站优化不佳,或者您几乎没有为移动访客做任何用户体验投资, AMP 可以为您提供显著的提升。

但是,您应该知道 AMP 不是万能的。提高页面加载速度的技术已经存在了很长时间——预取、预渲染、延迟加载等。AMP 试图将所有这些与性能优化调整结合起来,提供更流畅的移动浏览体验。

WordPress 的加速移动页面及其他平台的实现方式是这样的:先加载关键元素,这样访问者可以立即开始浏览页面。之后,再加载剩余的媒体内容。

自然,上述方法以及现有的编码规则表明,AMP 更注重优化和效率。它并不是许多人声称的“将页面速度提升一百万倍!” 解决方案。

那么,您是否应该实际使用 WordPress 网站的加速移动页面

AMP 确实很快(见此链接),但它并不是让页面变快的唯一方法。然而,速度并不是唯一的考量。事物还有实用性的一面。随着 AMP 的增长势头,使用它可能比忽略它更有利。既然搜索结果中出现了"AMP",而且每个人都在谈论它的重要性,错失 AMP 可能不是明智的选择。

幸运的是,对于 WordPress 用户来说,有一款出色的免费插件可以为你处理一切:

你可以在你的网站上安装它,立即就能使用 AMP!不过它也有缺点。Joost de Valk 在他的 AMP 系列文章中指出了这一点。如果你想正确地为 WordPress 运行加速移动页面,绝对值得一读。

你对加速移动页面有什么看法?尝试过了吗?请在下方评论中分享你的观点。

别忘了参加我们的 WordPress 网站速度优化速成课程。了解更多:

如何加速你的 WordPress 网站

通过一些简单的修复,你可以将加载时间减少 50-80% 🚀

时事通讯表单 – 侧边栏

名 *

你的邮箱 *

立即订阅!

如果你是人类,请留空此字段。

Δ

输入你的邮箱即表示你订阅我们的每周时事通讯。你可以随时更改主意。我们尊重你的收件箱和隐私。

分享你的喜爱

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注