Download to read offline
Uploaded byMartin Michálek
AMP ve WordPressu
Bleskurychlé načtení webových stránek na mobilu i bez rychlého připojení? - WordCamp Praha 2020. https://www.youtube.com/watch?v=9k75XDh_0fE
AMP ve WordPressu
- 1.
- 2. vrdl.cz/martin Martin Michálek: konzultantk rychlosti webu
- 3. WordPress a rychlost Coje to AMP? AMP weby AMP plugin @machal
- 4. Je WordPress sámo sobě pomalý? Podívejme se na data z Chrome UX Report.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. WordPress ale zprincipu není pomalý Vzhůru dolů
- 11. Rychlost webu jevěc vývojářů a celého týmu. Většinou ne platformy. Ale pokud už je web z nějakého pomalý, jeho zrychlení stojí obrovské množství energie.
- 12.
- 13. Růžovou je klient. Začalijsme na Lighthouse skóre pod 10 bodech. Jdeme vpřed, ale pomalu.
- 14. Udělat větší webrychlý je komplexní projekt. Pro vývojáře, designéry, marketéry. Vyžaduje také zapojení třetích stran.
- 15. Udělat větší webrychlý je komplexní projekt. Pro vývojáře, designéry, marketéry. Vyžaduje také zapojení třetích stran. drahý opruz.
- 16. 0,1 s Miller, 1968– vrdl.cz/p/rychlost-nacitani-proc Hranice vnímání okamžité reakce
- 17. WordPress a rychlost Coje to AMP? AMP weby AMP plugin @machal
- 18.
- 19.
- 20.
- 21. Jak funguje distribuceAMP? CMS AMP Cache Platformy HTML HTML, CSS AMP amp.dev
- 22. Běžný web AMP vAMP Viewer AMP Cache + preload Vzhůru dolů (článek) 6,9 s 7,5 s 0,2 s Reflex (článek) 19,8 s 4,0 s 0,2 s Optimum (by Google Lighthouse) > 2,5 s github.com/machal/prirucka/blob/master/content/amp-faze.md AMP: Porovnání Speed Indexu
- 23. Tři fakta oAMP amp.dev • AMP je na více než 31 mil. domén • AMP ≠ Google • AMP ≠ Accelerated Mobile Pages
- 24. AMP: Výhody • Okamžiténačtení • Snadný vývoj (100+ hotových komponent) • Nikdo to nemůže pokazit (AMP musí být validní = rychlý)
- 25. AMP: Nevýhody • URLna google.com (možná vyřeší Web Packaging) • Omezený vývoj (klasický JavaScript není) • Omezené možnosti komponent (např. jeden carousel) • Nemožná pokročilejší analytika (např. e-commerce)
- 26. WordPress a rychlost Coje to AMP? AMP weby AMP plugin @machal
- 27. AMP případovky vrdl.cz návštěvnost +49 % návraty + 23 % konverzní poměr + 80 %
- 28. ↓ Celé vyhledávání↓ Přirozené výsledky↓ Hlavní události AMP na Google
- 29.
- 30.
- 31. AMP na Vzhůrudolů: Dvě verze? HTML AMP HTML
- 32. AMP na Vzhůrudolů: technicky HTML <img> → <amp-img> <link rel="amphtml"> CSS <link rel="stylesheet"> → <style amp-custom> !important Validace Search Console + ruční opravy JS jQuery a spol → AMP pluginy vzhurudolu.cz/prirucka/css-grid vzhurudolu.cz/amp/prirucka/css-grid
- 33. WordPress a rychlost Coje to AMP? AMP weby AMP plugin @machal
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. AMP na Vzhůrudolů: technicky HTML CSS ValidaceJS <img> → <amp-img> <link rel="amphtml"> <link rel="stylesheet"> → <style amp-custom> !important Search Console + ruční opravy jQuery a spol → AMP pluginy ✔ ✔ ✔?
- 41.
- 42. Shrnutí • Rychlost webuje důležitá. • AMP je bezkonkurenčně rychlý. • Ve WordPressu je AMP velmi snadno dosažitelný.
- 43.