WordPress alla velocità della luce

WordPress alla velocità della luce
http://www.ranked.it/wordpress/wordpress- velocita- luce/
October 11, 2012
Pubblicato il 20 febbraio 2012
Auto re: Enrico Lado gana
L'artico lo tratta di Wo rdpress.
PREMESSA
Pur essendo co nsapevo le dell’impo rtanza della velo cità delle pagine web, anche in termini di po sizio namento nei mo to ri di
ricerca, no n avevo mai co ndo tto una o ttimizzazio ne, per co sì dire, rigo ro sa. In genere mi limito ad effettuare una velo ce analisi
tramite GTmetrix o Go o gle Speed Online e ad attuare so lo alcune delle mo difiche suggerite. Del resto , co me in mo lti
so stengo no , ritengo che la velo cità sia uno dei tanti parametri che co nco rro no a miglio rare il po sizio namento di un sito web,
no n l’unico , no n il più impo rtante, per cui mi sembra inutile esasperare la sua applicazio ne, giacché, in tal caso , i co sti
superebbero sicuramente i benefici.
Per una vo lta, tuttavia, ho deciso di appo rtare tutti i co rrettivi pro po sti da quei to o l pro prio al sito che più mi rappresenta:
Ranked.it, che utilizza la piattafo rma Wo rdPress.
Si è trattato di un “esercizio co mpulsivo ” che presumo si po ssa co ncludere co n questo artico lo , giacché, difficilmente, ripeterò
le medesime o perazio ni co n altri siti, miei o di clienti.
Ebbene, al termine di parecchie o re di lavo ro so no riuscito ad o ttenere i seguenti risultati:
Prim a de ll’int e rve nt o , l’ho m e page de l m io blo g ve niva caricat a in o lt re 5,5 se co ndi, o ra in po co più di 2! Co m e
ho ant icipat o , t ut t avia, so lo alcune de lle at t ivit à che ho m e sso in prat ica de t e rm inano m iglio ram e nt i
co nsist e nt i. Mo lt e alt re , pur ave ndo co nt ribuit o ad o t t e ne re part e di que l risult at o , hanno un co st o , a m io
avviso , di m o lt o supe rio re al be ne f icio appo rt at o .
IL MET ODO
L’analisi della velo cità di esecuzio ne della pagine di Ranked è stata effettuata tramite i to o l precedentemente elencati:
L’attività è stata ripartita in sei step, a lo ro vo lta suddivisi in un certo numero di task:
OT T IMIZ Z AZ IONE DELLE COMPONENT I DEL T EMA DI WORDPRESS
eliminazio ne hack e script per bro wser o bso leti;
o ttimizzazio ne del css;
co mpressio ne del css tramite Cleancss;
o ttimizzazio ne immagini del tema tramite Sumsh.it e Optipng;
creazio ne di sprite css tramite Spriteme.
DISINST ALLAZ IONE PLUGIN INUT ILI O OBSOLET I
generazio ne repo rt Plugin Perfo rmance Pro filer (P3);
disattivazio ne e cancellazio ne dei plugin no n utili o inefficienti;
so stituzio ne dei plugin utili ma inefficienti;
so stituzio ne di plugin co n funzio ni o mo lo ghe nel tema di Wo rdPress;
o ttimizzazio ne del database e pulizia del sistema.
DEFINIZ IONE DI UN SIST EMA DI CACHING
installazio ne di W3 To tal Cache;
installazio ne di Wp Smush.it.
CONFIGURAZ IONE DEL SERVER
attivazio ne della direttiva HTTP Keep Alive;
attivazio ne delle direttive gzip e deflate.
OT T IMIZ Z AZ IONE DEL JAVASCRIPT DI GOOGLE ANALYT ICS
spo stamento dello script prima della chiusura del bo dy;
trasferimento dello javascript in lo cale;
vari esperimenti.
UT ILIZ Z O DI UN CDN (CONT ENT DELIVERY NET WORK)
Ho utilizzato il fo nt ro sso per evidenziare le o perazio ni che ritengo indispensabili per aumentare la velo cità delle pro prie
pagine web; le rimanenti po sso no anche essere tralasciate in tutto o in parte.
Due avvertenze:
alcuni task po tevano essere co mpletati tramite lo stesso to o l Gtmetrix (che, al termine di o gni analisi, fo rnisce, ad
esempio , immagini e css o ttimizzati), ma ho preferito utilizzare to o l o nline specifici;
no n so no un esperto di sistemi e, so prattutto , di server, mi scuso , pertanto , se risulterò impreciso e/o o missivo nella
trattazio ne di certi argo menti.
OT T IMIZ Z AZ IONE DEL CSS E DELLE IMMAGINI
Ranked è realizzato tramite la piattafo rma Open So urce Wo rdPress ed è o n-line da diversi anni; graf ica e co dice de l
t e m plat e so no st at i co st ruit i “sart o rialm e nt e ” quando anco ra e ra at t ivo que l surro gat o di bro wse r
de no m inat o Int e rne t Explo re r 6. Per cui, prima dell’o ttimizzazio ne, il sito presentava elementi che o ra no n hanno più
ragio ne di essere e che, o vviamente, ho rimo sso . Nella fattispecie alcuni hack nel css ed i fix per le immagini in fo rmato .png
(fo rmato , al tempo , no n suppo rtato dal pessimo so ftware di navigazio ne di Micro so ft).
Terminata quella fase, ho pro vveduto a rivedere il css del mio template, rimuo vendo classi ed id no n più utilizzati e
razio nalizzando i rimanenti (ridefinendo il co dice in maniera virtuo sa, laddo ve po ssibile, per le classi co n più di due seletto ri
discendenti). A questo punto ho co mpattato il file tramite il to o l Cleancss.
Co nsiglio di no n esagerare co n la co mpressio ne: prima o po i sarà necessario effettuare ulterio ri mo difiche al fo glio di stile, per
cui è preferibile che sia anco ra leggibile al termine dell’o perazio ne.
Infine ho o ttimizzato le immagini del tema tramite Smush.it e Optipng.
Il primo è un to o l di Yaho o ! (che vedremo , po i, verrà utilizzato anche tramite plugin) che permette di o ttenere una versio ne
o ttimizzata delle pro prie immagini in tempo reale, il seco ndo un so ftware specifico per l’o ttimizzazio ne dei file .png, che si è
reso necessario in quanto l’applicazio ne del primo no n è stata sufficiente a rimuo vere un warning di GTmetrix.
Ho effettuato , a dire il vero , un ulterio re o perazio ne: la creazio ne di uno sprite css. Si tratta di una tecnica di Web Design che
prevede di acco rpare un set di elementi grafici (ad esempio , header, pulsanti, ico ne e quant’altro ) in una unica immagine, che
verrà richiamata quale backgro und dal co dice css delle varie classi e id co ntenuti nella pagina. Ciascun css, tramite
l’impo sizio ne di determinate co o rdinate, visualizzerà so lo una po rzio ne specifica della stessa immagine, quella che,
o vviamente, gli appartiene.
L’o perazio ne, almeno per il mio sito , è risultata fine a sé stessa, lo ammetto ! Mi ha, tuttavia, co nsentito di familiarizzare co n un
to o l o nline, Spriteme, che ado tta un funzio namento che ha del geniale, almeno a mio parere:
si memo rizza nei preferiti la sua ho me page;
si accede al sito che si vuo le o ttimizzare;
si richiama il preferito precedentemente memo rizzato ;
il cambio di pagina no n avviene ed appare, invece, una finestra co ntro llata dal to o l che analizza il co dice e permette, po i,
di effettuare il do wnlo ad delle immagini che co mpo ngo no gli sprite e del relativo co dice css.
Ho pro vato diversi altri to o l, ma ritengo che questo sia, in asso luto , il più semplice da utilizzare.
DISINST ALLAZ IONE PLUGIN INUT ILI O OBSOLET I
Per o ttenere una velo ce installazio ne di Wo rdPress ritengo sia essenziale l’installazio ne di P3, Plugin Perfo rmance Pro filer
realizzato da Go Daddy.
L’applicazio ne permette di determinare il peso di ciascun plugin installato nell’infrastruttura misurando ne l’impatto in termini di
velo cità e numero di query.
No n dispo ngo , purtro ppo , di immagini precedenti all’o ttimizzazio ne, po sso assicurare, tuttavia, che i tempi di caricamento e il
numero di query, al termine dello step, si so no quanto meno dimezzati.
P3 Repo rt
P3 Runtime
L’analisi o fferta da questo strumento do vrebbe co ndurre ad un so lo risultato : l’eliminazio ne dei plugin no n indispensabili e/o
o bso leti.
L’installazio ne di un plugin, infatti, co nsente di ampliare in maniera sensibile le funzio nalità di un sito o di un blo g, ma, di
co ntro , determina anche degli effetti co llaterali:
un aum e nt o de lle que ry che il sist e m a è co st re t t o ad e f f e t t uare ;
spe sso una dim inuzio ne de l rappo rt o t ra co nt e nut i e ht m l, che rappresenta un fatto re determinante per il
po sizio namento dei siti web; tale inco nveniente è do vuto alla scarsa o ttimizzazio ne del co dice utilizzato da mo lti
develo per di plugin: so vente css, javascript ed altri elementi che li co mpo ngo no vengo no inseriti nella sezio ne head
della pagina o addirittura inline, anziché in file separati;
un’af f idabilit à, quant o a co dice e o t t im izzazio ne , no n parago nabile a que lla de l sist e m a base di
Aut o m at t ic, l’azie nda che ha cre at o Wo rdPre ss.
Pertanto , la permanenza di un plugin do vrebbe essere determinata sulla base di un’analisi co sto – beneficio . Se il co sto ,
espresso in termini di riduzio ne della velo cità di esecuzio ne delle pagine, supera il beneficio (il cui valo re, o vviamente, può
stabilirlo so lo chi gestisce il sito ), il plugin deve essere eliminato !
Si badi bene, co n quel termine intendo la cancellazio ne definitiva dell’elemento , o perazio ne che può essere effettuata
manualmente, tramite ftp, o dal backend del sistema. Wo rdPress, infatti, effettua un co ntro llo su tutti i plugin installati, per po i
pro cessare so lo quelli attivi; pertanto la semplice disattivazio ne no n è sufficiente a raggiungere lo sco po che ci siamo prefissi:
la velo cità della luce!
Se un plugin è utile ma inefficiente, si può pro vvedere ad individuare un suo so stituto che no n presenti gli stessi inco nvenienti.
Infine, qualo ra si sia sufficientemente esperti, è racco mandabile so stituire, laddo ve po ssibile, i plugin co n funzio ni all’interno
della pagina functio ns.php del tema di Wo rdPress. Per esempio , nel mio caso specifico , ho inserito a mano il co dice di
Analytics e quello relativo alla paginazio ne degli artico li e altrettanto po trei fare co n i pulsanti di co ndivisio ne so cial.
In rete vi so no centinaia di siti che pro po ngo no snippet che attivano funzio nalità o mo lo ghe a quelle o ttenibili tramite l’uso di
plugin, che co nsento no , rispetto a questi ultimi, di ridurre no tevo lmente il co nsumo di riso rse.
ATTENZIONE: la disinstallazio ne di un plugin elimina tutti i file che lo co mpo ngo no , ma, mo lto spesso , no n tutti i suo i
riferimenti nel database. Per effettuare l’o perazio ne di eliminazio ne di questi elementi è po ssibile utilizzare il plugin Clean
Optio n: il pro cedimento è piutto sto co mplesso e presenta qualche rischio , pertanto deve essere effettuato da utenti esperti e,
co munque, previo backup del database.
Può , ino ltre, essere installato , anche co ntempo raneamente, il plugin WP Cleanfix che permette di o ttimizzare il database e di
rimuo vere gli elementi del sistema (revisio ni, co mmenti in spam, bo zze, file cestinati, ecc.) che no n hanno più ragio ne di
esistere.
DEFINIZ IONE DI UN SIST EMA DI CACHING
Nella fase successiva ho implementato il sistema di caching. Esisto no numero si plugin che permetto no di attivare tale
funzio nalità. Ho no tato , tuttavia, che la maggio ranza delle pagine che trattano dell’argo mento co nsigliano di utilizzare W3 To tal
Cache e co sì ho fatto .
Il plugin, di fatto , o ttimizza le prestazio ni del server, co nsente di ridurre i tempi di caricamento degli elementi html, css,
javascript e media che co mpo ngo no un sito web attraverso co mpressio ne e Minify (o perazio ne che elimina spazi bianchi,
co mmenti e tutto ciò che no n è strettamente indispensabile per eseguire un file di co dice).
La co nfigurazio ne del plugin è piutto sto o stica: ritengo , tuttavia, che le impo stazio ni di default siano adeguate per la
maggio ranza dei siti web. Ad o gni mo do , per appro fo ndire, so no presenti in rete numero se guide sull’argo mento .
A questo punto ho installato Wp Smush.it che, in maniera to talmente auto matica, utilizza le Api del servizio di Yaho o ! (di cui ho
parlato in precedenza) al fine di ridurre il peso delle immagini di cui si è effettuato l’uplo ad.
Infine, qualo ra il vo stro tema utilizzi custo m query, è po ssibile attivare una pro cedura di caching mo dificando lo snippet che
segue.
1. <?php
2. // Get any existing co py o f o ur transient data
3. if ( false === ( $special_query_results = get_transient( 'special_query_results' ) ) ) {
4. // It wasn't there, so regenerate the data and save the transient
5. $special_query_results=new WP_Query('cat=5&amp;o rder=rando m&amp;tag=tech&amp;po st_meta_key=thumbnail');
6. set_transient( 'special_query_results', $special_query_results );
7. }
8. // Use the data like yo u wo uld have no rmally...
9. ?>
<?php
// Get any existing copy of our transient data
if ( false === ( $special_query_results = get_transient( 'special_query_results' ) ) ) {
// It wasn't there, so regenerate the data and save the transient
$special_query_results=new
WP_Query('cat=5&amp;order=random&amp;tag=tech&amp;post_meta_key=thumbnail');
set_transient( 'special_query_results', $special_query_results );
}
// Use the data like you would have normally...
?>
CONFIGURAZ IONE DEL SERVER
No no stante le o ttimizzazio ni precedenti l’indice Page Speed Grade di Gtmetrix difficilmente si disco sta dal valo re C se no n
so no attivate nel server che o spita il sito due direttive di Apache:
Ke e p alive (si tratta di una co mpo nente di Apache che permette di realizzare co nnessio ni persistenti co n uno stesso
TCP; si tratta di un co ncetto alquanto co mplicato , che va al di là dello sco po dell’artico lo , per cui, vo lendo appro fo ndire
l’argo mento , co nsiglio questa lettura);
Gzip e de f lat e (si tratta di direttive che si o ccupano di gestire la co mpressio ne di alcuni degli elementi che
co mpo ngo no un sito web, po tete o ttenere maggio ri info rmazio ni tramite Wikipedia).
Ovviamente l’attivazio ne di tali direttive deve essere richiesta al pro prio ho sting.
JAVASCRIPT DI GOOGLE ANALYT ICS
Fo rse è eccessivo dedicare un intero paragrafo all’o ttimizzazio ne del co dice di Go o gle Analytics. Si tratta, tuttavia, di un
javascript un po ’ “sco mo do ” e piutto sto pesante, anche se invo cato in mo dalità asincro na. Pe ralt ro le co nclusio ni a cui
so no giunt o po sso no e sse re applicat e a qualsiasi J avascript che , pe r vari m o t ivi, T o t al Cache no n rie sce a
pro ce ssare co rre t t am e nt e .
Le istruzio ni di Go o gle impo ngo no il caricamento dello stesso nella sezio ne head della pagina html; io però mi so no chiesto
se po tevo o ttenere qualche vantaggio po nendo lo , invece, giusto prima della chiusura bo dy. In effetti, co sì facendo , si o ttiene un
leggero aumento delle prestazio ni.
Di co nt ro , no n ve ngo no più t racciat i gli ut e nt i che chiudo no il bro wse r prim a che sia co m ple t am e nt e caricat a la
pagina we b, part ico lare t rascurabile , pe r quant o m i riguarda.
Al riguardo co nsiglio la lettura degli artico li che seguo no :
Quale sia la po sizio ne dello script, so tto po nendo il sito a Go o gle Speed Online, si o ttiene co munque un warning:
Le seguenti risorse memorizzabili nella cache hanno una durata di aggiornamento breve. Specifica una scadenza di almeno una
settimana in futuro per le seguenti risorse:
http:// www. google-analytics. com/ga.js (2 ore).
Esaminando tutte le o pzio ni di To tal Cache no n ho tro vato alcun elemento co n data di scadenza po sta a due o re; per cui so no
giunto alla co nclusio ne che questo parametro è immo dificabile e viene determinato da Go o gle stessa e che il plugin di caching
no n è in grado di pro cessarlo co rrettamente, ma no n ho certezze su questa affermazio ne e, so prattutto , su quelle che
seguiranno .
Un ulterio re mo difica mi ha co nsentito , co munque, di riso lvere, almeno in parte, il pro blema: anziché inserire direttamente il
co dice di Analytics in fo o ter.php del tema di Wo rdPress, ho creato un actio n e l’ho po sta in functio ns.php. Di seguito il suo
co dice:
Lo script viene caricato auto maticamente tramite wp_fo o ter() che, o vviamente, deve essere presente nella pagina fo o ter.php
del tema e po sto giusto prima della chiusura del bo dy. Nella quarta riga dell’actio n è necessario inserire il co dice dello script
fo rnito da Go o gle. Co dice che, vo lendo , po trebbe pure essere o ttimizzato attraverso un to o l Minify.
1. <?php
2. add_actio n('wp_fo o ter', 'add_go o gleanalytics');
3. functio n add_go o gleanalytics() { ?>
4.
5.
6. // Inserire co dice Analytics
7. <?php } ?>
<?php
add_action('wp_footer', 'add_googleanalytics');
function add_googleanalytics() { ?>
// Inserire codice Analytics
<?php } ?>
Al termine di questa o perazio ne l’indice di Page Speed Online ha raggiunto il 100%, mentre GTmetrix presentava un ulterio re
warning, argo mento dello step successivo .
Ma no n ero anco ra del tutto so ddisfatto , per cui, co mplicando ulterio rmente le co se (ne so no co nsapevo le!) ho pro vato anche
a “prendere il co ntro llo ” del Javascript di Analytics co piando lo in lo cale, nella cartella del tema di Wo rdPress, mo dificando , di
co nseguenza, lo script che lo invo ca (a questo punto , per po ter dispo rre di un Javascript sempre aggio rnato , sarebbe
necessario creare una pro cedura di cro n jo b nel server che, perio dicamente, co nfro nti l’esemplare in lo cale co n quello fo rnito
da Go o gle e pro vveda alla so stituzio ne del primo qualo ra il seco ndo sia più aggio rnato ).
Questa pro cedura ha po rtato un incremento di velo cità del sito meno che trascurabile (perlo meno quando ho effettuato la
misurazio ne, nulla si può dire, tuttavia, nel caso in cui la rete sia co ngestio nata) ma, so prattutto , ha generato un nuo vo warning:
il Javascript di Analytics, infatti, no n viene co mpresso da To tal Cache. A questo punto ho so speso , almeno tempo raneamente,
i test.
UT ILIZ Z O DI UN CDN (CONT ENT DELIVERY NET WORK)
La po sizio ne di que st o st e p è vo lut am e nt e ult im a: no n ho e f f e t t uat o , inf at t i, t ale o t t im izzazio ne che ,
pre sum o , m i avre bbe co nse nt it o di o t t e ne re 100% ne ll’indice Yslo w di Gt m e t rix.
Un servizio di Co ntent Delivery Netwo rk co nsente di effettuare la co pia della maggio r parte dei co ntenuti del pro prio sito web (in
genere, i co siddetti media) presso una rete distribuita di server. L’uso di tale applicazio ne permette, mo lto sinteticamente, di:
o ffrire all’utente la co pia dei co ntenuti po sta nel no do a lui geo graficamente più vicino , aumentando quindi la velo cità di
fruizio ne degli stessi;
miglio rare la distribuzio ne dei co ntenuti in caso di co ngestio ne delle rete (se, ad esempio , un server è so vraccarico , in
un dato istante, può esserne utilizzato un altro che dispo ne di una co pia degli stessi elementi);
gestire in maniera auto matica la pro pagazio ne degli aggio rnamenti dei co ntenuti tra tutti i server che ne o spitano una
co pia.
To tal Cache è già predispo sto per l’utilizzo del CDN o fferto da Clo udflare (gratuito o a pagamento ), ma co nsente anche di
utilizzare qualsiasi altro servizio similare.
Perso nalmente ho ritenuto del tutto inutile l’attivazio ne di tale funzio nalità per un sito di mo deste dimensio ni quale Ranked; in
effetti Gtmetrix co nsiglia di utilizzare il CDN per so le dieci immagini del mio blo g, il beneficio sarebbe alquanto limitato .
La pratica, invece, può risultare piutto sto efficace per siti di dimensio ni più genero se, so prattutto per quelli che co ntengo no
numero si media. Aggiungo , ino ltre, che l’attivazio ne del servizio co mpo rta delle mo difiche ai DNS, o perazio ne che, per la
maggio r parte degli utenti, risulta alquanto co mplessa e che, generalmente, deve essere demandata all’ho sting.
A questo punto l’o ttimizzazio ne può dirsi terminata!