The bloat of AMP
Breaking down a few of the concerns in this article:<p>&gt; Google&#x27;s v0.js, which is compulsory on every AMP page, is currently 217Kb of Javascript.<p>It is only 67KB gzipped, so it&#x27;s not as bad as suggested, but this is an area for improvement.<p>However, the file size doesn&#x27;t directly translate to the implied latency, which is really what we care about. There are several reasons why this is much better than your average &lt;5KB javascript files:<p>- The file loads with an async tag, so does not block rendering.<p>- The file uses a stale-while-revalidate header with 30-days, which means that any user who views any amp page on the web once a month will <i>never</i> wait for this file after the very first page load. That&#x27;s most users.<p>- If the page is loaded from the AMP cache, which is probably the common case, the file has a 1 year expiration.<p>- The javascript uses a foreign fetch service worker to implement the same 1-year effective expiration on the non-AMP cache page views, for browsers that support it.<p>&gt; Google&#x27;s default analytics.js is 30Kb. The AMP compliant edition of amp-analytics-0.1.js - is 80KB.<p>All of the same responses as above apply here too. It&#x27;s actually only 27KB on the wire, uses stale-while-revalidate and foreign-fetch service workers, etc.<p>However, this is also not a completely fair comparison. amp-analytics doesn&#x27;t implement Google Analytics, it implements <i>every</i> common analytics vendor on the web and has a configuration system for novel vendors. Most pages have half a dozen vendor&#x27;s scripts running on them each with their own javascript payload and running code. This produces a single analytics event runtime and dispatches events to all of the vendors you want to run.<p>Another advantage here is that it&#x27;s not a new origin to connect to. Even if it&#x27;s not cached, the DNS and HTTPS connections will be shared with v0.js and any of the other extensions. Depending on your connection, this will almost certainly reduce latency more than the added bandwidth.<p>&gt; you can still embed bloatey ads<p>True, however what is less obvious is that those ads cannot block the main thread for loading the page, so they can&#x27;t cause issues with scroll or displaying content. In fact, the ads don&#x27;t actually load until right before they should be in the viewport. The ads also cannot reflow the layout of the page, making content move around as the page loads.<p>&gt; you could dynamically build a page using a mustache template<p>True, but you cannot do so using custom javascript on the client which often blocks the rendering thread. This is a direct mapping from json to html.<p>&gt; The other is to append #development=1 to a URL. Unfortunately, if you try that here, your browser will crap out with errors about CORS and a CSP violation.<p>The issue here is that the validation must operate on the original source of the document. By the time javascript runs, the browser has modified the DOM to the point where the original string is simply unavailable. So the #development=1 trick works by refetching the document using an XHR which only works in certain CORS environments. I&#x27;m not sure how else to do this. If you want to validate docs often, I recommend the chrome extension instead (<a href="https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;amp-validator&#x2F;nmoffdblmcmgeicmolmhobpoocbbmknc?hl=en" rel="nofollow">https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;amp-validator&#x2F;nmof...</a>). There are ports for other major browsers.<p>&gt; Paraphrasing: you can still load animations, large images, videos, etc.<p>True, but you also don&#x27;t have to. All of the code for loading these things has been optimized so that while it still may take a while to load those embedded objects, they won&#x27;t slow down the rest of the document, which is the main advantage. They also won&#x27;t cause re-layout events causing content to jump around while the page is loading.<p>As a test, open up the network panel on chrome devtools, simulate a mobile phone with a smaller viewport, and hard refresh the page. You&#x27;ll notice that the 9MB image included as a demo doesn&#x27;t even get fetched. It&#x27;s only when you scroll down halfway on the document that this image starts loading. This is what the amp-img component is accomplishing.<p>The author appears to want fewer html features supported which is understandable, but it&#x27;s not clear that this opinion is widely shared.<p>&gt;  this image will helpfully render with three dots in the middle to show you it&#x27;s full of AMP goodness or something.<p>It&#x27;s a loading indicator, the dots disappear when loading is complete. This is admittedly an odd effect with an animated gif, since the loading is still happening after the first frame has completely loaded.