Kako Ubrzati Web Stranicu u 30 Minuta – Optimizacija Brzine za WordPress[2019]

Web stranica vam se sporo učitava? Želite saznati kako je ubrzati?

Naučit će te točno kako ubrzati WordPress web stranicu, korak po korak, u 30 minuta.

U ovom članku saznat će te još i zašto je optimizacija brzine web stranice bitna, kako mjeriti brzinu web stranice te koje su najbrže teme.
wordpress-optimizacija-brzine
Share on facebook
Share on twitter
Share on linkedin

Zašto optimizirati web stranicu za brzinu?

 

Surfate netom i sjetite se onog jednog pitanja što vas je sinoć držalo budnima. Utipkate pojam u tražilicu i pritišćete search. Skeniranjem stranice s rezultatima odmah uočavate nekoliko obećavajućih naslova. Pokazivač namještate na prvi obećavajući rezultat (jer znate da su stranice kvalitetnije što su bliže vrhu). Klik. Otvara se nova kartica i… čekate. Prošlo je već 5 sekundi (čini se kao čitava vječnost) a stranica se tek djelomično učitala i djeluje kao da je pobjegla iz 2001, bez ikakvog dizajna. Zatvarate karticu i odlazite na idući rezultat s tražilice…

Šanse su da ste se u sličnoj situaciji našli već nekoliko puta ovaj tjedan. Ne brinite, niste jedini – zbog oslanjanja na informacijske tehnologije našu je pozornost sve teže i teže uhvatiti. Postajemo poput zlatnih ribica.

 

wordpress-optimizacija-brzine-zlatna-ribica

 

Istraživanja pokazuju da stranice koje se učitavaju dulje od 4 sekunde gube četvrtinu prometa (ta brojka poraste na vrtoglavih 38% u 5. sekundi).

Osim što stranice gube vrijedan promet, vrijeme učitavanja loše utječe na korisničko iskustvo. Stopa konverzija također pada kada vrijeme učitavanja raste, što osim na prihod utječe još i na plaćene kampanje kojima cijena dodatno raste zbog lošije kvalitete.

Ako još niste uvjereni u važnost optimizacije brzine, Google koristi vrijeme učitavanja web stranice kao jedan od ključnih faktora rangiranja. Brzina web stranice utječe na optimizaciju za tražilice (SEO). Ako ste vlasnik spore stranice, ne samo da će vam veliki dio prometa napustiti web stranicu prije no što se učita, nego će vam se i ukupan organički promet te vidljivost smanjiti.

 

wordpress-optimizacija-brzine-ilustracija

 

Ako ste vlasnik WordPress stranice, možete se opustiti jer je optimizacija brzine pomoću WordPress plugina prilično jednostavna i ne zahtijeva mnogo vremena ili tehničke vještine.

 

 

Alati za mjerenje brzine web stranice

 

Ne možemo reći da je stranica brza ako se učitava 2 sekunde ili spora ako se učitava 7 sekundi. Svaka stranica je posebna, različite veličine i ima svoju funkciju. Iz tog razloga, razvijene su metrike koje vrijede za svaku stranicu. Google ima svoj PageSpeed, a Yahoo! ima YSlow.

 

wordpress-optimizacija-brzine-pagespeed-yslow

 

Alati poput GTmetrix (ili pingdom ili PageSpeed Insights) analiziraju i boduju vašu web stranicu. Ukupan broj bodova govori koliko je vaša stranica “zdrava”, tj. koliko dobro njezin front-end slijedi najbolje prakse razvoja. Pored PageSpeed i YSlow rezultata, GTmetrix prikazuje i neke podatke o web stranici, točnije njenu veličinu, broj HTTP zahtjeva te vrijeme učitavanja.

 

wordpress-optimizacija-brzine-brzina-ucitavanja

 

Uz sve navedeno, nalaze se i savjeti za poboljšanje rezultata. Optimizacija brzine provodi se implementacijom tih savjeta.

 

wordpress-optimizacija-brzine-gtmetrix-savjeti

 

 

Vodič kroz optimizaciju brzine WordPress web stranice

 

Prvi dio – WP Fastest Cache

Preuzmite i aktivirajte plugin WP Fastest Cache. To je najjednostavniji i najefektivniji besplatni cache plugin kojeg sam isprobao. Rješava sljedeće preporuke:

  • Leverage browser caching – Pohranjuje često korištene datoteke u privremenu memoriju web preglednika za drastično ubrzanje učitavanja.
  • Enable compressionSmanjuje veličinu stranice do 70% kroz kompresiju datoteka kako bi se brže poslale korisniku.

Otvorite postavke klikom na WP Fastest Cache poveznicu u bočnom izborniku vaše WordPress konzole. Na prvi pogled izgleda zbunjujuće, no sve što treba nalazi se u kartici Settings. Označite sljedeće stavke:

  1. Cache System – Enable
  2. Preload – Create the cache of all the site automatically
    1. Homepage
    2. Posts
    3. Categories
    4. Pages
  3. New Post – Clear cache files when a post or page is published
  4. Update Post – Clear cache files when a post or page is updated
  5. Gzip – Reduce the size of files sent from your server
  6. Browser Caching – Reduce page load times for repeat visitors

 

wordpress-optimizacija-brzine-wp-fastest-cache

 

Ako vaša stranica s postavkama izgleda kao što je prikazano na slici, pritisnite Submit. Vaša web stranica sada bi trebala biti osjetno brža te bi PageSpeed i YSlow rezultati trebali porasti.

 

Drugi dio – Autoptimize

Preuzmite i aktivirajte Autoptimize plugin. Autoptimize “čisti” i smanjuje HTML, CSS i JavaScript kod kombiniranjem datoteka te uklanjanjem nepotrebnih razmaka i redaka. Rješava sljedeće preporuke:

  • Defer parsing of JavaScript – Odgađa učitavanje JavaScript koda do trenutka kada je potreban. To oslobađa resurse prilikom učitavanja web stranice i time ubrzava proces.
  • Minify HTML – Uklanja nepotrebne razmake i retke u HTML kodu.
  • Minify CSS – Uklanja nepotrebne razmake i retke u CSS kodu.
  • Minify JavaScript – Uklanja nepotrebne razmake i retke u JavaScript kodu.

U bočnom izborniku WordPress konzole idite pod Settings > Autoptimize. Zatim u gornjem desnom kutu pritisnite dugme Show advanced settings.

 

wordpress-optimizacija-brzine-autoptimize

wordpress-optimizacija-brzine-autoptimize-2

 

JavaScript Options:

  1. Optimize JavaScript Code
  2. Aggregate JS-files – Aggregate all linked JS-files to have them loaded non-render blocking? If this option is off, the individual JS-files will remain in place but will be minified.
  3. Also aggregate inline JS? – Let Autoptimize also extract JS from the HTML. Warning: this can make Autoptimize’s cache size grow quickly, so only enable this if you know what you’re doing.

 

wordpress-optimizacija-brzine-autoptimize-javascript

 

CSS Options

  1. Optimize CSS Code?
  2. Aggregate CSS-files? – Aggregate all linked CSS-files? If this option is off, the individual CSS-files will remain in place but will be minified.
  3. Also aggregate inline CSS? – Check this option for Autoptimize to also aggregate CSS in the HTML.
  4. Generate data: URIs for images? – Enable this to include small background-images in the CSS itself instead of as separate downloads.

 

wordpress-optimizacija-brzine-autoptimize-css

 

HTML Options

  1. Optimize HTML Code?

 

wordpress-optimizacija-brzine-autoptimize-html

 

Nakon što ste sve to označili, na dnu pritisnite dugme Save Changes and Empty Cache. Zatim se prebacite u karticu Images i označite opciju Lazy-load images.

 

wordpress-optimizacija-brzine-autoptimize-images

 

Ostala je još samo kartica Extra. U njoj označite opcije:

  1. Google Fonts – Remove Google Fonts (UPOZORENJE: Označite “Leave as is” ako ne znate točno koje fontove koristite na web stranici.)
  2. Remove emojis – Removes WordPress’ core emojis’ inline CSS, inline JavaScript, and an otherwise un-autoptimized JavaScript file.
  3. Remove query strings from static resources – Removing query strings (or more specifically the ver parameter) will not improve load time, but might improve performance scores.

 

wordpress-optimizacija-brzine-autoptimize-extra

(Ako ste pod Google Fonts odabrali opciju “Leave as is“, čestitam – optimizacija brzine za vašu web stranicu sada je gotova. Provjerite još jednom rezultate na GTmetrix alatu i usporedite početno i trenutno stanje. Vaša bi web stranica trebala imati zeleni broj bodova.)

 

Treći dio – OMGF (Optimize My Google Fonts)

Kako bi optimizacija brzine vaše web stranice bila potpuna potreban je još jedan korak. Preuzmite i aktivirajte OMGF plugin. Ubrzava WordPress stranicu tako da potrebne fontove drži na vlastitom serveru. To smanjuje ukupan broj requesta.

Otvorite opcije kroz bočni izbornik WordPress konzole. Settings > Optimize Analytics.

  1. Unesite nazive svih fontova koji se koriste na vašoj web stranici i odvojite ih zarezom. Pritisnite search.
  2. Za maksimalnu uštedu vremena i prostora, pod Available subsets označite samo one podtipove koji se koriste.
  3. Pod Available fonts pritisnite na text remove pored svakog fonta koji se ne koristi.
  4. Pritisnite dugme Download Fonts
  5. Kada se fontovi preuzmu (100%), pritisnite dugme Generate Stylesheet

 

wordpress-optimizacija-brzine-OMGF-opcije

 

Time završava optimizacija brzine vaše web stranice. Razlika u brzini učitavanja bi trebala biti osjetna, a rezultat na GTmetrix alatu sličan mojem.

 

wordpress-optimizacija-brzine-ivan-vrabec

 

Ako imate visoki PageSpeed Score (iznad 90) a web stranica vam se još uvijek dugo učitava, problem je s back-end strane. Najvjerojatnije je riječ o hostingu loše kvalitete.

 

Dodatna optimizacija brzine WordPress stranice

 

Optimizirajte slike

Medijski sadržaji najviše utječu na veličinu web stranice, stoga nemojte pretjerivati s njihovom količinom. Gotovo sve slike mogu biti drastično smanjene uz neprimjetan gubitak kvalitete. Postoji mnogo besplatnih servisa i plugina, no oni su dosta ograničavajući u svojoj besplatnoj varijanti. Osobno koristim Compressor.io za kompresiju svake fotografije koju uploadam na svoju web stranicu. Male uštede od 20-30% zbrajaju se i puno znače za brzinu.

 

wordpress-optimizacija-brzine-compressor

 

Koristite optimiziranu temu

Mnoge teme za svoju funkcionalnost i jednostavnost korištenja žrtvuju brzinu i prostor. Preporučujem da svoju web stranicu prebacite na Astra ili GeneratePress temu. One posjeduju sve funkcionalnosti koje su potrebne prosječnom korisniku i istovremeno su među najbržim dostupnim temama. Osobno koristim minimalističku Hello temu, no ona je beskorisna bez Elementora ili sličnog alata za izgradnju stranica.

Zadovoljni sadržajem?

Prijavite se na newsletter i budite obaviješteni kada izađe novi članak!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *