Ubrzavanje WordPressa pomoću Gonzales plugina

Vjerujem da se svi slažemo da je brzina učitavanja web stranica vrlo bitan faktor za zadržavanje posjetitelja/kupaca (ili stjecanje novih). Također, optimizacija brzine bitan je faktor za web tražilice. Google kao kralj tražilica, u svom ranking algoritmu uzima u obzir i brzinu učitavanja. Dakle, nije upitno treba li poraditi na tom aspektu ili ne.

Na webu možete pronaći mnoštvo članaka o tome kako optimizirati brzinu učitavanja. Neki članci se postavljaju ultimativno i kažu da znaju čarobni recept za postizanje cilja (100/100 na Google PageSpeed insights).

Odgovorno tvrdim da su to nebuloze i nema ćiribu ćiriba recepta za takvo nešto. Postoje tisuće hosting kompanija i server setupova, tema, pluginova (i kombinacija istih).

Također, 100/100 je Sveti gral. Svi ga traže, lome ruke, noge i, naravno, webove. Zanemarite to. Zadovoljite se sa “zelenim rezultatom”. Zeleno je cool. Veličina naslovnice od <= 1MB  je ok . Brzina ispod dvije sekunde je prva liga.

[DISCLAIMER] “speed nazis” će reći da su brojke koje spominjem nedopustive. No, ako korisnik koristi neku “nabildanu” premium temu, slider, social share widgete, razne countere te slične điđe, nema šanse da se spusti ispod ovih brojki.

Reality check? Done

Kad pričamo o brzini učitavanja web stranice treba gledati na mnoštvo faktora koji (kumulativno) utječu na istu. Bitni faktori su kvalitetan hosting, kvaliteta teme, broj i kvaliteta pluginova, broj requestova koje server mora odraditi.

Najčešći savjeti za optimizaciju brzine učitavanja web stranice

• Koristite dobar hosting
• Koristite caching
• Koristite CDN
• Minicirajte HTML, CSS i Javascript datoteke
• Optimizirajte slike
• Optimizirajte bazu podataka
• Uključite Gzip kompresiju
• Redovito ažurirajte CMS, temu i pluginove
• Uklonite loše i neaktivne pluginove
• Smanjite broj HTTP zahtjeva (requests)

Postoje kvalitetni online alati za mjerenje brzine učitavanja webova poput GTMetrix, Pingdom Tools i (Google) PageSpeed Insights. Pomoću ovih alata možete steći realniju sliku što i kako se učitava posjetiteljima prilikom posjete vašeg weba te vam sugeriraju što bi se moglo/trebalo popraviti. Jedna od učestalih poruka je vezana za CSS i JavaScript datoteke koje povećavaju broj requestova, veličinu stranice a samim tim i brzinu učitavanja stranice.

Upravo ćemo se na to danas fokusirati, ne želeći pritom ignorirati ostale (gore navedene) zahvate koje možete napraviti. Ovo je samo djelić kojeg korisnici često zanemaruju.

Smanjivanje broja HTTP zahtjeva

Postoje mnogi pluginovi koji svoje stilove (CSS) i skripte (JS) učitavaju na svim stranicama. Npr. slideri, galerije, kontakt forme, lightbox, sharing widgeti i buttoni i sl.

Za početak, trebalo bi analizirati situaciju na vašoj web stranici te zapisati koje pluginove gdje i za što koristite. Na primjer:

• Kontakt forma – koristi se samo na /kontakt stranici
• Galerija – koristi se samo na /galerija stranici
• Slider – koristi se samo na naslovnici
• Mapa – koristi se samo na /gdje-smo stranici

Kad znamo gdje se određeni pluginovi koriste, možemo pristupiti zahvatu uklanjanja stilova i skripti sa stranica gdje se ne koriste.

Postoji način da se skripte i stilovi uklone sa neželjenih stranica kreiranjem funkcija koje upisujete u functions.php datoteku aktivne teme (ili u custom plugin). Proceduru selektivnog učitavanja skripti i stilova za popularni Contact Form 7 možete pročitati u članku Contact form 7: kako učitati JS i CSS datoteke samo na određenim stranicama ili za WooCommerce u članku WooCommerce – učitavanje JS i CSS skripti samo na stranicama shopa.

No, mnogi korisnici se ustručavaju dodavati pravila u datoteke teme, a kamoli ih samostalno kreirati. Tada se odlučuju za korištenje plugina 😉

U WordPress repozitoriju postoje dva odlična plugina pomoću kojih možete ovu obaviti ovu zadaću.

• WP Asset Clean Up
• Plugin Organizer

No, niti jedan me nije oduševio tolikom intuitivnošću prilikom rukovanja te efikasnošću, kao premium plugin imena Gonzales.

Gonzales – speed up WordPress

Autor Gonzalesa je poljski developer Tomasz Dobrzyński. Plugin je vrhunski ali nije besplatan. Može se kupiti ovdje a najjeftinija verzija (za 1-2 weba) košta samo 19$. Po mojem iskustvu, radi točno ono što autor kaže, ni manje, ni više. Ubrzava WordPress izuzimanjem nekorištenih CSS i Js datoteka koje dodaju teme i pluginovi,

What did you do to eliminate unwanted CSS/JS from places where WordPress plugins are not used? Nothing? Say hello to Gonzales.

[DISCLAIMER] Ok, i sam sebi zvučim kao akviziter za Gonzales ali nisam na bilo koji način povezan s dotičnim pluginom i ne koristim nikakve affiliate/referral linkove. Razlog za ovaj članak pronaći ćete niže, u dijelu s brojkama i statistikama.

Kako koristiti Gonzales plugin

Pod pretpostavkom ste uspješno instalirali i aktivirali plugin, prilikom logiranja u vašu web stranicu u administracijskoj alatnoj traci (na vrhu stranice) trebali biste vidjeti novu stavku “Gonzales”. Prelaskom miša preko te stavke (hover), u padajućem izborniku vidjet ćete nešto nalik ovome:

Među stavkama možete vidjeti dostupne registrirane JavaScript i CSS datoteke. Zelena boja označava njihov status. Ukoliko su zelene boje, stavka je aktivna, ako je crvena, stavka je deaktivirana.

Ako niste sigurni što koristi određenu JS ili CSS datoteku, hover na ime stavke otkriva putanju skripte odnosno ime teme/plugina.

Za svaku stavku dostupne su 4 opcije:

• Enable everywhere – resursi će biti učitani na svakoj stranici
• Disable here – uklanja resurse s trenutne stranice (po URL-u stranice)
• Disable everywhere – upravo suprotno od opcije “Enable everywhere”
• Enable here – suprotno od opcije “Disable here”

Opcije se mogu kombinirati. Npr. ako Contact form 7 JS i CSS datoteke koristite samo na /kontakt stranici, na toj ćete stranici izabrati “Disable everywhere” i “Enable here”.

Laba, laba, laba… Daj brojke!

U dokumentaciji Gonzales plugina učinkovitost istog su dočarali korištenjem Twenty Fifteen teme i sljedećih pluginova: Contact Form 7, Master Slider, Photo Gallery, Sociable, WP Google Maps.

Usporedbom vremena učitavanja prije i poslije, došli su do ovih podataka

Prelijepo da bi bilo istinito?

Ovo me podsjetilo na Perwoll koji s jednom čašicom praška opere vagon robe ili Schaumu koja od ćelavca stvori kosatog hipika. Zato sam odlučio složiti testni web s identičnim pluginovima i defaultnom WP temom (ok, koristio sam noviju TwentySixteen temu).

Dakle, setup je ovakav: WordPress 4.6.1, TwentySixteen v1.3 i posljednje dostupne verzije pluginova Contact Form 7, Master Slider, Photo Gallery, Sociable, WP Google Maps. S obzirom da u novoj verziji Master slidera isti po defaultu učitava skripte i stilove samo ondje gdje se koristi, odlučio sam aktivirati učitavanje na svim stranicama te dodatno začiniti situaciju instalacijom WooCommerce-a.

Testirani web nema aktiviran nikakav caching plugin i sve podatke sam prikupljao direktno iz konzole browsera (Chrome). Podaci o brzini učitavanja redovito osciliraju, no ne značajno, te sam bilježio nekakav prosjek. U svakom slučaju, zamjetne su razlike te je Gonzales redovito poboljšavao učitavanje za nekih 25-30%. Prosudite sami.

Bonus test

Rezultati mog testa nisu toliko spektakularni kao njihovi ali pomaka definitivno ima. Još jednom skrećem pažnju da sam u prvom slučaju testirao web bez ikakve dodatne optimizacije, caching plugina i sl.

Zato sam odlučio Gonzales isprobati na jednom “živom webu”. Izabrao sam jedan random i krenuo u akciju. Ok, nije baš random jer sam izabrao jedan web koji ima brdo posjetitelja, koji koristi lightbox za blog slike i galerije, ima posebne galerije odrađene preko ne-baš-light Essential plugina i ima dosta externih requestova, no nisu potrebni baš svugdje (Spotify,ShoutCast,Facebook, Instagram), itd.

Na dotičnom webu aktiviran je W3 Total cache, moj osobni favorit među caching pluginovima.

Naslovnica bez Gonzalesa

Naslovnica optimizirana pomoću Gonzalesa

Super, naslovnica se učitava pola sekunde brže, lakša je i ima manje requestova. Možda ne izgleda puno ali vjerujte, s obzirom na veliku posjećenost tog weba, radi se o značajnom napreku i uštedi u bandwidthu. O boljem korisničkom iskustvu da ne pričam.

[NAPOMENA] Testirajte stranicu (izgled i funkcionalnost) nakon svake promjene izvršene pomoću Gonzalesa. Primjer: na ovom webu sam na jednoj stranici koja je “statična” (što se sadržaja tiče), onemogućio učitavanje font awesome css-a. No, prilikom testiranja na mobitelu primjetih propust. Naime, glavni izbornik na malim ekranima koristi tzv. hamburger meni a on koristi FA “bars” ikonu . Bez te ikone, nema navigacije. Stoga triple-checkirajte nakon promjena.

Cijelo vrijeme pričam o naslovnici ali evo primjera kako se i ostale stranice mogu optimizirati. Na stranici gdje se prikazuju članovi tima (njih čak 16), korišten je Essential grid.  Stvarno izgleda fora, slike su dobre kvalitete, grid je full width (cijelom širinom stranice) te stranica osim grida ima samo header i footer. Znači, dinamičke stvari i  “eye candy” s naslovnice mogu ukloniti. Evo rezultata.

Team members bez Gonzalesa

Team members optimiziran pomoću Gonzalesa

Par završnih riječi

Veliki broj WordPress korisnika koristi teme koje su u samom startu “preglomazne” i/ili dodaju pluginove čiji se JS skripte i stilovi (nepotrebno) učitavaju na svim stranicama te na taj način opterećuju server i povećavaju vrijeme potrebno za učitavanje web stranice.

Metoda uklanjanja suvišnih JS i CSS datoteka je samo jedan mali zahvat u cijeloj priiči oko optimizacije. Logika je jednostavna. Manje je više. Ako, ili bolje reći kada odlučite napraviti nešto slično na svojoj web stranici, sjetite se odličnog plugina nazvanog Gonzales. Neka činjenica da se plugin plaća minimalno 19$ ne bude presudan faktor. Presudna treba biti lakoća i efikasnost korištenja istog.

Meni je Gonzales zakon. Kakva su vaša iskustva?