Checklist na rychlost webu

Připravili jsme pro vás seznam, podle kterého můžete postupovat při hledání příčin pomalého webu. Pokud budete mít nějaké otázky, kontaktujte nás.

 Nástroje pro měření

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.