Checklist na rychlost webu

Nástroje pro měření

• Chrome DevTools / Lighthouse (F12 přímo v prohlížeči Chrome)
• Webpagetest.org
• PageSpeed Insights od Googlu
• Google Analytics
• Pingdom Website Speed Test
• Grafana k6 (dříve Load Impact)
• GTmetrix

Ověření backendu a serveru

Serverová část / webhosting

Provozujete web na vlastním dedikovaném serveru nebo virtuálním serveru? Zvažte, zda vás nelimituje jeho výkon.

• Rychlost serveru (CPU, RAM, SSD/HDD atd.)
• Konektivita serveru
• Geolokace serveru
• Vytíženost

Pokud provozujete web na klasickém webhostingu, pak zvažte, zda je jeho výkon / kapacita dostatečná. Nezřídka platí, že webhosting v řádu stokorun ročně neposkytuje dostatečný výkon / kapacitu a zpomaluje běh webu.

Webový server

• GZIP
  Návod je pro Apache a pro Nginx
• HTTP2
  Pokud web neběží na HTTP2, proberte s vaším dodavatelem, jak to zajistit. Pokud nyní máte HTTPS, tak to pro vás bude bezproblémový přechod z hlediska přesměrování. Pokud jste stále na http://, nezapomeňte na přesměrování. HTTPS je pro provoz HTTP2 nezbytný. Otestovat, zda váš web běží na HTTP2, můžete jednoduše na test pro http2.

Databáze

• Typ databáze
  Některé databáze jsou vhodné jen pro některé typy dat. Toto je na dodavateli respektive návrháři aplikace. Obvykle zde nebývá problém.
• Cache na DB
  Je potřeba probrat s vývojáři, zda probíhá cachování na úrovni DB. U menších projektů se obvykle neřeší.
• Ukládání na disk / v paměti
  Dává smysl až u větších řešení.

Aplikace

• Cachování
  Pokud web doposud necachuje, tak implementací jej obvykle výrazně zrychlíte.
• Počet dotazů do DB
  Jedním z podezřelých bývá i nevhodná konstrukce dotazů do databáze. Někdy je možné úpravou ušetřit mnoho. Musí to ale řešit vývojář.
• Architektura aplikace
  Na existujícím projektu se bude špatně řešit. Důležité je, že to, jak je aplikace navržena, ovlivňuje rychlost zásadně a je na dodavateli a rozpočtu, nakolik optimální řešení je možné vytvořit.

Ověření frontendu

Zdroje na stránce

• CSS do jednoho souboru HTTP/HTTPS
  Zkontrolujte v kódu, zda se nenačítá velké množství CSS souborů. Pokud ano, bývá vhodné jejich sloučení a minifikace.
• JS do jednoho souboru HTTP/HTTPS
  Zkontrolujte v kódu, zda se nenačítá velké množství JS souborů. Pokud ano, je často možné některé sloučit do jednoho a minifikovat. Pokud je to možné a JS nemá vliv na vykreslení stránky, používejte atribut async nebo defer viz níže.
• Nepoužívat velké knihovny, kde používáte 5 %
  Nepoužíváte obří knihovny, ze kterých použijete jen zlomek? Například často se používá knihovna jQueryUI, kde se použije pouze date picker apod.
• Nenačítat to, co nemusíte v hlavičce (critical CSS)
  Metodu je potřeba ideálně zavést do deploy procesu.
  - Pokud používáte Grunt: https://github.com/filamentgroup/grunt-criticalcss
  - Pokud Gulp: https://github.com/addyosmani/critical
• JS defer / async
  Tento způsob je dobré konzultovat s vývojáři. Tyto značky můžou při špatné implementaci rozbít správné fungování stránky, protože ovlivňují, kdy a jak se JavaScript stáhne a provede. Implementace je pak jednoduchá – viz příklady pro defer a async.
• Odebrat zdroje, které nepotřebujete
  Projděte v Chrome DevTools zdroje stránky v záložce network a zjistěte, zda jsou všechny opravdu potřeba. Koukněte i na zdroje ze serverů třetích stran. Jak dlouho se načítají? Odkud zdroj pochází, zjistíte tak, že najedete na řádek zdroje v DevTools.

Frontend – obrázky a videa

• Formát WebP
  Co je formát WebP, zjistíte přímo na stránkách Googlu:
  https://developers.google.com/speed/webp/
  Online nástroj pro konvertování:
  https://webp-converter.com/
  Některé grafické nástroje umí exportovat rovnou v tomto formátu, jako třeba Sketch.
• Responzivní obrázky
  Používejte atributy srcset a sizes u značky img nebo tag picture.
• Pokud to jde, použijte SVG
  Pro jednoduché obrázky použijte SVG. Loga firmy, jednoduché ikony apod.
• Zmenšování velikosti obrázků
  Zkontrolujte si, že nenačítáte zbytečně velké obrázky tam, kde nejsou potřeba. Zjistíte v DevTools, kde si zobrazíte záložku elements, pak kliknete na ikonu šipky ve čtverečku vlevo nahoře. Poté najedete na daný obrázek a můžete zjistit, jaká je skutečná velikost. Pokud vám obrázek ukáže pouze velikost, je velikost shodná s tím, jak se načítá. Pokud ukáže navíc údaj natural (v novějších verzích intrinsic), má obrázek jinou velikost, než by mohl mít.
• Načítat jen to, co je potřeba
  Používejte lazy-loading pro obrázky, které nepotřebujete ihned načtené. Knihoven existuje řada, jako třeba http://luis-almeida.github.io/unveil/, https://css-tricks.com/snippets/javascript/lazy-loading-images/ a další.
• U videa myslete na různá zařízení
  Pokud vkládáte video do stránky (nemyslíme z externích stránek, jako je YouTube či Vimeo), máte různé varianty pro mobilní zařízení nebo pro různé rychlosti připojení?

Frontend – fonty

• Co nejméně webových fontů
  Projděte si, jak dlouho se vám načítají fonty na webu, a zjistěte, kolik řezů z takových fontů používáte. Všechny?
• Můžete použít asynchronní načítání fontů
  Můžete použít knihovnu https://github.com/typekit/webfontloader pro asynchronní načítání fontů. Nebudou vám pak bránit ve vykreslení stránky.
• Správně definované fonty
  Jak správně nadefinovat fonty a jak je optimalizovat, naleznete v článku:
  https://www.keycdn.com/blog/web-font-performance/

Frontend – externí JS

• YouTube a Facebook dělejte přes lazy-loading
  Jde o vytvoření zástupného obrázku a načtení daných informací, až když si je uživatel vyžádá na kliknutí či tapnutí v mobilu. Ukázku pro YouTube můžete najít zde: https://codepen.io/tutsplus/pen/RRVRro.
• Některé JS se dají načítat asynchronně
• Když neměříte, nemějte JS kód na stránce
  Když neprovádíte sběr dat, nemějte nástroje pro A/B testy nebo nástroje pro nahrávání uživatelů v kódu. Pokud potřebujete nahrávat či testovat pouze nějakou stránku, spouštějte kód pouze tam.