Optimizare revista online Wide Magazine

Wide Magazine este o revista online de lifestyle & experiente cool.

Desi revista era gazduita pe un VPS viteza de incarcare lasa de dorit iar costurile erau nejustificat de mari.

Viteza de incarcare a site-ului era de 6,99 secunde, prima pagina totalizand 2,5 MB si facand 113 request-uri catre server.

Printre elementele incarcate de pagina se numara:

  • 30 fisiere JS – 883,2K
  • 11 fisiere CSS – 138,3K
  • 22 imagini incarcate prin CSS – 255,2K
  • 13 imagini – 1320,7K
  • 1 favicon – 16,9K

Scorul Google PageSpeed Insights era de 57/100, printre recomandari aflandu-se:

  • enable compression
  • leverage browser caching
  • optimize images
  • reduce server response time

Raport optimizare

Faviconul are cam multi KB, un favicon ar trebui sa aiba maxim 4K. Am facut un test, l-am descarcat si l-am importat in favicon.cc, am generat un nou favicon si l-am descarcat – am obtinut un fisier de 1,6K (este totusi de calitate mai slaba).

Imaginile ar putea fi incarcate treptat, pe masura ce vizitatorii fac scroll, pentru a mari viteza de incarcare a continutului „above the fold”.

O problema cu afisarea imaginilor este ca acestea sunt incarcate la dimensiunile originale (1024*682px) iar browserul le redimensioneaza la 676*450px.

Recomandat este ca imaginile sa fie afisate direct la rezolutia 676*450px, acest lucru facandu-se ori prin incarcarea pe site de poze direct la rezolutia respectiva ori prin folosirea functiei add_image_size in fisierul functions.php pentru a-i spune WordPress-ului sa creeze automat un thumbnail de dimensiunea respectiva.

In felul acesta, browserul lucreaza mai putin cu redimensionarea pozelor + marimea paginii (KB) scade, acesti 2 factori ducand la imbunatatirea vitezei de incarcare.

De exemplu, am luat aleator o imagine, IMG_00341, care are 163KB, i-am facut resize la 676*450px si dupa ce am optimizat-o cu jpegmini a iesit un fisier de 70,7K.

Chiar si lasata la 1024*682px si trecuta prin JPEGMini tot se obtine un fisier de 90,3K, o imbunatatire notabila fata de cei 163K initiali.

Si imaginile incarcate prin fisierele CSS ar putea fi optimizate, in general e vorba de fisiere mici care pot fi combinate intr-un sprite insa exista 2 fisiere de marime mai mare, logo.png si logo_effect.png, de 62,2K, respectiv 123K, care cred ca s-ar putea reduce.

Urmatorul lucru care ne-a sarit in ochi este numarul si dimensiunea totala a fisierelor JS – 30 de fisiere totalizand 883,2K.

Si aici sunt cateva probleme…

Se incarca de 2 ori jQuery, o data versiunea 1.9.1 (92,6K) de pe code.jquery.com si o data versiunea 1.8.3 (93,6K), incarcata local din folderul WordPress-ului.

Se incarca de 2 ori codul Google Analytics, o data versiunea veche, ga.js (39,8K), si inca o data versiunea noua, analytics.js (20,3K).

Asta inseamna 133,4K inutili.

Exista cateva js-uri incarcate de 2 pluginuri instalate si activate si care fac in esenta cam acelasi lucru, se ocupa de afisarea galeriilor de poze: NextGen Gallery si PrettyPhoto Media.

PrettyPhoto Media nu pare a fi folosit deci ar putea fi eliminat pentru a mai economisi aproximativ 50K.

Inca 2 pluginuri – jQuery Mega Menu si Useful Banner Manager – pot fi eliminate. jQuery Mega Menu nu pare a fi folosit nicaieri iar Useful Banner Manager e folosit pentru un singur banner, care ar putea fi afisat printr-un simplu cod html introdus intr-un widget text.

Pluginul ShareThis, care adauga butoanele de share, foloseste un js de 125,1K si ar putea fi inlocuit cu Jetpack care foloseste un js de doar 38,5K.

Facebook Like Box nu este implementat in cel mai eficient mod, folosindu-se un js de 171,9K.

Cea mai simpla si eficienta metoda este copierea codului iframe de pe pagina Facebook Developers si introducerea intr-un widget text, eliminand astfel nevoia js-ului de 171,9K.

Pluginul Google Maps foloseste 4 js-uri totalizand 60,7K.

La fel ca si in cazul Like Box-ului si hartile Google pot fi integrate prin iframe, eliminand astfel js-urile. Singura problema este ca presupune munca manuala de introducere.

Am verificat ultimele 10 postari si niciuna nu avea o harta integrata deci daca nu e o functionalitate standard si se foloseste doar rareori, e mai eficient de introdus manual.

Ce am implementat

  • am optimizat imaginile
  • am setat incarcarea treptata a imaginilor pe site
  • am implementat page cache + database cache
  • am rezolvat cu jQuery-ul duplicat
  • am rezolvat js-ul duplicat Google Analytics
  • am rezolvat Like Box-ul Facebook

Rezultat

Prima pagina are acum 62 componente totalizand 672,6K – fata de 113 elemente totalizand 2,5MB = o imbunatatire de 73%.

Viteza medie de incarcare este acum de 1,5 sec – fata de 6,99 secunde = o imbunatatire de 78%.

Scorul Google PageSpeed este acum 76/100 – fata de 57/100 = o imbunatatire de 25%.

2 responses

  1. Avatar Farcas Gelu Danut
    Farcas Gelu Danut

    Pentru reducerea dimensiunii imaginilor nu merge si PhotoRazor de la stormdance.net sau Riot?

    1. Avatar Andrei Chira
      Andrei Chira

      Nu le-am testat. Exista multe softuri de optimizat imagini, fiecare utilizator foloseste softul cu care s-a obisnuit. Daca esti multumit de calitate si de spatiul economisit, atunci e ok.

Lasă un răspuns

Adresa ta de email nu va fi publicată.