Přednáška pro SEOloger naživo. Google svou technologii AMP letos přímo amplifikuje, silně ji tlačí do světa. AMP Stories se jako konkurence Instagram Stories možná daly očekávat. Posilování pozice AMPu v e-commerce taky. Málokdo ale čekal, že tahle technologie poslouží jako podklad pro revoluci v tvorbě e-mailů. Jaké novinky Google v oblasti AMP tlačí a jak budou užitečné pro různé typy vašich klientů?

1. AMP: co řeší
a co nového
nabízí?
SEOLoger naživo 2018
Martin Michálek
@machal

2. Martin Michálek: poradce k CSS a rychlosti načítání
vrdl.cz/martin

3. Co řeší AMP?

4. Problémy CSS
Zdroj obrázku

5. Tři šílení webaři.
Každý z nich chce
nějak pokazit
rychlost webu.

6. Problémy CSSGrafik
Děsně moc řezů písma
Video přes celou stránku
Vše se animuje

7. Problémy CSSGrafik
Děsně moc řezů písma
Video přes celou stránku
Vše se animuje
Vývojář
Spousta knihoven
Blokující skripty
Neoptimalizuje

8. Problémy CSSGrafik
Děsně moc řezů písma
Video přes celou stránku
Vše se animuje
Vývojář
Spousta knihoven
Blokující skripty
Neoptimalizuje
Marketér
Pořád testuje
Neoptimalizuje

9. AMP webařům nastavuje tvrdá omezení
1. Žádné vlastní UI komponenty
2. Žádný vlastní Javascript
3. Žádné vlastní měřící skripty
4. Žádné vlastní reklamy
5. CSS maximálně 50 kB
6. Optimalizace všeho by design

10. …a taky přidává nové vychytávky
1. Hostování u Google
2. Přednačtení od Google

11. …a výsledkem je okamžitá reakce
Zdroj obrázku

12. Co tedy přesně AMP řeší?
Web AMP
HTML, CSS, JS - -
Rychlý server - -
Přednačtení - ✔
Webaři - ✔

13. Web je pomalý
díky možnostem.
AMP je rychlý
díky omezením.

14. „AMP je rychlý
web pro blbý.“

15. AMP čísla: Bella Rose a Cuketka

16. Srovnání Speed Indexů pro různé verze článků
Bella Rose Cuketka
Web 22 885 12 971
AMP 9 467 15 722
AMP na Google 6 951 11 660
AMP na Google preload 274 163

17. Okamžitou reakci AMP
dělá přednačtení.

18. Novinky ve
světě AMP

19. Novinky v AMP
1. AMP Stories
2. AMP for Email
3. AMP pro e-shopy
4. AMP jako zákad pro PWA

20. AMP Stories
Zdroj obrázku

21. AMP Stories
Zdroj obrázku

22. AMP Stories
★ Něco jako Instagram Stories v Google Search.
★ Krátké příběhy. Možná interaktivita.
★ Nové komponenty: video, zvuky, animace…
★ Stav: už se používá a někde i zobrazuje.
★ g.co/ampstories
★ ampproject.org/stories

23. AMP for Email
Zdroj obrázku

24. AMP for Email
Zdroj obrázku

25. AMP for Email
★ Revoluce pro e-mail.
★ Skvělé pro e-commerce.
★ Komponenty: dotazníky, živé aktualizace, přihlášení…
★ Stav: Zatím jako developer preview. Bude v Gmailu.
★ blog.google/products/g-suite/bringing-power-amp-gmail

26. AMP pro e-shopy
Zdroj obrázku

27. AMP pro e-shopy: Fastcommerce & SóGravatas
★ Design AMP a webu podobný
★ Mimo AMP jen vyhledávání a košík
Zdroj obrázku

28. AMP pro e-shopy: Payment Request API
Zdroj obrázku

29. AMP pro e-shopy
★ Stav: Už víceméně jde.
★ Košík zatím na webu, ale přidání zboží v AMP.
★ Letos nové komponenty jako <amp-date-picker>.
★ Podobné produkty a dynamický obsah: <amp-list>
★ Personalizace: <amp-access>
★ Placení pomocí Payments Requests API.

30. AMP jako základ pro PWA
Zdroj obrázku

31. AMP jako základ pro PWA: běh offline
Zdroj obrázku

32. AMP jako základ pro PWA
Zdroj obrázku

33. AMP jako základ pro PWA
★ Offline běh a notifikace se Service Worker.
★ Zajímavé prakticky pro každý web.
★ Stav: Podpora je už všude, čekalo se na Apple.

34. Moudra na závěr
★ AMP je rychlý díky omezením a přednačtení.
★ Máte hodně návštěvníků z Google? Dělejte AMP.
★ Přizpůsobujte web AMPu.
★ Máte články, příběhy? Zkuste AMP Stories.
★ Sledujte AMP for E-mail.
★ Nový web? AMP for E-commerce a PWA.

35. Promo na závěr
Základy
rychlosti
pro marketéry
Školení pro
vývojáře

36. Díky za
pozornost!
@machal
www.vzhurudolu.cz
facebook.com/VzhuruDolu
martin@vzhurudolu.cz