Optimizare revistă online manofmany.com

Manofmany.com este o revista de stil din Australia dedicata barbatilor.

In fiecare zi echipa posteaza cele mai cool produse din categoriile: moda, gadget-uri, tehnologie, etc…

Site-ul este construit pe WordPress.

Dupa o discutie pe Google+ am decis sa ii ajutam cu un audit gratuit al site-ului privind optimizarea vitezei de incarcare, viteza care lasa de dorit.

NOTA: acest raport a fost facut in februarie 2013, nu stim exact ce au implementat si ce nu au implementat prietenii nostri australieni.

Loading Time

Am testat viteza de incarcare folosind diverse unelte:

  • Chrome SEO toolbar – 7.43 sec
  • Pingdom Tools – 12.62 dec
  • GTMetrix – 9.86 sec
  • Webpagetest.org – 24.14 sec

Page size

  • YSlow: 3096.5 bytes
  • Pingdom Tools: 4.0 MB
  • GTMetrix: 3.88 MB
  • Webpagetesst.org: 3.816 KB

Am ales sa tinem cont de o singura masuratoare, cea facuta cu extensia YSlow.

Fisiere JS

Exista 15 fisiere JS totalizand 627.1K:

  • https://apis.google.com/js/plusone.js – 22.9 k
  • http://platform.twitter.com/widgets.js – 80.7 k
  • http://www.google-analytics.com/ga.js – 37.3 k
  • http://edge.quantserve.com/quant.js – 5.8 k
  • http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13.6 k
  • http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2.7 k
  • http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7.1 k
  • http://s3.buysellads.com/ac/bsa.js – 16.1 k
  • http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2.1 k
  • http://pagead2.googlesyndication.com/pagead/show_ads.js – 13.9 k
  • http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15.1 k
  • http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6.9 k
  • https://apis.google.com/…/cb=gapi.loaded_0 – 129.7 k
  • http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93.6 k
  • http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178.9 k

Solutii

Fisierul jQuery.js ar putea fi incarcat din librariile Google pentru o viteza mai buna si pentru a paraleliza download-urile.

Problema cea mai mare este cu fisierele JS incarcate de un plugin de social media sharing, cu siguranta nu e folosita cea mai buna solutie pentru aceasta treaba.

Solutia ar fi inlocuirea plugin-ului respectiv cu un alt plugin. Jetpack for WordPress, de exemplu, foloseste un singur fisier JS de 38.5 K pentru sharing.

Asta ar insemna un castig de 249.6 K si o scadere a numarului de fisiere JS la 11.

Fisiere CSS

Exista 12 fisiere css insumand 63.7 K.

3 fisiere pot fi combinate intr-unul singur: styles.css al temei + css-ul pluginului Easy Columns + css-ul pluginului Contact Form 7.

Restul pana la 12 nu sunt fisiere css propriu-zise ci fonturi incarcate din Google Fonts.

Intrebarea e: chiar are site-ul nevoie de 9 fonturi?

In mod normal, 2 fonturi sunt de ajuns: unul pentru body text + unul pentru headings.

Dintre fonturile incarcate pe manofmany.com, PT Sans si Open Sans sunt destul de asemanatoare deci poate fi folosit doar unul dintre ele.

Lora si PT Serif – la fel ca mai sus, poate fi folosit doar unul sau chiar se poate renunta la incarcarea unui font serif din Google Fonts si se poate folosi Georgia, care e web safe si care arata foarte bine.

Nixie One – nu vad sa fie deloc folosit pe site, poate fi eliminat.

Eliminarea fonturilor nefolosite si/sau utilizarea de fonturi web safe: Georgia, Arial, etc.. ar putea reduce nr de request-uri de la 12 la doar 3-4.

Imagini

Daca numarul si dimensiunea fisierelor JS si CSS nu era o problema foarte mare, imaginile au un impact mult mai evident asupra vitezei de incarcare a paginilor site-ului manofmany.com.

Prima pagina contine 18 imagini totalizand 2597.5 K.

Cea mai mare imagine de pe site are 420 K si un simplu smush.it ne arata ca poate fi imbunatatita cu 27.6%, adica i se poate reduce dimensiunea cu 104 K.

Daca am imbunatati toate imaginile cu macar 25% ar insemna 600 K eliminati.

Solutii

1. Optimizarea imaginilor

Ori salvand pentru web folosind Photoshop, ori prin jpegmini.com, ori cu ajutorul plugin-ului WP Smush.it.

Nota: WP Smush.it cand merge, cand nu merge.

2. Servirea imaginilor

Propunem incarcarea imaginilor de pe un subdomeniu, gen images.manofmany.com, precum si folosirea unui plugin de tip Lazy Load, care sa incarce doar imaginile „above the fold”, restul imaginilor (din partea de jos a site-ului) incarcandu-se doar daca vizitatorul face scroll.

Alte lucruri care se pot imbunatati:

  • browser caching
  • combinarea fisierelor JS
  • adaugarea de Expires header
  • comprimarea paginii cu gzip
  • folosirea Etags
  • analizarea plugin-urilor pentru a vedea impactul fiecaruia asupra vitezei de incarcare
  • folosirea de cod in functions.php in locul anumitor pluginuri simple, cum ar fi pentru incarcarea de Google Fonts
  • rezolvarea erorilor 404
  • minimalizarea redirectionarilor
  • incarcarea fisierelor JS in subsolul paginii
  • afisarea de 5 postari pe pagina in loc de 10
  • folosirea de thumbnail-uri in loc de imagini full
  • folosirea unui sprite pentru cssimages

Concluzie

Implementarea solutiilor prezentate ar reduce nr de request-uri de la aproximativ 60 la sub 35 si dimensiunea paginii de la 3 MB la circa 1-1,5 MB.

Toate aceste modificari s-ar traduce prin imbunatatirea vitezei de incarcare a site-ului de la 7,4 sec la undeva in jur de 2-3 sec.

Nota: Noi am prezentat doar un raport al site-ului fara a implementa nimic concret, din aceasta cauza cifrele cu imbunatatirile sunt aproximari ale noastre. In articolele viitoare vom continua sa mai prezentam si studii de caz unde am si implementat efectiv propunerile de optimizare WordPress, cu date concrete.

Un răspuns

  1. Avatar Dan
    Dan

    super site-ul manofmany. se misca bine si are o tema superba.

Lasă un răspuns

Adresa ta de email nu va fi publicată.