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.vue 不触发 beforeRouteEnter

    因为要在 router 对应一个路由的组件才可以触发 如果没有将 App.vue 作为某个路由组件(一般不会吧) 就不会触发该导航守卫 应该是想在每次进入应用时加载一些数据 所以放在 App.vue ...

  2. SpringBoot第十四篇：统一异常处理

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10984081.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   本文将谈论 ...

  3. Github配置SSH密钥

    设置SSH Key Github上连接已有仓库时的认证,是通过使用SSH的公开密钥 在终端terminal中输入 ssh-keygen 该命令的含义是 generate ssh key, 然后一直按回 ...

  4. navicat for Mysql查询数据不能直接修改

    navicat for Mysql查询数据不能直接修改 原来的sql语句: <pre> select id,name,title from table where id = 5;</ ...

  5. session的工作原理与session用法

    一直在使用session存储数据,一直没有好好总结一下session的使用方式以及其工作原理,今天在这里做一下梳理. 这里的介绍主要是基于php语言,其他的语言操作可能会有差别,但基本的原理不变. 1 ...

  6. python网络爬虫（2）——scrapy框架的基础使用

    这里写一下爬虫大概的步骤,主要是自己巩固一下知识,顺便复习一下. 一,网络爬虫的步骤 1,创建一个工程 scrapy startproject 工程名称 创建好工程后,目录结构大概如下: 其中: sc ...

  7. Spring Security 入门—内存用户验证

    简介 作为 Spring 全家桶组件之一,Spring Security 是一个提供安全机制的组件,它主要解决两个问题: 认证:验证用户名和密码: 授权:对于不同的 URL 权限不一样,只有当认证的用 ...

  8. IDEA 设置: Live Templates 方法注释 注释模板编写

    IDEA: Live Templates 方法注释 注释模板编写: 打开IDEA开发工具进入设置找到Editor: File>>Setting>>Editor>>L ...

  9. python 内建模块与第三方模块

    *)datetime模块 包括时间.时间对象.时间戳.时区.时区的转换 参考链接:https://www.liaoxuefeng.com/wiki/1016959663602400/101764878 ...

  10. python 排序 堆排序

    算法思想 : 堆排序利用堆数据结构设计的一种排序算法,堆是一种近似完全二叉树的结构,同时满足堆积的性质,即对于任意的i均有ki>=k(2i+1),ki>=k(2i+2) 步骤: 将数组转化 ...