Kako v 1 uri bistveno pohitriti WordPress spletno stran

Povzetek delavnice Kako pohitriti WordPress stran

Hitrost nalaganja je že od nekaj zelo pomembna, a prevečkrat spregledana, lastnost spletne strani. Od nje je odvisno koliko časa se bodo obiskovalci zadrževali na naši strani, koliko nam zaupajo, koliko bodo zapravili (če se gremo eCommerce) in nenazadnje, kako visoko nas bo Google uvrščal med rezultati iskanja. Ker pohitritvi spletnih strani posvečam izredno pozornost, sem pripravil tudi delavnico Kako v 1h BISTVENO pohitriti WordPress stran.

Spodaj si lahko ogledate posnetek livestream-a te delavnice. Pristaši “stare šole”, ki informacije še vedno raje pridobite v pisani obliki, pa nadaljujte z branjem pod videom.

Marsikdo zmotno misli, da se hitrosti spletnih strani z vedno hitrejšimi internetnimi povezavami, ki jih imamo danes, ni več potrebno ukvarjati. Realnost je ravno obratna; večina uporabnikov danes brska po spletu s pametnimi telefoni, kljub slabšim prenosom preko mobilnih podatkov pa pričakujejo, da se jim bo stran naložila hitreje kot pa nekaj let nazaj. Spletne strani so postale gromozansko potrošne, video in velike fotografije lahko obtežijo spletno stran za več 10 MB.

Če smo v izdelavo spletne strani vložili veliko denarja in časa (verjetno kar obojega) in se ta celo na slabi 3G povezavi ne naloži v nekaj sekundah, naše spletne strani več kot polovica potencialnih strank niti videlo ne bo. Zakaj? Čas je najdragocenejša dobrina 21. stoletja in nihče ne bo čakal, da se vaša stran naloži, četudi je na slabi internetni povezavi. S tem vaša spletna stran izgublja promet in denar.

K sreči danes obstajajo orodja, s katerimi lahko analiziramo in odkrijemo problematične dele naše spletne strani. Ko ugotovimo kaj so največje težave, jih lahko odpravimo in tako našo stran v relativno kratkem času izredno izboljšamo, da bo hitrejša za obiskovalca. Hkrati ubijemo dve muhi na en mah – eden pomembnejših faktorjev za rangiranje strani v Googlu je tudi hitrost nalaganja.

Orodja za analizo spletne strani, predstavljena v tem članku, bodo delovala na kateri koli spletni stran. V tem vodiču pa bom pri optimizaciji strani bolj podrobno opisal kako pohitriti WordPress spletno stran.

Koraki optimizacije in pohitritve WordPress spletne strani

Našo spletno stran bomo optimizirali v 5 korakih:

  1. Varnostna kopija
    Pred začetkom optimizacije naredite varnostno kopijo strani, za primer če gre kaj narobe.
  2. Analiza
    Vedeti morate kaj boste optimizirali, to naredite tako, da izmerite začetno stanje.
  3. Optimizacija
    Glede na rezultate analize izboljšate kritične dele vaše strani.
  4. Ponovna analiza
    Po vsaki izboljšavi zopet analizirate, če ste kaj bližje cilju.
  5. Ponavljamo
    Koraka 3. in 4. izvajajte toliko časa, dokler niste zadovoljni oz. nimate več stvari za izboljšavo.

Varnostna kopija

Varnostno kopijo WordPress strani je mogoče narediti na več načinov. Po navadi ponudnik gostovanja na cPanel ali Plesk nadzorni plošči omogoča izdelavo varnostne kopije tako datotek, kot podatkovne baze.

Kreiranje backupa v cPanelu

Druga rešitev je mogoča s pluginom, eden od primerov je WordPress plugin imenovan Duplicator.

Analiza

Za analizo obstaja več orodij. Enega ima na voljo že prav vsak moderen brskalnik in sicer so to DevTools. V Google Chromu dostopano do njih s tipko F12 (Win, Linux) oz. CMD + Alt + J (Mac) ali še lažje z desnim klikom kjerkoli na spletni strani in izbiro Inspect Element.

Obstajajo pa tudi online orodja, s katerimi lahko analiziramo našo stran:

Za začetnika je od teh najbolj prijazen za uporabo Googlov PageSpeed Insights, zato bomo tega uporabili v tem vodiču.

Vse, kar morate narediti je da v polje vpišete vaš URL in kliknete na Analyse. Google vam bo podal 2 oceni za hitrost in sicer za mobilne naprave in računalnike. Podal vam bo tudi nekaj predlog, kako lahko stvari na vaši strani izboljšate.

PageSpeed Insights

Za okvirno predstavo: razultati do 50 so res slabi in verjetno lahko precej enostavno in hitro izboljšamo našo stran. Med 50 in 70 imamo še precej prostora za izboljšave, med 70 in 85 je naša stran že kar v redu, nad 85 ali celo 90 pa je včasih kar težko priti (odvisno od naše strani, izbire teme in kaj na naši strani predstavljamo).

Optimizacija

Optimizacije se lotite na podlagi analize in sicer PageSpeed Insights vam najbolj kritične popravke zlista na vrhu, tako da se tukaj tudi lotite optimizacije. Kaj konkretno bo najbolj kritično za vašo stran je odvisno od vaše strani, vendar po mojih izkušnjah so najbolj pogoste težave naslednje:

Pametna izbira WordPress teme in ponudnika gostovanja

Če na naša WordPress stran že končana, bo sicer to malenkost težje, vendar največjo uslugo si lahko naredite že čisto na začetku. Ponudba tem za WordPress je danes ogromna. Veliko bolj kot cena (ki se giblje po navadi med $50 in $100), pa variira kvaliteta. Izredno pomembno je, da že pri izboru WordPress teme potestirate demo v PageSpeed Insights in od tam dobite občutek koliko se je izdelovalec teme posvetil hitrosti.

Drugi, prav tako izredno pomemben faktor, pa je gostovanje spletne strani. Če imate gostovanje na poceni ali celo zastonj preobremenjenih serverjih, si naredite več škode kot koristi, saj bo stran počasna ne glede na to, koliko truda boste vanjo vložili.

Optimizacija fotografij

Praktično še nisem zasledil spletne strani, ki ne bi imela težave z velikostjo fotografij. Moderni in relativno kompleksni algoritmi omogočajo velike kompresije PNG in JPG slik brez vidnega poslabšanja kvalitete. Preden naložimo fotografijo, jo v programu po naši izbiri (recimo Photoshop, GIMP, IrfanView, …) utrezno pomanjšamo in obdelamo (tukaj si lahko preberete članek kako ustrezno pripraviti slike za slider, ki so po navadi največja težava). Preden slike naložite v WordPress, pa jih še spustite skozi program za optimizacijo.

Za PNG slike priporočam spletno orodje TinyPNG. Čeprav podpira tudi JPG format, pa za JPG slike po izkušnjah dobim boljše rezultate z brezplačnim programčkom ImageOptim – na voljo je za Mac, vendar lahko na njihovi strani najdete alternative za druge OS. Še eno online orodje je tudi Jpeg.io. Za ImageOptim priporočam sledeče nastavitve:

imageoptim nastavitve kvalitete

Slike, ki jih PageSpeed Insight najde na naši strani, lahko že zoptimizirane potegnemo s strani in sicer na koncu predlogov za izboljšave bomo našli povezavo, ki nam ponudi zip z vsemi optimiziranimi slikami, JavaScript in CSS datotekami:

PageSpeed Insights zip download

Slike na naši strani lahko prepišemo preko FTPja (ne pozabite regenerirati manjših sličic, ki jih WordPress pripravi avtomatsko) ali jih ponovno naložimo v WordPress preko Media Library.

Skrajšamo odzivni čas serverja

Če smo izbrali dober hosting, ki je blizu našim obiskovalcem (če imamo stran v slovenščini potrebujemo ponudnika, ki ima serverje v Sloveniji), potem bo čas, v katerem server odgovori na zahteve relativno kratek (od 500 ms do 1 s). Lahko ga pa še dodatno skrajšamo in hkrati razbremenimo server, če imamo stran z vsebino, ki se ne spreminja neprestano. Večina spletnih strani ustreza temu pogoju.

Nobenega smisla ni, da se WordPress PHP logika požene na vsak zahtevek spletne strani, če je razultat vedno isti, zato lahko z WordPress plugini shranimo HTML, ki ga WordPress zgenerira in kar tega poserviramo uporabiku. To je lahko tudi za več velikostnih redov hitreje kot pa izvajanje PHP kode.

Za to rešitev obstaja nekaj pluginov. Najenostavnejši in zastonj je WP Super Cache. Enostaven za uporabo in zelo kvaliteten je tudi plačljiv WP Rocket. Tretji, s katerim imam izkušnje pa je W3 Total Cache, ki pa je malenkost bolj kompliciran za uporabo.

Omogočimo kompresijo in predpomnenje v brskalniku

Oboje se sliši komplicirano in v bistvu je za rešitev tega problema potrebno kontaktirati ponudnika gostovanja. Po navadi je v .htaccess datoteko potrebno dodati pravila, kako dolgo naj brskalnik v svojem spominu hrani določene tipe datotek (preden potečejo in mora s serverja zahtevati sveže) in pa omogočiti gzip oziroma deflate kompresijo, ki bistveno zmanjša velikost HTML, CSS in JavaScript datotek.

Nastavitve se malenkost razlikujejo od serverja do serverja. Za Apache je odličen začetek .htaccess datoteka projekta HTML5 Boilerplate.

Zaključek

Izboljšave, ki sem jih omenil v tem članku so le nekatere izmed mnogih. Pregledal sem že več sto spletnih strani in vem, da se te daleč najbolj pogoste in nam prinesejo največjo pridobitev glede na vložen trud in čas.

Največ sivih las si boste prihranili vnaprej, če pametno izberete temo in gostovanje, uporabljate kar se da malo pluginov, pred nalaganjem optimizirate fotografije in uporabite katerega od WordPress pluginov za cacheiranje.

Naj bo vaša stran hitra in s tem prijazna do obiskovalcev. Google vas bo nagradil!

p.s.: pred začetom testiranja si zapišite PageSpeed Insights score in v kometarjih zapišite stanje vaše strani pred in po optimizaciji 😉

Podobni članki