PageSpeed - optimizare automata site-uri

Unul din punctele importante ale prezentei unui site pe internet (si pe google) este viteza de incarcare a acestuia, cu cat mai repede, cu atat mai bine. Dezvoltatorii web folosesc tot felul de tehnici pentru a asigura o incarcare cat mai rapida a site-urilor dezvoltate (si sunt multe si nu tocmai usor de implementat)

 

Sub sintagma "Make the Web Faster", google a dezvoltat un modul pentru serverele de hosting (apache si nginx), cu denumirea "PageSpeed" sau mod_pagespeed (https://developers.google.com/speed/pagespeed/module), modul ce vine in ajutorul dezvoltatorilor web (si nu numai) prin implementarea unor tehnici automate de optimizare pagini web.

Acest modul, instalat si configurat pe serverul web (apache sau nginx) efectueaza o automatizare a paginilor web, aplicand cele mai bune practici si tehnici de optimizare recomandate pentru o incarcare cat mai rapida a site-urilor.

Astfel, de la scaderea numarului de cereri catre server prin concatenarea fisierelor de tip js si css, pana la recompresarea si/sau redimensionarea imaginilor, sau chiar scrierea acestora inline (base64), si multe alte astfel de tehnici, mod_pagespeed asigura o scadere semnificativa la timpul de incarcare al paginilor web. Mai mult, mod_pagespeed este foarte recomandat in cazul site-urilor de tip responsive (incarcare fluenta pe dispozitivele mobile, utilizarea la minim a benzii de date pentru incarcarea site-ului);

Pentru usurinta in configurare, mod_pagespeed vine cu trei seturi de configurare predefinite, seturi ce includ din start cateva setari (sau exclud altele) in functie de nevoi specifice de configurare.

Aceste seturi de configurari sunt:

PassThrough, CoreFilters, and OptimizeForBandwidth

Utilizarea setului PassThrough practic permite definirea de la 0 a setarilor/filtrelor de utilizare.

Setarile (filtrele) incluse implicit in CoreFilters si OptimizeForBandwidth, precum si disponibilitatea filtrelor ce pot fi aplicate, le regasiti aici:
https://developers.google.com/speed/pagespeed/module/config_filters

Am instalat si pe camscape.ro mod_pagespeed cu un set de reguli basic pe care noi le-am considerat importante pentru camscape.ro, reguli pe care urmeaza sa le extindem, daca e cazul, in functie de criterii de performanta interni.

Dar inainte de toate, am facut un test de performanta (pe http://gtmetrix.com/) pentru a putea urmari in primul capitolele cu lacune (cu rosu).
Astfel, desi rezultatul fara mod_pagespeed era unul satisfacator (grade A, 94/100), grad de performanta obtinut datorita utilizarii de tehnici de performanta implementate manual in timpul si dupa dezvoltarea site-ului, am descoperit cateva lacune, pe care speram sa le remediem automat prin simpla folosire a modulului mod_pagespeed:

De mentionat ca raportul http://gtmetrix.com/ afiseaza informatii detaliate si recomandari pentru fiecare resursa testata

OK, sa activam mod_pagespeed si sa efectuam cateva setari care consideram ca ne-ar ajuta:

 

Se observa, ca pe langa setul CoreFilters, am activat suplimentar cateva module/filtre legate de imagini in special, denumirea acestora fiind destul de explicativa, dar bineinteles ca detalii despe ce face fiecare filtru, le gasiti aici: https://developers.google.com/speed/pagespeed/module/config_filters la sectiunea "tabela filtre"

Ne-a ajutat ? Sa vadem ?

Pare ca mod_pagespeed si-a facut treaba :)

De final, cat si pentru o intelegere mai buna a celor doua teste:
In primul rand, ignorati "Page load time"-ul, este in functie in primul rand de conexiunea la internet folosita pentru testare, dar ...

 

Se observa o diferenta intre ce serverste serverul inainte si dupa mod_pagespeed:

inainte:

 
dupa:


deci o optimizare cu 20% a dimensiunii si a numarului de resurse incarcate, implicit o incarcare cu 20% mai rapida a site-ului (care repet, era deja optimizat la un nivel manual).

 

Au mai ramas resursele externe (facebook si google, "minunatele" plugin-uri de socializare) care nu prea avem ce sa le facem local (vin din cdn si cu un cache destul de mic nemodificabil local).

Si iata si avantajul pentru site-urile responsive (mobile friendly) - dar si viteza, banda de internet, bineinteles : (incarcarea imaginilor la dimensiunea afisata)
 

 

 

Recomandam utilizarea mod_pagespeed, diferenta de performanta este instantanee, iar procentul de performanta mai mult decat semnificativ.
 

camscape, 5 ianuarie 2015

Vrei sa primesti pe email articolele CAMSCAPE ? Inscrie-te aici si le vei primi automat.