WordPress Speed optimizacija - ubrzao site 8x

Nije znanstvena fantastika. Bilo je masu slika, koje sam optimizirao i ustedio pun k MB. Zatim u portfoliu su prikazivali 30ak radova, ciji su thumbnailsi (300x300) bili slike u punoj rezoluciji samo podeseni CSSom da se odrze u gabaritima od 300x300px. To san naravno generirao 300x300px slike jer apsolutno nema potrebe za ucitavanjem full size slika i onda prikazivanjem istih u 10x manjem izdanju. Tu je ustedeno ohoho MB. I na kraju, smanjio sam broj requesta i minimizirao js i css fileove.

no postoje tu i neki paradoksi a vezani su za seo optimizaciju.
Veće slike google bolje rangira od manjih. Provjeravao sam na nekim artiklima iz web trgovina i uvjerio se da velike slike donose vrlo dobre pozicije na Googlu. Sad koliki je taj procenat nidsam siguran no znam da dva weba podjednakih pozicija imaju istu sliku samo je jedna veća ova veća ima bolju poziciju.
No hrpa ogromnih slika usporava učitavanje i u velikom broju ljudi bježe s takvih stranica.

a gle… sigurno i brzina učitavanja ima ulogu u rangiranju. Nije isto 14 ili 4 sekunde…

1 Like

https://gtmetrix.com/compare/ObEv5ODM/dofhprzm

Slobodno prokomentirajte koliko mi je site dobar ili loš :smile:

Tip2 - optimizirati JS
Ponekad i veliki igrači (Google, Bing…) koji i sami propagiraju optimizirane skripte kako bi se sadržaj što brže učitavao nama običnim smrtnicima uvaljuju nešto što nema nikakve logike.

Primjer male Quantcast neoptimizirane skripte:

var _qevents = _qevents || [];

(function() {
var elem = document.createElement('script');
elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
elem.async = true;
elem.type = "text/javascript";
var scpt = document.getElementsByTagName('script')[0];
scpt.parentNode.insertBefore(elem, scpt);
})();

_qevents.push({
qacct:"p-XXXXXXXXXXXXXXXXXXXXX"
});

To isto, samo malo sređeno i potpuno funkcionalno:

var _qevents=_qevents||[];!function(){var e=document.createElement("script");e.src=("https:"==document.location.protocol?"https://secure":"http://edge")+".quantserve.com/quant.js",e.async=!0,e.type="text/javascript";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),_qevents.push({qacct:"p-XXXXXXXXXXXXXXXXXXXXX"});

Definitivne preporuke:

  • optimizirati JS i smanjiti broj eksternih skripti, tj. kombinirati više njih u jednu i pozivati prema potrebi.
  • male skripte kompresirati i ubacivati kao inline, ne raditi xx eksternih JS.
  • JS (inline i eksterne) UVIJEK u footer, točno prije </html> taga

:beers:

1 Like

Ja WP lično ne volim koristiti, niti ga koristim za jednu svoju stranicu, ali ono što svaki site može uraditi da dobije na brzinu jeste da koristi :

  • Neku od cache metoda
  • GZIP
  • Minify JS/CSS/HTML
  • Smanjiti broj requestova na minimum da sve i dalje radi kako treba
  • Što manje inline CSS i skriptica - minimalno
  • Za slike se može koristiti timthumb ili nešto slično kao kraken.io
  • Ne koristiti previše fontova
  • CloudFlare / CDN
  • CSS Frameworks - Odabereš prije šta ćeš koristiti, ono što nećeš - nepotrebno je i usporit će, skeleton i nešto dodatno je dovoljno. (?v=1 -> nije nešto i potrebno)…

itd…

Mojoj stranici treba 9.3 sekundi :fearful: i ima 4.59 MB, katastrofa. trebala bi sve slike optimizirat kojih ima milion a nikako nać vremena

Imam i ja jedno pitanje, kako podesiti expiration date, a da nije wordpress? Testirao sam jedan svoj sajt i za ovo mi je ocena F :frowning:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

.htaccess

1 Like

Meni je najjače bilo kad nam je učitelj u Algebri pričal kako trebamo pisati ’ umjesto " kad pišemo php jer “svaka sitnica znači”, a njegove stranice su radile brdo poziva na neminificirane css i js

Cloudflare.com ima opciju za podesiti expires header.

1 Like

Evo malo sam popravio load time foruma:
https://gtmetrix.com/reports/wmforum.geek.hr/ifjZfSJ0

Dok je u zelenom, dobro je :slight_smile:

Koliko je ovo legitimno, ovi pingdom i gtmetrix servisi? Na jednom mi je ucitavanje sajta 2.7 sekundi, iz USA,
a iz Kanade na drugom 6.5 sekundi. Sada citam neke greske sa parallel download-om, svaku sliku treba da stavljam na poddomenu, .js i .css na drugu poddomenu…? Deluje mi to sve preterano.

Glede expiration datea i htaccess filea, a da nije wordpress, ja sam probao sve zive stavke,i ove gore navedene i neke druge,ali i dalje to pise

https://gtmetrix.com/reports/www.dadaas.com/m6ns7qNR

Neda mi vrag mira i sad se selim na NGINX server. Sve poodeseno i customizirano od mene, bez panela.
Evo ovo je gore www.dadaas.com na NGINX serveru. Ali ako odete na stranicu i pocnete surfati primjetiti cete da stranica doslovno leti. Svi pagevi se otvaraju unutar 2 sekunde, ako ne i u sekundi.

Gtmetrix kaze 3.4 za pocetnu, nije problem buduci imam ogroman slider koji se loada i 102 requesta. zanima me dali bi se u milisekundama stranica otvarala da imam neki simple template s 30 ili manje requesta, to bi trebalo doslovno letjeti.

I moram jos napomenuti da je ovo na jeftinom s 2 jezgre 2gb rama i 2gb swapa www.digitalocean.com serveru, trenutno sam prebacio 2 stranice i dobro nemaju neki traffic ali load average neide iznad 0.03, sto znaci da ima prostora. Ako se netko razumije u NGINX i podesavao ga je, moze malo ovdje npisati prednosti i nedostatke.

Evo ja cu prvi:
Prednosti:
Vidite i sami ako ste posjetili moju stranicu da stranica doslovno leti, ne muce je ni ogromne slike ni ogromni slideri ni nista jer jednostavno leti.

Nedostaci:
NGINX server je pain in the ass podesiti. Zato sam ja i isao na opciju bez panela jer tko zna sta ti paneli instaliraju i onda kad nesto ne sljaka onda glavom u zid. ovako sam ja sve sam podesio manualno i tocno znam gdje je sto i ako sto envalja lako se popravi.

Drugi nedostatak je da trebate ovaj server osigurati, pogotovo ako imate vise klijenata s vise razlicitih accounta na jednom serveru. A to je opet druga prica.

ja sam lockao svaki account i kako koristim fpm pools onda sam stvori svakom useru zasebno svoj fpm socket. tak da ako jedan website bude hackovan ostali su safe. osim toga sam zalockao sve sto se dade zalockati i jednostavno nema sanse da netko dodje na server i ne nisam koristio nikakve pluginove, nikakve dodatne modove, programcice, koristio sam obicni UFV, MOZDA predjem kasnije ako bdue trebalo na CSF.

Mozda ove gore recenice mogu objasniti zasto se vecina hostera drzi apachea, jer jednostavno kliknu install, a mnoge hosting kompanije ni ne optimiziraju apache server iako prodaju managed web hosting.

Provjeri permisije je li imas dobro podesene za homove korisnika, datoteke, sockete te dobro postavljen sec u php.ini datoteci inace ti badava samo posebni useri za svaki pool.

Vecina ga koristi jer velika vecina korisnika hoce cpanel. Migracija racuna s cpanela na cpanel je jedan klik sto je veliki pain in the ass kad bi radio migraciju 200 racuna iz cpanela na server bez panela. To ti nitko nece raditi za 150kn godisnje koliko placas npr. hosting account jer je satnica sistemca 300kn pa racunaj. Kad imas par webova na serveru onda ti ne treba panel, kad imas 40 webova na VPS-u, kao sto imam na jednom, isto ti ne treba panel osim ako imas klijenta koji zeli sam otvarati domene i mailove jer u cli tesko da ce koji znati ili da ce mu se dati raditi u njemu. Kad si ti glavni i brines se o otvaranju novih domena i webova bez potrebe da ti klijent drlja, ne treba ti panel i mozes upogoniti cuda :smiley:

Sto se tice php-fpm-a, cpanel ga podrzava odnedavno, ali u cli i moras pisati za svaki web custom sto nije opcija. Template u gui ce biti izvediv, ali obzirom da php-fpm povlaci i neke druge stvari u apachetu, mod_proxy_fcgi te nema vise suphp-a, pitanje je kako ce to sve izgledati u produkciji… Takodjer proxypass je ranjiv i treba bit pametan u implementaciji u vhostu.

Nginx postoji za cpanel i moze se koristiti.

Cpanel je super za manje webove i sherani hosting, za posjecenije webove i velike portale najbolji je vps ili dedi i custom rjesenje bez cpanela :smiley:

Da, kada je vise sietova u igri nakupi se toga i moze se izgubiti.

Zbog jednsotavnosti ljudi koriste apache i panele jer lao prebacuju siteve s jednim clickom, ali nije toliko ni tesko manualno prebaciti sve.

Ai i taj cpanel je overrated. Em kosta i em nevidim po cmu je bolji od webmin+virtualmin osim sto mozda ljepse izgleda.

Pokusao sam ja nginx uvest za webmin+virtualmin i ima modul ali majko mila stvari se zakomplicirale, pa odlucio ic bez tog webmina i virtulmina jer sam jos ugledao da zdere oko 500mb rama… bez sitevoa.

To nešto nije bilo u redu.
Ja sam više puta instalirao webmin+virtualmin+nginx na VPS od 128Mb rama.
Sve je glatko radilo. Preporuka za ovu kombinaciju je 256 ali radi bez problema i na 128.
Imam ti kompletan tutorijal za to + kako poslije naštelati nginx, sve preko terminala.

Kako smanjiti velicinu gifa? Imam par gif sajtova a gifove koje stavljam su po nekoliko MB. Kako njima smanjiti velicinu?

ne, radilo je i meni samo nisam bio zadovoljan kako je virtualmin podesio nginx. Nije mi se svidjao security i druge postavke koje su automatski postavljene.