dogtrainer.sk - ako stránka schudla z 15 MB na 1 MB

Web dogtrainer.sk beží na WordPresse s WooCommerce. Keď sme ho prvýkrát premerali, PageSpeed ukázal mobilné skóre 32 a desktopové 43. Úvodná stránka vážila 15,25 MB a hlavný vizuál sa na mobile vykreslil až po 11,3 sekundách. Google pritom za dobrú hodnotu považuje 2,5 sekundy, takže roboty bolo dosť.

Obrázok, ktorý sa tváril ako SVG

Hlavný obrázok psa mal príponu .svg, no vnútri sa skrýval PNG zakódovaný v base64, s rozmermi 3508 x 4096 pixelov. Takmer desať megabajtov rastrových dát pre vizuál, ktorý je na stránke široký 697 pixelov. Zbytočný luxus.

SVG obal sme nechali, gradient aj geometria ostali rovnaké. Raster sme zmenšili na 1600 pixelov, previedli do WebP s priehľadnosťou a vložili späť. Z 13,8 MB tak ostalo 300 KB, rovnaký vizuál v štyridsaťkrát menšom súbore.

Video na mobile nesťahujeme vôbec

Video na pozadí malo 12,7 MB a dátový tok takmer 5 Mb/s, čo je na nemú slučku v pozadí zbytočne veľa. Po prekódovaní cez ffmpeg (CRF 28, faststart) z neho ostalo 3,5 MB a vyzerá rovnako.

Ešte dôležitejšia zmena: na mobile video nenačítavame vôbec. Namiesto neho sa zobrazí statický náhľad vo WebP so 126 KB. Video sa spustí len na desktope, až keď je načítaná celá stránka, a rešpektuje aj prefers-reduced-motion a šetrič dát. Mobilná verzia tým prišla o celé video naraz.

WebP a cache na rok

Dvanásť fotiek na úvodnej stránke bolo vo formáte PNG, dokopy 3 MB. Po prevode do WebP majú 312 KB. Vo WordPresse pritom nestačí len premeniť súbory, treba prepísať aj metadáta príloh, inak srcset naďalej ponúka pôvodné PNG. To isté platí pre obrázky vo widgetoch, ku ktorým sa bežné filtre nedostanú.

Hosting WebSupportu sa navonok tvári ako openresty, no pod proxy beží Apache a .htaccess funguje normálne. Keď sme doň pridali blok mod_expires, všetky statické súbory dostali Cache-Control na rok a objem súborov bez vyrovnávacej pamäte klesol zo 6,5 MB na nulu.

Prečo optimalizačný plugin zhodil web bez CSS

Najužitočnejšie ponaučenie prišlo na konci. Po zapnutí pluginu Autoptimize sa web zrazu načítal úplne bez štýlov. Plugin za to ale nemohol. V predvolenom nastavení ukladá optimalizované súbory s príponou .php a firewall WebSupportu takéto súbory v priečinku cache blokuje chybou 466. Je to ten istý mechanizmus, ktorý chráni wp-config.php, len tentokrát zablokoval CSS. Prehliadač tak namiesto štýlov dostal chybovú stránku.

Stačí jediná voľba: autoptimize_cache_nogzip prepne ukladanie na statické .css a .js súbory. Tie firewall púšťa a dostanú aj hlavičky s ročnou platnosťou. Až potom začala fungovať aj agregácia, štrnásť CSS súborov sa zlialo do jedného a zo stránky zmizli všetky render-blokujúce zdroje.

A ešte jedna pasca. Autoptimize v novších verziách odkladá neagregovaný JavaScript cez defer. Ak vám z výnimiek vypadne jQuery, každý inline skript s jQuery(document).ready spadne na chybu „jQuery is not defined". Odhalil to až audit konzolových chýb v Lighthouse. Poučenie: jQuery patrí do výnimiek vždy.

Prístupnosť zo 86 na 100

Pri prístupnosti to boli samé drobnosti: obrázkové odkazy bez alt textov, logo bez názvu, viewport so zakázaným priblížením, chýbajúci hlavný landmark a slabý kontrast v pätičke. Spolu ale pridali štrnásť bodov.

Jeden detail stojí za zmienku. Kontrast e-mailu a telefónu sme najprv opravili len v desktopovom kontajneri. Mobil ale používa iný blok s tými istými odkazmi, takže desktop ukazoval 100 a mobil zostal na 96, kým sme selektor nerozšírili aj naň.

Výsledok

• Mobilné skóre: z 32 na 58
• Desktopové skóre: zo 43 na 88
• Váha mobilnej stránky: z 15,25 MB na 1,05 MB
• LCP na mobile: z 11,3 s na 7,0 s
• CLS na mobile: z 0,274 na 0,017
• Prístupnosť: z 86 na 100, Best Practices a SEO na 100

Skóre výkonu medzi jednotlivými meraniami kolíše o pár bodov, takže väčšiu výpovednú hodnotu má váha stránky, LCP a CLS. Ďalší na rade je kritické CSS, ktoré by malo dostať mobilné vykreslenie pod dve sekundy.