AMP (Accelerated Mobile Pages) is an open source project of Google. By using AMP HTML, can significantly improve the loading speed of web pages. When I was using Google on mobile devices recently, I noticed that a lot of sites started using AMP. Getting to an AMP page from Google is incredibly fast, unbelievably fast—with almost zero latency. This site is also configured with AMP. This article analyzes some features of AMP, and introduces how to support AMP on WordPress and develop plugins to customize it.
AMP HTML is also a kind of HTML, a standard compliant AMP page can only use limited tags, and many tags are not HTML standard, such as <amp-img>, <amp-video>, etc. An example of Hello, AMPs:
1 | <!doctype html> |
This code can be run directly in major browsers. Compared with normal HTML, it has the following differences:
<html> to mark this as an AMP page<head>: <script async src="https://cdn.ampproject.org/v0.js"></script>amp-boilerplate attribute, one of which is in <noscript>.<head> needs to have a <script type="application/ld+json"> to mark the metadata of the document.Example of inserting an image in AMP HTML:
1 | <amp-img src="450px.jpg" srcset="450px.jpg 450w, 1200px.jpg 1200w"></amp-img> |
You will find that this is actually no different from the syntax of the ordinary img tag, except that the name is changed. In fact, by introducing the image in this way, AMP Runtime (that is, the v0.js referenced in the header) will automatically parse this AMP Components, and will select an image to load according to the resolution of the device (the principle is just to create an img tag through js to let the browser recognize it), and it does not even need the browser to support [srcset](https:/ /guozeyu.com/2015/08/using-srcset/) attribute; and can automatically lazy load images. Inserting video and audio also needs to be done using AMP-specific methods. If JS is disabled in the browser, all images and videos on the page that use non-standard HTML tags will not be displayed.
Any own JS is forbidden in AMP, this is just to keep the JS loading fast - since mobile devices are not very performant, minimizing the use of JS or avoiding the use of low quality JS can improve the user experience. So, if you want to use more interaction, you have to do it through features of AMP HTML Extensions, so you can only use Limited interactive functionality. Or you can implement various complex functions through pure CSS.
Validation of AMP pages is available online at this site
You will actually find that the only content in the page that may block loading is an external JS (that is, AMP Runtime), and this JS is also marked as asynchronous loading. All CSS is Inline.
To support AMP, each article needs to have two pages: a normal version of the page, and an AMP-compliant AMP page. Of course, it is also possible to make the page conform to the AMP specification by directly modifying the page itself, but this method will make more changes. The easiest way to implement AMP is through a plugin, especially if you’re using WordPress:
Automattic (actually WordPress official) has made an AMP plugin, after installing and activating this plugin, no configuration is required - this is one of the reasons I like this plugin One, you can activate the AMP function. This plugin will automatically generate the corresponding page for each article and add AMP metadata to the original page accordingly. After installation, there is no change on the surface, but when you add /amp/ or ?amp=1 after an article page, you can see the AMP page corresponding to the article. The reason why this plugin is free of any configuration is that what it actually provides is just a framework. Users (actually developers) can develop a plugin to customize it. The official has given a [specific introduction] (https://github.com/Automattic/amp-wp/blob/master/readme.md), I list some things I customized:
AMP already supports Google Analytics, but if you need to add your own statistics, you can’t use JS, but the easiest way is to add an empty Gif:
1 | add_action( 'amp_post_template_footer', 'tlo_amp_add_pixel' ); |
This is an example of using the Piwik tool for statistics, and with the WP-Piwik plugin, it can automatically obtain the site ID (requires manual replacement of the domain name).
After activating AMP for a period of time, using mobile devices to search for website content on Google can benefit significantly from AMP, the right side of the video contains a list of resources, using the Safari browser that comes with iOS 10 (do not Blink!):
It can be seen that while still staying in the search results, AMP content such as AMP Runtime has already started to download, and at the same time, the logo on my website and the first image in the webpage have also started to download. When the first search result is clicked, the page does not show any signs of reloading, and is directly presented in a similar way to ajax. At this time, the entire page has been preloaded, so the loading time is almost zero (due to the use of the iOS simulator, The configuration is lower, and the actual real machine test white screen time is shorter, it can be said that there is no perception). The URL domain name can be seen at the top of the page. When scrolling the page, you can see that the next few pictures are lazy loaded, and the delay loading time is just right, it is almost difficult to feel that it is lazy loading. It is worth noting that almost all the content of this page is provided by Google’s servers, including HTML and images (after testing, the video resources are still back to the source), only my statistical code is not proxied by Google. If the URL is shared at this time, the shared domain name is still Google’s, and when it is opened (or after the page is refreshed) the upper left corner will no longer be closed, and the rest is exactly the same. If this URL is opened on a non-mobile device, it will redirect to the original article (not AMP) page. After clicking the close button in the upper left corner, you will return to the search results page, and the whole process is very smooth. If the search results have multiple AMP pages, then entering those other pages will also take seconds. As you can imagine, a large part of the reason why AMP has so many restrictions is to prevent website owners from “doing evil” when rendering AMP pages on google.com, even if the browser is not controlled by Google (such as Safari).
Google’s AMP feature is very similar to Facebook’s Instant Article, except that the latter doesn’t even require its own server hosting. A large amount of CSS in AMP can still be controlled by itself, which is much better than the [transcoding page] (https://www.guozeyu.com/2015/08/block-haosou/) of most domestic search engines. Pages can still serve their own ad content, which is why AMP has been accepted so quickly. It also retains a lot of open stuff in various non-open restrictions. Enabling AMP can not only benefit from loading in Google search result pages, AMP pages themselves can actually be used as pages specially adapted for mobile devices - if the website itself does not have a mobile version page, then the mobile version page can be directly made with AMP, Then jump automatically. Of course, as I said before, web pages can be made to conform to the AMP specification by directly modifying the page itself, or it can be made in accordance with the AMP specification at the beginning of production. AMP official website is a Classic example. However, this approach is too radical, and the compatibility is not very good (such as its strong dependence on JS), so it should be fully considered before use.
Baidu borrowed many technologies from AMP and made MIP, which is very similar to AMP. After a simple experiment, I found that AMP can be easily changed to MIP, just need to replace or delete the following content on the AMP page:
<html amp replaced with <html mip<script src="https://cdn.ampproject.org/v0.js" async></script> replace with <link rel="stylesheet" type="text/css" href ="https://mipcache.bdstatic.com/static/v1/mip.css">amp-pixel replaced with mip-pixamp- ** replaced by ** mip-</body> replaced with <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script></body><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>The modified AMP page can directly pass the MIP test, which is equivalent to being compatible with both AMP and MIP without secondary development. How convenient! MIP-enabled websites are also preloaded on Baidu search results, so they can be opened in seconds.
The CSS of MIP comes with actually declares this style:
1 | * { |
Because of its existence, it will cause typography problems in many places, and will override the browser’s default styles (such as h1, h2 tags), so you may also add some styles for Baidu separately.
After testing, the <mip-video> tag cannot support the <source> tag, and videos using this tag cannot be loaded.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。