In this article, we are going to discuss, How to integrate AMP for WordPress blogs?
INTRODUCTION: This plugin supports the AMP (Accelerated Mobile Pages) project that is an open source enterprise, which aims to furnish mobile optimized content which can load anywhere instantly.
When the plugin is active, all of the posts on your website will have dynamically generated AMP compatible versions, that are accessible just by appending /amp/ to the end of your post URLs. For instance: if your post URL is http://example.com/2023/01/01/amp-on/, you can access the AMP version at:
http://example.com/2023/01/01/amp-on/amp/. If you want to enable the pretty permalinks, then you must append ?amp=1, i.e. http://example.com/2023/01/01/amp-on/?amp=1 AMP HTML: AMP HTML is HTML with certain restrictions for a reliable performance.
The AMP HTML is nothing but an HTML extended with AMP properties that are custom made. A simple AMP HTML file looks like this:
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<linkrel="canonical"href="hello-world.html">
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s1normalboth;-moz-animation:-amp-start 8s steps(1,end) 0s1normalboth;-ms-animation:-amp-start 8s steps(1,end) 0s1normalboth;animation:-amp-start 8s steps(1,end) 0s1normalboth}@-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 asyncsrc="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
Though most of the tags in this AMP HTML page are nothing but regular HTML tags, some HTML tags are substituted by AMP-specific tags. These custom elements ( aka AMP HTML components) make common patterns easy to implement.
For instance: The amp-img tag provides full srcset support even for browsers which do not support it as yet. AMP JS: This AMP JS library makes sure that the AMP HTML pages are rendered fast. The AMP JS library implements all the AMP’s best performance practices, it also manages resource loading and gives us the custom tags that are mentioned above. And it ensures a fast rendering of the page. And it makes everything which comes from external resources asynchronous so that nothing in the page can stop anything from rendering.
Other performance techniques include the disabling of slow CSSselectors, the sandboxing of all iframes and the pre-calculation of the layout of each and every element on the page well before the resources are loaded. AMP CACHE: The cached AMP HTML pages can be served by Google AMP Cache.
This Google AMP cache is a proxy-based content delivery network that is used to deliver all valid AMP docs. It gets the AMP HTML pages, then it caches them and also improves the performance of the page automatically. When using the Google AMP Cache, the JS files, the document and all of the images load from the same origin which is using the HTTP 2.0 for the utmost efficiency. The cache comes with built-in validation system that confirms the page is guaranteed to work and that it does not depend on the external resources. The validation system executes a series of assertions that confirms the page’s markup meets the specification of the AMP HTML. Another version of the validator comes bundled with each and every AMP page. This version can log validation errors straight to the browser’s console when the page is rendered. This allows you to see how the complex changes in the code might impact user experience and performance.
Read More –
This post post made me think. I will write something about this on my blog. Have a nice day!!