MelusovDvor.sk: ako vyzerá web so 100 bodmi v PageSpeed a čo za tým je

Sto bodov v Google PageSpeed nie je výsledok optimalizačného pluginu. Je to dôsledok toho, čo web nenesie. Web agropenziónu Melušov dvor, melusovdvor.sk, má na desktope 100 bodov zo 100 vo všetkých štyroch kategóriách: výkon, prístupnosť, osvedčené postupy aj SEO. Prvé vykreslenie aj hlavný vizuál sa objavia za 0,4 sekundy, celkový čas blokovania je 0 ms. K ničomu z toho sme sa nedostali doinštalovaním. Dostali sme sa k tomu tak, že sme veci nepridali.

Čo je na webe a čo tam nie je

Melušov dvor ponúka ubytovanie a prenájom priestorov na akcie. Web má informačné sekcie, galériu a kontaktný formulár, viac nepotrebuje. Práve tu sa rozhoduje o rýchlosti: bežný web na WordPresse by na tie isté tri veci niesol šablónu, page builder, galériu, formulár a SEO doplnok, každý s vlastnými skriptami a štýlmi, ktoré prehliadač musí stiahnuť, aj keď ich stránka na obrazovke nepoužije.

Šesť rozhodnutí, ktoré urobili sto bodov

• Žiadne zbytočné JS knižnice. Galéria ani menu nesťahujú knižnicu, z ktorej by stránka použila zlomok.
• Obrázky vo WebP a v správnych veľkostiach, takže na mobil odchádza malá verzia, nie fotka pre veľkú obrazovku.
• Kritické CSS inline, zvyšok asynchrónne. Štýly potrebné pre prvú obrazovku sú priamo v HTML, ostatné sa doťahujú, keď už návštevník stránku vidí.
• Všetky skripty s atribútom defer, takže žiadny skript nezdržuje vykreslenie.
• Sémantické HTML a ARIA atribúty. Nadpisy, orientačné body a popisy sú tam, kde ich čítačka očakáva, a to je celá prístupnosť.
• HTTP/2 a kompresia na serveri. Základ, ktorý by dnes nemal chýbať nikde.

Rovnaký prístup sme uplatnili aj pri webe RentIT.sk.

Prečo je to vo WebCreatore NG jednoduchšie

Melušov dvor beží na našom redakčnom systéme WebCreator Next Gen. Body zo zoznamu vyššie tam nie sú nastavenia, ktoré treba strážiť. Je to spôsob, akým systém pracuje: z každej nahranej fotky vznikne WebP v troch veľkostiach, vyrovnávacia pamäť sa pri uložení vyprázdni sama a web si neťahá skripty pluginov, lebo žiadne pluginy nemá. Majiteľ penziónu nahrá fotku izby alebo prepíše cenu v administrácii a sto bodov zostáva. Na WordPresse to isté vyžaduje plugin na obrázky, plugin na cache, plugin na kritické CSS a človeka, ktorý po každej aktualizácii skontroluje, či sa niektorý z nich nepobil s ostatnými.

Čo si z toho vziať

Ak má váš web nízke skóre, nehľadajte plugin, ktorý ho zvýši. Spočítajte, čo stránka sťahuje a čo z toho návštevník na obrazovke naozaj vidí. Sto bodov nie je vyhradených pre špeciálne weby. Čím menej vecí web nesie, tým ľahšie sa k nim dostane. Ako sme trojkrokovou opravou zdvihli mobilné skóre iného webu zo 44 na 93, opisujeme v samostatnom článku. Ak chcete zmerať a prejsť svoj web, napíšte nám.