Kako ubrzati web stranicu u Wordpressu u 14 jednostavnih koraka

WordPress je izvrsna platforma za izradu web stranica. Sve više web stranica koriste Wordpress, no nažalost on ima jednu manu: web stranice izrađene u Wordpressu mogu se u nekim slučajevima iznimno sporo ili lošije učitavati. Stoga je prethodno izradi Wordpress web stranice potrebno poduzeti određene korake kako bi ubrzali web stranicu izrađenu u WordPressu i kako ne biste odbijali posjetitelje i potencijalne kupce zbog njihove nestrpljivosti.

ZAŠTO JE BRZINA WEB STRANICE VAŽNA?

Ovo ste već vjerojatno čuli, ali kada posjetitelj po prvi puta dođe na Vašu stranicu imat ćete samo nekoliko sekundi da mu zaokupite pažnju i da ga uvjerite da se vrijedi zadržati na stranici. Ako već neko vrijeme poslujete online, znate koja je važnost brendiranja, dobrog rasporeda i izgleda stranice, isticanja važnih stvari i svega ostalog što je potrebno da zadržite posjetitelja na web stranici.

No, ako se Vaša web stranica učitava sporo, vjerojatno ćete posjetitelja izgubiti prije negoli uopće budete imali šansu pretvoriti ga u kupca svojih proizvoda ili usluga. Mnoga istraživanja potvrdila su da Vam je na raspolaganju samo kratko vrijeme za učitavanje stranice prije negoli posjetitelji odustanu i kliknu na neki drugi link, naročito ako su do Vaše web stranice došli preko linka postavljenog na nekoj drugoj stranici koju su posjetili.

Osim toga, Google je u svoj ranking algoritam uključio i brzinu učitavanja web stranice. To znači da brzina učitavanja Vaše web stranice utječe na SEO. Drugim riječima, ako je web stranica spora, ne gubite samo nestrpljive posjetitelje, nego i mogućnost dobre pozicije, tj. ranka svoje web stranice na tražilicama.

KAKO UBRZATI WORDPRESS

Kako se veliki broj korisnika zbog njegove jednostavnosti i dostupnosti dan danas opredjeljuje za Wordpress pri izradi web stranica, u nastavku Vam navodimo nekoliko savjeta kako možete ubrzati učitavanje web stranica u Wordpressu. Primjena tih savjeta trebala bi dramatično ubrzati Vašu web stranicu.

1. ODABERITE DOBAR WEB HOSTING

Ako po prvi put pokrećete web stranicu, shared web hosting vjerojatno će Vam se činiti kao najpovoljnija opcija, no obično se kaže „koliko para, toliko muzike“. Naime, kod shared web hostinga morate biti svjesni da će Vaša stranica biti smještena na serveru s mnoštvom web stranica drugih korisnika. To smanjuje cijenu usluge, ali s druge strane može negativno utjecati na rad Vaše stranice. Korisnici koji imaju veće zahtjeve za serverskim resursima i web stranicu koja već ostvaruje prihode, trebali bi stoga razmisliti o VPS hostingu ili zakupu dedicated servera. Svakako preporučujemo da pročitate naše ranije članke o prednostima i nedostacima shared web hostinga te o usporedbi VPS hostinga i dedicated servera, kako bi izabrali pravu vrstu hostinga za sebe.

No, smatramo da oko odabira pružatelja web hosting usluga ne biste trebali dvojiti. POSLuH hosting uspješno posluje više od 18 godina te je izuzetno povoljan i kvalitetan hosting koji rabi samo najbrže internetske linkove i serversku opremu. Svi naši serveri smješteni su u Hrvatskoj, što znači da će se Vaše WordPress web stranice otvarati znatno brže posjetiteljima iz Hrvatske i regije, nego ako ih hostate na serverima smještenima u Njemačkoj ili Americi, koje koriste brojni drugi hrvatski pružatelji hosting usluga.

2. ODABERITE SOLIDNU WORDPRESS TEMU/FRAMEWORK

Možda će Vam ovo biti iznenađujuće, ali zadane (defaultne) WP teme dosta su brze. To je zbog toga što su jednostavne, a lagani framework je uvijek poželjan ako želite imati brzu web stranicu. Još jedna njihova prednost je to što su besplatne.

Mnogi kao jedno od najbržih naplatnih okružja hvale Thesis Theme Framework. Iako se za to okružje štošta može prigovoriti vezano uz SEO značajke, to je definitivno solidni framework za brzo učitavanje stranica, čemu svjedoči iskustvo brojnih korisnika.

3. KORISTITE UČINKOVITI CACHING PLUGIN

WordPress priključci jako su korisni, no neki od najboljih spadaju u kategoriju cachinga, jer dramatično ubrzavaju učitavanje stranica, a što je najbolje, svi na wordpress.org su besplatni i jednostavni za korištenje.

Jedan od omiljenih takvih pluginova među korisnicima WordPressa je W3 Total Cache. Taj priključak ima sve značajke koje su Vam potrebne i jako ga je jednostavni instalirati i rabiti. Budući da će elementi stranice biti sačuvani u privremenoj memoriji, nakon što instalirate i aktivirate ovaj plugin, Vaša će se web stranica brže učitavati.

4. KORISTITE USLUGE GLOBALNOG POSLUŽIVANJA SADRŽAJA - CONTENT DELIVERY NETWORK (CDN)

Svi veliki blogovi to rade. CDN ili content delivery network preuzima statičke datoteke s Vaše web stranice (CSS, Javascript, slike, i slično) i omogućuje posjetiteljima da ih brže preuzimaju poslužujući ih na serverima koji su bliže njima. Jedna od takvih usluga koju mnogi koriste zbog doista razumne cijene i jednostavnog korisničkog sučelja je Max CDN Content Delivery Network.

5. OPTIMIZIRAJTE SLIKE

Yahoo! ima optimizator slika Smush.it koji će drastično smanjiti veličinu slikovne datoteke ne smanjujući pritom kvalitetu slike. Ako Vam je naporno optimizirati svaku sliku za sebe postoji besplatni priključak koji se zove WP-SmushIt i koji će obraditi sve slike automatski za vrijeme uploada.

6. OPTIMIZIRAJTE NASLOVNICU ZA BRZO UČITAVANJE

Postoji nekoliko stvari koje biste mogli napraviti kako bi se Vaša naslovnica brzo učitavala:

•    Prikazujte isječke umjesto cijelih postova
•    Smanjite broj postova na stranici (optimalan broj bi bio 5-7)
•    Uklonite nepotrebne widgete za shareanje s naslovnice (ostavite ih samo u postovima)
•    Uklonite neaktivne pluginove i widgete koji Vam ne trebaju
•    Zapamtite da posjetitelji dolaze radi sadržaja, a ne radi mase widgeta na naslovnici

Čista i usredotočena naslovnica izgleda bolje i brže će se učitavati.

7. OPTIMIZIRAJTE WORDPRESS BAZU PODATAKA

To možete učiniti ručno ili možete koristiti WP-Optimize priključak. Još jedan koristan plugin je WP-DB Manager, koji može automatski raditi optimizaciju na zakazani datum.

8. ONEMOGUĆITE HOTLINKING

Hotlinking je oblik „krađe“ bandwidtha kod kojeg druge web stranice izravno na svojim web stranicama učitavaju ili koriste slike ili neke druge datoteke koje su inače smještene na Vašem hosting paketu ili serveru. Zbog toga je Vaš server load izrazito velik, a povećava se s brojem ljudi koji na taj način koriste Vaše postove ili web stranicu.

Stavite sljedeći kod u root .htaccess datoteku:

1    RewriteEngine on
2    RewriteCond %{HTTP_REFERER} !^$
3    RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?vasa-stranica.com [NC]
4    RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?vasa-druga-domena.com [NC]
5    RewriteRule \.(jpg|jpeg|png|gif)$ http://i1.sndcdn.com/avatars-000001810711-8b5ch4-crop.jpg?30a2558 [NC,R,L]

Treća linija omogućuje Vašoj stranici da vidi slike. Zamijenite vasa-stranica.com sa stvarnim nazivom Vaše domene – nemojte koristiti www. Slično tome, ako želite dopustiti drugim web stranicama da koriste Vaše slike, možete zamijeniti vasa-druga-domena.com u četvrtoj liniji sa stvarnim nazivom domene. Linija 5 omogućuje da sve neovlaštene slike budu zamijenjene s ovom slikom: http://i1.sndcdn.com/avatars-000001810711-8b5ch4-crop.jpg?30a2558. Možete kreirati i svoju sliku i postaviti ju u bilo koji direktorij osim root direktorija. Ako ga stavite u root direktorij, Vaš server može ući u beskonačnu petlju. Zato je najbolje da sliku stavite, primjerice, u direktorij „slike“ i koristite taj link. U tom slučaju URL bi bio “http://vasa-stranica.com/slike/hotlinking.png”.

9. DODAJTE EXPIRES HEADER ZA STATIČKI SADRŽAJ

Expires header je način na koji možete odrediti koliko vremena u budućnosti klijenti (preglednici) neće morati ponovno dohvatiti statički sadržaj (kao što je css datoteka, javascript, slike i slično). To može značajno smanjiti vrijeme učitavanja redovnim posjetiteljima stranice.

Kopirajte i postavite sljedeći kod u svoju root .htaccess datoteku:

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"

Gore navedeni kodovi će svakom pojedinom navedenom tipu datoteka u zaglavlju poslati pregledniku informaciju koliko se dugo čuvaju fileovi u spremniku preglednika (cache preglednika).

10. PRILAGODITE GRAVATAR SLIKE

Podesite zadanu gravatar sliku na „ništa“. To nije estetski izbor, nego poboljšava učitavanje stranice zbog toga što na mjestu smiješnog Gravatar loga ili nege druge gluposti neće biti ništa. Neki blogovi odlaze toliko daleko da ih onemogućuju na cijeloj web stranici i za svakoga. Možete napraviti i tako, no bitno je da barem postavite da se umjesto zadane slike (koju možete pronaći u Wordpress dashboardu pod „Discussion“ u tabu za postavke) prikazuje prazni prostor.

11. DODAJTE LAZYLOAD SLIKAMA

LazyLoad je postupak kod kojeg se učitavaju slike koje su vidljive u prozoru preglednika posjetitelja. Kada posjetitelj klizi niže po stranici ostale slike se učitavaju netom prije nego što postanu vidljive u prozoru.

To će ubrzati učitavanje stranice i uštedjeti bandwidth jer će učitati manje podataka korisnicima koji ne žele skrolati do dna stranice. To možete automatski napraviti tako da instalirate BJ Lazy Load plugin.

12. PAZITE NA BROJ SPREMLJENIH IZMJENA POSTOVA

Ako nekoliko puta mijenjate i uređujete određeni post, WordPress će sam po sebi spremiti svaku verziju, bez ograničenja. Međutim, kada u određenom trenutku post bude objavljen i više ga ne želite mijenjati, ranije verzije posta doista Vam nisu potrebne. Stoga morate voditi računa o broju spremljenih verzija postova, a u tome Vam mogu pomoći razni priključci kao što je Revision Control. Pomoću tog plugina možete podesiti da se spremaju samo 2 ili 3 ranije verzije članka za slučaj da ste napravili grešku. Na taj način spriječit ćete zakrčenje backenda s nepotrebnim verzijama i nacrtima postova.

13. ISKLJUČITE PINGBACK I TRACKBACK FUNKCIJE

Po defaultu postoji interakcija između WordPressa i drugih blogova koji imaju pingback i trackback funkcije. Svaki put kada Vas drugi blog spomene, o tome obavještava Vašu stranicu, koja zatim osvježava podatke o postu. Isključivanje te funkcije neće utjecati na backlinkove prema Vašoj stranici, nego samo na postavku koja znatno opterećuje Vašu web stranicu. Više o tome možete pročitati ovdje.
 

14. UKLJUČITE GZIP ili MOD DEFLATE VAŠIH DATOTEKA

GZIP  i mod deflate su načini kompresije podataka. Gotovo svaku datoteku koju vaš Wordpress isporučuje posjetitelju (od HTML-a, CSS-a, Javascript fileova itd.) moguće je kompresirati prilikom isporuke posjetitelju čime se smanjuje vrijeme odaziva, a samim time povećavaju performanse učitavanja web stranice.

GZIP i mod deflate mogu se uključiti na različite načine, ali to ponajprije ovisi o tome podržava li ih Vaš hosting provider (većina ozbljnijih hosting providera nude spomenute načine kompresija) te je li Vaša web stranica smještana na serveru s Linux platformom. Ukoliko nemate dovoljno znanja ili iskustva vezano uz spomenute kompresije, slobodno se možete obratiti Vašem hosting provideru koji će provjeriti jesu li kompresije dostupne i/ili uključene.

Ako su kompresije dostupne, možete ih uključiti na jedan od sljedećih načina:

1. U .htaccess datoteku unutar vašeg public_html-a direktorija dodajte sljedeći kod:

# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary


2. U index.php datoteci Vašeg Wordpressa u samom public_html direktoriju pozovite funkciju ob_start('ob_gzhandler'); tako da Vam kod u konačnici izgleda ovako:

ob_start('ob_gzhandler');
/**
 * Front to the WordPress application. This file doesn't do anything,but loads
 * wp-blog-header.php which does and tells WordPress to load the theme.
 *
 * @package WordPress
 */
[...]

I na samom kraju, otkrit ćemo Vam jednu našu tajnu, a to je da prilikom optimizacije Wordpressa ili web stranica općenito volimo i vrlo rado koristimo Google Page Insightov alat koji daje detaljne informacije i rezultate o optimizaciji web stranice, ali i informacije kako ubrzati stranicu.

Za one koji još uvijek nisu čuli za ovaj alat, naša preporuka je da ga (kao i naš web naravno) dodate u favorites, tj. zabilješke. Google Page Insight Tool možete koristiti na ovom linku.

U formu jednostavno utipkajte naziv vaše domene ili URL Vaše web stranice i Google će izvršiti provjeru, a nakon uspješnog pregleda dati rezultate i prijedloge vezane za poboljšanje i optimizaciju Vaše web stranice.