Het zal geen geheim zijn dat ik graag in alle hoeken van het speelveld mag experimenteren omtrent snelheid- als ook performance winst en onnodig ballast te laten varen. Accelerated Mobile Pages is daar een voorbeeld van. Maar hoe snel is Google's AMP?
AMP CMS implementatie
Al in oktober 2015 introduceerde Google hun AMP project. Na de kat uit de boom te hebben gekeken, hebben we besloten dit ook tot ons takenpakket te scharen en ons CMS hiermee uit te breiden. Eerder hebben we al eens AMP geïmplementeerd in één van Nuon's websites. De implementatie in die betreffende CMS versie heeft me ongeveer 22 uur bezig gehouden. Hier viel zowel frontend- als backend werkzaamheden onder, als het ook doornemen van de AMP documentatie. Dit weekend heb ik het uitgerold in het CMS waar onder meer deze website op draait.
Het heeft me ongeveer drie uur gekost om de AMP technisch opnieuw uit te rollen, en nog eens drie uur om de HTML en CSS te fine-tunen. Denk aan de AMP carousel op de homepagina, juiste layout-toepassing voor AMP afbeeldingen en eigen CSS voor de AMP uitklapnavigatie. Dit is dusdanig gedaan dat de AMP versie gelijkenissen heeft met de eigenlijke site.
Er is bewust geen rekening gehouden met desktop bezoekers op de AMP equivalent van onze webpagina's. Het inline CSS limiet is namelijk 50kb, waarbij AMP equivalenten door Google enkel voorgeschoteld wordt aan mobiele gebruikers.
AMP snelheid vergelijking
Om de proef op de som te nemen, heb ik enkele vergelijkingen gedaan om na te gaan of de website welke door ons CMS voorgeschoteld wordt, profijt heeft van de AMP implementatie. Ik zal er niet omheen draaien: resultaten spreken in het voordeel van ons eigen CMS. De optimalisatie-slagen waar ons CMS zich voor leent, heeft reeds de rek er uit gehaald, waardoor het als algemeen snellere variant uit de bus komt.
Drie-tal AMP vergelijkingen
Om een goede vergelijking te maken, heb ik gebruik van een third-party (Google) Font intact gelaten binnen de AMP-equivalent van de webpagina's, als ook een iconenset. Beide zijn namelijk bijna altijd terug te vinden in huidige websites. Bovendien heb ik een full refresh test gedaan, waarbij alle resources nieuw gedownload werden door de browser. Daarnaast heb ik voor dezelfde pagina een test gedaan, waarbij resources reeds door de browser gedownload waren, en dus gecached waren. De derde test betrof een pagina met enkel tekst; de sitemap;
| eigenschap Pagina | Requests | kb | DOM (ms) | Load (ms) |
|---|---|---|---|---|
| Standaard Home | 12 | 551.0 | 438 | 485 |
| AMP Home | 16 | 572.0 | 158 | 587 |
| Standaard Home (gecached) | 12 | 5.9 | 204 | 206 |
| AMP Home (gecached) | 16 | 10.8 | 119 | 318 |
| Standaard Sitemap | 7 | 180.0 | 514 | 505 |
| AMP Sitemap | 8 | 192.0 | 283 | 699 |
In de resultaten valt een patroon te ontdekken. De DOM is steeds snel ingeladen bij AMP, maar het benodigd aantal requests als ook uiteindelijke laadtijd liggen hoger.
Het verschil met AMP
AMP geeft je toolsets om widgets toe te passen. Denk aan een carousel, video of uitklap-navigatie. Je dient dan een apart bronbestand (JavaScript) te gebruiken. Je mag niet embedden wat je niet gebruikt. Je kunt de bestanden echter ook niet samenvoegen (je kunt namelijk uberhaupt geen eigen JavaScript gebruiken).
De AMP variant is hierdoor zwaarder (requests en KB transferred). Dit komt onder meer doordat we eerder afscheid hebben genomen van Bootstrap's JavaScript-bestand. Wel laadt de AMP pagina zelf (DOMContentLoaded) beduidend sneller. Dit komt doordat er binnen AMP niet overal gebruik wordt gemaakt van werkelijke HTML (bijvoorbeeld een amp-img-element in plaats van de img-element), en er primair dus minder te verwerken valt door de browser. In plaats daarvan, gaat AMP's JavaScript files, achteraf de amp-*-elementen omzetten naar werkelijke HTML dat door een browser geïnterpreteerd kan worden. Dit heeft als gevolg dat de uiteindelijke load en finish tijden, hoger liggen bij de AMP equivalenten, waardoor gedane optimalisaties binnen ons CMS, reeds een maximum heeft bereikt.
De webpagina zelf is in het geval van AMP ook groter, doordat CSS volledig inline staat. AMP brengt dus op alle pagina's op deze site, zwaardere pagina's voort. Inhoudelijk meer weten over AMP, of wil je je eigen website voorzien van AMP? Lees de introductie of neem contact op.
Contact opnemen AMP introductie
Ook reeds AMP geïmplementeerd, of wellicht mee ge-experimenteerd en specifieke bevindingen opgedaan? Of weten hoe we binnen de huidige architectuur AMP technisch geïmplementeerd hebben? Let us know!
