Come Fare Seo tutta la notte (Performance) … Capitolo 1.

Maliziosi! Scommetto che siete arrivati qua pensando che parlassi di SESSO e invece no! Parliamo di “performances” ma non di quelle che si possono ottenere a letto, ma di quelle dei nostri siti. Come sicuramente saprete, google un pò di mesi fa ha detto che la velocità di un sito è un parametro che viene tenuto in considerazione per il posizionamento e la ragione di questa scelta è ovvia: la soglia di attenzione delle persone è in diminuzione, quindi bisogna manifestare i contenuti prima possibile.

Una prima differenza tra il seo e il sesso è che la velocità di esecuzione è inversamente proporzionale alla soddisfazione. (se non sapete distinguere la differenza tra le due attività, siete nel posto sbagliato).

La seconda differenza è… che le dimensioni contano! …chiaramente mi riferisco alle dimensioni della pagina che viene caricata dal browser, espressa in kilobytes. Più elementi esistono nella pagina più tempo è necessario a mostrare i contenuti all’utente e questo ovviamente incide nella qualità della navigazione. Anche da un punto di vista “monetario” è importante: non bastano contenuti interessanti a trattenere gli utenti, se la navigazione è lenta, l’utente si stufa in fretta ed abbandona la pagina.

Cosa incide sulla lentezza di una pagina ? E come misurarla?

Una pagina web è composta di un numero delimitato di elementi:

  1. Contenuti testuali (testo e codice (x)html)
  2. Immagini
  3. Fogli di stile (css)
  4. Script (javascript)

Tutto qua! Senza entrare nei tecnicismi del protocollo HTTP, quando il browser carica una pagina, legge questi elementi in varie tornate, perchè per una serie di motivi (limitazioni del protocollo, del browser, del server web) non è possibile leggere tutti i contenuti in un colpo solo. Ecco che quindi le performance peggiorano.

Abbiamo però dei validi alleati in vari script che ci aiutano a misurare questi impedimenti, nel caso di google chrome è addirittura integrato ! Basta infatti premere con il tasto destro sulla pagina aperta, selezionare ispeziona elemento, e poi cliccare sul tab “RISORSE” per avere un’idea dei tempi di caricamento di ogni singolo elemento e della dimensione di ogni singolo elemento. WOW!!! E’ davvero facile!

L'uso delle risorse in chrome, tramite il pannello apposito
Capire come vanno le cose non è mai stato così facile

Le gioie del Seo..

…raramente durano a lungo. Infatti questo dato fornito da Chrome è da convalidare, insomma bisogna riprodurlo più volte e poi bisogna analizzare i dati al microscopio per capire come stanno andando le cose.

Importantissimo, quando fate le prove con il misuratore di risorse, usate la modalità “incognito” di Chrome che consente di disattivare tutti i plugin del caso e tralasciare l’uso della Cache. A tutti gli effetti simulate un nuovo utente che entra sulla vostra pagina.

La prima cosa da verificare è la distribuzione dei contenuti, ovvero COSA viene caricato nella benedetta/maledetta home page. E poi faremo lo stesso test anche sulle pagine singole.

gli elementi della mia home page su andreascarpetta.com
Oh, ma guarda, penso di avere qualche problema.

Niente male (sono sarcastico).

  • 125 KB di testi (e vabbè son prolisso).
  • 137 KB  di fogli di stile (urk)
  • 334 KB di immagini (ci può stare…)
  • 809 KB di scripts!!!???

Sant’iddio, cos’e’ che si porta dietro tutta questa roba?

  • 137 KB di protype (libreria javascript)
  • 70 KB di jquery (libreria javascript)
  • 67 KB di sansation (è il font che uso per i tag h1 e h2)
  • 37 KB di scriptacolous (libreria javascript)
  • 23 KB di lightbox (libreria per i popup delle immagini)
  • 18 KB per shareolic (libreria per condividere i link sui social media)
  • 17 KB di Cùfon (lo script associato a sansation)
  • 16 KB di Cforms (lo script delle form, ma speravo lo chiamasse solo dove ci sono delle form, non ovunque!)
  • 15 kB di fancybox (per i popup delle immagini, ma allora lightbox?)
  • 11 KB di jsplayer (serve per … i podcast)
  • 10 KB di google analytics
  • 6 KB di jquery.easing (per fancybox…)

Insommadi roba da caricare ce n’e’ un bel pò e secondo me c’e’ un sacco di “ritenzione digitale” insomma questa pagina deve dimagrire..

Quindi la prima missione è tagliare via il superfluo. Iniziamo con Fancybox.

Peso della home page 2
Comincia la dieta, -400 KB!

Niente male, disattivando un plugin ho tolto 400 KB dalla dimensione originale. Quindi occhio ai plugin di wordpress, che sono tanti carini, ma alcuni occupano un botto di KB a causa delle librerie.

Ok, a questo punto alzo il tiro, sparo su shareolic (detto Sexy Bookmarks) e su Cùfon, che fa apparire i font più carucci.

Round 2! CHIUDIAMO CHROME, riapriamo la modalità incognito (così la nostra cache si resetta, almeno in teoria) e vediamo che succede. (se volete essere sicuri-sicuri, forzate il reload, tenendo premuto SHIFT e nel menu’ “visualizza” dovrebbe comparire l’opzione “Forza caricamento” o “Force reload” se usate chrome in inglese)

Fase 3 di pulizia della home page
fase 3, un poco meglio, ma non eclatante.

Ok,ho recuperato un altro pò di leggerezza, ma si può migliorare… bisognerebbe sbarazzarsi di scriptaculous e prototype… se riesco ad identificare quale plugin le usa o le tolgo o mi procuro una versione “compressa” che occupa meno spazio.

In questi casi l’opzione è unica, si disattivano i plugin uno a uno e si vede se le librerie spariscono…

E il colpevole è …

Lightbox! C’era un altro plugin per gestire i popup delle immagini (che in questo momento non funzionano, cioe’ si aprono a pieno schermo), ma in sol colpo sono sparite le librerie JS in eccesso! quasi 200 KB in meno. Ho tolto di torno anche il plugin che segnalava il rank su technorati, tanto chi se lo caga più nel 2010?

Alleggerimento home page fase 4
Ora cominciano a ragionare!

Quindi con un pò di analisi e di buon senso, ho dimezzato la dimensione della mia pagina e di conseguenza i tempi di caricamento!

Insaziabile

A me però i lightbox sulle immagini piacciono (sopratutto quando linkano quelle belle immagini enormi) e anche i titoli e sottotitoli belli alternativi, davano un tocco di originalità ad un sito che (solitamente) tratta di cose noiose.

E io (me ne frego e) li rimetto online, però questa volta per i lightbox uso un plugin chiamato Shadowbox e per i font uso i google fonts!

Ecco che quindi la dimensione della pagina ritorna corposa…

Ottimizzazione home page fase 5
eh, siamo di nuovo daccapo...

però però… la pagina sembra bella veloce… il cronometro lo conferma! (NB: la vostra esperienza potrebbe variare)

La pagina si carica in meno di 4 secondi!
Tutto questo in meno di 4 secondi ?!

Cosa è cambiato ? Ho esternalizzato dei dati!

  • La libreria jquery viene ora letta dai Datacenter di Google
  • I font aggiuntivi idem!

In sostanza ho iniziato a sfruttare dei “siti esterni” su cui ho relegato i dati di uso comune, questo ha due vantaggi molto importanti:

  • Ho alleggerito il carico del mio server, che ora deve soddisfare meno richieste e quindi fa comparire prima i dati. E quindi per forza di cose consumerò meno banda.
  • Sto usando dei dati “usati da molte persone” quindi la possibilità che un utente li abbia già in cache aumenta ancora di più la velocità di caricamento del sito.

E’ il principio del Content Delivery Network. (ecco la definizione su wikipedia) ovvero sia, “distribuisco” i miei dati su diversi server e poi ci pensa il network a soddisfare le richieste di chicchesia, moltiplicando le prestazioni.

Il principio può essere ulteriormente evoluto, duplicando parte delle mie informazioni sul CDN, per esempio usandolo come archivio remoto delle immagini o dei contenuti multimediali.

Restate sintonizzati per la parte DUE, dove spiegherò come ho realizzato il collegamento di questo wordpress ad una CDN e vedremo assieme se c’e’ un incremento effettivo delle prestazioni.


16 thoughts on “Come Fare Seo tutta la notte (Performance) … Capitolo 1.

  1. Dovresti anche mettere gli script in fondo alla pagina! Almeno quelli (la stragrande maggioranza) che non necessitano di essere posizionati in alto. Così non rallentano il caricamento della pagina. Non ricordo se si riesca a fare facilmente con WordPress, però! 🙂

  2. haha 🙂 Sei un Mitoooo!! anche nel modo di scrivere!!! … ti sei meritato un posto tra i miei preferiti 🙂 … e pensare che avevo detto “vabeh .. chiudo , l’articolo è un pò vecchiotto , e si parla di wordpress mentre a me interessa magento” … ma poi mi sono appassionato a leggere !!! … inoltre quando le cose sono ben fatte … sono anche durature!! infatti quest’articolo anche se datato 2010 è ancora attuale!!! Complimenti … sei un mito! 🙂

  3. Complimenti per l’articolo (fase 2 compresa).
    Il mio sito carica le pagine in 17 secondi! Non riesco a capire perché.
    Ho provato ad installare W3 total cache, ma penso che i problemi siano altri.
    Qualche anima pia può darmi un consiglio?

    1. Ciao Gianluca! Il problema a vederlo adesso sembra essere su tre fronti:

    2. Hai tantissimo codice css e javascript in questo template: se ne hai la possibilità dovresti provare ad alleggerirlo. Inoltre il tuo hosting non ha attiva la compressione gzip, che potrebbe accellerare leggermente il caricamento. Se non sai come fare, apri un ticket all’assistenza che magari te lo devono fare loro
    3. E’ possibile che ci sia un minestrone di plugin, prova a disabilitarli momentaneamente tutti (tranne w3tc) e vedi se cosi’ si carica più in fretta. Se anche così è lento, prova con il template di base. Se è ancora lento, vedi il punto dopo.
    4. Tophost. Sei su tophost. Per quanto sia un discreto hosting per quello che costa, in alcuni casi può avere problemi di performance. Se non hai modo di ottenere risultati, prenderei in considerazione l’idea di cambiare hosting: io sono su webfaction e mi trovo bene 🙂 (c’e’ la mia recensione sul blog)
  4. Andrea, prima di tutto: grazie.
    Riguardo al codice css e javascript non ho idea di come possa “alleggerirlo”. Prima il sito non era così lento, certo una scheggia non lo è mai stato, ma adesso è davvero impraticabile.
    GZIP: Ho aperto un ticket con l’assistenza tophost. Aspetto risposta.
    Ho disattivato tutti i plugin (tranne w3tc). Il risultato cambia, ma la navigazione resta sempre lenta. RIguardo all’hosting, il problema è che andare via da tophost mi costerebbe 200€ + il costo da sostenere per il nuovo spazio web. Una rapina. A meno che non cambi completamente dominio…

  5. Nel senso che trasferire il dominio mi costa circa 200€! L’alternativa è far scadere l’anno e comprare da un’altra parte (sperando che nessuno prenoti prima di me lo stesso dominio). Oppure, cambiare dominio ed andare via prima. Una rapina.

    1. Non mi risulta che ci siano penali da tophost per il trasferimento di un dominio prima della scadenza, dove e’ scritto ?
      Comunque una soluzione agile è quella di tenere il dominio su tophost, ma di mappare gli indirizzi su un hosting esterno. Per esempio il dominio andreascarpetta.com è mantenuto tramite namecheap.com, mentre l’hosting l’ho fatto puntare su webfaction 🙂

  6. Chiedo scusa, ho detto un’eresia. Il costo di circa 200€ (160 + iva) richiesto da TopHost è per il cambio di intestatario (altra mia esigenza), non per il trasferimento di dominio. Ho confuso le cose e chiedo scusa per aver lasciato passare un messaggio errato.
    Questa della mappatura potrebbe essere una soluzione agile. Non ho idea di come si possa fare (non penso ti riferisca ad un semplice rendirizzamento…) ma cercherò qualche guida online per capirne di più. Se hai qualcosa da suggerirmi ti ringrazierei doppiamente.

    Gianluca.

    1. Devi andare nella configurazione avanzata del dns di tophost e in sostanza devi alterare i dati per creare un nuovo indirizzo di tipo “A” che contiene l’ip del server/hosting di destinazione.

      La procedura richiede un certo grado di tecnica, io ho trovato questo tutorial che spiega come cambiarla passo-passo.

      Attenzione: se non hai la dovuta competenza tecnica, rischi che l’hosting di tophost non riesca più a erogare i dati necessari , per cui il server di destinazione deve essere posto in condizione di rispondere alle richieste che arrivino dagli utenti. Visto che queste modifiche ai dns richiedono ore per la propagazione, rischi che gli utenti non riescano ad accedere al server in maniera corretta. Non dovresti perdere dati, ma senza le dovute cautele rischi di dare un disservizio al tuo pubblico normale. Puoi sempre tornare alla configurazione iniziale (segnati tutti i dati del dns), ma prima che venga propagata a tutti gli utenti possono passare anche 12 ore.

      Comunque se su google cerchi: “come cambiare i dns di tophost” troverai diverse discussioni che parlano di questo aspetto.

      Infine una considerazione: se fai una modifica al tuo file localhost, puoi creare una “mappatura” del dominio solo sulla tua macchina. IN pratica quando digiti blogfondazionetaras.it puoi fare in modo che il tuo computer invece che finire sulle macchine di tophost, va a finire su un hosting differente. Questo è fatto ovviamente per ragioni di debug: nel momento in cui sei sicuro che tutto funziona ed è rapido, allora puoi confermare le richieste.

      Ancora un’ultima cosa (sono prolisso): shellrent offre un servizio di site-migration, gratuito verso di loro. Io proverei a interpellarli. http://www.shellrent.com/site-migration/

  7. Ciao Andrea! come al solito tanta roba utile: molto lineare e ben scritto il tuo articolo.
    Segnalo per noi utilizzatori di Firefox un’estensione di Firebug che si chiama YSlow (si appoggia a un servizio di Yahoo) e che fa grossomodo le stesse cose che hai insegnato tu con chrome..

Comments are closed.