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. springcloud(五,多个服务注册中心eureka)

    spring cloud (一.服务注册demo_eureka) spring cloud (二.服务注册安全demo_eureka) spring cloud (三.服务提供者demo_provid ...

  2. Windows 10 win 10 切换输入法的快捷键

    Windows 10 win 10 切换输入法的快捷键 怎么切换输入法 中文 英文 切换 Windows键 + 空格键    切换输入法 Shift+Alt    切换中英文 Windows键形状如下 ...

  3. 用Autofac替换.net core 内置容器

    官方建议使用内置容器,但有些功能并不支持,如下: 属性注入 基于名称的注入 子容器 自定义生存期管理 Func<T> 支持 所以可以使用其他第三方IOC容器,如Autofac,下面为学习使 ...

  4. python 爬取媒体文件（无防火墙）

    #coding = utf-8 import requests import pandas as pd import os,time root_path = './根目录/' input_file = ...

  5. 《Game Programming Patterns》游戏设计模式

    转载自:https://blog.csdn.net/poem_qianmo/article/details/52505170 https://blog.csdn.net/poem_qianmo/art ...

  6. 【03】Kubernets：K8S 操作入门

    写在前面的话 经过上一节,我们顺利将 K8S 集群搭建了起来,在其中我也简单的谈了一下关于 K8S 的网络.那么这一节我们主要谈谈如何来简单的使用 K8S 的命令.当然这些命令有很多,我们只是通过一个 ...

  7. typora安装自定义主题小计

    我写MarkDown一直使用VSCode,后来因为有导出PDF的需求,就用了typora(含书签) PS:VSCode的导出PDF虽然也可以,但不含书签 typora的默认主题是github,虽然还可 ...

  8. 浅析libuv源码-node事件轮询解析(2)

    上一篇讲了轮询的边角料,这篇进入正题.(竟然真有人看我博客,上两个图给你们整理下思路) 这是轮询总流程图. 下图为本节内容简图. Poll for I/O The loop blocks for I/ ...

  9. Python - 基本数据类型 - 第二天

    Python3 基本数据类型 Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型& ...

  10. Java集合Map基本方法

    jdk1.7 api中的方法摘要: 参考java集合大全图:https://www.cnblogs.com/xkzhangsanx/p/10889114.html Map为所有Map子类的接口.