Come fare SEO tutta la notte: “LA CDN” – Parte 2

Puntata precedente sulle perfomance del mio sito.

Dopo aver spaccato il capello (e altro)  sulle performance del sito nel precedente “episodio”, decido di fare il grande passo e attivo una CDN. Decido di testare la “MAXCDN” dopo essermi documentato, perchè c’è un’offerta allettante: un TERABYTE di banda, da usare in un anno, per 39 dollari. L’anno prossimo sarà 99 dollari, ma nel frattempo ho 30 giorni per testarla e eventualmente recedere a costo zero. Dalle analisi sommarie che ho fatto rimane comunque una delle più “economiche” a disposizione, quindi la prova ci sta.

La creazione della CDN è banalissima

Quando mi registro al servizio, mi viene chiesto di creare delle “Pull zones”: in sostanza avrò dei sottodomini (tipo cdn.andreascarpetta.com) che fanno da “contenitore” per i miei files. Maxcdn va ad aggiornare costantemente questo archivio, che viene sparso su diversi server distribuiti tra america ed europa. Quindi a seconda della provenienza del visitatore cdn.andreascarpetta.com andrà a recuperare dei contenuti dal server più vicino a lui.

E l’integrazione con il sito è completamente automatica: se prima il percorso era “http://www.andreascarpetta.com/wp-content/…” ora diventa “http://cdn.andreascarpetta.com/wp-content/…”. Insomma un mirror totale.

Fortunatamente l’integrazione con wordpress (il motore di questo sito) è rapida ed indolore, mediante un plugin di cache chiamato “w3 total cache“.

W3 total cache

Il nome sembrerà roboante, ma fa davvero un sacco di cose. Lo avevo già usato su diversi siti, ma la parte della CDN l’ho sempre tralasciata, per il resto:

  • Comprime e accorpa i javascript
  • Comprime e accorpa i CSS
  • Crea una cache su disco per le chiamate al database più usate
  • Se avete a disposizione un accelleratore sul server, potete abilitarlo tramite il plugin per servire più in fretta il codice.
  • Riscrive i percorsi dei files che sono mirrorati sulla CDN.

Quindi in poche parole, tra l’attivazione della cdn, l’installazione del plugin e la configurazione “di base”, ci ho messo una quarantina di minuti per fare tutto, seguendo questo tutorial.

Affinamenti

Sempre alla ricerca di strumenti per monitorare le performance, mi sono inbattuto in un sito segnalato da google: http://www.webpagetest.org/

Originariamente di AOL, è poi diventato uno strumento Free e Open… e produce delle analisi molto MOLTO interessanti! Quindi inserisco la mia URL, seleziono il server di AMSTERDAM (il più vicino) e…

Grafico delle prestazioni del sito, by webpagetest
Ok, ci sono ancora stranezze sul sito... cosa sono quelle barre blu?

Beh, il mio sito, dopo l’attivazione della CDN incassa due “A” di votazione, tre “F” (insufficienze gravi) e una “D” insufficienza”. Cavoli e io che mi credevo di essere sulla buona strada!

Fortunatamente il report è elaboratissimo ed è anche inpietoso, ecco cosa non funziona:

  • Alcuni JS e CSS dei plugin, non vengono ottimizzati da W3 total Cache e quindi non finiscono sulla CDN. Soluzione : Definendo manualmente dentro w3 total cache i percorsi di questi file, il plugin procede a macinarli e spedirli sulla cdn!
CSS e js, avanti MARCH!
CSS e js, avanti MARCH!
  • Alcune immagini  inserite tramite i widget, non vengono messe in cache. Soluzione: inclusione delle immagini, percorsi inclusi, per farle spostare sulla CDN!
  • Alcune immagini sono in formato png invece che essere in formato jpg: il sistema consiglia una riconversione massiccia delle immagini, ma io sono pigro e decido di non farla. Visto che molte sono screencapture del mio OSX, mi doto di una utility chiamata “tinker tool” per cambiare il salvataggio automatico da PNG a JPG. (e altre cose sfiziose!). Chiaramente in un ambito lavorativo, farei le considerazioni del caso, anche perchè le analisi di “risparmio” nella conversione non tengono conto della qualità dell’immagine finale.
  • Diversi files, non hanno settata una “vita nella cache”. Soluzione: dico a MaxCDN di forzare la “vita” dell’oggetto ad 1 giorno, quindi ogni 24 ore dovrebbe venire a prendersi l’eventuale versione aggiornata.

E ora…?

80/100 ? beh potrebbe già andare...
80/100 ? beh potrebbe già andare...

Yeeh.. sono migliorato..di un punto. Vabbè bisogna vedere il bicchiere mezzo pieno, ma com’è che il valore del Keep-Alive è peggiorato… cosa mai, avrò peggiorato nei miei tentativi di ottimizzare il mondo ?

I colpevoli sono il like di facebook e le stats di wordpress!
Facebook e wordpress stats? FFFFFFFFFFFFUUUUUUUUUU...

Quindi potrei disattivare le facebook stats, tanto uso analytics, ma per facebook… dovrei togliere il “LIKE PLUGIN” dalla home page!

Tragedia e turbamento massimi: il plugin di facebook è importante per avere visibilità. Toglierlo non se ne parla, piuttosto lo limito solo al footer in modo da dimezzare i tempi di accesso! In più decido di mettere l’interruzione di pagina per gli articoli molto lunghi (come questa serie) per visualizzare solo un estratto…

Quando "more" è "less" e "less" is "more"
Quando "more" è "less" e "less" is "more"

L’inserimento del “more” all’interno dell’articolo, sembra effettivamente un buon metodo per interrompere i tempi di caricamento, almeno dal punto di vista dell’utente. Questa però è una soluzione adatta ad un blog, mentre per un sito informativo non è praticabile :la modalità di utilizzo cambia completamente.

Diciamo che da un punto di vista “accademico” ho raggiunto un buon risultato… però per ora Google non sembra d’accordo con me…

 

Prestazioni al 26 novembre 2010
Prestazioni al 26 novembre 2010

Questo grafico risale al 26 novembre, quindi prima dell’avvio della CDN, vediamo se la prossima settimana google avrà cambiato idea…

Link per leggere la parte TRE sull’ottimizzazione delle performance.