Checklist na rychlost webu

 Nástroje pro měření

• Google Chrome Dev Tools / Lighthouse (F12 v přímo prohlížeči Chrome)
• Webpagetest.org
• Page speed test od Google Developers
• Google Analytics
• Pingdom Website Speed Test
• Load impact
• GTmetrix

Ověření Back-endu 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 na 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:// tak nazapomeň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í Front-endu

Zdroje na stránce

• CSS do jednoho souboru HTTP/HTTPS
  Zkontolujte 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
  Zkontolujte 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 data 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 Google DevTools zdroje stránky v záložce network a zjistěte, zda jsou všechny opravdu potřeba. Koukněte i na zdoje ze serverů třetích stran. Jak dlouho se načítají? Z jaké stránky je zdroj zjistíte tak, že najedete na řádek zdroje v DevTools.

Frontend - obrázky a videa

• Formát webp
  Co je to webp formát můžete zjistit přímo ze stránek Google:
  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 img scrset a sizes 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 vlevo nahoře šipky ve čtverečku. Poté najedete na daný obrázek a můžete zjistit, jaká je skutečná velikosti. Pokud vám obrázek ukáže pouze velikost, je velikost shodná s tím, jak se načítá. Pokud ukáže navíc informaci naturals: velikost. Má 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 exituje ř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 douho se vám načítají fonty na webu a projdě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 najt 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.

Potřebujete pomoci s návrhem či vývojem?