SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Downloaden Sie, um offline zu lesen
Does AMP make
sense to our
websites?
Martin Michálek
@machal
vrdl.cz/martin
Martin Michálek: frontend designér, poradce
Does AMP make
sense to our
websites?
1. Why AMP?
2. A brief introduction
3. Examples and case studies
4. AMP news
5. AMP & your website
Martin Michálek
@machal vzhurudolu.cz
Does AMP make
sense to our
websites?
1. Why AMP?
2. A brief introduction
3. Examples and case studies
4. AMP news
5. AMP & your website
Martin Michálek
@machal vzhurudolu.cz
Martin Michálek: frontend designér, poradce
Websites are terribly slow.
Martin Michálek: frontend designér, poradce
~2 MB
Doom was the top software technology 25 years ago. 

But it was not possible to save it on one floppy disk. It had two megabytes!
The average
webpage = Doom
Martin Michálek: frontend designér, poradceA brief introduction to AMP → Why AMP? → Let's compare SpeedIndex values
Website SpeedIndex
Average website 20–40,000
Cuketka (article) 12,971
Lékarna.cz (product) 7,019
Vzhůru dolů (article) 4,407
Optimum (by Google Lighthouse) < 2,000
SpeedIndex from WebpageTest.org on 3G Slow
SpeedIndex
There is a SpeedIndex metric. SpeedIndex is something like user experience when loading a page expressed as a
number. The lower it is, the better. As you can see, even well-made sites are far from the optimum that Google
recommends.
Martin Michálek: frontend designér, poradce
KPI ♥ Page Speed
Moreover — we know that the speed of the web correlates with key performance indicators.
So here is the reason to enhance page speed. Which is the reason to use AMP.
Does AMP make
sense to our
websites?
Martin Michálek
@machal vzhurudolu.cz
1. Why AMP?
2. A brief introduction
3. Examples and case studies
4. AMP news
5. AMP & your website
HTML, CSS
AMP

HTML
HTML
Discovery
Optimizer
Website
Distribution Platforms
Martin Michálek: frontend designér, poradce
Website Website AMP on CDN Preloaded AMP
Cuketka (article) 12,971 11,660 163
Lékarna.cz (product) 7,019 8,414 210
Vzhůru dolů (article) 4,407 8,264 244
Optimum (by Google Lighthouse) > 2,000
SpeedIndex from WebpageTest.org on 3G Slow
SpeedIndex Values
AMP on CDN will have SpeedIndex almost always better than the original site.
But it is also possible to ruin the AMP version, as I did on my site. However, it does not matter. Thanks to preload, we
will get far more interesting numbers. Isn't it amazing?!
Does AMP make
sense to our
websites?
1. Why AMP?
2. A brief introduction
3. Examples and case studies
4. AMP news
5. AMP & your website
Martin Michálek
@machal vzhurudolu.cz
Martin Michálek: frontend designér, poradce
+23%
USERS WHO RETURN
WITHIN 7 DAYS
+88%
IMPROVEMENT
IN LOAD TIME
Martin Michálek: frontend designér, poradce
Publishers in 

the Czech Republic?
What we need to
load faster are
“We do not need to
load content faster.
the ads.”
Martin Michálek: frontend designér, poradce
AMPNon-AMP
+10%
PAGE VIEWS
Martin Michálek: frontend designér, poradce
READY-MADE
COMPONENTS
HACKING
WORDPRESS
AMPNon-AMP
You want website
prepared for AMP
distribution.
You don't want
“AMP version“.
It can be tempting to "turn on AMP" for example using a WordPress Plugin. However, in my opinion, it is wrong way,
because it will create whole version of the site. Your goal should be to have one website with different distribution
channels. So using AMP as development foundation is a good idea.
Martin Michálek: frontend designér, poradce
AMPNon-AMP
Martin Michálek: frontend designér, poradce
„I see the competitive
advantage in AMP.“
Martin Michálek: frontend designér, poradce
AMPNon-AMP
10%
DECREASE IN
TRAFFIC
Martin Michálek: frontend designér, poradce
„We have to do AMP design
identical to non-AMP.“
Examples and case studies: E-commerce
AMPNon-AMP
EVERYTHING:
BOUNCE RATE,
PAGES/SESSION,
CONVERSION RATE
~0%
Is AMP worth it?
…is like:
“Are websites worth it”?
As you can see, switching to AMP can be both successful and unsuccessful.
It is hard to say if AMP is good or bad. It's a website. You can do it in many ways. Both good and bad
Evaluate the
impact of AMP?
This is only
possible if it has the
same design and
functionality.
And I would like to remind you: If you want to measure it, don’t use different designs for your AMP version and the
original one. Such possibility was rare in the case studies I have shown.
Does AMP make
sense to our
websites?
1. Why AMP?
2. A brief introduction
3. Examples and case studies
4. AMP news
5. AMP & your website
Martin Michálek
@machal vzhurudolu.cz
Martin Michálek: frontend designér, poradce
AMP
Stories
The first is AMP Stories.You probably know Instagram Stories. The same is now possible in Google Search using AMP.
This will be especially interesting for publishers, but perhaps for e-commerce too.
AMP for e-mail
AMP for e-mail can do a revolution in newsletter creation. Because the newsletter technology is frozen in the nineties.
You can expect features such as live data update, user login, and other interactive elements.
This is still in progress. And I hope Google will offer it for Gmail soon.
Does AMP make
sense to our
websites?
1. Why AMP?
2. A brief introduction
3. Examples and case studies
4. AMP news
5. AMP & your website
Martin Michálek
@machal vzhurudolu.cz
Probably yes.
AMP will always be faster

(even thanks to preload only).
But it depends…
Does AMP make sense
to your website?
Martin Michálek: frontend designér, poradce
1. Do you have lot of non-unique content? (Articles, Products, Landing Pages...)
2. Is your market segment competitive? (News, Cooking…)
3. Can you do mobile conversions from Google Search? (or LinkedIn, Twitter?)
4. Do you need no custom components?
5. Is your development process flexible enough?
6. Are you working on a new website?
Does AMP make sense
to your website?
Martin Michálek: frontend designér, poradceDoes it make sense to your website? How to get it to the production
1. Do not build an “AMP trial version”, but a full-featured pages.
2. Consider AMP for a small set of landing pages.
3. Do not look at case studies much, do your own tests.
How to get AMP to
production?
Martin Michálek: frontend designér, poradce
1. Set up Google Analytics properly. (AMPClientID → vrdl.in/ampid)
2. Google Analytics: Rather compare segments (Mobile/AMP), not time periods.
3. Start an split test in Google Ads. (→ vrdl.in/ampsplit)
How to measure AMP?
Thank you!
Martin Michálek
@machal

Weitere ähnliche Inhalte

Mehr von Martin Michálek

Mehr von Martin Michálek (20)

Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)
 
CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)
 
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4
 
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíAMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízí
 
Metriky rychlosti načítání
Metriky rychlosti načítáníMetriky rychlosti načítání
Metriky rychlosti načítání
 
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryWebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzory
 
Je CSS vážně tak podivné?
Je CSS vážně  tak podivné?Je CSS vážně  tak podivné?
Je CSS vážně tak podivné?
 
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a  rychlost načítání (WordCamp Praha 2017)WordPress šablony a  rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
 
Slasti a pasti prototypování v HTML
Slasti a pasti  prototypování v HTMLSlasti a pasti  prototypování v HTML
Slasti a pasti prototypování v HTML
 
10 praktických CSS3 a SVG řešení
10 praktických  CSS3 a SVG řešení10 praktických  CSS3 a SVG řešení
10 praktických CSS3 a SVG řešení
 
Debugování responzivních webů
Debugování responzivních webůDebugování responzivních webů
Debugování responzivních webů
 
Mobile First v praxi
Mobile First v praxiMobile First v praxi
Mobile First v praxi
 
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůVše co potřebuje markeťák vědět o rychlostní optimalizaci webů
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webů
 
Design webů v prohlížeči
Design webů v prohlížečiDesign webů v prohlížeči
Design webů v prohlížeči
 
Responzivní obrázky v praxi
Responzivní obrázky v praxiResponzivní obrázky v praxi
Responzivní obrázky v praxi
 
Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?Co by měl UXák vědět o responzivním webdesignu?
Co by měl UXák vědět o responzivním webdesignu?
 
Ach, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeAch, ty mobilní prohlížeče
Ach, ty mobilní prohlížeče
 
Proč LESS?
Proč LESS?Proč LESS?
Proč LESS?
 
CSS preprocesory
CSS preprocesoryCSS preprocesory
CSS preprocesory
 
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)
 

Kürzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Kürzlich hochgeladen (20)

Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 

Does AMP make sense to our websites? (WebExpo 2018)

  • 1. Does AMP make sense to our websites? Martin Michálek @machal
  • 3. Does AMP make sense to our websites? 1. Why AMP? 2. A brief introduction 3. Examples and case studies 4. AMP news 5. AMP & your website Martin Michálek @machal vzhurudolu.cz
  • 4. Does AMP make sense to our websites? 1. Why AMP? 2. A brief introduction 3. Examples and case studies 4. AMP news 5. AMP & your website Martin Michálek @machal vzhurudolu.cz
  • 5. Martin Michálek: frontend designér, poradce Websites are terribly slow.
  • 6. Martin Michálek: frontend designér, poradce ~2 MB Doom was the top software technology 25 years ago. 
 But it was not possible to save it on one floppy disk. It had two megabytes!
  • 8. Martin Michálek: frontend designér, poradceA brief introduction to AMP → Why AMP? → Let's compare SpeedIndex values Website SpeedIndex Average website 20–40,000 Cuketka (article) 12,971 Lékarna.cz (product) 7,019 Vzhůru dolů (article) 4,407 Optimum (by Google Lighthouse) < 2,000 SpeedIndex from WebpageTest.org on 3G Slow SpeedIndex There is a SpeedIndex metric. SpeedIndex is something like user experience when loading a page expressed as a number. The lower it is, the better. As you can see, even well-made sites are far from the optimum that Google recommends.
  • 9. Martin Michálek: frontend designér, poradce KPI ♥ Page Speed Moreover — we know that the speed of the web correlates with key performance indicators. So here is the reason to enhance page speed. Which is the reason to use AMP.
  • 10. Does AMP make sense to our websites? Martin Michálek @machal vzhurudolu.cz 1. Why AMP? 2. A brief introduction 3. Examples and case studies 4. AMP news 5. AMP & your website
  • 12.
  • 13. Martin Michálek: frontend designér, poradce Website Website AMP on CDN Preloaded AMP Cuketka (article) 12,971 11,660 163 Lékarna.cz (product) 7,019 8,414 210 Vzhůru dolů (article) 4,407 8,264 244 Optimum (by Google Lighthouse) > 2,000 SpeedIndex from WebpageTest.org on 3G Slow SpeedIndex Values AMP on CDN will have SpeedIndex almost always better than the original site. But it is also possible to ruin the AMP version, as I did on my site. However, it does not matter. Thanks to preload, we will get far more interesting numbers. Isn't it amazing?!
  • 14. Does AMP make sense to our websites? 1. Why AMP? 2. A brief introduction 3. Examples and case studies 4. AMP news 5. AMP & your website Martin Michálek @machal vzhurudolu.cz
  • 15. Martin Michálek: frontend designér, poradce +23% USERS WHO RETURN WITHIN 7 DAYS +88% IMPROVEMENT IN LOAD TIME
  • 16. Martin Michálek: frontend designér, poradce Publishers in 
 the Czech Republic? What we need to load faster are “We do not need to load content faster. the ads.”
  • 17. Martin Michálek: frontend designér, poradce AMPNon-AMP +10% PAGE VIEWS
  • 18. Martin Michálek: frontend designér, poradce READY-MADE COMPONENTS HACKING WORDPRESS AMPNon-AMP
  • 19. You want website prepared for AMP distribution. You don't want “AMP version“. It can be tempting to "turn on AMP" for example using a WordPress Plugin. However, in my opinion, it is wrong way, because it will create whole version of the site. Your goal should be to have one website with different distribution channels. So using AMP as development foundation is a good idea.
  • 20. Martin Michálek: frontend designér, poradce AMPNon-AMP
  • 21. Martin Michálek: frontend designér, poradce „I see the competitive advantage in AMP.“
  • 22. Martin Michálek: frontend designér, poradce AMPNon-AMP 10% DECREASE IN TRAFFIC
  • 23. Martin Michálek: frontend designér, poradce „We have to do AMP design identical to non-AMP.“
  • 24. Examples and case studies: E-commerce AMPNon-AMP EVERYTHING: BOUNCE RATE, PAGES/SESSION, CONVERSION RATE ~0%
  • 25. Is AMP worth it? …is like: “Are websites worth it”? As you can see, switching to AMP can be both successful and unsuccessful. It is hard to say if AMP is good or bad. It's a website. You can do it in many ways. Both good and bad
  • 26. Evaluate the impact of AMP? This is only possible if it has the same design and functionality. And I would like to remind you: If you want to measure it, don’t use different designs for your AMP version and the original one. Such possibility was rare in the case studies I have shown.
  • 27. Does AMP make sense to our websites? 1. Why AMP? 2. A brief introduction 3. Examples and case studies 4. AMP news 5. AMP & your website Martin Michálek @machal vzhurudolu.cz
  • 28. Martin Michálek: frontend designér, poradce AMP Stories The first is AMP Stories.You probably know Instagram Stories. The same is now possible in Google Search using AMP. This will be especially interesting for publishers, but perhaps for e-commerce too.
  • 29. AMP for e-mail AMP for e-mail can do a revolution in newsletter creation. Because the newsletter technology is frozen in the nineties. You can expect features such as live data update, user login, and other interactive elements. This is still in progress. And I hope Google will offer it for Gmail soon.
  • 30. Does AMP make sense to our websites? 1. Why AMP? 2. A brief introduction 3. Examples and case studies 4. AMP news 5. AMP & your website Martin Michálek @machal vzhurudolu.cz
  • 31. Probably yes. AMP will always be faster
 (even thanks to preload only). But it depends… Does AMP make sense to your website?
  • 32. Martin Michálek: frontend designér, poradce 1. Do you have lot of non-unique content? (Articles, Products, Landing Pages...) 2. Is your market segment competitive? (News, Cooking…) 3. Can you do mobile conversions from Google Search? (or LinkedIn, Twitter?) 4. Do you need no custom components? 5. Is your development process flexible enough? 6. Are you working on a new website? Does AMP make sense to your website?
  • 33. Martin Michálek: frontend designér, poradceDoes it make sense to your website? How to get it to the production 1. Do not build an “AMP trial version”, but a full-featured pages. 2. Consider AMP for a small set of landing pages. 3. Do not look at case studies much, do your own tests. How to get AMP to production?
  • 34. Martin Michálek: frontend designér, poradce 1. Set up Google Analytics properly. (AMPClientID → vrdl.in/ampid) 2. Google Analytics: Rather compare segments (Mobile/AMP), not time periods. 3. Start an split test in Google Ads. (→ vrdl.in/ampsplit) How to measure AMP?