Jednostavno je zaključiti da brže učitavanje stranice poboljšava iskustvo posjetitelja. Danas su nam dostupna i mnoga istraživanja koja nam jasno pokazuju da spore web stranice gube određeni broj posjetitelja. Konkretno, ako se stranica učitava dulje od 3 sekunde izgubit će oko pola posjetitelja, a svaka dodatna sekunda značajno povećava taj broj.
U zadnje vrijeme sam imao priliku pomoći nekim neprofitnim udrugama u poboljšanju iskustva posjetitelja njihovih web stranica. Što me nagnalo da napišem ove upute. Jer nije potrebno nikakvo posebno znanje da se značajno ubrza web stranica.
1. Kompresiranje slika
Vjerojatno najbitnija stvar i najznačajnija promjena koju možete učiniti da ubrzate svoju stranicu je da objavljujete kompresirane slike u manjoj razlučivosti. Osim što tako smanjujemo vrijeme učitavanja, smanjujemo i potrošnju interneta našeg posjetitelja, ali i opterećenost servera koji poslužuje našu stranicu.
Recimo da jedna stranica sadrži nekoliko slika u visokoj razlučivosti koje su objavljene bez ikakve kompresije. Takva stranica bi bez problema mogla biti “teška” 25 MB. Što bi značilo da je dovoljno posjetiti tu stranicu 40 puta i potrošili biste cijeli gigabajt (1 GB) interneta. Za mobilne posjetitelje to bi bila noćna mora.
Sva sreća danas je relativno jednostavno smanjiti veličinu slika. Moja preporuka je besplatna usluga koju je Google razvio, Squoosh. A koraci za njeno korištenje su sljedeći:
1. Upload-ati sliku
2. Odabrati razlučivost
Preporučujem širinu (width) do 1920 piksela, eventualno 2560. Više od toga nije potrebno jer mali broj ljudi ima ekrane veće razlučivosti, a na mobitelima je razlika u razlučivosti gotovo nezamjetna.
3. Odabrati vrstu kompresije i format slike
Najčešće ćete se susretati sa slikama u JPEG formatu (.jpg). Taj format je idealan za fotografije, ali ne toliko za ilustracije s ravnim linijama i velikim obojenim plohama.
Stoga u slučaju fotografija odabiremo MozJPEG. (Ovo ne morate mijenjati jer je već automatski odabrano.)
I zatim odaberemo razinu kompresije. 75-80% je dobro, ali možete isprobavati i manje od 75% pa sami odlučite izgleda li i dalje dovoljno dobro za Vašu stranicu.
Preostaje nam još samo da preuzmemo fotografiju i spremna je za objavljivanje.
Ako pak imate neku grafiku poput logotipa u PNG formatu (.png) odaberite OptiPNG za kompresiju i preuzmite kompresiranu sliku.
U slučaju da već imate mnogo fotografija na WordPress stranici mnogo brže i jednostavnije (ali manje efektivno) bi bilo da postavite plugin poput Smush koji kompresira sve slike na Vašoj stranici.
2. Caching (predmemoriranje)
Caching je pomalo nejasan pojam i u slučaju web stranica ima dvije uloge. Caching ili, nama razumljivije, predmemoriranje je pohrana sadržaja u privremenu memoriju.
Predmemoriranje značajno ubrzava web stranicu
Dva su načina predmemoriranja web stranica. Jedan je na strani servera koji poslužuje stranicu, a drugi na strani posjetiteljevog uređaja.
- Predmemoriranje na strani servera (server-side caching)
WordPress poslužuje stranicu tako da ju prvo “složi” na serveru, a zatim posluži posjetitelju. Za to “slaganje” stranice je potrebno neko vrijeme. Kada bismo “složili” stranicu prije nego ju netko posjeti posjetitelji više ne bi morali čekati na to. Upravo to radi ova vrsta predmemoriranja.
- Predmemoriranje na strani posjetitelja (browser-side caching)
Vrlo često posjetitelji znaju više puta otići na istu stranicu. A s obzirom na to da se sadržaj te stranice rijetko kada mijenja bilo bi dobro da barem veće elementa, poput slika, privremeno pohranimo na njihovom uređaju. Tako više ne moraju čekati da im se slike posluže s interneta nego se samo učitaju s njihovih uređaja. To je značenje ove vrste predmemoriranja.
U WordPress-u postoji nekoliko dobrih dodataka (plugins) za predmemoriranje. Da Vam uštedim vrijeme isprobao sam ih sve, s raznim postavkama, na nekoliko različitih stranica i došao do najboljeg rješenja.
Prvi dodatak je Autoptimize.
- Kao i sve dodatke njega postavite tako da odete na “Dodaci” (“Plugins”) ➝ “Dodaj novi” (“Add New”) i unesete naziv u polje za pretraživanje.
- Zatim kliknete na “Instaliraj” (“Install”) i potom “Aktiviraj” (“Activate”).
- Postavkama ovog dodatka možete pristupiti u izborniku “Postavke” (“Settings”) ➝ “Autoptimize”.
- U postavkama prvo kliknite na “Show advanced settings” u gornjem desnom kutu, a zatim označite sva polja prema sljedećim slikama:
Potom spremite svoj odabir klikom na “Save changes and Empty Cache”. Nakon toga kliknite na “Extra” koji se nalazi na vrhu ispod teksta “Autoptimize Settings”.
I odaberite postavke prema sljedećoj slici:
Spremite postavke i gotovi ste.
Objašnjenja postavki Autoptimize…
- Optimize HTML – smanjuje veličinu HTML datoteka uklanjanjem bijelog prostora u kodu (razmaci, novi red).
- Optimize JavaScript Code – smanjuje veličinu JavaScript datoteka na isti način kao i HTML.
- Aggregate JS-files – spaja povezane JavaScript datoteke u jednu te na taj način smanjuje broj zahtjeva poslanih serveru.
- Optimize CSS Code – smanjuje veličinu CSS datoteka na isti način kao i HTML.
- Aggregate CSS-files – spaja povezane CSS datoteke u jednu.
- Inline all CSS – stavlja kôd CSS datoteka u HTML datoteku i time dodatno smanjuje broj zahtjeva i omogućuje ranije učitavanje strukture stranice.
- Google Fonts opcija – spaja fontove i naređuje stranici da ih učita naknadno kako bi se stranica ranije prikazala.
- Remove emojis – uklanja nepotreban dio kôda za prikazivanje emotikona
- Remove query strings from static resources – uklanja dio upita u zahtjevima elemenata stranice što pomaže u boljem rangiranju stranice u tražilicama.
Drugi dodatak je WP Fastest Cache. Instalirajte ga i aktivirajte pa se bacamo na postavke.
Odaberite “WP Fastest Cache” koji se sada nalazi u izborniku s lijeve strane pa postavite sve kao na sljedećoj slici:
I na kraju spremite odabir.
Objašnjenja postavki WP Fastest Cache…
- Cache System – omogućuje korištenje postavki predmemoriranja.
- Preload – stvara predmemorirane verzije pojedinih stranica za brže dohvaćanje sa servera.
- Logged-in Users – onemogućuje korištenje predmemoriranih verzija stranice ulogiranim korisnicima kako bi mogli vidjeti promjene koje rade na stranici.
- New Post – briše stare predmemorirane verzije i stvara nove prilikom objavljivanja novog sadržaja.
- Update Post – briše stare predmemorirane verzije i stvara nove nakon izmjena u objavama.
- Gzip – kompresira elemente stranice prije posluživanja posjetitelju.
- Browser Caching – nakon prvog posjeta stranici njeni elementi će biti predmemorirani na uređaju posjetitelja.
3. Uklonite višak dodataka (plugin-ova)
Neki dodaci na WordPressu nisu optimizirani i mogu usporiti stranicu višestrukim uzastopnim pristupom bazi podataka. Uz to što mogu usporiti stranicu dodaci mogu i otvoriti vrata neželjenim gostima koji mogu zaraziti ili čak preuzeti Vašu stranicu.
Ostavite samo nužne dodatke, a one deaktivirane koje ne planirate koristiti izbrišite jer ostavljaju mjesto sigurnosnim propustima.
Obratite i pažnju na to kada su dodaci zadnji puta ažurirani i po mogućnosti uklonite one koji nisu primili nikakve nadogradnje u zadnje 2 godine.
Bitno je držati dodatke, teme i sam WordPress ažurnim.
Zato barem jednom mjesečno provjerite ima li kakvih nadogradnji za Vašu WordPress stranicu.
Za sljedeće promjene morate imate pristup hostingu i domeni stranice.
4. Promijenite verziju PHP-a
PHP je programski jezik kojeg WordPress koristi za generiranje web stranica koje zatim poslužuje posjetiteljima. Veliki dio WordPress stranica i dalje koristi staru verziju PHP-a (5.6), ali nova verzija (7.3) ima dvostruko veće performanse.
Kako biste promijenili verziju PHP-a odite na cpanel.mojadomena.com (gdje je mojadomena.com Vaša domena) i potražite ovu ikonu:
Nakon toga odaberite zadnju ponuđenu verziju i klikom na gumb pored potvrdite svoj odabir.
Napomena: U slučaju da nešto na Vašoj stranici više ne radi kako treba vratite se na prijašnju verziju.
5. Postavljanje SSL/TLS certifikata
Danas više od pola svih web stranica koristi https umjesto nesigurnog http-a. Zašto je to bitno?
Ako ne postavite SSL/TLS certifikat kako biste omogućili posluživanje web stranice preko https-a Vaši posjetitelji mogu biti izloženi nekim opasnim prijetnjama. Poput ubacivanja malicioznih oglasa i drugih elemenata, i izlaganja osjetljivih podataka i lozinki koje korisnici unesu u Vašu stranicu.
Osim zbog sigurnosnih razloga SSL/TLS certifikat je bitan kako bi Vaša stranica bolje rangirala u rezultatima pretraga na tražilicama poput Google-a. Isto tako većina preglednika upozorava posjetitelje stranica koje ne koriste certifikat da je stranica nesigurna.
Naravno bit će Vam drago i čuti da osim bolje sigurnosti postavljanje certifikata može dodatno ubrzati Vašu stranicu. Razlog tome je što je za korištenje nove i brže verzije protokola za posluživanje web stranica (HTTP/2) potreban valjani SSL/TLS certifikat.
Stoga nema izlike, pogotovo sada kad je postavljanje certifikata besplatno i ne oduzima mnogo vremena.
Ono što Vam treba je pristup hostingu (cPanel), a za detalje postavljanja certifikata obratite se Vašem hosting provideru. Ovako to izgleda u mom slučaju:
Lets Encrypt SSL je besplatni certifikat jedne od većih inicijativa za bolji internet i njega ćete koristiti.
6. Postavljanje CDN-a (Content Delivery Network)
CDN je mreža servera (poslužitelja) diljem svijeta na kojima su pohranjeni elementi web stranice poput slika i skripti. Ono što to omogućuje je posluživanje sadržaja s geografski najbližeg servera.
Značajke koje proizlaze iz toga su rasterećivanje našeg servera i brže posluživanje sadržaja posjetiteljima.
Cloudflare prednjači na tom području i svoje osnovne usluge CDN-a nudi potpuno besplatno. Na sljedećoj poveznici možete pronaći njihove upute za postavljanje: Cloudflare CDN
Ukratko, koraci su sljedeći:
- Napravite korisnički račun na Cloudflare-u
- Unesite naziv Vaše domene (bez www)
- Kliknite Next i odaberite besplatni plan te potvrdite svoj odabir
- Dobivene nameservere unesite u postavkama Vaše domene
Ako Vam treba pomoć kod nekih koraka slobodno me kontaktirajte mailom na [email protected] ili putem kontakt obrasca.
