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. android 自定义gridview（导航）

    最近又重新做回安卓,做了个小项目.下绝心使用android studio,通过这一回实战,终于用上了.综合了前人的经验,搞了个自己满意的导航界面,用的是gridview. 代码: package co ...

  2. 实验二 Java基础（数据/表达式、判定/循环语句）

    实验二 (一)实验内容 编写简单的计算器,完成加减乘除模运算. 要求从键盘输入两个数,使用判定语句选择一种操作,计算结果后输出,然后使用判定和循环语句选择继续计算还是退出. 编写测试代码,测试验证. ...

  3. 记一次难忘的排错debug经历（找了5天左右）（涉及内存覆盖）

    strcpy和memcpy都没有处理内存覆盖问题. 函数描述 The memcpy function copies count bytes of src to dest. If the source ...

  4. luogu P3853 [TJOI2007]路标设置 |二分

    题目背景 B市和T市之间有一条长长的高速公路,这条公路的某些地方设有路标,但是大家都感觉路标设得太少了,相邻两个路标之间往往隔着相当长的一段距离.为了便于研究这个问题,我们把公路上相邻路标的最大距离定 ...

  5. select2的简单使用

    静态下拉列表 修改 type_template.html  引入JS <!-- slect2插件--> <link rel="stylesheet" href=& ...

  6. [转帖]Linux date命令的用法（转）

    Linux date命令的用法(转) https://www.cnblogs.com/asxe/p/9317811.html 1.命令:date 2.命令功能:date 可以用来显示或设定系统的日期与 ...

  7. https的原理入门

    现在基本上互联网上访问的地址都是使用HTTPS协议了,只有局域网才会使用HTTP协议,因此了解HTTPS十分重要. HTTP存在的问题 上过网的朋友都知道,网络是非常不安全的.尤其是公共场所有很多免费 ...

  8. HDU 2007-11 Programming Contest

    Can you find it? Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/10000 K (Java/Others ...

  9. 【01】Saltstack：从零开始 Saltstack

    写在前面的话 最近一直都在整理以前的乱七八糟的笔记,所以会有很多老旧的东西都会被拉出来重新遛遛.算是再度系统的进行学习. 关于 Saltstack 的一些概念 Saltstack 是基于 Python ...

  10. .net文件上传的坑记录

    传送门:https://www.cnblogs.com/akwwl/p/3573666.html 之前错误:使用layui与web uploader上传文件都报异常,后来终于找到原因是asp.net默 ...