Ocena PageSpeed je le eden od faktorjev, ki sestavljajo Googlov algoritem za rangiranje.  Več let je algoritem ocenjeval hitrost spletnih strani samo na »desktop« napravah, potem pa smo dobili še posodobitev. Vse več uporabnikov do spleta dostopa preko mobilnih naprav, zato je Google uvedel t.i. Mobile PageSpeed oceno.
PageSpeed ocene ne povezujemo več samo s hitrostjo nalaganja in uporabniško izkušnjo, saj je njena vloga vse večja. Nizka ocena vaše spletne strani vam bo prinesla nižjo pozicijo med rezultati iskanja. Nižja pozicija pa pomeni nižji obisk in posledično manj dobička za vas.

Tudi najnovejše raziskave nam kažejo, da uporabniki pričakujejo popolnoma naloženo stran v 2 sekundah. Obiskovalci, ki imajo zaradi predolgega nalaganja negativno izkušnjo, imajo kar 62 % manjšo verjetnost nakupa na tej spletni strani. Kaj pravite, se splača potruditi in izboljšati oceno? 😉
Kot lahko vidimo, je ocena spletne strani vse bolj pomembna. Če se nočete soočati s posledicami nizke ocene, morate stalno slediti trendu. V nadaljevanju vam predstavljamo nekaj priporočil, s katerimi lahko hitro izboljšate oceno svoje spletne strani.
 

Kaj vpliva na Google PageSpeed oceno?

Končna ocena je sestavljena iz 6-ih karakteristik, ki jih Google lahko izmeri na spletni strani:

  • First Contentful Paint – koliko časa je potrebno, da se pokaže prvo vsebino
  • Speed Index – koliko časa je potrebno, da je stran naložena
  • Time to Interactive – koliko časa je potrebno, da stran postane popolnoma interaktivna
  • First Meaningful Paint – koliko časa je potrebno, da je vidna glavna vsebina strani
  • First CPU Idle – koliko časa je potrebno, da je stran toliko naložena, da lahko obravnava vnos
  • Estimated Input Latency – koliko časa lahko traja, da se odzove na uporabnikov vnos v milisekundah med najbolj zasedenim 5 sekundnim oknom

Ocena, ki je podana v odstotkih, temelji na laboratorijskih podatkih Googlovega odprtokodnega sistema Lighthouse, ki je že del Google Choma. Na podlagi zbranih odstotkov nam orodje PageSpeed Insights pove, ali je spletna stran povprečna, počasna ali hitra. Orodje nam tudi pokaže časovnico, kjer lahko preko zaslonskih slik (»screenshotov«) spremljamo nalaganje spletne strani, dobimo pa še različna poročila:

  • Priložnosti (Opportunities) – seznam nasvetov za optimizacijo, s čimer lahko pospešimo nalaganje strani
  • Diagnostika (Diagnostics) – več informacij o delovanju strani (ima predpomnjenje, kompresijo itd.)
  • Uspešni pregledi (Passed audits) – seznam nasvetov, ki smo jih pri optimizaciji upoštevali

Nasveti za optimizacijo

Upoštevanje spodaj opisanih optimizacijskih nasvetov vam bo prineslo boljšo oceno, ta pa boljše pozicije, več obiska in več zaslužka. Seznam priporočil se nenehno izpopolnjuje, zato je nujno, da spremljamo novosti in spremembe na področju optimizacije. Pa si poglejmo točke, ki vam lahko prinesejo višjo oceno. 🙂

1. Izogibanje večkratnim preusmeritvam

Vsaka preusmeritev predstavlja določeno izgubo časa, zato se nepotrebnim preusmeritvam izogibamo. Preusmeritev s statusom 301 je smiselno uporabiti le takrat, kadar je bila vsebina odstranjena ali če moramo preusmeriti na ustrezen URL (uporaba https, www in brisanje znaka »/« na koncu URL-ja). Uporabimo največ eno preusmeritev! Ne preusmerjamo pa z namenom doseganja boljše uporabniške izkušnje (mobilni ali »desktop« prikaz strani), saj to lahko dosežemo z uporabo odzivnega dizajna (angl. Responsive Web Design).

2. Ustrezna velikost slik in kompresija

Slike v povprečju predstavljajo 80 % vsebine, ki jo je potrebno prenesti s strežnika, da je spletna stran prikazana. Večja dimenzija slike pomeni tudi več bajtov, zato z velikostjo slik ne pretiravamo in ne uporabljamo večjih dimenzij kot je to potrebno. Ker pa ne vem na kakšen zaslonu bo spletna stran odprta lahko uporabimo »odzivne slike«. To pomeni, da isto sliko shranimo v različnih dimenzijah, prikažemo pa le tisto, ki je najbolj primerna glede na velikost zalona. Med posameznimi formati slik lahko hitro preklapljamo s CSS poizvedbami.

3. Sodoben format slik

Z uporabo primernega formata datoteke lahko vsako sliko še dodatno kompresiramo. Če imate na spletni strani še zmeraj slike v JPG formatu, potem je čas za spremembo. Google je namreč uvedel nov slikovni format, imenovan »Next-Gen«. Slikovne datoteke nosijo končnico WebP. Nov format omogoča večjo kompresijo kot katerikoli drugi. Za test smo vzeli 120 KB veliko JPG sliko, ki je v WebP formatu zasedala le 80 KB. Če pomislimo, koliko slik imamo na spletni strani, lahko s tem prihranimo kar nekaj prostora in nalaganje spletne strani občutno pohitrimo.

Žal pa vsi programi še ne podpirajo WebP slik, zato moramo obstoječe JPG slike s kakšnim orodjem pretvoriti v WebP. Uporabimo lahko na primer spletni pretvornik image.online-convert.com. V prihodnosti pa bo ta format zagotovo bolj podprt.

4. Odloženo nalaganje slik

Slike, ki so pozicionirane nižje na spletni strani in do njih pridemo s »scrollanjem«, lahko nalagamo z zakasnitijo. Lahko se zgodi, da bo obiskovalec odprl neko drugo podstran ali celo zaprl spletno mesto še preden bo utegnil priti do določene slike. Zaradi tega slike prenašamo sproti, ko je to potrebno. Takšnemu načinu prikazovanja strokovno pravimo »lazy loading«, implementiramo pa ga lahko z različnimi orodji, na primer IntersectionObserver.

5. Zmanjšanje neuporabnega CSS-a

CSS (angl. Cascading Style Sheets) so slogovne datoteke, ki določajo dizajn spletne strani. Priporoča se, da je takih datotek čim manj, zato jih lahko združimo. Poleg tega iz končne datoteke lahko izločimo vsa nerabljena pravila, nepotrebne komentarje, večkratne presledke itd.
Pri navajanju barv se držimo tega, da namesto imen uporabljamo HTML kode, pri tem pa odvečne ničle spustimo. Primer: Če želimo uporabiti modro barvo, namesto ukaza blue napišemo #0000FF, to pa lahko okrajšamo v #FF.
Z različnimi orodji lahko CSS še dodatno zmanjšamo. Eno takih orodij je na primer CSSNano.

6. Zmanjšanje JavaScripta

Enako kot za CSS datoteke velja tudi za JavaScript. Programska koda naj bo napisana na čim krajši način. Že na primer daljše poimenovanje spremenljivk in funkcij bo celotno programsko kodo raztegnilo, zato moramo biti pri tem skrbni. Sicer pa se priporoča, da je programska koda brez nepotrebnih komentarjev, praznih vrstic in večkratnih presledkov. JavaScript lahko sami zmanjšamo, lahko pa si pomagamo s kakšnim orodjem, na primer UglifyJS.

7. Zmanjšanje besedila – kompresija

Tudi besedilo spletne strani lahko zmanjšamo. V ta namen nam Google priporoča, da na strežniku vklopimo funkcijo »gzip«. To pomeni, da bo kot odgovor na zahtevo strežnik poslal vsebino v kompresiranem formatu. S tem bomo prihranili kar nekaj bajtov, kar se pozna pri času za prvo vsebinsko barvanje. Kot alternativo klasičnemu gzip-u lahko uporabimo tudi format Brotli. Kompresija se na različnih vrstah strežnikov različno vklopi, zato si pri tem pomagamo z dokumentacijo.

8. Zmanjšanje in asinhrono nalaganje virov

Krajše CSS ukaze lahko pišemo neposredno v HTML oznakah (temu pravimo »inline« način). Resda se bo zaradi tega HTML dokument povečal, vendar hkrati s tem zmanjšamo zunanje CSS datoteke, kar vpliva na hitrost nalaganja strani.
Enako velja tudi za JavaScript. Dodatno lahko JavaScript nalagamo še asinhrono, kar pomeni, da se neodvisne skripte (ki ne potrebujejo neke druge skripte) nalagajo brez čakanja na pripravljenost neke druge skripte.
Tako CSS datoteke kot tudi JavaScript pa lahko vključimo šele v nogi HTML dokumenta. To pomeni, da se bo prvo vsebinsko barvanje prej izvedlo, saj vire prenesemo po tem, ko je spletna stran že delno naložena.

9. Prioritetno nalaganje virov

Spletni brskalniki lahko različne vire naložijo v različnem vrstnem redu, kar pa ni vedno najboljše. Z ukazom »preload« lahko brskalniku povemo, katere CSS-je in JavaScript-e mora naložiti prioritetno. Najboljši učinek dosežemo, če se najprej naložijo tisti viri, ki so potrebni za prvo vsebinsko barvanje. Primer uporabe:

<link rel=”preload” as=”script” href=”pomembna-skripta.js”>
<link rel=”preload” as=”style” href=”pomemben-style.css”>

10. Predpomnjenje datotek

Datoteke, ki se zelo redko spreminjajo, lahko predpomnimo (angl. cache). To pomeni, da si brskalnik takšne datoteke shrani v predpomnilnik in jih ob naslednjem obisku spletne strani ne prenaša. S predpomnjenjem posameznih datotek zmanjšamo količino podatkov, ki jih je treba prenesti s strežnika. Manj prenesenih bajtov pa ne pomeni samo krajši čas nalaganja, ampak tudi manjši strošek za uporabnike mobilnih podatkov.

11. Čim bolj hitra PHP koda in pravilno nastavljeni indexi v podatkovni bazi

Tega se bomo dotaknili samo na kratko, saj je to zelo široka tema za več člankov. 😉 Vaši izdelovalci spletne strani naj pišejo čim lepšo in optimizirano PHP kodo (ali v katerikoli drugi tehnologiji) in čim bolj optimizirajo in strukturirajo podatkovno bazo, saj je to temelj, da se je sploh smiselno ukvarjati z vsemi ostali točkami zgoraj.


12. Zmanjšanje CSS-je in JS-jev iz drugih virov

Tu vidimo malo večji izziv, namreč večina spletnih strani uporablja npr. Google Analytics, kode za remarketing od Googla in Facebooka, še malo bolj napredne spletne strani pa še widgete za marketing automation, Facebook komentarje ipd. in ponavadi ponavadi se ti viri ne nalagajo najbolj hitro. Zato poizkusimo uporabiti samo tiste, ki nam res prinašajo dodano vrednost, saj smo videli že primer, ko se je ena spletna stran ssamo zaradi tega odpirala 5 sekund dlje.

Zaključek

Vsa opisana priporočila smo pred pisanjem tega prispevka preizkusili tako na WordPress kot tudi na po meri izdelani spletni strani. Pri optimizaciji spletne strani na WordPressu si lahko pomagamo z vtičniki, po drugi strani pa ima veliko vlogo število nameščenih vtičnikov in njihova optimiziranost. Kljub temu pa lahko dosežemo zelo dobro oceno 😀 Na po meri izdelani spletni strani nas čaka veliko več dela, vendar smo pri nekaterih točkah optimizacije v večini primerov veliko bolj uspešni.

Oceni članek

Dodaj odgovor

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja