Využitie PageSpeed Insights alebo pár tipov, ako zrýchliť načítavanie webu
Aby sa váš web pri vyhľadávaní zobrazoval na čo najvyšších priečkach, je okrem iných dôležitých vecí potrebné zabezpečiť to, aby sa načítal čo najrýchlejšie. V tomto článku sa dozviete pár užitočných tipov, ako zabezpečiť rýchlejšie načítavanie stránky a aké nástroje vám pri tom môžu pomôcť.
Nástroje na meranie rýchlosti stránky
PageSpeed Insights
Ide o zrejme najznámejší nástroj na ohodnotenie rýchlosti webu od spoločnosti Google, ktorý vám napovie, čo je potrebné spraviť aby sa načítanie vášho webu zrýchlilo. Hodnotenie sa vytvára osobitne pre mobilné zariadenia a desktop. Takto vyzerá základné vyhodnotenie pre web www.bart.sk:
A takto vyzerá analýza, čo je potrebné spraviť pre lepšie ohodnotenie.
V časti Príležitosti je zobrazená analýza toho, čo by bolo dobré urobiť aby sa načítanie stránky zrýchlilo a taktiež odhad úspory času. V časti Diagnostika, PageInsights ponúka užitočné nápady, ktoré sa nemusia úplne týkať rýchlejšieho načítania webu, ale bolo by ich dobré vo vašej aplikácii upraviť, aby web dostal vyššie ohodnotenie.
GTMetrix
Podobným nástrojom ako PageSpeed Insights je aj nástroj GTmetrix. Tiež je k dispozícii ohodnotenie rýchlosti a analýza, čo by pomohlo túto stránku zrýchliť. K dispozícii sú dve ohodnotenia a to PageSpeed od Google a Yslow od Yahoo. Každé z nich vám okrem percentuálneho ohodnotenia vašej stránky ponúkne analýzu čo by bolo dobré vylepšiť aby bolo to ohodnotenie vyššie. Okrem základných vecí ako je čas načítania webu, veľkosť prenesených dát, počet requestov, ktoré sa vykonali a ďalšie je tu možnosť pozrieť si históriu meraní a podľa toho sa zorientovať či sa vám darí web optimalizovať. Výsledok celkovej analýzy vyzerá takto:
Ako zlepšiť hodnotenie webu
O nástrojoch na meranie rýchlosti webu sme sa niečo dozvedeli. Ale aké nástroje použiť, aby sme zlepšili hodnotenie webu?
Cache
Základom rýchlosti načítania je cachovanie. Ide o spôsob uloženia stavu stránky alebo jej časti na určitý čas, aby sa tak odľahčili napríklad dopyty na databázu. Ako príklad uvediem načítanie homepage e-shopu, na ktorej sa nachádza zoznam, ktorý obsahuje 5 najobjednávanejších produktov. Dáta o produktoch sú uložené v databáze, teda je potrebné pri načítaní stránky urobiť nejaký ten dopyt do databázy, aby bolo možné tento zoznam zobraziť. Pokiaľ by ste nepoužili cache, tak by sa tieto dopyty vykonávali pri každom zobrazení homepage, čo môže byť dosť náročné na databázu pri väčších objemoch návštevníkov.
Ako cache funguje?
Cache funguje tak, že sa určí nejaký čas, napríklad 10 minút, počas ktorého vám nevadí, že sa obsah niektorej časti stránky neaktualizuje. V našom prípade je zbytočné mať stále aktuálny zoznam najobjednávanejších produktov, keďže ten sa asi tak často meniť nebude. A tak spravíme to, že pri prvom načítaní zoznamu ho uložíme do cache pamäte na 10 minút. To nám zabezpečí, že každý ďalší návštevník našej stránky počas tých 10 minút nám už nespraví request dotaz na databázu, ale produkty sa vytiahnu z cache pamäte. Po uplynutí týchto 10 minút sa znova vykoná jeden request dopyt na databázu, ktorý prepíše predchádzajúce dáta, ktoré sa ďalších 10 minút budú využívať.
Využitie
Cache vie výrazne pomôcť pri zrýchlení webu hlavne vtedy, ak sa pri načítavaní vykonávajú zložitejšie databázové dopyty, ktoré trvajú dlhší čas. Tiež výrazne pomáha znížiť nápor requestov na databázu. Treba si však uvedomiť, ktoré časti je vhodné do cache pamäte ukladať. Nie je vhodné ukladať napríklad personalizované dáta, ktoré sa môžu meniť. To znamená, ak máme na e-shope prihláseného zákazníka a zobrazujú sa mu jeho naposledy prezerané produkty, tak toto cachovať nebudeme, keďže tento zoznam sa môže meniť každú chvíľu.
Cache do pamäte prehliadača
Ide o spôsob ukladania súborov, ktoré sú potrebné na zobrazenie stránky, do pamäte prehliadača. Pri prvom načítaní stránky v prehliadači sa súbory uložia do pamäte a pri opätovnom používaní sa tieto súbory už nesťahujú zo servera, ale používajú sa tie, ktoré má prehliadač uložené.
Využitie
Tento spôsob má veľa plusov. Pri mobilných zariadeniach výrazne šetrí prenos dát, keďže napríklad obrázok o veľkosti 200 kB sa natiahne iba raz pri prvom zobrazení a pri každom ďalšom sa už vytiahne z pamäte prehliadača. Ďalším plusom je aj rýchlejšie fungovanie stránky ako celku, pretože súbory sa už ťahajú z internej pamäte prehliadača a doťahujú sa už iba tie, ktoré neboli predtým zobrazené. Treba si však dávať pozor pri vývoji. Je potrebné versionovať súbory, aby prehliadač vedel, že sa súbor zmenil a má ho načítať odznova. To vieme zabezpečiť tým, že na koniec súboru “styles.css” pridáme nejaký GET parameter, napr. verziu. Názov teda bude vyzerať nasledovne: “styles.css?v=1.0.0”. Pri každej zmene súboru na serveri je potom potrebné zmeniť verziu.
Nastavenie .htaccess
Ak používame web server apache, cachovanie súborov na strane klienta vieme nastaviť cez súbor .htaccess. Pre príklad, ako je možné toto cachovanie nastaviť, uvádzam riadky, ktoré je potrebné vložiť do .htaccess súboru. Tieto konkrétne zabezpečujú cachovanie súborov typu .jpg, .css, .pdf a .js. Vedľa typov je uvedený aj čas, na akú dobu sa budú tieto súbory cachovať.
Minifikácia css a js súborov
Je to spôsob úpravy css a js súborov, ktorý je založený na odstraňovaní prebytočných elementov, ako sú napríklad nové riadky, medzery, komentáre a podobne. Ako to vyzerá pred a po minifikácii?
Pred:
Po:
Na minifikáciu je vhodné použiť nástroj gulp v spolupráci s balíčkom gulp-minify.
Využitie
Zmyslom minifikácie je zmenšenie veľkosti súborov a tým pádom aj zníženie času pri načítavaní týchto súborov.
Asynchrónne načítavanie obrázkov
Aby bolo možné stránku rýchlejšie zobraziť, existuje spôsob tzv. lazyloading, ktorý dočítava obrázky až po zobrazení stránky. Príliš veľa obrázkov na stránke, poprípade obrázky väčšej veľkosti, môžu výrazne spomaliť tzv. prvé zobrazenie stránky. Toto sa dá urýchliť spôsobom, že tieto obrázky sa budú načítavať asynchrónne, teda nezávisle od ostatných elementov potrebných na zobrazenie stránky. Stránka sa teda zobrazí skôr s tým rozdielom, že niektoré obrázky sa dočítajú až po jej zobrazení. V súčasnosti začínajú rôzne prehliadače podporovať parameter loading, teda pri načítaní obrázku by stačilo použiť loading=”lazy” napríklad takto:
Tento parameter, bohužiaľ, zatiaľ podporuje iba pár prehliadačov. V aktuálnej situácii je lepšie využiť jeden z mnoho pluginov, napr. pre jquery použiť plugin lazyload.
Využitie
Asynchrónne načítavanie obrázkov výrazne ovplyvňuje celkový dojem z rýchlosti načítania stránky. Je veľký rozdiel, či sa užívateľ pozerá na bielu stránku a čaká 5 či 10 sekúnd, kým sa mu stránka zobrazí, alebo sa stránka zobrazí za sekundu bez niektorých obrázkov, ktoré sa následne dočítajú.
Optimalizácia obrázkov
Pre rýchlosť stránky je veľmi dôležité, aby obrázky, ktoré sa načítavajú, nemali zbytočne veľkú veľkosť. Základom je úprava obrázkov pri ich nahrávaní na server. Je potrebné, aby sa tento obrázok programovo upravoval na predom určenú kompresiu a veľkosť. Dôležité je nájsť správny pomer medzi veľkosťou súboru a kompresiou, aby sa nestalo, že obrázky sťahujú veľa dát alebo kvalita obrázku je nízka. PageSpeed Insights má v obľube ponúkať na optimalizáciu obrázkov formát WebP, ktorý vyvíja Google. Problémom tohto formátu je však nižšia kompatibilita so staršími browsermi a takisto s iOS a macOS zariadeniami, keďže je dostupný v prehliadači Safari až od verzie 14.
Gzip kompresia
Gzip je kompresný algoritmus, ktorý pomáha znížiť množstvo dát, ktoré sa prenášajú medzi serverom a klientom. Ak prehliadač túto kompresiu podporuje, tak pri posielaní requestu pridá do parametra accept-encoding v hlavičke typ gzip. Server následne obsah zkomprimuje a odošle ho prehliadaču s parametrom content-encoding: gzip v hlavičke. Prehliadač tak vie, že jeho požiadavke bolo vyhovené a musí tento súbor pred použitím rozbaliť. Ak používame web server Apache, tak je možné povoliť gzip v súbore .htaccess pridaním nasledujúcich riadkov:
V tomto prípade by boli komprimované súbory typu text, html, javascript, css a xml.
Tento článok popisuje základné spôsoby ako výrazne zrýchliť váš web. Je potrebné poznať tieto spôsoby, keďže google kladie dôraz na rýchlosť stránky a to sa následne odráža aj na umiestnení vašeho webu vo vyhľadávaní. Dúfam, že vám toto základné zhrnutie pomôže k tomu, aby návštevníci z vášho webu neodchádzali z dôvodu, že je pomalý a počas jeho načítania si stihnú uvariť aj kávu 🙂
Neprehliadnite výsledky našej programátorskej práce.
