Metriky rychlosti načítání
1 like2,469 views
Speed Index, TTFB, FP, FCP, DCL a další podivné zkratky. Které vám ale mohou pomoci s chápáním rychlosti načítání vašeho webu.
1 of 25
Download to read offline
Ad
Recommended
Mýty a blbosti o webové rychlosti (FrontKon 2024)
Mýty a blbosti o webové rychlosti (FrontKon 2024)Martin MichálekOptimalizuji rychlost webů už pěknou řádku let. Rychlost webu je často opředena mýty, které mě už pěkně… ehm… lezou na nervy. Pojďme si to vyříkat. Bez obalu, ale s humorem. Můžu vám slíbit, že kromě boření mýtů budu také stavět. Postavím vám v hlavě domeček znalostí o rychlosti, které mýtům odolají.
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin MichálekV přednášce se podíváme na zajímavé novinky, které vám usnadní dělat rychlejší weby. Je zde spousta nových technologií, které můžeme v prohlížečích používat už nyní, ale mezi vývojáři nemají takovou popularitu. A to nemluvíme o nových nástrojích pro ladění rychlosti, které jsou po ruce a šetří nám čas.
CSS a sazba knih: jak jsme daleko?
CSS a sazba knih: jak jsme daleko?Martin MichálekCSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
Browsers: from competition to collaboration
Browsers: from competition to collaborationMartin MichálekThe keynote discusses the evolution of web browsers from 1996 to 2022, highlighting the dominance of Internet Explorer in the early days and the subsequent rise of Chrome and Safari. It addresses the shift towards collaboration among major tech companies in developing web standards, noting ongoing issues with differing priorities among browsers. The presentation emphasizes the importance of initiatives like compat 2021 and interop 2022, which have improved browser features and fostered competition, benefiting web developers.
„To my ne, to oni!“ – komponenty třetích stran a rychlost webu
„To my ne, to oni!“ – komponenty třetích stran a rychlost webuMartin MichálekThird-parties nám zpomalují weby. To víme. Ale skutečně jsme jako vývojáři proti nim tak bezbranní, jak si občas myslíme? V přednášce si ukážeme jak identifikovat problematické komponenty třetích stran a jak minimalizovat jejich dopady na rychlost webu.
17 technických tipů ke zrychlení webů
17 technických tipů ke zrychlení webůMartin MichálekV posledním roce jsem spolupracoval na optimalizaci zhruba dvacítky webů, většinou e-shopů. Před přednáškou jsem se zamyslel, které technické úpravy obvykle pomohou rychlost nějak popostrčit k lepšímu. Vznikl tak seznam o 17 bodech. V Ostravě si je všechny jeden po druhém projdeme.
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Martin MichálekPřednáška z Czech Online Summit 2019. Praktická rychlost webu pro eshopaře, marketéry a UXáky. Jak ji měřit a jak raději ne. Co můžete vylepšit sami a jak? Jak zaúkolovat vývojáře a ohlídat alespoň základní věci bez znalostí technických detailů?
Blbosti kolem webové rychlosti
Blbosti kolem webové rychlostiMartin MichálekLidé se často zaměřují na chybné ukazatele. Na co se dívat a na co naopak ne? Co o reálné rychlosti načítání říkají Google Analytics, co datová velikost stránky a co nástroj Lighthouse?
SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuMartin MichálekPřednáška a workshop pro "SEO jako Brno".
jaký je význam rychlosti webu
na které metriky se dívat a jak je chápat
jaké nástroje pro posuzování rychlosti webů používat
jaké jsou základní technické (obsahové) prostředky ke zvýšení rychlosti webů
jaké jsou pokročilejší možnosti pro zrychlení
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Martin MichálekProjdeme si agrumenty, proč je důležité lpět na rychlosti načítání webu. Ukážeme si několik častých chyb a jak je možné webařské týmy kontrolovat. No a samozřejmě – jakou roli v tom celém hraje nová technologie AMP od Google. Máte ji nasadit?
CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)Martin MichálekPříklady využití CSS proměnných. Přednáška na Frontendistech v prosinci 2017. https://www.meetup.com/frontendisti/events/txhljmywqbrb/
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Martin MichálekVývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíMartin MichálekPř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ů?
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é vzoryMartin MichálekPřístupnost nemusí bolet. Podíváme se na časté chyby, které kodéři a designéři sekají jako slepý Baťa cvičky. Pak si ukážeme pár jednoduchých tipů, jak bez velké námahy pomoci nevidomým uživatelům vašich webů. A hlavně se podíváme na několik správně nakódovaných návrhových vzorů. Víte jak navrhout například přístupný našeptávač?
Martin Michálek je frontend designér na volné noze s takřka dvacetiletou praxí. Píše blog Vzhůru dolů, spoluzaložil a vede spolek Frontendisti.cz. Hlavně ale pomáhá s návrhem a implementací webových uživatelských rozhraní. V poslední době pracuje pro klienty jako jsou VašeČočky.cz, Svobodná Evropa nebo Česká televize.
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin MichálekJak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Slasti a pasti prototypování v HTML
Slasti a pasti prototypování v HTMLMartin MichálekProcházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
10 praktických CSS3 a SVG řešení
10 praktických CSS3 a SVG řešeníMartin MichálekSVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
Debugování responzivních webů
Debugování responzivních webůMartin MichálekDemo z Frontendisti.cz. Video bude lepší. Bude k dispozici na frontendisti.cz.
Mobile First v praxi
Mobile First v praxiMartin MichálekPřednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu.
✎ http://www.vzhurudolu.cz/prirucka/mobile-first
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ůMartin MichálekProč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
Design webů v prohlížeči
Design webů v prohlížečiMartin Michálekhttp://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
Responzivní obrázky v praxi
Responzivní obrázky v praxiMartin MichálekCo potřebujete vědět o implementaci responzivních fotek a vektorů?
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?Martin MichálekCo by měl UXák vědět o responzivním webdesignu?
Přednáška pro UX Monday Plzeň.
Ach, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeMartin MichálekAktuální stav českého trhu co se mobilních prohlížečů týká. Pseudobrowser. Podpora HTML5. Čas strávený v prohlížečích klesá, ale třeba Facebook app je taky browser.
Proč LESS?
Proč LESS?Martin MichálekProč LESS a pro koho?
Proč LESS používám?
Nevolte podle syntaxe
4 tipy pro pokročilejší
CSS preprocesory
CSS preprocesoryMartin Michálek1. Jak to funguje?
2. Co to umí?
3. Přínos pro mě?
4. Debugování
5. Který vybrat?
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)Martin Michálek— Responzivní webdesign jak jej definoval Marcotte je přežitý
— První problém je v rychlosti načítání: naštěstí tu máme Picturefill, lazy loading, compressive images a back-end
— Dalším problémem je pracovní postupy: Mobile Up namísto Desktop Down, hodně breakpointů, hodně verzí kódu a kód orientovaný na stránky namísto UI komponent
— Třetí problém: uživateli dáváme daleko víc než potřebuje: téma je AjaxInclude a podmíněné načítání assetů pomocí Modernizru
More Related Content
More from Martin Michálek (20)
SEO jako Brno - workshop k rychlosti webu
SEO jako Brno - workshop k rychlosti webuMartin MichálekPřednáška a workshop pro "SEO jako Brno".
jaký je význam rychlosti webu
na které metriky se dívat a jak je chápat
jaké nástroje pro posuzování rychlosti webů používat
jaké jsou základní technické (obsahové) prostředky ke zvýšení rychlosti webů
jaké jsou pokročilejší možnosti pro zrychlení
Web rychlý jako blesk (s důrazem na AMP)
Web rychlý jako blesk (s důrazem na AMP)Martin MichálekProjdeme si agrumenty, proč je důležité lpět na rychlosti načítání webu. Ukážeme si několik častých chyb a jak je možné webařské týmy kontrolovat. No a samozřejmě – jakou roli v tom celém hraje nová technologie AMP od Google. Máte ji nasadit?
CSS proměnné (Custom Properties)
CSS proměnné (Custom Properties)Martin MichálekPříklady využití CSS proměnných. Přednáška na Frontendistech v prosinci 2017. https://www.meetup.com/frontendisti/events/txhljmywqbrb/
Devel.cz: Bootstrap 4
Devel.cz: Bootstrap 4Martin MichálekVývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
AMP: Co řeší a co nového nabízí
AMP: Co řeší a co nového nabízíMartin MichálekPř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ů?
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é vzoryMartin MichálekPřístupnost nemusí bolet. Podíváme se na časté chyby, které kodéři a designéři sekají jako slepý Baťa cvičky. Pak si ukážeme pár jednoduchých tipů, jak bez velké námahy pomoci nevidomým uživatelům vašich webů. A hlavně se podíváme na několik správně nakódovaných návrhových vzorů. Víte jak navrhout například přístupný našeptávač?
Martin Michálek je frontend designér na volné noze s takřka dvacetiletou praxí. Píše blog Vzhůru dolů, spoluzaložil a vede spolek Frontendisti.cz. Hlavně ale pomáhá s návrhem a implementací webových uživatelských rozhraní. V poslední době pracuje pro klienty jako jsou VašeČočky.cz, Svobodná Evropa nebo Česká televize.
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin MichálekJak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Slasti a pasti prototypování v HTML
Slasti a pasti prototypování v HTMLMartin MichálekProcházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
10 praktických CSS3 a SVG řešení
10 praktických CSS3 a SVG řešeníMartin MichálekSVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
Debugování responzivních webů
Debugování responzivních webůMartin MichálekDemo z Frontendisti.cz. Video bude lepší. Bude k dispozici na frontendisti.cz.
Mobile First v praxi
Mobile First v praxiMartin MichálekPřednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu.
✎ http://www.vzhurudolu.cz/prirucka/mobile-first
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ůMartin MichálekProč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
Design webů v prohlížeči
Design webů v prohlížečiMartin Michálekhttp://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
Responzivní obrázky v praxi
Responzivní obrázky v praxiMartin MichálekCo potřebujete vědět o implementaci responzivních fotek a vektorů?
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?Martin MichálekCo by měl UXák vědět o responzivním webdesignu?
Přednáška pro UX Monday Plzeň.
Ach, ty mobilní prohlížeče
Ach, ty mobilní prohlížečeMartin MichálekAktuální stav českého trhu co se mobilních prohlížečů týká. Pseudobrowser. Podpora HTML5. Čas strávený v prohlížečích klesá, ale třeba Facebook app je taky browser.
Proč LESS?
Proč LESS?Martin MichálekProč LESS a pro koho?
Proč LESS používám?
Nevolte podle syntaxe
4 tipy pro pokročilejší
CSS preprocesory
CSS preprocesoryMartin Michálek1. Jak to funguje?
2. Co to umí?
3. Přínos pro mě?
4. Debugování
5. Který vybrat?
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)Martin Michálek— Responzivní webdesign jak jej definoval Marcotte je přežitý
— První problém je v rychlosti načítání: naštěstí tu máme Picturefill, lazy loading, compressive images a back-end
— Dalším problémem je pracovní postupy: Mobile Up namísto Desktop Down, hodně breakpointů, hodně verzí kódu a kód orientovaný na stránky namísto UI komponent
— Třetí problém: uživateli dáváme daleko víc než potřebuje: téma je AjaxInclude a podmíněné načítání assetů pomocí Modernizru
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é vzoryMartin Michálek
WordPress šablony a rychlost načítání (WordCamp Praha 2017)
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
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ůMartin Michálek
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?Martin Michálek
State of the art responzivních technikálií (Devel.cz)
State of the art responzivních technikálií (Devel.cz)Martin Michálek
Metriky rychlosti načítání
- 2. PageSpeed Insights: Měření oproti checklistu
- 4. DevTools / Network: Události DCL a Load
- 5. Tyhle dvě události jsou málo. O UX při vykreslování nic neříkají
- 6. TTFB DCL FP TTI LoadFCP
- 7. TTFB TTI Load Time To First Byte: — Jak rychlý je server a síť? — Důležité pro Crawl Budget. DCL FP FCP
- 8. TTFB TTI Load DOM Content Loaded: — Stažení a rozparsovaní HTML. — Koreluje s „Bounce Rate“. DCL FP FCP
- 9. TTFB TTI Load First Paint: — Cokoliv jiného než bílá obrazovka. — Uživatel: „Děje se něco?“ — Ve WPT je „Start Render“ DCL FP FCP
- 10. TTFB TTI Load First Contentful Paint: — První vykreslení obsahu. — Uživatel: „Je to užitečné?“ — V Lighthouse je „First Meaningful Paint“ DCL FP FCP
- 11. TTFB TTI Load Time To Interactive: — Stránka je renderovaná a zároveň interaktivní. — Uživatel: „Je to použitelné?“ — WPT ukazuje „First Interactive“ DCL FP FCP
- 12. TTFB TTI Load Load: — Všechno je stažené, včetně obrázků. — GA ukazují pro různé kontexty. DCL FP FCP
- 15. Chrome UX Report
- 17. Měření na reálných uživatelích a je vždy lepší než syntetická měření
- 18. Není to ale dost čí?
- 19. SpeedIndex
- 20. Speed Index je skóre. Čím nižší, tím lepší Lze snadno porovnávat v čase nebo třeba s konkurencí
- 21. OK, to by bylo měření. Ale co optimalizace?
- 23. K tomu vždy potřebujete vidět postup vykreslení, stahované soubory a události, které jsem zmiňoval
- 24. 1. Hlídat SpeedIndex/TTFB/load 2. Hlídat konkurenci 3. Větší weby a budoucnost: RUM metriky a automatizace 4. Nutno optimalizovat? Šup do timeline Doporučení na závěr