Come velocizzare il sito web realizzato con WordPress e non solo
Oggi voglio rispondere a una domanda che molto spesso ricevo da parte di moltissime persone e in primis da chi lavora con il web. La domanda è sempre sempre questa:
Come posso velocizzare il sito web realizzato con WordPress?
Partiamo in questo nostro cammino da una prima premessa, quello che andrete a leggere qui sotto non è le solita “guida definitiva”, così come non è una “guida che ti fa fare il 100 su 100” sui servizio di misurazione come Google Page Speed o Gtmetrix. Questa è una guida che ti permette di migliorare le prestazioni del tuo sito, prestazione che i vari motori di ricerca apprezza, ma ancor prima di loro sono i vostri lettori ad apprezzare i vostri sforzi nel mantenere un sito web veloce pur essendo pieno di informazioni utili a loro.
Ormai è risaputo che la velocità di caricamento e di esecuzione di un sito web incide sul posizionamento nei motori di ricerca, questo non lo dice il sottoscritto, ma è la stessa Google ha affermato ufficialmente questa cosa. È ovvio che alla base di un buon posizionamento, non basta solo la velocità se mancano i contenuti, se non si fa la famosa ottimizzazione onpage e al giocare con i link in entrata e in uscita. Quello della velocità è un passaggio importante che va preso in considerazione sin dall’avvio del progetto stesso e non dopo che questo è stato avviato. Però giustamente, se siete su questa pagina, significa che il vostro sito è stato già attivato e che adesso è molto lento.
Ecco adesso che ho fatto questa prima premessa, andiamo a vedere una seconda, in questo capite sin da subito a chi è rivolta questa guida.
La seconda premessa è la seguente: la guida sul come velocizzare il tuo sito web è si principalmente dedicata al CMS WordPress, ma in certi punti e per certi versi può essere mesa in pratica anche su altri CMS come Joomla, Drupal e non solo. Ovviamente dovete cercare le risorse alternative e dedicate al vostro progetto e al CMS che utilizzate. Però tutto questo lo scopriamo insieme.
Tenetevi pronti…. Iniziamo….
Hosting:
Mentre scrivevo questa guida e soprattutto questo punto mi sono chiesto a chi rivolgere questo consiglio, infatti la prima frase diceva: “Questo punto vale solo per chi non ha ancora ancora aperto un sito web e non ha ancora installato WordPress o un qualsiasi altro CMS”. Però non è così, perché potrebbe essere un consiglio oppure un’estrema decisione nel caso di coloro che le hanno provate tutte le guide, strategie per velocizzare il sito web e non ci sono riusciti. Non tutti offrono servizi di qualità.
È molto importante scegliere il servizio di hosting, a volte 10€ in più all’anno possono fare la differenza e vi possono semplificare la vita. Io ho avuto a che fare con servizi come ServerPlan, Ergonet, HostingVirtuale, Giga.it e SiteGround, servizi con cui mi sono trovato bene. Questi servizi, oltre ad offrirvi un’assistenza veloce e in italiano, tranne per SiteGround che vi richiede un pò di inglese, vi danno la possibilità di scegliere tra i vari piani di “affitto annuale”. Ogni piano offerto da questi servizi riporta anche la tipologia di progetto a cui è rivolto quel determinato servizio da loro offerto.
Tema:
Bene hai scelto oppure hai deciso di cambiare il tuo servizio di hosting, adesso pensa bene a quello che il tuo progetto web deve fare. Questo perché in base a quello che deve fare e in base a chi è rivolto, ti da la possibilità di scegliere il tema adatto. Però per il tema ci sono alcune cose da dire e alcune domanda che una persona o una società deve farsi. Quale budget ho? Meglio un tema pieno di animazioni o uno semplice e minimalista? Meglio un tema comprato da servizio come ThemeForest, MyShopThem, ElegantThemes oppure posso farmi fare il tema da un professionista?
È molto importate riuscire a darsi queste risposte, perché una buona parte della velocità e delle prestazioni del progetto dipenderanno proprio dal tema. Quindi se hai un buon budget, affidati a un professionista che ti realizzi il tema, invece se il budget è molto limitato, SCEGLI INTELLIGENTEMENTE.
Questo discorso è valido anche per chi il proprio sito web lo ha già avviato. Mi sono trovato molto spesso davanti a siti, blog o e-commerce lenti, perché la colpa principale era il tema. Cosa ho fatto in questi casi? Niente di eccezionale sono andato alla ricerca di un tema minimal, che rispecchi le esigenze del cliente, l’ho installato e ci abbiamo lavorato sopra per aggiungere quelle due o tre funzioni che mancavano e che il cliente desiderava.
È importante scegliere un tema che non dipenda da moltissimi plugin, perché altrimenti non avete fatto niente, anzi rischiate di peggiorare il tutto. Quindi quando acquistate il tema leggete bene le valutazioni di coloro che hanno già acquistato quel tema e soprattutto leggete la descrizione fatta dall’autore. Se dovete acquistare il tema, scegliete uno che vi da la possibilità di scaricare una versione Free, Demo o Trial. Perché solo così potete essere sicuri che quel tema fa al caso vostro.
Controllate che il tema sia di tipo responsive, cioè che si adatti in base allo schermo del dispositivo che accede al sito e cercate di evitare tutti i temi che hanno alla base plugin per la composizione visuale, per esempio Virtual Composer.
Nota:
Io apprezzo il lavoro svolto dal team che realizza il plugin Virtual Composer, solo che sfortunatamente le licenze che offrono agli web designer che realizzano temi, molto spesso limitano gli aggiornamenti nel tempo. Quindi oltre a trovarvi davanti un plugin non aggiornato e compatibile con la vostra versione di WordPress, vi trovate anche davanti a una possibile porta di entrata nel vostro sito da parte di bimbimikia, che vogliono dimostrarsi “lo-hacker”.
Plugin:
Quindi abbiamo capito che abbiamo bisogno di un buon servizio di hosting, di un buon tema leggero che ci da la possibilità di migliorarlo e adesso andiamo a vedere questi famigerati plugin.
Per chi non lo sapesse, i plugin sono delle funzioni extra scritte da sviluppatori terzi che vi offrono la possibilità di avere delle funzionalità extra a quelle offerte di base dal template, dal CMS WordPress o da un qualsiasi altro CMS. Questi plugin a volte sono utili a coloro che non hanno conoscenze di programmazione e che non conoscono la struttura del CMS, quindi non sanno dove mettere le mani. Quindi uno installa il plugin, lo configura in base alle sue esigenze e poi lui fa tutto quello che cui è stato sviluppato. Da una parte è un bene, perché fa risparmiare tempo e fatica, dall’altra parte è un male perché i troppi plugin consumano risorse.
Ovviamente se il progetto lo state avviando adesso, in base alle vostre esigenze potete già sapere e stilare una lista dei plugin da installare. Invece se il progetto è già attivo, cercate di farvi aiutare nel togliere via quelli che non vi servono, ma soprattutto togliete via tutti quelli che non sono attivi. Questo consiglio vale per qualsiasi CMS in commercio.
Perché questi anche se non sono attivi, comunque pesano sulle prestazioni del vostro progetto web.
Quindi fino adesso abbiamo capito che se vogliamo velocizzare il sito realizzato con WordPress o con un qualsiasi altro CMS dobbiamo stare attenti al servizio di hosting, al tema e ai plugin.
Per analizzare il consumo dei vari plugin, in modo tale da toglierli vi consiglio il plugin P3 (Plugin Performance Profiler).
No ai plugin inutili
Allora come già detto prima, se non servono i plugin è inutile installarli, quindi se devi inserire gli widget box di Google Plus, Facebook, Twitter e Pinterest, ti basta andare nelle apposite pagine realizzate dagli sviluppatori di questi social proprio per semplificarti la vita. La documentazione è chiara e quindi potete metterla in pratica da soli. In alternativa, esistono moltissime persone come me che vi possono aiutare. Pure Instagram si sta adeguando agli altri, ed ecco che anche per questo social c’è della documentazione dedicata agli sviluppatori, che vi permette di capire come inserire i contenuti di Instagram sul vostro sito.
Insomma meno plugin utilizzate per fare determinati lavori o azioni, più avete la possibilità di velocizzare il sito e far si che questo sia anche più sicuro.
Risorse e parte pratica
Adesso passiamo alle risorse e alla parte più pratica del lavoro che vi porterà al risultato finale, cioè quello di velocizzare il sito web realizzato con WordPress.
WP Fastest Cache
Questo è un plugin per WordPress che si adatta in base al sito web e l’installazione del CMS su cui viene installato/avviato.
Il plugin comunica con il tool Gzip (compressore di contenuti), ma si occupa anche con la gestione del caching del browser e la creazione della cache per i temi mobile. Già nella versione free è molto potente, però la versione Pro è ancor più aggressiva e da molte più impostazioni.
Ecco un esempio di come configurarlo:
Terza Premessa:
Queste sono due delle configurazioni che io ho messo in pratica per i miei clienti, basandovi su queste configurazioni cercate di trovare quella che fa al caso vostro e che vi permette di ottenere vantaggi e miglioramenti delle prestazioni. Questo perché potrebbe succedere che in alcuni casi un determinata funzione blocchi o faccia funzionare male un determinato plugin.
Io non consiglio l’utilizzo di W3 Total Cache, questo perché molto spesso tende ad entrare in conflitto con moltissimi plugin, poi di suo non è un plugin molto leggero. Quindi al posto di semplificarvi la vita ve la complica ancor di più.
WP Optimize
Tra i plugin che hanno l’ingrato compito di fare pulizia. WP Optimize vi permette di ottimizzare il database del vostro sito web con pochi click. Il plugin di suo nasce con lo scopo principale di essere rapido e in dolore, non consigliato solo per chi vuole avere il proprio database pulito, ma soprattutto per tutti. Perché un database leggero e pulito, vi permette di velocizzare il sito web.
Ottimizzazione delle Immagini
Passiamo ad un’altro elemento essenziale e molto spesso sottovalutato, cioè l’ottimizzazione delle immagini che caricare sul vostro sit web. Visto che comunque il sito che state per avviare oppure se avete già avviato, non è una rivista o comunque una stampa che ha bisogno di foto con un alta percentuale di dpi, questo significa che è sufficiente avere immagini con risoluzione pari ai 72 dpi poi se sono 82 dpi non nuore nessuno. Dovete comunque considerare che le immagini con un’altissima risoluzione aumenta il tempo di caricamento dell’immagine e quindi rallenta il caricamento e la velocità del sito. Utilizzare il formato .jpg e non il .png, questo perché il formato jpg è molto più leggero.
Page Speed e lo stesso Gtmetrix vi vengono in contro, dandovi una mano, infatti vi segnalano tutte le immagini pesanti e allo stesso tempo vi danno anche la possibilità di vedere come ottimizzare l’immagine stessa.
In base al servizio di hosting che avete scelto, per scalare la dimensione delle immagini in maniera rapida e indolore, potete utilizzare lo strumento/funzione presente su cPanel, che proprio questo scopo. Questa funzione/strumento la trovate sotto la voce Avanzate, da qui sceglierete Gestione immagini e nella nuova schermata che vi apre andate a scegliere image scaler. Semplice e indolore vero?
Se il vostro servizio di hosting non vi offre il cPanel, potete comunque ottimizzare le vostre immagini attraverso tre vie.
Come prima via, potete scegliere di prendere la versione Premium del plugin WP Fastest Cache, che è in grado di comprimere in maniera rapida tutte le immagini presenti sul vostro progettato web.
La seconda via è quella di utilizzare uno di questi due plugin: WP Smush e EWWW Image Optimizer.
Entrambi fanno il loro lavoro in modo eccellente.
Invece per quello che riguarda la terza via, potete utilizzare il tool Resizeyourimage.com, che vi da la possibilità di scalare la risoluzione delle immagini.
Ottimizzazione i Video da YouTube
State per realizzare o avete un sito web in cui i video da YouTube sono di casa. Bhe anche loro possono essere ottimizzati e avete la possibilità di ottimizzare la velocità del vostro sito.
Quindi ecco che se volete ridurre il tempo di caricamento delle pagine che contengono video da YouTube, dovete far affidamento sul plugin WordPress Lazy Load for Videos. Questo plugin non solo di suo è leggero, ma ha come scopo principale quello di sostituire i video da YouTube incorporati nel vostro nel blog con delle immagini di anteprima cliccabili.
Compressione: GZip
Il tool GZip è un compressore di contenuti, questo tool presente sui sistemi operativo GNU/Linux, consente di comprimere i contenuti di un sito web riducendo il peso di ciascuna pagina e quindi vi da la possibilità di aumentare la velocità di caricamento. Quindi ecco alcuni metodi.
Partiamo con il primo, quindi come prima cosa aprite il file .htaccess e inserite alla fine di tutto il codice le seguenti righe di codice e poi salvate:
Attivazione mod_gzip.c
# BEGIN GZIP COMPRESSION <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> # END GZIP COMPRESSION
Attivazione mod_filter.c
# BEGIN DEFLATE COMPRESSION <IfModule mod_filter.c> AddOutputFilterByType DEFLATE "application/atom+xml" \ "application/javascript" \ "application/json" \ "application/ld+json" \ "application/manifest+json" \ "application/rdf+xml" \ "application/rss+xml" \ "application/schema+json" \ "application/vnd.geo+json" \ "application/vnd.ms-fontobject" \ "application/x-font-ttf" \ "application/x-javascript" \ "application/x-web-app-manifest+json" \ "application/xhtml+xml" \ "application/xml" \ "font/eot" \ "font/opentype" \ "image/bmp" \ "image/svg+xml" \ "image/vnd.microsoft.icon" \ "image/x-icon" \ "text/cache-manifest" \ "text/css" \ "text/html" \ "text/javascript" \ "text/plain" \ "text/vcard" \ "text/vnd.rim.location.xloc" \ "text/vtt" \ "text/x-component" \ "text/x-cross-domain-policy" \ "text/xml" </IfModule> # END DEFLATE COMPRESSION
Questa tecnica manuale, per velocizzare il sito web, va a migliorare quello che già con plugin WP Fastest Cache avete già fatto e messo in pratica
Tutto ha una data di scadenza
Come per tutto a questo mondo, anche i contenuti statici presenti all’interno del tuo sito devono avere una data di scadenza. Ti sembrerà strano ma anche questo passaggio ti permette di velocizzare il tuo sito web.
Quello che devi fare, è aggiungere nel file .htaccess le seguenti righe di codice:
<IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg A2592000 ExpiresByType image/png A2592000 ExpiresByType image/gif A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/css "A2592000 ExpiresByType image/x-icon A2592000 ExpiresByType application/pdf A2592000 ExpiresByType audio/x-wav A2592000 ExpiresByType audio/mpeg A2592000 ExpiresByType video/mpeg A2592000 ExpiresByType video/mp4 A2592000 ExpiresByType video/quicktime A2592000 ExpiresByType video/x-ms-wmv A2592000 ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType text/javascript A2592000 ExpiresByType application/x-javascript A2592000 ExpiresByType application/javascript A2592000 </IfModule>
Queste righe di codice, dicono che le immagini, i video, i file audio e non solo dopo un mese scadono (il tempo è espresso in secondi), questo significa che dopo un mese loro verranno ricaricati.
Per vedere se avete attivato correttamente GZip e se avete fatto un buon lavoro, potete utilizzare anche questo tool on-line: http://checkgzipcompression.com/
Conclusione:
Bene con quest’ultimo tool la guida per velocizzare il sito web si può considerare conclusa. Queste tecniche possono essere utilizzate sia per i siti che si basano sul CMS WordPress, ma è valida anche per i siti web realizzati con altri CMS. Ovviamente per mettere in pratica questa guida su altri CMS dovete prendere in considerazione che non esistono gli stessi plugin, però ci sono le alternative sicuramente. Mentre per quello che riguarda il mettere le mani sul file .htaccess, questo è valido per tutti i CMS. Come al solito noi restiamo a vostra disposizione per qualsiasi domanda o richiesta, basta che ci contattate attraverso la nostra pagina Contatti.
Insomma io finito la guida e la serie di consigli per velocizzare il sito web, adesso aspetto le vostre impressioni nei commenti qui sotto.
Seguiteci anche su Facebook, Google Plus, Tumblr, Twitter e Telegram, per restare sempre in contatto con noi e con le nostre guide.
Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.
