Kako povečati hitrost strani - PageSpeed vodnik

Hitrost spletnega mesta ni samo vprašanje uporabniške izkušnje - je neposreden dejavnik uvrstitve na Googlu. Od leta 2021 so Googlove meritve hitrosti spletnega mesta del algoritma za uvrstitev, Google PageSpeed Insights pa je orodje, ki vam kaže, kako dobro deluje vaše spletno mesto. V tem vodniku bomo šli skozi konkretne korake za izboljšanje rezultata.

Razumevanje meritev PageSpeed

Google PageSpeed Insights meri šest ključnih meritev, ki skupaj sestavljajo skupen rezultat. Largest Contentful Paint (LCP) meri, kako hitro se naloži največji viden element na strani - idealno pod 2,5 sekunde. Interaction to Next Paint (INP) meri, kako hitro se stran odzove na uporabniške interakcije - idealno pod 200 milisekund.

Cumulative Layout Shift (CLS) meri vizualno stabilnost strani - koliko se elementi premikajo med nalaganjem. Idealna vrednost je pod 0,1. First Contentful Paint (FCP) meri, kdaj se prva vsebina pojavi na zaslonu. Time to First Byte (TTFB) meri, kako hitro se strežnik odzove na zahtevek. Total Blocking Time (TBT) meri, kako dolgo je glavna nit blokirana.

Optimizacija slik - največji vpliv

Slike so najpogostejši razlog za počasno spletno mesto. Neoptimirana fotografija velikosti 5 MB lahko upočasni nalaganje strani za več sekund. Tukaj je, kaj storiti.

Prvič, uporabljajte sodobne formate slik. Format WebP zagotavlja 25-35 % manjšo velikost od JPEG ob isti kakovosti. AVIF gre še dlje s 50 % manjšo velikostjo, vendar nima popolne podpore v vseh brskalnikih. Za WordPress vtičnika ShortPixel ali Imagify samodejno pretvorita slike v WebP.

Dimenzije slik morajo ustrezati velikosti prikaza. Če se slika prikazuje v 800x600 slikovnih pikah, ni smisla nalagati izvirnika 4000x3000 slikovnih pik. Uporabljajte atribut srcset za odzivne slike, ki se prilagajajo velikosti zaslona.

Stiskanje je ključno - za večino spletnih slik je kakovost 80-85 % povsem dovolj. Razlika med 85 % in 100 % kakovostjo je neopazna s prostim očesom, vendar je razlika v velikosti datoteke lahko ogromna.

Lazy Loading - nalagajte samo to, kar je vidno

Lazy loading odlaga nalaganje slik in drugih virov, dokler uporabnik ne pridrsa do njih. To dramatično skrajša začetni čas nalaganja strani, ker brskalniku ni treba prenesti vseh slik naenkrat.

V sodobnem HTML je lazy loading trivialno preprost - dodajte atribut loading="lazy" na oznake img. Platforma WordPress CMS samodejno doda lazy loading na vse slike od različice 5.5. Pazite, da ne uporabljate lazy loading na slikah v delu "above the fold" strani (hero slike, logotip), ker lahko to negativno vpliva na meritev LCP.

Za iframe (YouTube video, Google Maps) je lazy loading še posebej pomemben, ker so ti viri lahko izjemno veliki. Namesto neposredne vdelave razmislite o prikazu sličice s gumbom za predvajanje, ki naloži iframe šele ob kliku.

Predpomnjenje - ne nalagajte istega dvakrat

Predpomnjenje brskalnika omogoča, da se statični viri (slike, CSS, JavaScript) hranijo v brskalniku obiskovalca. Ko uporabnik ponovno obišče vaše spletno mesto, se ti viri naložijo z njegovega računalnika namesto s strežnika - takoj.

Pri BeoHostingu z naprednim strežnikom LiteSpeed je predpomnjenje izjemno učinkovito. LiteSpeed Cache za WordPress samodejno ustvari statične različice HTML vaših strani, kar odpravi potrebo po obdelavi PHP in baze podatkov ob vsakem zahtevku.

Nastavite glave Cache-Control za različne vrste datotek. Za slike, CSS in JS datoteke nastavite dolg rok predpomnjenja (npr. 1 leto). Za strani HTML uporabljajte krajši rok ali ponovno preverjanje, da bodo spremembe vsebine vidne hitro.

Minifikacija CSS in JavaScript

Minifikacija odstrani nepotrebne presledke, komentarje in oblikovanje iz datotek CSS in JavaScript, kar zmanjša njihovo velikost. Za tipično spletno mesto lahko minifikacija zmanjša velikost CSS za 10-30 % in JavaScript za 20-40 %.

Za WordPress ima vtičnik LiteSpeed Cache vgrajeno minifikacijo in kombiniranje datotek CSS/JS. Autoptimize je odlična alternativa. Bodite previdni s kombiniranjem datotek JavaScript, ker lahko to povzroči konflikte med vtičniki - po aktivaciji temeljito preizkusite.

Tehnika Critical CSS izloči CSS, ki je potreben za prikaz vsebine "above the fold", in jo vstavi neposredno v HTML, medtem ko se preostali CSS naloži asinhrono. To dramatično izboljša meritve FCP in LCP.

Strežniške optimizacije

Izbira ponudnika gostovanja in konfiguracija strežnika imata ogromen vpliv na hitrost spletnega mesta. BeoHosting uporablja strežnik LiteSpeed Enterprise, diske NVMe SSD in CloudLinux za optimalne zmogljivosti. Oglejte si naše pakete gostovanja.

Stiskanje GZIP ali Brotli zmanjša velikost prenesenih podatkov za 60-80 %. Pri BeoHostingu je stiskanje Brotli samodejno vklopljeno za vsa spletna mesta. Protokola HTTP/2 in HTTP/3 omogočata vzporedno nalaganje več virov prek ene povezave, kar znatno pospeši nalaganje strani z veliko slikami, slogi in skripti.

PHP OPcache predpomni prevedeno kodo PHP v pomnilniku, kar odpravlja potrebo po ponovnem razčlenjevanju in prevajanju ob vsakem zahtevku. Pri BeoHostingu je OPcache samodejno vklopljen in optimalno konfiguriran.

Optimizacija pisav

Spletne pisave lahko znatno upočasnijo nalaganje strani. Google Fonts, ne glede na to, kako priljubljene so, zahtevajo dodatne iskanja DNS in prenose z zunanjega strežnika. Razmislite o lastnem gostovanju pisav - prenesite datoteke pisav in jih postrezite z lastnega strežnika.

Uporabljajte font-display: swap v CSS, da bo besedilo takoj vidno s sistemsko pisavo, medtem ko se nalaga spletna pisava. Omejite število različic pisav - namesto nalaganja 6 različnih debelin uporabljajte 2-3, ki jih resnično potrebujete. Preload ključne pisave z link rel="preload" za hitrejše nalaganje.

Optimizacija baze podatkov

Za spletna mesta WordPress lahko baza podatkov postane ozko grlo zmogljivosti, če ni redno vzdrževana. Izbrišite revizije objav, starejše od 30 dni, neželene komentarje, prehodne podatke in neuporabljene meta podatke. Vtičnik WP-Optimize lahko samodejno vzdržuje bazo podatkov.

Uporabljajte object caching (Redis ali Memcached) za predpomnjenje rezultatov pogostih poizvedb baze podatkov. Pri BeoHostingu je Redis na voljo v paketih Business in Premium in lahko dramatično skrajša čas generiranja strani za dinamična spletna mesta.

CDN - Content Delivery Network

CDN porazdeli statične vire vašega spletnega mesta na strežnike po vsem svetu, tako da obiskovalci naložijo vsebino z najbližjega strežnika. Za spletna mesta s pretežno slovenskim občinstvom CDN ni kritično pomemben, ker je strežnik BeoHosting že v regiji. Toda za spletna mesta z globalnim občinstvom lahko CDN znatno izboljša hitrost.

Cloudflare ponuja brezplačen načrt CDN, ki vključuje tudi zaščito DDoS in osnovno optimizacijo. Integracija z WordPress je preprosta in ne zahteva tehničnega znanja.

Praktični kontrolni seznam za optimizacijo PageSpeed

Stisnite in pretvorite slike v format WebP. Uvedite lazy loading za slike pod fold. Vklopite predpomnjenje brskalnika z dolgimi roki za statične vire. Minifikujte datoteke CSS in JavaScript. Uporabljajte PHP 8.4 za največje zmogljivosti. Vklopite stiskanje GZIP ali Brotli. Optimizirajte pisave in omejite število različic. Redno čistite bazo podatkov. Uporabljajte page caching (LiteSpeed Cache za WordPress). Minimizirajte število zunanjih skript in virov.

Zaključek

Izboljšanje rezultata PageSpeed je iterativen proces - ne pričakujte, da boste dosegli rezultat 100/100 naenkrat. Najprej se osredotočite na največje težave, ki jih identificira PageSpeed Insights, običajno so to slike in JavaScript. Z BeoHostingom imate že optimizirano strežniško stran, zato se lahko osredotočite na front-end optimizacije. Cilj naj bo zeleni rezultat (90+) za mobilno in namizno različico vašega spletnega mesta.