{"id":15116768,"date":"2021-11-30T09:35:17","date_gmt":"2021-11-30T09:35:17","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/optimize-amp\/"},"modified":"2021-11-30T09:37:34","modified_gmt":"2021-11-30T09:37:34","slug":"optimize-amp","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/optimize-amp\/","title":{"rendered":"Optimize AMP"},"content":{"rendered":"<p>Hi, I&#8217;m using your plugin and a theme that I&#8217;m making following all the AMP.dev recommendations.<\/p>\n<p>https:\/\/amp.dev\/documentation\/guides-and-tutorials\/optimize-and-measure\/optimize_amp\/<\/p>\n<p>Here it indicates several things&#8230; One of them is the preloading of the AMP v0.js file.<\/p>\n<pre><code>&lt;!doctype html&gt;\n&lt;html \u26a1 lang=&quot;en&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\n    &lt;meta name=&quot;description&quot; content=&quot;This is the AMP Boilerplate.&quot;&gt;\n    &lt;link rel=&quot;preload&quot; as=&quot;script&quot; href=&quot;https:\/\/cdn.ampproject.org\/v0.js&quot;&gt;\n    &lt;link rel=&quot;preload&quot; as=&quot;script&quot; href=&quot;https:\/\/cdn.ampproject.org\/v0\/amp-experiment-0.1.js&quot;&gt;\n    &lt;link rel=&quot;preconnect dns-prefetch&quot; href=&quot;https:\/\/fonts.gstatic.com\/&quot; crossorigin&gt;\n    &lt;script async src=&quot;https:\/\/cdn.ampproject.org\/v0.js&quot;&gt;&lt;\/script&gt;\n    &lt;script async custom-element=&quot;amp-experiment&quot; src=&quot;https:\/\/cdn.ampproject.org\/v0\/amp-experiment-0.1.js&quot;&gt;&lt;\/script&gt;\n    &lt;!-- Import other AMP Extensions here --&gt;\n    &lt;style amp-custom&gt;\n      \/* Add your styles here *\/\n    &lt;\/style&gt;\n    &lt;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Inconsolata&quot; rel=&quot;stylesheet&quot;&gt;\n    &lt;style amp-boilerplate&gt;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.selected}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible.selected}}&lt;\/style&gt;&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;\/style&gt;&lt;\/noscript&gt;\n    &lt;link rel=&quot;canonical&quot; href=&quot;.&quot;&gt;\n    &lt;title&gt;My AMP Page&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Hello World&lt;\/h1&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>The strange thing is that the English version of the documentation does not show such an example and does not talk about it. But in the German, French, Spanish versions&#8230; Yes, it does. So, should I preload the v0.js or not, and if the answer is yes. Should I preload v0.js or v0.mjs? because as I see in chrome what is downloaded in the browser is the .mjs and not the .js?<\/p>\n<p>Should I preload some of the other js that I use from AMP? like for example the cookie consent that is shown when you enter the website&#8230;?<\/p>\n<p>Another question I have is regarding custom fonts.<\/p>\n<p><code>&lt;link rel=&quot;preload&quot; as=&quot;font&quot; href=&quot;\/bundles\/app\/fonts\/helveticaneue-roman-webfont.woff2&quot; &gt;<\/code><\/p>\n<p>I want to preload it and put it as high as possible&#8230; After the first &lt;meta&gt; tags as indicated in the google documentation&#8230; But, if I put it in the header.php as high as possible, the AMP plugin moves the code further down&#8230; I have also tried adding a wp_head action with priority -9999 and it still puts it too low.<\/p>\n<p>I am using AMP version on the whole website and not only for people coming from Google, so I would like to optimise it as much as possible.<\/p>\n<p>Thank you.<\/p>\n","protected":false},"template":"","class_list":["post-15116768","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/15116768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/15116768\/revisions"}],"predecessor-version":[{"id":15116776,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/15116768\/revisions\/15116776"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=15116768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}