Fiddler - web debugger

Pavel Tipy & triky, Zrychlení webu

Již jsme zrychlovali web zmenšením obrázků, minifikací skriptů, vkládáním DataURI, tvořením sprite obrázků a cachováním a gzipováním dat. Dnes si ukážeme, jak otestovat, jestli vše funguje správně.

Fiddler - web debugger

V minulých dílech jsme si zrychlovali web technikami:

1. díl: Cachujeme, GZipujeme, zrychlujeme
2. díl: SVG a PNG Sprite, zrychlujeme podruhé
3. díl: Minifikace - zrychlujeme po třetí
4. díl: DataURI - zrychlujeme po čtvrté
5. díl: Fiddler - web debugger 
6. díl: Nastavení GZip komprese u souborů s fonty
Bonus: Automatizace s Gruntem - většinu zde popsaných technik můžete zautomatizovat pomocí Gruntu, ušetří vám to čas i námahu

Nyní je načase, abychom zjistili, jestil vše hraje a funguje jak má.

Fiddler - Zkoumáme provoz

Skvělý nástroj pro sledování provozu na webových stránkách je Fiddler. Je free a pro různé systémy, stačí jej stáhnout a používat. Pokud jej nechceme instalovat, stačí EXE soubor rozbalit pomocí nástroje 7Zip a spustit.

Zapneme filtr pro náš web

Fiddler odchytí veškerý provoz, všech webů, což by mohlo vytvořit dlouhý nepřehledný seznam požadavků. V záložce v pravé části okna Filters můžeme zaškrtnou Use filters a vybereme z druhé roletky Show only the following hosts a napíšeme URL kterou chceme sledovat.

Filtrace provozu

Co načítá web při první návštěvě a při dalších

Otevřeme si náš web, spustíme Vývojářské nástroje. Vymažeme si odchycený provoz a necháme načíst náš web znovu pomocí CTRL+R, a uvidíme, co vše si web stáhne, když je cache prázdná. Poté zavřeme vývojářské nástroje, a můžeme web načíst znova. Jestliže ukládáme věci do cache, vůbec by se v seznamu neměly objevit. Ukázky jsou z titulní stránky mého portfolia. Během načtení bez cache se načítalo vše, jsou to požadavky s ID 2-31. Poté co jsem stránku navštívil znova, již byl pouze požadavek na HTML stránku s ID 48.

Ukázka provozu

Všimněte si požadavku #2, jde pouze o přesměrování z www.kutac.cz na www.kutac.cz/reference/. Lehce můžete zjistit, kolik přesměrování opravdu probíhá. Také u požadavků na font s #22 - #25 si můžete všimnout nízké hodnoty max-age. Když nevložím do htaccess i font soubory, cachují se na defaultní hodnotu 600s jak jsme si ukázali v článku o cachování.

Mnohé ikony a další v seznamu stahovaných dat také nenalezneme, protože prohlížeč podporuje DataURI a nemusí je stahovat zvlášť.

Fiddler toho umí mnohem více

Přesto, že program je volně k použití a nemusíte za něj platit, umí toho opravdu hodně. Veškeré možnosti naleznete na Key Features


Doufám, že vám tento program pomůže ještě více zlepšit rychlost vašeho webu. Podělte se s námi jak se vám to povedlo...

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

Async / await

Asynchronní programování v Javascriptu bez callbacků a Promise nemusí být nutně sci-fi. Co všechno umí klíčová slova async /...

Další články