Dupa o discutie pe Facebook cu Daniel Filip m-am oferit sa-i fac un review al site-ului – http://astrologie.stiridinvest.ro/ – site care a beneficiat recent de un re-design.
Primul lucru pe care l-am observat este ca se incarca foarte greu, are o intarziere vizibila, sunt vreo 3-4 secunde bune pana iti apare efectiv ceva pe monitor.
Am testat si cu PageRank Status, o extensie de Chrome care, printre altele, testeaza si viteza de incarcare – 14,6 secunde – enorm.
Dupa ce se incarca, primul lucru pe care il observi este sliderul cu poze, poze pe care nu poti sa faci click, apropo.
Sa lasam putin performanta la o parte si sa ne gandim la usability, de ce ai pune un slider cu niste poze care nu exprima nimic, nu poti face click pe ele si care sa-ti ocupe un spatiu important din ecran?
E ca la imobiliare, ai o locatie foarte buna, foarte valoroasa si o irosesti punand acolo ceva complet inutil.
In fine, hai sa vedem de ce se incarca asa greu…
YSlow ne zice ca… The page has a total of 113 components and a total weight of 3216.8K bytes.
3 MB e cam prea mult, parerea mea (personala, nu e o regula) e ca ar trebui ca o pagina web sa aiba undeva sub 600 K.
Ce avem acum:
- 32 js-uri – 692.5 K
- 26 css-uri – 331.0 K
- 18 cssimages – 73.0 K
- 30 images – 2728.9 K
- 5 fonts – 122.4 K
- 1 favicon – 20.6 K
- 1 doc – 65.1 K
Imagini
Problema cea mai stringenta e clar la imagini.
Sunt 5 poze care se rotesc in sliderul de care ziceam mai sus si din pacate nu sunt deloc optimizate.
- astrologie.png – 88.8 K
- 1009583_78453913.jpg – 348.6 K
- 1242890_509215711.jpg – 436.5 K
- 1153288_52572910.jpg – 465.6 K
- FB-APPOLON.png – 1172.5 K
Dimensiunea pozelor din slider ar trebui sa fie 1200x380px (exact cat e sliderul).
Sa luam poza cea mai „grava”, FB-APPOLON.png, care are o rezolutie de 1920x1080px si 1172.5K.
Am bagat-o in Gimp, am facut un scale si un crop pana la 1200x380px, export ca jpg, calitate 90% si … voila… 33.2K.
Sper sa nu ma insele pe mine matematica dar imbunatatirea pare a fi de 97%.
Sigur, nu toata lumea stie sa optimizeze pozele, ideal ar fi ca programatorii care au facut sliderul respectiv sa-l fi facut cu mai mult simt de raspundere si, indiferent ce poza urci tu, pluginul sa-si creeze un thumbnail pe dimensiunile 1200x380px.
Asta e una din dovezile ca pana si unele teme sau pluginuri premium de WordPress sunt facute prost.
Fisiere
Sunt foarte multe js-uri si css-uri, exista de exemplu un fisier css care face un singur lucru – stilizeaza butonul portocaliu „Click aici”. WTF!
Foarte multe fisiere css fac lucruri simple, care ar putea fi integrate in css-ul principal al temei pentru a reduce numarul de request-uri.
Sunt o multime de js-uri si css-uri care apartin unor pluginuri (unele integrate in tema) care fac niste slidere: revslider, crumina slider, nivo slider, layer slider, cute slider, caroufredsel.
De ce atatea slidere?
Widgetul cu Twitter are si el 86.7K, mie mi se pare Twitter-ul inutil, deci si widgetul cu tweeturi, dar asta e o chestie personala.
Sunt incarcate 5 fisiere cu fonturi, din care 4 sunt variante ale fontului Open Sans – light, normal, semi-bold si bold.
Nu stiu metoda prin care sunt incarcate dar nu e deloc ok, fiecare fisier al fontului avand cate 21.7K.
Eu folosesc Open Sans aici pe blog si imi baga doar 2 css-uri: 0.2 K si 1.6 K.
Faviconul are 20.6K, in mod normal un favicon n-ar trebui sa fie mai mare de 0.3K.
Concluzii
Site-ul ar putea sa se incarce in mai putin de 2 secunde si nu numai ca ar putea ci ar si trebui.
Un site rapid inseamna utilizatori mai fericiti si SEO mai bun.
Proprietarii de site-uri ar trebui sa-si prioritizeze mai bine obiectivele, sa analizeze cum interactioneaza oamenii cu site-urile lor si sa elimine lucrurile inutile.
O mai mare atentie trebuie acordata pozelor incarcate pe site, problema asta am observat-o la multe site-uri, oamenii incarca si poze direct din aparatul foto DSLR, poze de 5-6 MB.
Daca nu aveti Photoshop exista unelte super simple online, pentru incepatori, prin care se pot optimiza imaginile:
- http://www.shrinkpictures.com/ – pentru resize
- http://jpegmini.com/ – pentru optimizare
Si, bine-nteles … schimbati gazduirea cu una specializata pe WordPress care va ofera optimizare gratuita inclusa. :)
Lasă un răspuns