Optimizare revistă online manofmany.com

Manofmany.com este o revistă de stil din Australia dedicată bărbaților.

În fiecare zi echipa postează cele mai cool produse din categoriile: modă, gadget-uri, tehnologie, etc…

Site-ul este construit pe WordPress.

După o discutie pe Google+ am decis să îi ajutăm cu un audit gratuit al site-ului privind optimizarea vitezei de încărcare, viteză care lăsa de dorit.

NOTĂ: acest raport a fost făcut în februarie 2013, nu știm exact ce au implementat și ce nu au implementat prietenii noștri australieni.

Loading Time

Am testat viteza de încărcare 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 să ținem cont de o singură măsuratoare, cea făcută cu extensia YSlow.

Fișiere JS

Există 15 fisiere JS totalizând 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

Soluții

Fișierul jQuery.js ar putea fi încărcat din librăriile Google pentru o viteză mai bună și pentru a paraleliza download-urile.

Problema cea mai mare este cu fișierele JS încărcate de un plugin de social media sharing, cu siguranță nu e folosită cea mai bună soluție pentru această treabă.

Soluția ar fi înlocuirea plugin-ului respectiv cu un alt plugin. Jetpack for WordPress, de exemplu, folosește un singur fișier JS de 38.5 K pentru sharing.

Asta ar însemna un câștig de 249.6 K și o scădere a numărului de fișiere JS la 11.

Fișiere CSS

Există 12 fișiere css însumând 63.7 K.

3 fișiere pot fi combinate într-unul singur: styles.css al temei + css-ul plugin-ului Easy Columns + css-ul plugin-ului Contact Form 7.

Restul până la 12 nu sunt fișiere css propriu-zise ci fonturi încărcate din Google Fonts.

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

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

Dintre fonturile încărcate pe manofmany.com, PT Sans și Open Sans sunt destul de asemănătoare deci poate fi folosit doar unul dintre ele.

Lora și PT Serif – la fel ca mai sus, poate fi folosit doar unul sau chiar se poate renunța la încărcarea unui font serif din Google Fonts și se poate folosi Georgia, care e web safe și care arată foarte bine.

Nixie One – nu văd sa fie deloc folosit pe site, poate fi eliminat.

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

Imagini

Dacă numărul și dimensiunea fișierelor JS și CSS nu era o problemă foarte mare, imaginile au un impact mult mai evident asupra vitezei de încărcare a paginilor site-ului manofmany.com.

Prima pagină conține 18 imagini totalizând 2597.5 K.

Cea mai mare imagine de pe site are 420 K și un simplu smush.it ne arată că poate fi îmbunătățită cu 27.6%, adică i se poate reduce dimensiunea cu 104 K.

Dacă am îmbunătăți toate imaginile cu măcar 25% ar însemna 600 K eliminați.

Soluții

1. Optimizarea imaginilor

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

Nota: WP Smush.it când merge, când nu merge.

2. Servirea imaginilor

Propunem încărcarea imaginilor de pe un subdomeniu, gen images.manofmany.com, precum și folosirea unui plugin de tip Lazy Load, care să încarce doar imaginile „above the fold”, restul imaginilor (din partea de jos a site-ului) încărcându-se doar dacă vizitatorul face scroll.

Alte lucruri care se pot îmbunătăți:

• browser caching
• combinarea fișierelor JS
• adăugarea de Expires header
• comprimarea paginii cu gzip
• folosirea Etags
• analizarea plugin-urilor pentru a vedea impactul fiecăruia asupra vitezei de încărcare
• folosirea de cod în functions.php în locul anumitor plugin-uri simple, cum ar fi pentru încărcarea de Google Fonts
• rezolvarea erorilor 404
• minimalizarea redirecționărilor
• încărcarea fișierelor JS în subsolul paginii
• afișarea de 5 postări pe pagina în loc de 10
• folosirea de thumbnail-uri în loc de imagini full
• folosirea unui sprite pentru cssimages.

Concluzie

Implementarea soluțiilor prezentate ar reduce nr. de request-uri de la aproximativ 60 la sub 35 și dimensiunea paginii de la 3 MB la circa 1-1,5 MB.

Toate aceste modificări s-ar traduce prin îmbunătățirea vitezei de încărcare a site-ului de la 7,4 sec la undeva în jur de 2-3 sec.

Notă: Noi am prezentat doar un raport al site-ului fără a implementa nimic concret, din aceasta cauză cifrele cu îmbunătățirile sunt aproximări ale noastre. În articolele viitoare vom continua să mai prezentam și studii de caz unde am și implementat efectiv propunerile de optimizare WordPress, cu date concrete.