SlideShare uma empresa Scribd logo
1 de 35
Baixar para ler offline
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

Mais conteúdo relacionado

Mais de Martin Michálek

Mais de 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)
 

Último

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 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
 
+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
 

Último (20)

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
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
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
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
 
+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...
 
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
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
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
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 

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?