Optimizare blog: aghiuta.com

Aghiuta.com este un blog de monitorizare presa si politica scris de catre Florin Popescu.

Conform ofertei Simplenet, la plata in avans pentru un an a pachetului de hosting, aghiuta.com a beneficiat de optimizare front-end WordPress.

Inainte de optimizare

Viteza de incarcare a primei pagini: 4,3 sec

Pagina are 86 request-uri si 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 si se incarca in 0,69 sec. Incarcare e de tip syncron, adica blocheaza incarcarea celorlalte elemente de pe pagina pana nu se termina incarcarea lui.

Fisierul script.js al temei Gonzo are 101,3 k. Contine mai multe scripturi, cum ar fi:

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

Backstretch e folosit pentru poza mare de fundal, insa cel putin 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 niste efecte pe click (slide-ul de la caseta de cautare, de ex).

In plus, Jquery Easing (8,1 K) mai este incarcat inca o data de catre pluginul LayerSlider (26 K), plugin care nu e folosit nicaieri.

Am eliminat scripturile nefolosite si dimensiunea fisierului a scazut 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 incarcarii 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 incarca un singur js de 35 K pentru toate butoanele.

jQuery poate fi incarcat din libraria Google in loc sa se incarce de pe server, oferind un plus de performanta.

js-ul addfreestats da eroare 404, nu este gasit pe serverul de pe care ar trebui sa se incarce. Recomandam folosirea Google Analytics.

CSS

Sunt foarte multe css-uri, iar unele incarcate prin @import care nu e cea mai buna varianta.

css-ul cu fontul Verdana da eroare 404, nu exista pe serverul Google. Verdana e web safe deci lumea il are instalat pe calculator, nu e nevoie de incarcat 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 (aceeasi calitate dar K mai putini) si cred ca se poate salva cel putin 5% de la fiecare imagine.

Pe prima pagina, thumbnailurile au dimensiuni de 166x166px dar sunt incarcate poze mai mari, la dimensiune 300x300px.

Ar trebui sa fie incarcate pozele la 166x166px ca sa nu munceasca sa faca resize browserul si sa fie si mai putini K pe pagina.

Tema de WordPress folosita isi creeaza 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 pagina
  • 50×50 – thumbnailuri sidebar
  • 134×77 – thumbnailuri related posts
  • 290×166 – thumbnail categorii

Restul dimensiunilor sunt inutile si ocupa spatiul degeaba pe server. Le putem sterge.

Putem incarca doar imaginile din partea de sus a paginii (above de fold) iar la scroll sa se incarce restul. Asta face ca dimensiunea paginii (in K) sa scada considerabil si sa vada o imbunatatire majora a vitezei percepute de utilizator.

Dupa optimizare

Dupa eliminarea codului inutil din fisierele JS, combinarea fisierelor CSS, configurarea corecta a thumbnailurilor si implementarea unei combinatii de page cache si database cache pagina are 48 request-uri si 634,5 K.

Viteza de incarcare a primei pagini: 1,47 sec.

Am obtinut o imbunatatire a performantei de aproximativ 50%-60%.

Se poate optimiza si mai mult insa asta ar insemna eliminarea unor elemente care ofera anumite functionalitati dorite de catre proprietar astfel ca ne-am oprit aici.

Lasă un răspuns

Adresa ta de email nu va fi publicată.