Brzina stranice #
Termin brzina stranice odnosi se na dužinu vremena koje je potrebno da se preuzme sadžaj sa veb hosting servera na traženi pretraživač.
Vreme učitavanje stranice je vreme koje protekne od slanja zahteva veb serveru za učitavanje veb stranice do potpunog prikaza veb stranice na pretraživaču.
Primer:
Korisnik unese link veb sajta ili klikne u pretraživaču na neki link iz pretrage -> pretraživač šalje http zahtev veb serveru -> veb server mora odgovoriti barem jednim zahtevom ukoliko je dobar onda šalje sadržaj sajta kao http odgovor ukoliko ne, onda šalje neki odgovor sa porukom o greški.
Statiskika #
statistika backlinko.com nad 5.2 miliona mobilnih i desktop sajtova:
- prosečno vreme ttfb za desktop sajtove je 1.268s vs mobilni 2.594s
- prosečno vreme učitavanje stranice dekstop 10.3s vs mobilni 27.3s
- mobilnoj verzoji sajta je potrebno 87.84% duže da se učita nego desktop verziji
- ukupna veličina stranice (mb) je broj 1 faktor u brzini učitavanja veb stranice. Manje stranice se u proseku 486% brže učitavaju od većih.
- svaka third party skripta dodata na veb stranici povećava učitavanje stranice za otprilike 34.2ms
- Najbrže vreme ttfb učitavanja imaju Kina, Japan i Nemačka, dok Austrija, Brazil i Indija najsporije.
Prvi korak – Analiza veb-sajta #
Prvi korak kod optimizacije WordPress sajta za brže učitavanje je svakako analiza tog istog. Za analizu i kasnije utvrđivanje mogućih grešaka i faktora koji usporavaju učitavanje veb-sajta koriste se posebni tool-ovi koji su namenjeni za to. Najpoznatiji i najkorišćeniji su:
- Google alatka – PageSpeed Insights
- GTmetrix
- Pingdom
- Page Speed DotCom-Monitor
Pored ovih automatizovanih veb tool-ova postoje i druge tehnike za analizu od kojih je meni najkorisnija Chrome DevTools.
Takođe treba napomenuti još jednu vrednu alatku Performance Budget Calculator. Pomoću nje korisnik može da podesi za koliko s hoće sajt da mu se učita i na kojoj mreži.
Svaka alatka ima svoje prednosti i mane. Iskoristiti najbolje od svakog.Nakon alalize sajta pomoću prethodno navedenih tool-va, potrebno je pregledati preporuke za rešavanje svakog od problema koji je otkriven. Sledeći korak u optimizaciji zavisi od tih problema koje su ovi toolovi otrkili.
- Move your website to a better host
- Use a Content Delivery Network (CDN)
CDN je globalna mreža servera koja brzo dostavlja podatke, koristeći cache (keš) servere kao i PoP “tačke pristupa” koji su, geografski gledano, najbliži korsniku. Vaš statički sadržaj sa sajta je skladišten na svakom od servera na mreži. CDN prenosi sav statički sadržaj kao što su recimo fotografije, grafike, video sadržaj i web stranice.
Cloudflare – pocetna free – pa 20 pa 200 pa po dogovory - Optimizovati slike.
Ukoliko su slike visebojne(priroda, ljudi, kancelarije…) slike cuvati u jpg formatu. Jpg format slike se lako kompresuje i slika se lako optimizuje( sa 100% kvaliteta na 50 i nize a da se i ne primeti razlika). Png format je dobar kada su u pitanju slike sa nekom grafikom i imaju manje boja. Jpg format je lakse optimizovati i jpg fajl je znato manje velicine od png(Slika jpg srazmerno 75kb = slika png srazmerno +350kb) ali ukoliko je potrebno da imate transparentnu pozadinu ( kad je u pitanju logo, ikonice… ) onda je neizbezno koristiti png format. Alatke koje se preporucuju za optimizaciju slika su:
Photoshop (ukoliko je znanje iz photoshopa slabo nauciti ili preci na ostale alatke)
Compressor (online alatka, jednostavna za korsiscenje, vrlo efikasna
4.GZip Kompresija teskta.
Omogućavanje GZIP kompresije na serveru daje naredbu serveru da može da šalje zipovane fajlove ka browseru. To je otprilike sve što trebate da uradite, za sve ostalo će se pobrinuti browser. Svi moderni browseri imaju mogućnost da primaju, izvlače i potom prikazuju arhivirani sadržaj korisniku.
5.Keširanje stranica.
Za keširanje stranica potrebno je instalirati jedan od sledećih plugin-a:
- Swift Performance Lite (besplatan)
- WP Rocket (premium)
Moja preporuka je Swift, do sada sam najviše njega koristio i on mi je doneo najbolje rezultate. Ima jednostavan wizard za podešavanje i mnoštvo opcija iako nije plaćena verzija. Ono što treba voditi računa jeste prilikom uključivanja opcija spajanja i minifikovanja html, css i js fajlova. Potrebno je uključiti jednu po jednu opciju i testirati da li ona dobro funkcioniše jer može dodji do grešaka prilikom spajanja fajlova i rezultat će biti neučitavanje (ili loše učitavanje) fajla, skripte ili…
If I ask you what the result of 5 x 3 is, you’ll know the answer is 15. You didn’t need to calculate it, you’ve done this multiplication so many times in your life that you no longer need to — you simply remember the result without having to do any mental processing. Well, that’s kind of how caching works.
- 404/410 responses.
Ili popraviti prekinute veze ili ukloniti reference na nepostojeće veze. Ovo zna dosta da uspori sajt jer pokušava da učita resurs koji je nepostojeći.
7.Optimizacija baze.
Ukoliko sajt sadrži dosta proizvoda ili postova (kao i CPT postove) ili slika koje se čuvaju u bazi, poželjno je dodati plagin koji optimizuje bazu. Jedan od najboljih plaginova koji obavlja ovaj posao je WP Optimize.
8.Smanjiti broj HTTP request-ova.
Nakon analiziranja websajta sa jednim od tool-ova koji su navedeni u Koraku 1, obratiti pažnju na broj http request-ova koji se učitavaju na stranici. Što je veći broj tih request-ova, to će vreme učitavanja stranice biti veće. Ovo može da se analizira i preko pretraživača (f12 -> Network i refres stranice). Da bi se smanjio broj reques-ova potrebno je izbeći dupliranje poziva jednih istih slika, skripti, css fajlova. Po mogućnosti spojiti neke css fajlove u jedan glavni fajl i tako pozvati samo jedan fajl umesto više njih. Ovo isto može da se primeni i nad js fajlovima.
9.Skaliranje slika.
Nema potrebe da se sirina i visna slike definise css-om, ukoliko je u pitanju fiksna sirina i visina tj. ukoliko slika ne mora da bude responsive, izmeriti koje su to fiksne mere i u photoshop-u smanjiti rezoluciju slike. Ukoliko slika mora da bude responsive: 1. izmeriti sliku na najvecoj rezoluciji sajta i zatim po tim merama skalirati sliku ili, 2. Napraviti responsive sliku pomocu picture elementa.
10.Organizacija plug-inova.
Ukoliko je na sajtu neophodno imati plug-inove, poželjno je instalirati dodatan plugin Plugin Organizer, i podesiti ga kojim redosledom će se učitavati plugin-ovi. Takodje pomoću ovog plugin-a možete odrediti na kojij stranici će se koji plugin učitavati a na kojoj ne.
CRNA LISTA TEŠKIH PLUGIN-OVA (IZBEGAVATI IH)
WPBakery Page Builder (Visual Composer)
Disqus Comment System
Divi builder
Google Analytics
Google XML Sitemaps
Jetpack
NextGEN Gallery
Revslider
Tawk.to
Wordfence
WordPress Popular Posts
WPML
Contact Form 7 (pomoću Plugin Organizer-a onemogućiti ga na svim stranicama na kojima nije potrebno da se učitava)
- Reduce the use of web fonts
- Minify CSS and JavaScript
