Optimizare blog: aghiuta.com

Aghiuta.com este un blog de monitorizare presă și politică scris de către Florin Popescu.

Conform ofertei Simplenet, la plata în avans pentru un an a pachetului de hosting, aghiuta.com a beneficiat de optimizarea performanței WordPress.

Înainte de optimizare

Viteza de încărcare a primei pagini: 4,3 sec

Pagina are 86 request-uri și 1,3 Mb.

• 14 javascript-uri – 505,6 k
• 20 stylesheet-uri – 41,1 k
• 23 imagini – 601 k

JS

Javascriptul Facebook Connect are 174,4 k și se încarcă în 0,69 sec. Încărcarea e de tip syncron, adică blochează încărcarea celorlalte elemente de pe pagină până nu se termină încărcarea lui.

Fișierul script.js al temei Gonzo are 101,3 k. Conține mai multe scripturi, cum ar fi:

• fitvids
• flexslider
• jquery easing
• tabber tabs
• backstretch
• prettyphoto lightbox
• elastislide

Backstretch e folosit pentru poza mare de fundal, însă cel puțin 4 din celelalte nu sunt folosite: flexslider, prettyphoto, elastislide, tabber tabs.

Fitvids face embedurile video responsive, deci probabil e nevoie de el.

Jquery Easing face niște efecte pe click (slide-ul de la caseta de căutare, de ex).

În plus, Jquery Easing (8,1 K) mai este încărcat încă o dată de către pluginul LayerSlider (26 K), plugin care nu e folosit nicăieri.

Am eliminat scripturile nefolosite și dimensiunea fișierului a scăzut de la 101,3 K la doar 29 K.

JS-urile de share

Pluginul care pune pe lateral butoanele de share are un impact destul de mare asupra încărcarii site-ului:

• Plus 1 – 25,8 K
• Google Api – 84,2 K
• Twitter – 84,5 K
• Social Bar – 1,8 K

Toate astea se pot rezolva prin folosirea unui alt plugin de share care încarcă un singur js de 35 K pentru toate butoanele.

jQuery poate fi încărcat din libraria Google în loc să se încarce de pe server, oferind un plus de performanță.

js-ul addfreestats dă eroare 404, nu este găsit pe serverul de pe care ar trebui să se încarce. Recomandăm folosirea Google Analytics.

CSS

Sunt foarte multe css-uri, iar unele încărcate prin @import care nu e cea mai bună variantă.

css-ul cu fontul Verdana dă eroare 404, nu există pe serverul Google. Verdana e web safe deci lumea îl are instalat pe calculator, nu e nevoie de încărcat de la Google.

Trebuie combinate css-urile pentru a economisi din request-uri, 20 sunt destul de multe.

Imagini

Imaginile pot fi mai bine optimizate pentru web (aceeași calitate dar K mai puțini) și cred că se poate salva cel puțin 5% de la fiecare imagine.

Pe prima pagină, thumbnailurile au dimensiuni de 166x166px dar sunt încărcate poze mai mari, la dimensiune 300x300px.

Ar trebui să fie încărcate pozele la 166x166px ca să nu muncească să facă resize browserul și să fie și mai puțini K pe pagină.

Tema de WordPress folosită își creează MULT prea multe thumbnailuri:

• 960×677
• 150×105
• 300×211
• 550×387
• 700×426
• 300×300
• 50×50
• 290×166
• 620×310
• 620×350
• 186×186
• 620×220

Site-ul are nevoie doar de:

• 166×166 – thumbnailuri prima pagină
• 50×50 – thumbnailuri sidebar
• 134×77 – thumbnailuri related posts
• 290×166 – thumbnail categorii

Restul dimensiunilor sunt inutile și ocupă spațiul degeaba pe server. Le putem șterge.

Putem încărca doar imaginile din partea de sus a paginii (above de fold) iar la scroll să se încarce restul. Asta face ca dimensiunea paginii (în K) să scadă considerabil și să vadă o îmbunătățire majoră a vitezei percepute de utilizator.

După optimizare

După eliminarea codului inutil din fișierele JS, combinarea fișierelor CSS, configurarea corectă a thumbnailurilor și implementarea unei combinații de page cache și database cache pagina are 48 request-uri și 634,5 K.

Viteza de încărcare a primei pagini: 1,47 sec.

Am obținut o îmbunătățire a performanței de aproximativ 50%-60%.

Se poate optimiza și mai mult, însă asta ar însemna eliminarea unor elemente care oferă anumite funcționalități dorite de către proprietar astfel că ne-am oprit aici.