When An Amp Page Downloads Images, Which Images Are Most Likely To Be Downloaded First? UPDATED

When An Amp Page Downloads Images, Which Images Are Most Likely To Be Downloaded First?

The following is a guest mail service by David Attard of DART Creations. David is going to introduce united states to AMP (no idea what that is? read on) too as how you might go most converting an existing site to an AMP site. Hint: it's for big performance gains. AMP is becoming quite a thing. WordPress is doing it. I've got Google telling me to practice it and that Analytics supports it.

If y'all take your visitors interests at middle, you'll know that a fast website is 1 of the main factors of a expert user experience. Speedy websites go a long way in making your users happy and coming back. Determined website administrators volition always chase those few milliseconds of speed improvements.

Those milliseconds make a real difference.

One large new method for making your website fast is called Accelerated Mobile Pages (AMP), a project spearheaded by Google. Mobile data is unlike our home WiFi connections. It'south slow. AMP aims to assist fix that, in a rigidly prescribed way, by ridding sites of their most inefficient parts.

Let's take AMP for a spin!

We'll see how to convert an existing spider web design to AMP. Then we'll measure the departure information technology makes.

Why Accelerated Mobile Pages?

Phones on mobile networks typically experience latency bug.

Fifty-fifty for unproblematic articles with static content, pages can take a long time to load the text. Scripts, images, video… all that takes fifty-fifty longer. Mayhap ads come in even later, and the folio adjusts itself to reverberate the newly loaded content. Not exactly a pleasant loading experience.

AMP wants to change all of that. Publishers and engineering science companies accept come together to constitute best-practices which will brand pages return chop-chop.

This is a non-trivial trouble. The initial focus of AMP is on static content that allows for more than radical optimization.

For now, AMP is an open-source proof-of-concept. In fact, nosotros'll come beyond some limitations which show that this technology is still in its infancy.

What makes AMP faster than a traditional web site?

AMP has very rigid rules for the source in order to go the big speed gains it's going for.

The founding principles of AMP are:

1. Only asynchronous scripts. Non-async scripts block DOM structure and delay page rendering.

   In fact AMP restricts the usage of JavaScript at all. Scripts are only allowed within custom AMP elements which are carefully designed for performance. Example of custom AMP scripts include Google Analytics, Facebook, Twitter and YouTube.

   3rd party scripts (such as ads, or third party services) are kept out of the critical path and are merely allowed in iframes. Once over again, this will non block the rendering of the page.

   More on scripts later.

2. External resources need to have gear up dimensions. Things like images and iframes need to have sizes to ensure that AMP knows the size of the elements earlier they are downloaded.
3. Don't let annihilation block rendering. Just put, nothing stops AMP from rendering. External elements are included in iframes. AMP will create the iframe box without even knowing what it will incorporate.
4. CSS must be inlined and size spring. AMP takes the opposite of the normal selection of linking CSS in an external file. AMP obliges inline CSS, for the aforementioned reason as scripts: because CSS blocks rendering and folio load.

   At that place is a maximum of 50 kilobytes of inline CSS to make certain it is used efficiently.

5. Font loading must be efficient. Web fonts can be quite large and tin can severely impact performance. In normal circumstances, browsers are blocked from downloading fonts until scripts and stylesheets have been downloaded and are gear up. This creates a long initial look time until the large font starts to download.

   In AMP, CSS is inlined, and scripts are asynchronous. So the browser does not have to expect for these to consummate before downloading the fonts.

6. Only run animations on the GPU. Some animations require page layout updates washed by the browser rather than the GPU. AMP limits animations to transform and opacity so that page layout updates aren't required and all animations are kep on the GPU, where they are fast.
7. Resource loading is prioritized. AMP optimizes downloads of resources such that the near important resources are downloaded first. Images are but downloaded if they are likely to be seen by the user.
8. Pages are loaded in an instant. The PreConnect API is used to prefetch, render and download resources which are likely to be used by the user. This is done efficiently: content is pre-rendered and downloaded only if it is likely to be requested (such as "to a higher place the fold" content).

The Parts of AMP

At that place are a number of "changes" to standard HTML, CSS and JS which give pages optimized using AMP a speed boost.

• AMP HTML: These are HTML tags extended with custom AMP properties
• AMP JS: a library which ensures that AMP HTML pages return fast
• AMP CDN: delivers the HTML AMP pages using HTTP 2.0 for maximum efficiency

The Steps to Convert a Page to AMP

Since I was completely new to AMP, I followed their recommended checklist.

I wanted to starting time with an existing normal (non-AMP) page, so I chose a Pen from CodePen: Case Article Layout by samyerkes.

1. Add the amp attribute to the tag

                 <html amp lang="en">            

2. Add together a canonical link element

                 <link rel="approved" href="index.html">            

3. Inverse the charset tag. Note that this is different from the ALL-CAPS UTF-viii and AMP is touchy about this.

                 <meta charset="utf-8">            

4. Add the meta viewport tag

                 <meta proper name="viewport" content="width=device-width,minimum-scale=1">            

5. Add AMP Projection CDN script at the bottom of the <head>

                 <script async src="https://cdn.ampproject.org/v0.js"></script>            

6. Changed all <img> tags to <amp-img> and added width and height attributes. Instance:

                 <amp-img src="http://farm4.staticflickr.com/3595/3288866270_23cb40f37c_b.jpg" alt="Crashed plane vintage photograph" pinnacle="1024" width="734"></amp-img>                          

   You need to follow this syntax when using <amp-img> tags:

   • Must include an explicit width and height.
   • It is recommended to include a placeholder. The placeholder is immediately shown, so that there is "something" visible until the actual resource holds. For instance, you could load a low-res preview of an prototype which is loading.

                       <amp-anim src="animated.gif" width=466 height=355 layout="responsive" >   <amp-img placeholder src="preview.png" layout="fill"></amp-img> </amp-anim>                

   • Optional: layout="responsive". Read about other layout options.
7. Removed <link> stylesheet and inlined all CSS using <manner amp-custom>

The Results: Improved Loading Times

The test surroundings was a couple of subdomains created on a SiteGround GoGeek shared hosting account. Tests were run using GTMetrix and Pingdom tools and were run several times to remove any fluctuations coming from the external environments.

Examination 1: Curt article

The kickoff test we ran was with the exact article as specified in the CodePen, where the article is relatively curt.

	Example Article Layout (native HTML)	Example Article Layout AMP
Examination 1	3.3s, 1.17 MB, viii requests	1.7s, ane.18 MB, 5 requests
Test 2	one.2s, 1.17 MB, 8 requests	2.0s, ane.eighteen MB, 5 requests
Exam 3	1.3s, 1.17 MB, 8 requests	ane.0s, 1.xviii MB, 5 requests

Y'all can run across some fluctuation. If you expect carefully at the waterfall graph, y'all'll see the fluctuations are really coming more often than not from the AMP CDN. This is unfortunately a side effect of using a shared resource which could come up under load.

Test 2: Tripled article length and included 3 times every bit many images

	Example Article Layout (native HTML)	Instance Article Layout AMP
Test 1	ane.1s, two.3 MB, 14 requests	1.6s, 1.18 MB, 5 requests
Test 2	1.1s, two.3 MB, xiv requests	0.9s, 1.18 MB, 5 requests
Exam 3	2.3s, two.three MB, 14 requests	i.1s, ane.18 MB, five requests

Interpretation of Results

Beyond the actual loading times, the number of requests in an AMP page are lower than in a normal folio. By itself, that makes a folio faster, due to the corporeality of requests being smaller and thus less latency waiting (each request is subject area to latency).

Likewise, the total size of the page decreased significantly when pages were AMPed. Large articles with many images seem to benefit more than from AMP.

In ane early test we did, we tested a adequately brusk commodity with just a handful of images. This test was not very conclusive, so we upped the dues. In the test we're presenting here, we tripled the length of the article, and tripled the number of images. Interestingly, although we tripled the number of images, in the AMP version of the article, the number of requests did not increase.

Every bit far equally I can understand, as well the bodily efficiency of the AMP specification, AMP simply loads the content above the fold (which explains why the number of requests stayed the same later on tripling the images). It is only loading the first chunk of the article, the "to a higher place the fold content", and that's why the content is shorter, smaller and of course, faster.

A word about <script>s

Quoting verbatim from the How It Works folio:

One affair nosotros realized early on is that many performance issues are caused past the integration of multiple JavaScript libraries, tools, embeds, etc. into a page.

which is presently followed by:

With this in mind we made the tough decision that AMP HTML documents would not include any writer-written JavaScript, nor any third-party scripts.

In my opinion, a bit drastic.

Something's gotta requite, I understand. Increased functioning comes at a price. Even when optimizing normal websites for performance, you're going to have to brand some compromises.

Sometimes it'due south the quality of the imagery of your site. High-quality images come at the cost of large file sizes. Sometimes at the cost of removing functionality. Sometimes at the price of removing third party scripts, such as social site integrations.

You lot're e'er going to take to take some tough decisions based on your own priorities.

Completely eliminating scripts is a tad too desperate in my opinion. Libraries like jQuery, Bootstrap, Angular, React… essential building blocks of today'south web development.

Completely removing scripts is shooting AMP in the foot. It's shooting AMP completely off the planet into a small world of its ain.

It just becomes applied if y'all are willing to brand very serious compromises in terms of the functionality you want on your spider web pages. Fifty-fifty in the realm of news websites, the initial focus on AMP, there are going to be some tough pitches.

Can we approximate where AMP is headed?

It's still the early days, and it'due south difficult to guess on the time to come of AMP. Speaking from the heart, I really want AMP to succeed. Web pages have become bloated and too little attention is given to performance. We need a existent try to make the web faster. HTTP/2 is a step in the correct direction. So is AMP.

Unfortunately, AMP feels crippled with the lack of support for scripts. I hope spider web developers volition come up together to find a fair solution which keeps the web fast while enabling the functionality we need.

This is an invite to you. Spare some time to assist on the AMP project. If you are non technical enough, read almost it and test it out. Evangelize about it and get people interested. Who doesn't desire to be part of a better, faster web for anybody?

Having been post-obit Google for a while, 1 can expect what Google might do to give AMP a boost. Nosotros might shortly exist hearing that AMP is an SEO ranking signal. Y'all heard it here first.

AMP Resources

• AMP HTML (GitHub)
• AMP HTML Specification (GitHub)
• AMP Project
• How information technology Works

DOWNLOAD HERE

Posted by: torreyatileture.blogspot.com