Pokretanje testa brzine sajta putem Google PageSpeed Insights-a je jedan od najboljih načina za utvrđivanje stanja sajta i pronalaženja rešenja za probleme zbog kojih sajt možda ne postiže standardnu brzinu na koju su krajnji korisnici navikli ili koju očekuju da iskuse kada ukucaju adresu i čekaju na učitavanje sadržaja. Google PageSpeed Insights ne samo da meri vreme učitavanja i uočava poteškoće, već jasno ukazuje na detalje koje treba optimizovati kako bi se opšte stanje popravilo i time korisničko iskustvo podiglo na najviši mogući nivo.

Ovi rezultati dobijaju se na osnovu predstave koju Google ima o korisničkim iskustvima i performansi koje njegovi servisi očekuju da zateknu na jednom veb-sajtu. U te servise spadaju Google Analitika, AdSense, AdWords, ali i svi faktori koji utiču na rangiranje i SEO ocenu, pa to obavezno treba imati u vidu ukoliko želite da imate dobar odnos sa ovim pretraživačem.

Ne opterećujte se oko postizanja pune 100/100 ocene

Maksimalna ocena koju PageSpeed Insights procenjuje kao najbolju praksu je 100, a stanje se prikazuje kao 65/100 (ocena 65 od mogućih 100) ili 85/100, odnosno 97/100, sve u zavisnosti od opmizacije koja je preduzeta na veb-sajtu. Maksimalna ocena prikazana je kao 100/100.

Postoje faktori na koje administrator može uticati direktno i uraditi sve da zadovolji kriterijume ovog servisa, ali postoje i faktori kao što je odziv servera i njegove mogućnosti gde se ne može direktno i jednostavno uticati, a koji zahtevaju možda čak i promenu hosting provajdera i uključivanje dodatnih servisa kao što je CDN.

Često nije moguće dobiti maksimalnu ocenu  i ne treba se previše opterećivati oko toga. Za početak je bitno odrediti probleme, a onda postepeno pristupiti rešenju. Nije redak slučaj da je preterivanje sa optimizacijom ugrozilo neke druge aspekte veb-sajta i time umanjilo upotrebljivosti.

WordPress na testu Google PageSpeed Insights-a

Iz programerske tačke gledišta, WordPress nije najbrže rešenje. Problem često može da leži u dodacima, temama i svemu onome što dolazi od trećih lica sa kodom koji nije uvek čist i optimizovan za osnovnu podlogu ove platforme.

Da bismo videli šta WordPress može da uradi po ovom pitanju, uradili smo jedan test sajt koji se nalazi na lokaciji http://brzina.iz.rs i na našem deljenom hostingu, optimizovali smo platformu i skripte i postigli skoro maksimalne rezultate.

Ovaj test i optimizacija izvršeni su sa temom Twenty Fifteen u izdanju 1.4. Ova tema dolazi sa WordPressom i ono što je dobro kod nje je da su je napravili ljudi koji su napisali i WordPress pa nećemo uzimati čistoću koda same teme kao pitanje za optimizaciju sajta.

Ceo test i optimizaciju zapisali smo u vidu uputstva koje i vi sami možete iskoristiti za poboljšanje brzine svog sajta i to bez nekog posebnog predznanja.

Optimizacija sajta za PageSpeed Insights

Sajt smo već napravili i treba izvršiti testiranje na Google PageSpeed Insights-u. Tu imamo tri ključna detalja:

1. Polje u koje unosimo link veb-sajta kojeg testiramo
2. Brzinu – trenutna procena
3. Sugestije uz pomoć kojih se može rešiti optimizacija sajta

Unošenjem adrese veb-sajta u polje 1 i klikom na dugme Analiziraj pokrećemo testiranje koje će kroz 5-10 sekundi prikazati ocenu brzine sajta (2) i predloge za optimizaciju i poboljšanje rezultata. U našem primeru dobili smo sugestije da uradimo sledeće:

• da omogućimo kompresiju na veb-sajtu
• da eliminišemo JavaScript i CSS koji blokiraju prikaz u sadržaju iznad preloma
• da smanjimo vreme odgovora servera
• da podesimo keširanje pregledača
• da umanjimo CSS
• da umanjimo JavaScript
• da optimizujemo slike
• i da umanjmo HTML

Krenućemo od najjednostavnije optimizacije koja se obavlja instalacijom dodataka za optimizaciju na WordPress.

1. Optimizacija slika na WordPressu

Google PageSpeed Insights sugestira da se optimizacijom slika mogu postići bolji rezultati

Optimizacija slika, odnosno, poboljšavanje njihovog pregleda na internetu može se postići i bez drastičnog gubitka kvaliteta uz pomoć  EWWW Image Optimizer dodatka iz zvanične arhive WordPress dodataka.

Nakon instalacije uključite dodatak koji se nakon toga može pronaći u Podešavanja/EWWW Image Optimizer. 

Otvorite dodatak i pokrenite Bulk Optimize opciju. Sve slike koje su podignute na vaš sajt biće optimizovane automatski bez gubitka na kvalitetu. Sve buduće slike koje budete podizali na sajt biće takođe automatski optimizovane.

Proces optimizacije možete pratiti u živom pregledu, a u zavisnosti od količine slika proces može i potrajati:

Google PageSpeed Insights potvrđuje da smo uspešno obavili posao:

2. Umanjenje JavaScript-a, CSS-a i HTML-a

Sledeće tri sugestije iz naslova rešićemo instalacijom još jednog dodatka koji možete pronaći pod nazivom Autoptimize. Instalirajte dodatak, uključite ga i otvorite opcije. Ovaj dodatak nakon uključivanja možete pronaći u Podešavanja/Autoptimize.

Označite sledeća polja:

• Optimizuj HTML kod i Zadrži HTML komentare (u nekim slučajevima ovo je potrebno)
• Optimizacija JavaScript Koda
• Optimizuj CSS Kod

Kliknite na dugme Sačuvaj izmene i isprazni keš. Evo i potvrde o uspešno obavljenom poslu:

3. Eliminacija JavaScript-a i CSS-a u sadržaju iznad preloma

Konkretno u temi koju smo mi koristili za test problem izazivaju Google fontovi. Isključili smo ih uz pomoć dodatka kojeg smo već instalirali u prethodnom koraku – Autoptimize. Otvorite ga opet i označite opciju Uklonite Google Fonts.

Problem je rešen, ali sada treba popraviti izgled slova pa otvorite Uređivač iz Izgled/Uređivač izbornika alata.

Kliknite na Podnožje teme (Footer) kako biste ga uredili:

Tačno pre </body> oznake ubacite sledeći kod za Google Fontove:

<link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,
700,700italic' rel='stylesheet' type='text/css'>

ili za Font Awesome, ukoliko vam se više dopadaju:

<link href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css"
 rel="stylesheet">

Sačuvajte podešavanja klikom na dugme Ažuriraj datoteku.

Fontovi će sada biti povlačeni iz Podnožja pa neće smetati više čak ni Google PageSpeed Insights-u. Evo šta smo uradili do sada:

4. Podešavanje keširanja pregledača

Najčešći problem u ovom delu pravi niko drugi do upravo Google-ova skripta za Analitiku sa http://www.google-analytics.com/analytics.js . Problematično je što je životni vek ove skripte u kešu pregledača samo dva sata. Google se čak i oglasio po ovom pitanju i rekao da neće rešiti ovaj “problem” jer omogućava bolje performanse.

Ako se i kod vas javi ova greška, možete koristiti skriptu sa ispravkom koju je napravio  Jesse Luoto. Ova skripta koristi Google Analytics Measurement Protocol REST API . Dovoljno je postaviti sledeći kod u podnožje (Footer) pre oznake </body> i to će rešiti problem:

<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" 
async=""></script><script>// <![CDATA[
var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here
// ]]></script>

Da bi skripta radila potrebno je da umesto UA-XXXXXX ubacite svoj kod za praćenje koji ćete pronaći na vašem nalogu Google Analitike.
Uključivanje keširanja za ostale materijale, kao što su slike, tekst, aplikacije i ikonice možete uraditi dodavanjem sledećeg koda u .htaccess datoteku:

## Podešavanje keširanna pregledača ##
<IfModule mod_expires.c>
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 2 days"
</IfModule>
## Podešavanje keširanja pregledača ##

.htaccess datoteka nalazi se u korenom direktorijumu vaše WordPress instalacije. Poželjno je napraviti njenu rezervnu kopiju pre bilo kog uređivanja za slučaj da nešto krene po lošem planu.

5. Uključivanje kompresije na WordPress sajtu

Kompresija se može uključiti dodavanjem sledećih linija koda u .htaccess datoteku kod Apache servera:

<IfModule mod_deflate.c>
 # Compress HTML, CSS, JavaScript, Text, XML and fonts
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml

# Uklanja greske pregledaca (za zastarele pregledace)
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 Header append Vary User-Agent
</IfModule>

Ili dodavanjem sledećeg koda u nginx.conf datoteku za Nginx:

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript 
text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;

6. Umanjenje vremena odgovora servera

Na kraju dolazimo do redukovanja vremena odgovora servera. Ukoliko koristite deljeni hosting i želite da uklonite ovu grešku u najvećem broju slučajeva potrebno je zakupiti najbrži server i obezbediti dobru CDN uslugu.

Kada je brzina servera u pitanju Adriahost izlazi u susret korisnicima sa ponudom Cloud VPS Servera kod kojih se podaci učitavaju sa SSD uređaja, gde korisnik bira broj jezgara procesora i količine RAM-a, što sve zajedno ima uticaj na vreme koje je potrebno da server ispuni zahtev. Više o ovoj usluži pročitajte na sledećem linku gde možete videti i kompletnu ponudu: Cloud VPS Serveri.

Pročitajte obavezno i tekst na temu CDN usluge koja vam čak i uz dobar hosting može dodatno uvećati performanse i rasteretiti primarne resurse: Kako da ubrzate vaš sajt, uštedite bandwidth i šta je to CDN?

CDN – Content Delivery Network ili Content Distribution Network.

Ako se odlučite za neki od CDN servisa iskoristite pogodnosti koje donosi dodatak za WordPress kojeg u zvaničnoj arhivi možete pronaći pod imenom CDN Enabler i koji omogućava laku integraciju ove usluge u WordPress.

Koje smo rezultate mi dobili na usluzi deljenog hostinga

Sajt postavljen za ovo testiranje instaliran je na serveru za usluge deljenog hostinga. Rezultat koji smo pri tome dobili na Google PageSpeed Insights-u je varirao od 90/100 do 95/100 što spada u odlične rezultate kada su u pitanju mobilni i stoni računari na kojima se sajt pregleda.

Na slici ispod možete videti vrednosti pre optimizacije, ocena koju smo dobili u tom trenutku iznosila je 70/100:

Nakon preduzetih poboljšanja na osnovu sugestija koje smo dobili od Google PageSpeed Insights-a, naš test-sajt ocenjen je odličnom ocenom, 95/100:

Kao što je već pomenuto na početku, ne treba biti previše temeljno i opsednuto pristupiti brojkama. Dovoljno je uraditi što je više optimizacija, testirati rezultate i paziti da oni budu na optimalnom nivou i u skladu sa ostalim faktorima koji utiču na popularnost. Među te faktore spadaju i vizuelna privlačnost i upotrebljivost, funkcionalnost i kvalitet sadržaja.