前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >wordpress怎么用AMP加速器呢

wordpress怎么用AMP加速器呢

作者头像
ytkah
发布2022-03-14 13:50:43
1.5K0
发布2022-03-14 13:50:43
举报
文章被收录于专栏:ytkahytkah

AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验。借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精美网站和广告。AMP项目已于2016年2月24日启动,数以千计的开发者成为这个项目的积极参与者。无数的网站现在都有AMP版本的页面,许多开发者正在学习使用AMP——在这里,我们和ytkah一起来学习使用WordPress来使用AMP。

  谷歌非常重视,这也是他们搜索引擎排名的标准之一。在这种情况下,谷歌正在使AMP几乎成为许多网站的必需品。在这篇文章中,ytkah将给大家介绍谷歌的加速移动页面项目的详细信息。这包括在您的WordPress站点中调用它的步骤。  

  AMP是什么?

  有些开发人员可能并不熟悉AMP。它是一个移动友好的框架,可以快速加载移动浏览器上的网页。它是一种开源技术,旨在为网站运营者有效地提高在移动设备上加载内容页面的速度和用户体验。所有这些增强都对广告收入产生零效应。

  如果您是一位经验丰富的开发人员,您可以通过全面的页面加载优化实现类似的增强。加速的移动页面使得这些优化非常容易执行,而不需要花费太多的时间和精力在移动布局上。

  对于那些已经为网站花费很多时间在SEO排名上的朋友,这只是增加更多的任务到他们的待办事项列表,当然,因为AMP页面也可以提高搜索引擎优化排名你的网站。这或许也是大企业采用AMP的主要原因。

  AMP 网页采用 3 大核心组件构建而成。

  1、AMP HTML 是为确保可靠性能而具有某些限制的 HTML。

  AMP HTML 本质上是使用自定义 AMP 属性扩展的 HTML。最简单的 AMP HTML 文件如下所示:

代码语言:javascript
复制
<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{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>
 <body>Hello World!</body>
</html>

  尽管 AMP HTML 网页中的大多数标记都是常规 HTML 标记,但部分 HTML 标记替换为了 AMP 专用标记(另请参阅 AMP 规范中的 HTML 标记)。利用这些自定义元素(称为 AMP HTML 组件)可以轻松高效地实现常见的模式。

  例如,amp-img 标记可提供完整的 srcset 支持,即使在尚不支持该标记的浏览器中也是如此。

  AMP 网页通过 HTML 标记被搜索引擎和其他平台 <link rel=""> 发现。您可以选择分别提供您网页的非 AMP 版本和 AMP 版本,而不仅仅提供 AMP 版本。

  2、AMP JS 库可确保快速渲染 AMP HTML 网页。  

  AMP JS 库 可实现所有 AMP 的最佳性能做法、管理资源加载,并为您提供上面提到的自定义标记,所有这些都是为了确保快速渲染您的网页。

  最重大的优化之一就是它可使来自外部资源的所有内容保持异步,让网页中的任何内容都能毫无阻碍地渲染。

  其他性能技术还包括:将所有 iframe 沙盒化,加载资源之前对网页上每个元素的布局进行预先计算,以及禁用性能缓慢的 CSS 选择器。

  3、Google AMP Cache 可用于提供缓存的 AMP HTML 网页。

  Google AMP Cache 是一种基于代理的内容交付网络,用于交付所有有效的 AMP 文档。它可提取 AMP HTML 网页,对这些网页进行缓存,并自动改进网页性能。使用 Google AMP Cache 时,文档,所有 JS 文件及所有图片都从使用 HTTP 2.0 的同一来源加载,从而可实现最高效率。

  此外,Google AMP Cache 还带有内置验证系统,可确认网页能够正常工作,并且不依赖于外部资源。此验证系统运行一系列断言,确认网页的标记符合 AMP HTML 规范。

  另一个版本的验证器与各个 AMP 网页捆绑提供。此版本可在网页渲染时将验证错误直接记录到浏览器的控制台中,让您可以看到代码中的复杂变化可能会对性能和用户体验产生怎样的影响

  wordpress怎么用AMP加速器呢?有插件可以实现,直接在wordpress后台插件市场搜索amp关键词就有很多可以用,有些是收费,有些样式单一,如果要好看的样式还是自己写比较好,当然你也可以找ytkah定制,详情可以查看amp模板展示amp网站也可以做得很好看

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-05-13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档