Nástroje pro měřění

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, zvažte, zda je jeho výkon / kapacita dostatečná. Ne zřídkakdy 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
    Toto 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
    Toto také dává smysl až u větších řešení.

Aplikace

  • Cachování - Pokud web doposud necachuje, 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 - Tu budete špatně řešit na již existujícím projektu. Důležité je, že to, jak je aplikace navržena ovlivnň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ód, 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 kteý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. Tedy prokud 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. Tyo značky můžou při špatné implemntaci 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 deferasync.
  • Odebrat zdroje co nepotřebujete
    Projděte v Google Dev tools 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 douho se načítají? Z jaké je zdroj stránky zjistíte tak, že najedete na řádek zdroje v Dev tools.

Fontend - 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 aributy img scrset a sizes, nebo tag picture.
  • Když to jde použijte SVG
    Pro jednoduché obrázky použíjte SVG. Loga firmy, jednoduché ikony apod.
  • Zmenšit velikost obrázků
    Zkontorlujte si, že nenačítáte zbytečně veliké obrázky tam, kde nejsou potřeba, to zjistíte v Dev tools pokud si zobrazíte záložku elements a 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áze 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í?

Fontend - fonty

  • Co nejméně webových fotnů
    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ů a tak vám nebudou 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/

Fontend - externí JS

  • Youtube, 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 pomoct s rychlostí webu?

Rádi vám sím pomůžeme.