Brzina učitavanja sajta je postala jedan od najbitnijih faktora za rangiranje na pretraživačima. Iako imate odličan tekst koji može da koristi vašim posetiocima, ukoliko moraju da čekaju dugo da se učita stranica sigurno će napustiti vaš sajt i potražiti informaciju na drugom mestu.
Sredinom juna 2021. je pušten update Google-ovog algoritma koji počinje da kažnjava sajtove koji ne ispunjavaju zadate kriterijume brzine učitavanja sajta.
Kazne koje će snositi pojedini sajtovi sa lošom brzinom učitavanja su lošije pozicije ključnih reči za koje su se pre dobro rangirali.
Ukoliko želite da poboljšate i da se istaknete u pretragama pročitajte tekst o Tehničkom SEO i saznajte gde bi sve mogli da unapredite vaš sajt.
Najbitnija stavka kod uspešne optimizacije i ostvarivanja brzine od 1-2 sekunde su način na koji je tema koju ste izabrali kodirana. Ukoliko je loše kodirana i kodovi nisu optimizovani nećete baš moći postići željene rezultate. Uspećete da smanjite donekle ali ne i do one preporučene od 1 do 2 sekunde.
Tema koju vam preporučujemo za izradu profesionalnih sajtova i ostvarivanju brzine i do 1 sekunde je Enfold Tema. Definitivno najbolje opremljena tema bez potrebe da instalirate i jedan plugin kako biste dobili izgled i funkcije koje želite. Poseduje mnogo sopstvenih elemenata za izradu profesionalnog izgleda sajta. Unapredili su i mogućnost optimizacije sopstvenih kodova i zbog toga možete da ostvarite brzinu i do 0.6-1.5 sekundi.
Druga stavka je hosting. Većina hosting provajdera da ne kažem skoro svi nude share-ovane hosting naloge. To znači da jedan server koristi vas mnogo pa samim tim imate ograničene resurse odnosno upite ka bazi. Za početničke sajtove ili prezentacijske sajtove koji ne prelaze dnevni saobraćaj od 1000-2000 poseta ovakvi hostinzi su i više nego dobri. Ali opet obratite pažnju prilikom odabira hosting provajdera.
Posetite našu listu hosting provajdera u Srbiji. Kliknite ovde da pogledate listu
Pogledajte svaku analizu koju smo snimili. Detaljno smo analizirali top hosting provajdere u Srbiji te će vam tako biti mnogo lakše da se odlučite koji vam je najbolji.
Krenimo prvo od hostinga i cpanela, šta možete tu da uradite kako bi optimizovali vaš sajt
Sadržaj
Optimizacija sajta u Cpanel-u
Aktiviranje kompresovanja sadržaja sajta
Kako biste aktivirali ovu opciju potrebno je da se ulogujete na vaš cpanel. Pristupne parametre ste dobili od hosting provajdera.
Kada ste se ulogovali pronađite ikonicu prikazanu na slici ispod
Kliknite na nju i aktivirajte opciju Compress all content
Promena PHP verzije
Promenom php verzije omogućićete da vam sajt mnogo brže radi. Većina hosting provajdera ima php verziju 7.4. Jedino hosting provajder UNLIMITED.RS ima 8.0 i to je poslednja verzija koja je izašla početkom 2021. godine.
7.4 verzija je pretposlednja tako da je ona za sada sasvim dovoljna za bilo koji sajt ili online aplikaciju.
Kako biste aktivirli poslednju verziju PHP-a koju vam vaš hosting provajder nudi idite na vaš cpanel i pronađite ikonicu koja izgleda kao ikonica na slici ispod.
Zatim iz padajućeg menija odaberite poslednju koju vam hosting provajder nudi. Kao što smo rekli u većini slučajeva je 7.4.
Nakon odabira kliknite na Set as current
NAPOMENA: Nakon promene PHP verzije obavezno uradite reload stranice vašeg sajta kako biste se uverili da je sajt dostupan. Ukoliko vam sajt ne bude dostupan odnosno izbaci vam grešku, bez brige, vratite se na odabir PHP verzije i probajte sledeću niže npr 7.3. Isprobavajte tako sve verzije dok vam sajt opet ne postane dostupan.
Ukoliko vam sajt ne radi ni na jednoj od 7.x verzija razmislite o redizajnu sajta jer je vaš sajt u tom slučaju ranjiv i može doći do krađe podataka. Prelaskom na bolju i sigurniju verziju PHP-a smanjujete rizik od krađe ili ga potpuno eliminišete.
Takođe ukoliko hosting nema veću verziju od 5.6 razmislite o prelasku na bolji hosting provajder. Listu hosting provajdera koje smo analizirali možete pogledati ovde
Aktivacija Redis keširanja
Keširanje objekata (Redis) se uglavnom koristi kako bi se keširali odgovori iz baze koje određena strana koristi. Kod strana koje dosta koriste bazu kao što su WordPress sajtovi, a odgovori iz baze su isti, keširanje objekata doprinosi bržem učitavanju.
Ova opcija nije dostupna kod svih hosting provajdera.
Aktivacija Redis keširanja se prvenstveno mora aktivirati na cpanelu kako bismo parametre uneli na sajt.
Odaberite koliko vam MB memorije treba. Mi vam predlazemo da to bude 128MB, to je sasvim dovoljno za bilo koji sajt.
Zapišite negde Current redishost i Current redis port podatke
Nakon toga idite na Select PHP Version
Pronađite opciju redis i aktivirajte je ukoliko vam nije aktivirana
NAPOMENA: Slobodno kontaktirajte podršku vašeg hosting provajdera da vam aktivira redis cache ukoliko ne možete da se snađete. Tražite im i parametre da vam pošalju da možete da povežete vaš sajt.
Optimizacija baze
Ovaj korak ma koliko vam komplikovano izgleda je ujedno i NAJBITNIJI. Prilikom kreiranja wordpress sajta u bazi se kreiraju tabele koje služe da se skladište podaci koje unosite na sajt. Svaka tabela ima svoju šifru za jezik. Takođe prilikom instaliranja dodatka kreiraju se tabele za taj dodatak sa opet da li istom ili različitom šifrom za jezik. Ukoliko su šifre jezika različite kompjuter mora da se prebacuje sa jednog jezika na drugi i to znatno usporava proces upita ka bazi. Potrebno je sve tabele u bazi prebaciti u isti jezik. Sajt će vam nakon ovoga poleteti…BUKVALNO.
Pratite video koji smo kreirali kako bi mogli sa lakoćom da izvedete ovaj poduhvat. Najpre je potrebno da se ulogujete u vaš Cpanel i idete na opciju Phpmyadmin
Optimizacija fontova za web sajt
U većini slučajeva fontovi se vuku sa Google fonts sajta što i nije loša opcija. Jedina mana je što ne možete da ih optimizujete dovoljno dobro jer se oni nalaze na drugom serveru i nisu podložni manipulaciji kao font koji se nalazi u lokalu odnosno na vašem hostingu.
Kako da prebacite font da bude na vašem hostingu i da ga potpuno optimizujete.
Za ovu svrhu koristićemo kao primer plugin Elementor Pro, malo kodova koje možete da kopirate i Font Squirrel za optimizaciju fonta.
Font Squirrel i Google Fonts
Video tutorijal kako da optimizujete font i pripremite ga za importovanje na sajt. Pogledajte video jer ova optimizacija smanji font do 10x što je velika ušteda za sam sajt. Font Squirrel izbaci nepotrebne fontove i ostavi samo one koji vam trebaju za sajt. Time se uštedi na prostoru i do 10x.
Unošenje fonta na web sajt
Ovaj deo može da se uradi na nekoliko načina u zavisnosti od toga šta ćete koristiti.
Neke premium teme imaju opciju unosa fonta, ako imate neki od page buildera kao što je Elementor Pro on takođe ima opciju za custom fontove odnosno unos fontova na hosting, ako pak nemate ni jednu opciju i za to postoji rešenje, unošenje preko CSS kodova.
U ovom tekstu pokazaćemo primere kako da unesete pomoću Elementor Pro i preko CSS kodova. CSS kodove možete primeniti na bilo koji sajt bez obzira kako je kreiran.
Elementor pro
Elementor Pro poseduje opciju da ubacujete neograničen broj custom fontova.
Klikom na dugme Add New pokrećete opciju dodavanja custom fonta.
Primer popunjavanja fonta pogledajte na slici
Unos drugih veličina fonta otvarate klikom na dugme Add Font Variation
Unos fonta preko CSS koda
Pogledajte video tutorijal kako da unesete font preko css kodova i da ih primenite na vaš tekst i naslove. Ispod se nalaze kodovi koje možete da kopirate i ubacite ih na svoj sajt.
Ispratite tutorijal do kraja kako biste videli koje sve vrednosti je potrebno zameniti iz koda i gde se kod unosi.
@font-face {
font-family: Roboto-regular;
display-font: swap;
src: url("../font/roboto-regular-400-webfont.ttf") format('truetype'),
url("../font/roboto-regular-400-webfont.woff") format('woff'),
url("../font/roboto-regular-400-webfont.woff2") format('woff2');
font-weight: 400;
}
@font-face {
font-family: Roboto-bold;
display-font: swap;
src: url("../font/roboto-bold-700-webfont.ttf") format('truetype'),
url("../font/roboto-bold-700-webfont.woff") format('woff'),
url("../font/roboto-bold-700-webfont.woff2") format('woff2');
font-weight: 700;
}
p, li{
font-family: Roboto-regular;
}
h1, h2, h3, h4, h5, h6{
font-family: Roboto-bold;
}
Zbog izuzetno velikog broja premium tema koje postoje na tržištu nemoguće je napraviti tutorijal za postavljanje fontova za svaku temu. Predlažemo da pogledate dokumentaciju od teme ako niste sigurni gde se postavljaju custom fontovi u vašoj temi.
Uvek možete da iskoristite opciju postavljanja fontova kroz CSS kodove pa čak i za premium teme.
Kako da ubrzate sajt optimizacijom fonta – Preload fonta
Prilikom analiziranja brzine sajta preko Google page speed dobijate jedno od upozorenje kao što je prikazano na slici dole
Za preload fonta moraćemo koristiti plugin koji se zove Insert headers and footers jer ukoliko budemo direktno u header.php teme unosili ove kodove, prilikom update-a teme kodovi će se obrisati.
Prvo moramo da identifikujemo koje sve fontove treba da preloadujemo.
Za ovu svrhu najbolje je da koristite GT metrix jer vam on daje pregled svih fontova i vreme blokiranja svakog fonta
Drugi korak je da instaliramo plugin koji se zove Insert Headers and Footers.
Kada ste instalirali plugin odlazite na njega Settings > Insert Headers and Footers i unosite sledeći kod u sekciju Scripts in Header:
<link rel="preload" href="URL fonta" as="font" crossorigin="anonymous">
Zatim odlazite opet na GT metrix i preuzimate linkove iz sekcije Fonts. Kliknete na plus pored fonta i zatim desni klik mišem na link fonta i odaberete opciju Copy link.
Vraćate se na plugin gde ste prethodno uneli kod i umesto url fonta iz primera zamenjujete ga sa vašim linkom koji ste kopirali pazeći da link umetnete između znaka navodnika i pazeći da ne obrišete navodnike. Ukoliko obrišete samo ih dopišite.
Postupak uradite za sve fontove koje vam je GT metrix izbacio u polju Fonts. Primere preload koda unosite jedan ispod drugog za svaki font.
Optimizacija slika za web sajt
Priprema slika za web sajt, optimalne dimenzije i SEO optimizacija slika je detaljno objašenjena u jednom od naših prethodnih članaka “Kako da optimizujete slike za web sajt”
Sledeći korak optimizacije je instalacija potrebnih pluginova za slike.
Smush plugin
WP Smush je dodatak od WPMU DEV firme. On služi da dodatno kompresuje slike.
Prođite kroz proces podešavanja koji vam Smush nudi.
Kada ga aktivirate u besplatnoj verziji možete 50 slika u jednoj turi da kompresujte. Kada obradi 50 slika daje vam opciju narednih 50 slika da kompresujete i tako dok ne kompresujete kompletno celu biblioteku. Prozor WP Smush-a mora biti otvoren sve vreme dok radi.
Kada instalirate WP Smush on vam daje opciju da automatski kompresuje sve slike koje ubacite posle.
Webp Express
Kada proveravate brzinu sajta preko Google page speed alata izlazi vam opcija da se predlaže da počnete da koristite neke od novijih generacija formata slika, a to su JPEG 2000, Webp, JPEG XR. To su zaista dobri formati i upola manje su teški nego običan jpeg ili png.
Problem kod ovih formata je taj da ga ne učitavaju svi browseri. Npr Webp učitavaju samo Chrome i Opera i to novije verzije. Ostali su razbacani po verzijama i browserima i jednostavno ne možemo da ispratimo koji je najbolji za korišćenje. Na scenu stupa više nego odličan dodatak koji je rešio problem naše nedoumice i dodatak velikom brzinom dobija na popularnosti.
Webp Express dodatak ima opciju da aktivira na browserima koji podržavaju Webp format slika, a kod onih koji ne podržavaju prikazuje original sliku odnosno Jpeg ili Png.
Potrebno je bar dva puta da kliknete dugme Save settings kako bi kompletno uneo kodove za konvertovanje u vaš sajt
Funkcioniše na principu konvertovanja Jpeg ili Png u Webp format kroz open source kod. Ne brinite, dovoljno je samo da instalirate plugin koji umetne kod na vaš sajt i sam obavlja konverziju. Potrebno je samo u Settings-ima da podesiti parametre i da sačuvate podešavanja koja ste aktivirali.
Ukoliko ne možete ni jednu od opcija koja vam je ponudjena iz podešavanja da aktivirate, kontaktirajte hosting provajdera, tehničku podršku i zamolite ih da vam aktiviraju Imagick PHP skriptu i onda ćete moći da aktivirate jednu od opcija koja vam je dovoljna za konvertovanje.
Ovako podešen Webp Express će sam konvertovati slike u webp format prilikom svake posete stranice.
Uvek možete kliknuti na dugme Bulk Convert i konvertovati slike unapred.
Deaktivirajte opciju Convert on upload jer znatno usporava upload slika na sajt, jer u isto vreme i konvertuje u webp format prilikom upload-a.
Optimizacija slika koje se već nalaze na sajtu
Slike koje ste već uneli na sajt i shvatili ste da nisu optimizovane, nisu prilagođene dimenzije i prevelike su za sajt, postoji rešenje i za to.
Instalirajte plugin Imsanity. Sa ovim dodatkom možete da ograničite maksimalnu širinu ili visinu slike i svaki unos slike veće od zadatih dimenzija će biti smanjeno.
Imsanity se nalazi nakon instalacije u opciji Settings > Imsanity (Podešavanja > Imsanity (Srb))
Slike koje se već nalaze na sajtu se takođe mogu klikom na dugme Start Resizing All Images možete pokrenuti smanjivanje slika na dimenzije koje ste prethodno zadali.
Keširanje i optimizacija CSS i JS kodova
Za potrebe keširanja i optimizacije koristićemo Litespeed cache plugin.
Litespeed cache plugin možete da instalirate preko vašeg wordpress sajta Plugin > Add New
Dovoljno je samo da ukucate Litespeed i izaći će vam prvi na listi.
Instalirajte i aktivirajte dodatak.
Aktiviranje Cache i Redis opcije
Otvorite opciju Cache prikazanu na slici
Idite na karticu Object i aktivirajte opciju Object cache. Odaberite opciju Redis i unesite podatke koje ste dobili nakon aktivacije na hosting nalogu.
Nakon toga skrolujte skroz dole i deaktivirajte Cache Wp-Admin i Store Transients
Otvorite zatim karticu Browser i aktivirajte opciju Browser cache sa Off na On.
Kompresovanje CSS i JS fajlova
U levom meniju WordPressa idite na opciju LiteSpeed Cache > Page Optimization
U kartici CSS Settings potrebno je aktivirate (On) sledeće opcije:
- CSS Minify
- CSS Combine
- CSS HTTP/2 Push
- Inline CSS Async Lib
- Font Display Optimization aktivirati opciju Swap
Nakon sačuvavanja CSS opcija idite na ikonicu u obliku dijamanta u gornjem crnom tabu wordpress-a i odaberite opciju Purge All. To će očistiti sav cache i povući nova podešavanja.
Zatim idite na naslovnu stranu vašeg sajta i reloadujte stranicu. Uverite se da je svaki deo stranice na svom mestu i da je sve u redu. Takođe pogledajte i ostale stranice sajta jer podešavanje CSS opcija može da poremeti izgled vašeg sajta.
Ukoliko vidite neke promene vratite se u CSS Settings i vratite na prethodno stanje jednu po jednu stavku dok se ne vrati izgled sajta. Poslednji koji ste deaktivirali je opcija koja je poremetila izgled vašeg sajta i samo ta opcija neka ostane deaktivirana sve ostale opet aktivirajte.
U JS Settings potrebno je aktivirati sledeće opcije:
- JS Minify
- JS Combine
- JS HTTP/2 Push
- Load JS Deferred
Proveru stanja sajta ponovite isto kao i sa CSS podešavanjima kao i pre provere obrišite cache (Purge all).
Optimizacija HTML koda
Sledeći tab koji treba da podesite je tab Optimization. Nalazi se pod opcijom Litespeed Cache > Page Optimization > Optimization
U ovom tabu treba da podesite tj aktivirate sledeće opcije:
- HTML Minify
- Remove Query Strings
- Load Google Fonts Asynchronously (ovu opciju aktivirate samo ukoliko koristite Google fonts preko Google servera)
- Remove Google Fonts (Ovu opciju aktivirate samo ako vam je font postavljen u lokalu u suprotnom neka ostane na opciji Off)
- Remove WordPress Emoji
- Remove Noscript Tag
LiteSpeed Cache Database
Posle izvesnog vremena rada na sajtu zna da se nakupi svega i svačega što može da uspori rad sajta. Potrebno je barem jednom u dve nedelje uraditi čišćenje tih zaostalih podešavanja i radova na sajtu.
Čišćenje se obavlja u opciji LiteSpeed Cache > Database > Clean All
Klikom na Clean All očistićete nepotrebne stvari na sajtu koje vam usporavaju rad sajta.
