Opis projekta

Za razliko od običajnih in dokaj pogostih update-ov tokratni vključuje precej obsežna dela okoli optimizacije slik. Ker smo ob dosedanjih analizah optimiziranosti strani vsakokrat gledali v rdeče opozorilo Serve images in next-gen format, smo še posebej zainteresirani pogledati, koliko bo uporaba next-gen slik (JPG/PNG > webP) skupaj z ostalimi ukrepi vplivala na izboljšanje Core Web Vitals ocene. 

Rezultati bodo prikazani na primerih 2-eh strani:

  1. Restavracija Mirje - Home page 
  2. Restavracija Mirje - Jedilni list 

Home page restavracije je precej tipična oblika (hero-featured image, text, galerija) in je zato smiselen kandidat za analizo. Druga je stran jedilnega lista, ki pa je praktično brez slik znotraj vsebine. V nadaljevanju več o tem, zakaj nam je bilo pomembno.

TL;DR; REZULTATI

Rezultati izboljšanja na Home Page

Screesnho - Restavracija Mirje - Home page

rezultati na Jedilnem listu (light page)

Screesnho - Restavracija Mirje - Home page

 

 
 

Core Web Vitals kot glavni kazalec optimiziranosti

Če Google reče, da bo nekaj opazno vplivalo na položaj vaše strani na iskalniku, potem se je pač potrebno potruditi

Nekoč je prevladovalo mnenje, da se stran optimizira s hitrejšim strežnikom. Zdaj je to le predpogoj. Klik MALL je že izredno hiter sistem in zagotavlja zelo odzivne spletne strani in trgovine, a CWV oz. novodobni indikatorji OPTIMIRANOSTI so v primerjavi z dosedanjimi kazalci nekaj precej novega in drugačnega. 

Ker je smiselno pričeti optimizirati na delu, ki lahko prinese največ napredka, smo se osredotočili na Largest Contentful Paint (LCP), ki predstavlja 25% performance ocene. 

Largest Contentful Paint - LCP

Kaj pa je LCP? To je element, ki na uporabnikovem zaslonu po nalaganju strani zasede največ prostora. 

Kako si Google predstavlja optimalen LCP? Za dober LCP morate imeti čim hitrejši prikaz vsebine na delu spletne strani, ki zajema največji del uporabnikovega zaslona.

V praksi je LCP vsebina običajno naslov strani, hero oz. featured slika ali slider na vrhu vsebine vaše strani. In ker ni le ena stvar, morate optimizirati prikaz za različne oblike vsebine.

Če LCP predstavlja text (npr. naslov strani), velikost podatkov ne bo problem. Glavna težava bo, da velika večina strani danes uporablja custom font-e za oblikovanje texta in naslovov (iz Google Fonts ipd.). Ta font se mora naložiti poleg ostale vsebine, nato pa ga brskalnik uporabi za oblikovanje texta strani. Ena majhna znanost je nastala, kako za dobro uporabniško izkušnjo najbolj učinkovito prikazati oblikovani title (Optimize webfont loading and rendering, Flash of invisible text, Display of unstylized text...).

Če LCP predstavlja slika, naj bo ta čim manjša ob zadostni kvaliteti, naložiti se mora čim prej (po možnosti prioritetno glede na ostale dele strani), vse ostale slike spodaj pa naj se po možnosti naložijo čim kasneje, da pohitrimo nalaganje. Slika naj bo v webP ali AVIF formatu. Niti pod razno ne postavljati kakšnih oglasov nad hero sliko, ki bi po nalaganju LCP-sliko zamaknili navzdol. Premiki vsebine (npr. animacije) lahko zelo slabo vplivajo na končni rezultat.


Precej drugačna "navodila" od nekdanjih "Stran naj se naloži v max. 2 sekundah", a ne?

Obstajajo, seveda, tudi poenostavljene rešitve. Primer s sliko lahko najbolj enostavno rešite tako, da je slika majhna (~500px široka, 30-100kB) in brez posebnega oblikovanja postavljena na vrh vsebin.
Kompromisi? Zaradi majhne resolucije bo lepo videti le na telefonu. Social platforme slike ne bodo auto-predlagale za shared image... Za mobile-responsive design, ki bi imel lepo hero sliko na vseh velikostih zaslona in ki bi umogočal uredniku objavljanje vsebin brez posebnega znanja HTML, css, oblikovanja slik... postane naloga precej bolj kompleksna. 

Pri Core Web Vitals LCP optimizaciji tako ne gre le za sliko ali naslov strani, ampak za vsebino na delu zaslona. Še več - gre tudi za način prikaza te vsebine. Po kar nekaj testiranjih in učenju o CWV smo videli, da potrebujemo dodatne, relativno kompleksne nadgradnje za res dober rezultat spletnih strani naših strank.

 
 

Analiza začetnega stanja

Slike prikazujejo screenshot-e izvedbe Core Web Vitals testov s Chrome Lighthouse orodjem pred optimizacijo:

  • Home Page (Desktop)
  • Home Page - seznam JPG slik in njihovih velikosti (Desktop)
  • Home page (Mobile)
  • Jedilni list (Desktop)
  • Jedilni list (Mobile)

V spodnjem PDF dokumentu je tudi poročilo s seznamom priporočil. Nekatere od teh točk smo naslovili zelo eksplicitno, določene izboljšave bodo pa rezultat optimizacije več različnih sprememb.

Opazite lahko, da ima stran jedilnika že pred optimizacijo izredno dobre ocene (90+). Razlogi so v tem, da je Klik MALL že precej optimizirana platforma, stoji na našem odličnem gostovanju, stran jedilnika pa nima skoraj nobenih velikih slik in tudi HTML koda vsebine je precej optimalna. Omenili smo, da smo to stran namenoma izbrali za test in predstavitev. Na strani s tako lahko vsebino lahko predpostavimo, da ta izredno malo vpliva na rezultate CWV in je vsa razlika do max. performance ocene 100 posledica suboptimalnosti strežnika in template-a. Ker imamo na tem mestu (izredno) dobro performance oceno, lahko sklepamo - če ima kakšna od strani izredno slabo oceno, je razlog verjetno v vsebini. 

2021-11-14 Analiza Core Web Vitals z Lighhouse. Stran: Restavracija Mirje - Homepage. Mobile

Predogled za strani VSE od 3

 
 

Opis izvedenih del

Nadgradnje in popravki so bili na vseh nivojih platforme (3-je nivoji, kjer se izvaja OPTIMIZACIJA SPLETNE STRANI), okvirni načrt pa so sestavljale sledeče točke: 

  • Konverzija JPG slik v webP + izdelava več velikosti thumb-ov za posamezno sliko.
  • Nadgradnja algoritma v točkah, ki vplivajo na Largest Contentful Paint (LCP).
  • Zmanjšanje količine podatkov, ki jih uporabnikov brskalnik prenese ob obisku strani.
  • Drugi povezani popravki za priporočila, ki jih dobimo na testih

 

Podrobnejši opis izvedenih del:

 

1. Konverzija slik iz JPG > webP 

Strežnike in uredniški sistem smo nadgradili z možnostjo (avtomatizirane) konverzije JPG slik v webP format. Več o pomembnosti uporabe webP formata slike in prednostih, ki jih ta prinaša, smo pisali tukaj 

2. Uporaba SRCSET namesto običajnega IMG za določene slike

S pravilnim zapisom in več različnimi velikostmi slike (thumb-i) lahko brskalniku damo na voljo opcije, da izbere najbolj ustrezno glede na napravo uporabnika. Največje izboljšanje te točke je v velikosti prenesenih slik (oz. podatkov) in posledično hitrejšem nalaganju.

3. Izboljšanje algoritma template-a

Če template zazna mobilno napravo, avtomatično spremeni max. sliko za prikaz od npr. galerije. Ni smiselno na telefonu prikazovati zoom-in sliko v originalnih1920x1080px, ker bo že 1200px slika več kot dovolj. Bo pa 50% manjša po velikosti.
Za določene template-e objav (npr. blog) se avtomatično kreira HTML izpis, ki mnogo bolj optimalno prikaže Hero / Featured sliko, s čimer znatno vpliva na LCP oz. performance oceno CWV. 
V tem delu je še veliko možnosti, a žal je obvezna spremljava večja kompleksnost (npr. če smo prej skrbeli za 2 sliki - original in thumb, zdaj skrbimo za uporabo 6-8 thumb-ov na posamezno sliko)

4. Nalaganje slik z loading=lazy. Tako urejene slike, ki se nahajajo izven vidnega polja zaslona (npr. galerija v spodnjem delu strani), brskalnik prikliče in naloži šele ob uporabnikovem scrollanju proti temu delu vsebine. S tem je manj podatkov za prenesti, preden se lahko prikaže zgornji del strani. Če uporabnik ne poscrolla dovolj nizko, se te slike sploh ne bodo prenašale.

5. Zamenjava in optimizacija stalnih slik v footer-ju. 

6. SEO izboljšava - vnos manjkajočega opisa dokumenta. Čeprav se document teaser ne pojavi nikjer v vidni obliki vsebine za uporabnika, smo ga vnesli in tako dodali opis med meta tags strani. 

7. SEO izboljšava - vnos alt opisov za slike, ki jih niso imele.

8. Server config: Na NGINX strežniku smo povečali max-age Cache policy za statične elemente (slike, js, css...). Prej smo imeli to nastavljeno na 7 dni, a dobra praksa in CWV priporočila navajajo 365 dni+.

NGINX headers config

location ~* .(?:jpg|jpeg|gif|png|ico|xml|webm|webp)$ {
    # OLD
    expires 7d; 
    add_header Cache-Control "max-age=604800, public";

    # NEW
    expires 365d; 
    add_header Cache-Control "max-age=31536000, public";
}

location ~* .(css|js|html)(?ver=[0-9.]+)?$ {
    expires 1w; # OLD
    expires 365d; # NEW
}

*Ta sprememba je lahko zelo težavna za strani, kjer se želi imeti slike na naslovih in s preprostimi (npr. https://domain.com/assets/picture-cat.jpg) ali css datoteke na https://domain.com/static/style.css), a se ti elementi spreminjajo. Zato je internet vse bolj poln imen datotek, kot so webp-midi-Js0Uw.webp)  

 

 
 

Rezultati

Vsak test smo zagnali 2x npr. Home page > Desktop (2x) + Mobile (2x) ter vzeli povprečno oceno. 

Rezultati (Home page)

Desktop (pred optimizacijo)

  • 80
    Performance
  • 100
    Best Practices
  • 82
    SEO

Desktop (po optimizaciji)

  • 89.5
    Performance
  • 100
    Best practices
  • 100
    SEO

Mobile (pred optimizacijo)

  • 57
    Performance
  • 93
    Best Practices
  • 81
    SEO

Mobile (po optimizaciji)

  • 62.5
    Performance
  • 96.5
    Best practices
  • 96
    SEO

Rezultati (Jedilni list)

Desktop (prej)

  • 97
    Performance
  • 100
    Best Practices
  • 91
    SEO

Desktop (po optimizaciji)

  • 98
    Performance
  • 100
    Best practices
  • 100
    SEO

Mobile (pred optimizacijo)

  • 69
    Performance
  • 93
    Best Practices
  • 88
    SEO

Mobile (po optimizaciji)

  • 71.5
    Performance
  • 96.5
    Best practices
  • 96
    SEO
 
 

Zaključki

Občutki ob tej nadgradnji so nekoliko mešani. Po eni strani je potrebno precej dela in privajanja na CWV kazalce, po drugi pa se strani nalagajo opazno hitreje in ob manjši porabi podatkov. Kot avto, ki bi ga ob manjši porabi lahko vozili hitreje in dlje, ampak je priročnik za uporabo precej debelejši. Na račun večjega dela administratorjev in programerjev bodo uporabniki deležni boljše uporabniške izkušnje, Google pa bo kot siva eminenca interneta takšne aktivnosti nagrajeval z boljšimi pozicijami med rezultati iskanja. Tako nekako je videti Tehnični SEO v 2021.

Posredno se je razširila definicija Hitrosti strani: Prej je bila to hitrost odzivnosti strežnika, zdaj pa govorimo o optimiziranosti strani za hitrejši prikaz v brskalniku (ki zajema tudi odzivnost strežnika)

Pomemben rezultat analize so tudi informacije:

  1. Stopnja optimiziranosti core-platforme in CMS (z analizo strani jedilnika kot lahke strani
  2. Dosegljivost stopnje optimiziranosti za strani, kjer je več (velikih) slik (slider-jev, galerij, predogledov PDF...).
  3. Ugotovitve o zmanjšanju velikosti strani z uporabo webP slik. Home page smo zmanjšali za ~45-50% samo s konverzijo slik (iz 6MB na 3.3MB). Če imate v najemu zunanje CDN storitve, uporabljate izključno JPG/PNG slike in imate visoke zneske za outgoing bandwidth, posvetite webP formatu več pozornosti.  

Želite narediti analizo optimalnosti za svojo stran? Imate 2 hitra načina:

  1. V Google Chrome-u odprite želeno stran za test, pritisnite F12 in izberite zadnji zavihek Lighthouse. Zaženite desktop ali mobile test in počakajte par sekund na ocene in priporočila.
  2. Odprete stran PageSpeed Insights, vnesete URL strani in stisnete Analyze. 

 

Pripravljate novo spletno stran? Ali pa je obstoječa prepočasna? Kontaktirajte nas. Kot vidite, delamo s Klik MALL Blagajna precej zanimive (in hitre) stvari.

 

Napisal:
Vladimir Mijatović

 

 


 
Toast message
Toast-Top message