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 文件如下所示：

<!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加速器呢的更多相关文章

  1. 解决由OpenShift自带的APC加速器造成的代码无法及时生效的问题

    如果你在使用你的Openshift时出现了这样的问题,那就说明APC加速器导致了此故障 1.上传后的代码运行效果没有变化 2.Wordpress翻来覆去自己重复升级一个版本(←Wordpress在自嗨 ...

  2. 用docker快速搭建wordpress博客

      WordPress是一个非常著名的PHP编写的博客平台,发展到目前为止已经形成了一个庞大的网站平台系统.在WP上有规模庞大的插件和主题,可以帮助我们快速建立一个博客甚至网站. 在Windows上可 ...

  3. Docker快速搭建WordPress博客网站

    WordPress WordPress是一个非常著名的PHP编写的博客平台,发展到目前为止已经形成了一个庞大的网站平台系统.在WP上有规模庞大的插件和主题,可以帮助我们快速建立一个博客甚至网站. 在W ...

  4. 让WordPress支持google AMP

    1.关于AMP 在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc.手机.ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accelerated Mobile ...

  5. 使用docker部署WordPress博客系统（win10企业版）

    docker介绍: docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相 ...

  6. Docker 镜像加速器

      Docker 镜像加速器 我们使用Docker的第一步,应该是获取一个官方的镜像,例如mysql.wordpress,基于这些基础镜像我们可以开发自己个性化的应用.我们可以使用Docker命令行工 ...

  7. 阿里云上Docker Compose部署wordpress

    先上官方文档: https://docs.docker.com/compose/wordpress/ 我的环境: [root@xyjk1002 ~]# cat /etc/redhat-release ...

  8. Dockerfile分离构建LNMP环境部署wordpress

    最近忙着写自己的项目,也把一个站点的bbs论坛打算迁移到Docker中,测试没发现啥大问题.在单台上面的架构如下:(往后我们也是要讲到compose和swarm调度的慢慢来) 1.首先我们先安装一下d ...

  9. LAMP 搭建，wordpress.xcache,powerdns及poweradmin

    一,概念 CGI: CGI全称是通用网关接口(Common Gateway Interface),是外部应用程序与与服务器之间的接口标准,是在CGI程序和web服务器之间传递信息的规程 CGI是一段程 ...

随机推荐

  1. [原创]App崩溃率统计工具推荐

    [原创]App崩溃率统计工具推荐 1 友盟(推荐) 友盟是一款比较成熟的工具,同时也可以展示留存,日活,事件等. 2 Bugly   腾讯的bugly统计数据也算是比较早的,可惜后续维护比较弱,功能与 ...

  2. 你还在为了JVM而烦恼么?（内存结构和垃圾回收算法）

    ​ 做JAVA也有接近2年的时间了,公司的leader说,做JAVA,三年是个坎,如果过了三年你还没有去研究JVM的话,那么你这个程序员只能是板砖的工具了.恰逢辞职,来个JVM的解析可好? JVM是J ...

  3. .NET Core：Token认证

    现在是WebAPI的时代,你所需要面对的不止是浏览器了,通常会使用Web, WebApp, NativeApp等多种呈现方式.其中诸如Ember,Angular,Backbone之类的前端框架类库正随 ...

  4. Mysql 生成不重复的随机数字

    在网上查找Mysql 生成不重复的随机数字 ,竟然没找到合适的例子. 其实思路很简单,利用MySQL现有的函数,然后进行加工处理,达到预期的结果.可以用到的MySQL函数为rand() ,以及 rou ...

  5. SpringBoot 分环境变量配置

    方式一:通过不同环境的配置文件 1.1 springboot目录下配置不同环境的配置文件 1.2 在application.properties中配置环境 1.3运行springboot的run方法就 ...

  6. 动手学深度学习9-多层感知机pytorch

    多层感知机 隐藏层 激活函数 小结 多层感知机 之前已经介绍过了线性回归和softmax回归在内的单层神经网络,然后深度学习主要学习多层模型,后续将以多层感知机(multilayer percetro ...

  7. 【layui】设置select只向下展开

    加css .layui-form-selectup dl { bottom: auto; }

  8. Java8 新特性 Steam() 中间有状态操作

    中间有状态操作 Java8 新特性 Stream 练习实例   中间操作,就是把数据处理成自己想要的类型,并且有状态操作,是在所有的数据基础上进行操作的.比如dictinct(去重),sorted(排 ...

  9. Cookie，Session，Token and Oauth

    Cookie 服务器端生成,发送给客户端,保存用户信息.下一次请求同一网站时会把该cookie发送给服务器. 应用:登录表单自动填充,同样 随着交互式Web应用的兴起,像在线购物网站,需要登录的网站等 ...

  10. HttpInvoker GET/POST方式

    1.GET方式 HttpGet httpGet = new HttpGet("http://localhost:8080/randomCode/getSouthUuid"); St ...