Kako ubrzati web stranicu u 10 koraka da prođe Googleov test

U ovom tekstu doznat ćete kako ubrzati web stranicu, odnosno kako optimizirati web stranicu da zadovolji Googleov Core Web Vitals test. Iako sam prolazak na testu ne znači da će vaša stranica automatski imati bolje SEO rezultate od drugih stranica, elementi infrastukture stranice poput brzine imaju važno mjesto među ranking faktorima, odnosno mogu utjecati i do 15% na pozicioniranje stranice među rezultatima pretrage.

 

Zašto je Web Core Vitals bitan?

Strpljenje možda jest vrlina, no korisnici nemaju strpljenja. Umjesto da se fokusirate na to da vam je web lijep, s ogromnim fotografijama i morem pluginova koja rade čudo, a na stranici iskaču kojekakvi prozori, fokusirajte se na korisničko iskustvo vaših korisnika. To je zapravo i fokus Googleovog novog testa iz lipnja 2021. godine.

Google je od veljače 2022. i za desktop verzije webova počeo uvoditi tzv. page experience ranking.

Ovim testom potiču se vlasnici web stranica da naprave bolje i brže web stranice koje ne muče korisnike. Drugim riječima, web stranice koje prolaze test brzo se učitavaju, nemaju nestabilne elemente dok se učitavaju i lako se koriste.

Dakle, imati sve u zelenom je POŽELJNO, ali to nikako ne znači da je stranica čiji su rezultati na testu blistavi automatski najbolja.

PAGE EXPERIENCE ili KORISNIČKO ISKUSTVO NA VAŠIM WEB STRANICAMA, u većini slučajeva nije presudan ranking faktor.

Vaša stranica neće odjednom poletjeti prema prvim rezultatima na Googleu samo zato jer se na testu Web Core Vitalsa sve zeleni.
SEO je zbroj jako puno faktora, od čega su Web Core Vitals samo jedan dio. Ali bitan dio.

Sadržaj je svakako i dalje kralj.

 

7 besplatnih alata za Googleov Core Web Vitals test

 

 

 

Ovako izgledaju primjeri testova:

 

1) Stranica ne prolazi test

 

 

2) Stranica prolazi test

 

 

Koliko brza treba biti stranica?

 

 

Ne smijemo pustiti korisnika da čeka jer bi lako mogao odustati i otići dalje. Kad nam se nešto predugo učitava, pomislimo da imamo problema s vezom ili da stranica nije dobra te nerijetko kliknemo gumb “back.”

 

• Ako se stranica uspori i brzina učitavanja se popne s 1 na 3 sekunde, bounce rate se povećava 32%
• Ako se brzina s jedne sekunde poveća na 6 sekundi, bounce rate se povećava 106% (izvor: Google)

 

Što se brzine učitavanja tiče, Google tolerira do 2.5 sekunde učitavanja da bi vam sve bilo u zelenom, tj. da bi vaša stranica prošla Googleov test.

No bez panike! Trenutno većina stranica to ne zadovoljava prema Screamingfrogu, koji su radili test na 20.000 URL-ova. Tek 12% mobilnih stranica prolazi test.

No vidite li ovakav rezultat gdje se stranica učitava čak 7 sekundi, ipak je vrijeme je za akciju ubrzavanja. Ne toliko možda zbog Googleovog testa, koliko zbog korisnika.

 

 

 

Kako poboljšati LCP (brzinu učitavanja) da biste prošli Googleov Web Core Vitals test:

 

1. Smanjite vizuale na stranici na potrebne dimenzije
2. Kompresirajte fotografije i cijelu web stranicu
3. Postavite vizuale u next-gen formatima
4. Sadržaj neka se djelomično učita (lazy loading)
5. Koristite CDN na hosting platformi
6. Smanjite broj pluginova
7. Optimizirajte Javascript i CSS
8. Koristite brzi hosting
9. Povećajte vrijeme kaširanja stranice
10. Maknite slidere

 

Proći ćemo detaljnije kroz svaku točku.

 

1. Smanjite vizuale na stranici na dimenzije bloka stranice

 

Što ovo znači? Ako vam je dimenzija vizuala na stranici koja se prikazuje korisniku npr. 800×600, nema potrebe da koristite veće dimenzije koje se onda automatski prilagođavaju. Ne trebate uploadati fotografiju u originalnoj dimenziji, nego je izrežite na 800×600 i takvu postavite na web stranicu.

Besplatne fotografije i ilustracije za web na 60 free stock servisa – iskoristi ih!

 

2. Kompresirajte teške fotografije, ali i web stranicu

 

U prosjeku polovica sve težine web stranice odnosi se na fotografije. Kompresirati ili smanjiti težinu vizuala na web stranici znači ogromnu priliku da ubrzate web stranicu.

Fotografije i vizuali velikih dimenzija nepotrebno usporavaju stranicu kojoj treba više vremena da se učita jer mora prikazati ogromne slike. Posebice su problematične .png fotografije koje su u pravilu teže od drugih formata.

Optimalno je da fotografije odrežete na željene dimenzije i onda im smanjite težinu tako da umjesto 1 MB, fotka bude teška 100 KB.

Postoji nekoliko alata koji vam mogu pomoći u ovom:

• Adobe Photoshop
• BIRME
• Kraken.io
• Bulk resize Photos
• Online Image Optimizer
• JPEG &PNG Stripper
• SuperGIF

 

Možete koristiti i neki Worpressov plugin za optimizaciju slika koji će automatski optimizirati slike pri uploadu. Isprobajte neke od ovih:

• ShortPixel
• Imagify
• Smush
• Optimole
• Imsanity

 

Za kompresiranje web stranice koristite super popularan Gzip.

Gzip (skraćeno od GNU Zip) je učinkovita metoda kompresije koja može smanjiti težinu web stranice i do 70%.

Nakon što ste napraviti Gzip kompresiju, podesite i server da omogući kompresiju:

• Apache: koristite mod_deflate
• Nginx: koristite HttpGzipModule
• IIS: konfigurirajte HTTP Compression

 

3. Postavite vizuale u next-gen formatu

 

Neki od formata fotografija nove generacije su JPEG 2000, JPEG XR i WebP. Međutim, mnogi web preglednici još ne podržavaju nove formate JPEG 2000 i JPEG XR pa je najbolja opcija koristiti WebP format.

WebP je format slika koje je Google razvio još 2010. godine, a koji u usporedbi s  JPG, GIF i PNG formatima ima značajno manju težinu slike.

 

4. Koristite djelomično učitavanje ili lazy load

Lazy loading (u doslovnom prijevodu bi značilo lijeno učitavanje) je tehnika optimizacije online sadržaja koja smanjuje inicijalno vrijeme učitavanja stranice.

Pomoću lazy loadinga korisnicima se učitava samo onaj sadržaj koji im je potreban, odnosno sadržaj kojeg trebaju vidjeti odmah. Jedan od primjera lazy loadinga jest inifinity scroll gdje se stranica učitava dok skrolate prema dnu stranice.

Trebate ipak pripaziti da vam lazy loading ne utječe na SEO ranking zbog krivog indeksiranja neučitanog sadržaja.

 

5. Koristite tzv. Content Delivery Network (CDN)

CDN ili content delivery network (mreža za dostavu sadržaja) ubrzava vrijeme učitavanja stranice tako da statični sadržaj web stranice ostavlja kaširanim (učitanim) na ogromnoj mreži servera diljem svijeta.

Tako, kad netko posjeti vašu stranicu, ta osoba može skinuti sadržaj s najbliže lokacije, a ne čekati da mu se učita s vašeg servera gdje vam je hostan web. Što je fizička lokacija kraća, to se i web brže učitava. Neki od CDN mreža za WordPress su:

•  KeyCDN
• Stackpath (nekad MaxCDN)
• BunnyCDN
• Cloudflare CDN

 

6. Smanjite broj pluginova (maknite nepotrebne izvore učitavanja)

 

Nepotrebni izvori učitavanja (ili render blocking resources) su statične datoteke (fontovi, HTML, CSS, Javascript) koje su važne kod učitavanja stranice. Kad web preglednik naiđe na neki od tih izvora, prestaje učitavati ostale izvore dok prethodni zadatak nije završen.

Teme i pluginovi koje postavljate na web stranicu dodaju hrpu ovih datoteka na web stranicu i neke od njih usporavaju vrijeme učitavanja.  Kada korisnik otvori vašu web stranicu, preglednik prvo učita potrebne JavaScript i CSS datoteke, a tek onda HTML. Ukratko, render-blocking JavaScript i CSS datoteke su niz skripti i style-sheetova koje se pokreću prije nego se web stranica učita i sadržaj postane vidljiv.

Iako ima odličnih pluginova, nemojte se zaigrati i instalirati ih puno jer svaki plugin u pravilu zbog svoje težine usporava stranicu.

Generalno pravilo je: što više pluginova, to je stranica sporija.

 

 

7.  Optimizirajte Javascript i CSS fileove

 

Minifikacija ili smanjenje koda je postupak brisanja nepotrebnih znakova iz koda JavaScript i CSS fileova, a taj postupak ubrzat će vrijeme učitavanja stranice, ali i poboljšati FID metriku.

To možete napraviti na nekoliko načina:

• ručno obrišite višak linija koda u datotekama
• koristiti Autoptimize plugin (za WordPress)
• PageSpeed Insights ekstenzija za Chrome generirat će optimiziranu verziju HTML koda
• za optimizaciju CSS-a možete koristiti YUI Compressor i js
• za optimizaciju JavaScript, možete koristiti Closure Compiler, JSMin i YUI Compressor

 

Neki online alati kao što su Javascript Minifer i CSS Minifier mogu biti od koristi.

 

8. Koristite brzi  hosting

 

Ako vam je web stranica hostana na sporom serveru, to će utjecati i na brzinu učitavanja vaše stranice. Odaberite hosting koji je optimiziran.

Idealno je vam je web stranica hostana kod providera čiji su serveri na istoj lokaciji gdje se nalazi i vaša primarna ciljana skupina.

 

9. Povećajte vrijeme kaširanja stranice

 

Caching ili kaširanje stranice jest pohrana podataka za ponovnu upotrebu. U pravilu, preglednici će kaširati ili zapamtiti/pospremiti datoteke. Drugim riječima,  web preglednici spremaju kopije stranica kako bi se one brže učitavale.

Implementacija kaširanja stranice te povećanje vremena kaširanja može ubrzati vrijeme učitavanja vaše web stranice.

Kada korisnik koji je već jednom posjetio vašu web stranicu ponovo dođe, preglednik će mu prikazati verziju koju je pohranio bez da opet kontaktira server. Ako imate datoteke koje ne mijenjate često, poput vizuala ili PDF dokumenata, vrijeme kaširanja možete postaviti na mjesec dana jer se oni ne moraju ponovo učitava sa svakom posjetom stranici.

Koristite li WordPress, postoje i neki pluginovi koji sami kaširaju stranice za brzo učitavanje i pomoći će vam u rješavanju ovog problema:

• WP Rocket
• WP Super Cache
• WP Fastest Cache
• W3 Total Cache

 

10. Maknite slidere

 

Slideri ili carouseli su jako popularni i mnogi ih koriste kako bi kroz jedan element web stranice prikazali što više sadržaja. No zapravo slideri nisu baš SEO friendly rješenje. Već sam pisala zašto su slideri loši za vašu web stranicu, a iz iskustva znam (ako je sve drugo na stranici dobro napravljeno): kad maknete slidere, web leti koliko je brz!

Osim toga, poboljšat će i ostale metrike za prolaz Core Web Vitalsa testa.

 

 

Kako poboljšati FID – First Input Delay?

 

Kao što sam već spomenula, loš rezultat FID-a obično ima veze s jako puno Javascripta na vašoj web stranici. Već ste dobili upute kako optimizirati javascript fileove (vidi broj 7 gore) .

Dakle, uklonite nepotrebne znakove iz javascript fileova i gledajte kako vam se FID rezultat poboljšava.

 

 

Kako poboljšati CLS – Cumulative Layout Shift?

 

Da biste poboljšali rezultat CLS-a, potrebno je da stranica bude što stabilnija prilikom učitavanja.

To ćete najlakše potići tako da odredite koliko mjesta dajete određenom elementi dok se učitava, dodajući specifične atribute dimenzija fotografijama i video sadržaju. Preglednici tako rezerviraju mjesto za medijski sadržaj dok se on učitava.

Uporaba font-displaya u CSS fileovima također može pomoći.

 

Ako vam je terminologija koju koristim u ovom članku bila previše stručna i samim time nerazumljiva, poslužite se i SEO rječnikom pojmova

 

ZAKLJUČAK:

 

Nadam se da ste dobili korisne informacije i saznali kako optimizirati web stranicu da prođe Core Web Vitals test.

Ovaj dio optimizacije web stranice odnosi se na tehnički dio pa je sastavni dio tzv. tehničkog SEO-a.

Ako stranica nije tehnički dobro optimizirana, ni vaš SEO sadržaj neće imati dobre šanse za rangiranje. Stoga nemojte se fokusirati isključivo na stvaranje dobrog i SEO-friendly sadržaja, već poradite i na “mašini”.

 

Treba li vam SEO AUDIT – TEHNIČKI PREGLED STRANICE- javite mi se na [email protected] da vam ga napravim!

 

Želite li sami naučiti SEO osnove i pisanje za web, upišite edukaciju!