Migliorare le prestazioni di un sito web realizzato in WordPress

Migliorare le prestazioni di un sito internet è il punto fermo per tutti i “web developer” (sviluppatori di siti web) di nuova generazione. Esistono diverse piattaforme su internet che permettono di realizzare siti internet e altrettante di misurarne la quantità. Se hai sviluppato il tuo sito web con WordPress e hai riscontrato alcuni errori critici nei test di misurazione, con questo articolo posso fornirti un aiuto davvero rilevante.

Consiglio caldamente di non farti ossessionare dai punteggi dei test, ma di ricavare un vantaggio seguendo i le indicazioni proposte. Vediamo di cosa si tratta!

Le regole dei motori di ricerca

È importante fare una premessa: i motori di ricerca si basano su algoritmi matematici e programmi informatici piuttosto avanzati. Ti sei mai chiesto come facciano ad avere una risposta a tutte le “query” ossia alle nostre domande? Sono così precisi e qualitativamente efficienti che rispondono a qualsiasi interrogativo o argomento venga posto.

Per essere pronti ad una risposta precisa e corrispondente alla domanda, i motori di ricerca lavorano ininterrottamente scansionando migliaia di siti internet ogni secondo, alla ricerca di quelli con i migliori argomenti, le migliori prestazioni, la migliore accessibilità per i dispositivi di nuova generazione… e così via.

Per questo, perfezionare le prestazioni di un sito web, è fondamentale per scavalcare la concorrenza e quindi garantirsi un buon “posizionamento e indicizzazione” nelle classifiche dei motori di ricerca (SERP).

Ma cosa vogliono i motori di ricerca dal nostro sito web?

  1. Che sia fluido e veloce
  2. Che sia accessibile da tutti i dispositivi di nuova generazione
  3. Che contenga testi e immagini comprensibili
  4. Che abbia argomentazioni di qualità

La domanda successiva che uno sviluppatore si dovrà porre è: “Come faccio a sapere se il sito web che ho realizzato è idoneo e indicizzabile sui motori di ricerca?”

Per questo oggi voglio parlare di “Measure sulla piattaforma web.dev, che senza dubbio è lo strumento chiave per testare le prestazioni di un sito web.

Le caratteristiche di “Measure”

Questo test gratuito permette di inserire qualsiasi url (per esempio www.iltuosito.com) e ricevere dei risultati riguardanti le prestazioni. Sicuramente il vantaggio maggiore nell’avvalersi di questo prodotto è quello offerto dai consigli sul miglioramento del sito internet, in relazione ai problemi riscontrati. Si possono così apportare delle migliorie, cercando di azzerare gli errori.

Tuttavia ho appreso che passare ore a farsi ossessionare dal punteggio ottenuto, diventa una paranoia inutile. Ho rilevato che nessuno raggiunge il 100/100. Quindi è inutile scervellarsi…

Vediamo piuttosto quali sono le caratteristiche. Il test fornisce quattro punteggi di valutazione:

  • Performace (prestazione)
  • Accessibility (accessibilità)
  • Best Practices (migliorie pratiche)
  • SEO (ottimizzazione dei contenuti)
Measure web.dev

Il primo parametro, che fa riferimento alla prestazione e alla velocità del sito, è lo scoglio più duro da superare, soprattutto per chi usa CMS come WordPress o Joomla (programmi di sviluppo di siti internet). Questo perché la scrittura nel linguaggio di programmazione, potrebbe non essere ben strutturata a causa di temi grafici poco prestazionali o poco professionali. Anche i plugin (software di completamento), installati sui CMS, giocano un ruolo fondamentale nella performance del sito web.

Il punteggio complessivo è un risultato ottenuto dalla scansione completa del sito internet. Dopo il risultato, si ottengono dei consigli su come migliorare le prestazioni (e quindi anche il punteggio).

La peculiarità di questa piattaforma è quella di non tralasciare nulla. È in grado di valutare fattori di ogni tipo.

Il punteggio su Measure

Come ho accennato all’inizio, molti appassionati del settore web o gli stessi proprietari di siti internet, rischiano di farsi ossessionare dal raggiungimento del punteggio perfetto. Purtroppo queste persone tendono a trascurare l’aspetto più importante del risultato del test, ossia le raccomandazioni.

Sforzarsi di migliorare il più possibile i tempi di caricamento di un sito web e quindi ottenere un punteggio alto, in realtà non è così importante. Tanto per dirne una, non è nemmeno un test “valido in ogni situazione”. Per esempio, la località da cui si effettua il test, risulta essere determinante o quantomeno importante. Possiamo provare Pingdom Tools, che permette di testare le prestazioni del sito internet da varie località. Eseguire il test di velocità su varie piattaforme, come per esempio GTmetrix o WebPageTest, probabilmente darà punteggi diversi e non corrispondenti. Ciò dimostra quanto possano essere discutibili questi valori.

Pensi che la velocità del sito web sia tutto? Ai visitatori non importa quale sia il punteggio su Measure, vogliono solo poter visualizzare informazioni utili, altrimenti perché porre una domanda al motore di ricerca?

Il vero scopo di testare le prestazioni di un sito internet non è quello di ottenere un punteggio elevato, bensì quello di individuare i problemi, in modo da poterlo ottimizzare e renderlo più fluido e qualitativamente migliore. Questo è quello che conta veramente!

 Le raccomandazioni sul miglioramento dei siti web

Arrivati a questo punto, devo purtroppo parlare con un linguaggio tecnico, l’unico conosciuto dai motori di ricerca, che si basano su algoritmi e calcoli matematici, per decifrare il linguaggio di programmazione web e raccogliere dati, nonché stimare delle classifiche. Prima di parlare dei risultati, è necessario comprendere la differenza tra Dati di Prova (Lab Data) e Dati Reali (Field Data). I dati di prova vengono creati in condizioni fisse, mentre i dati reali utilizzano le velocità di caricamento effettive, raccolte nel tempo.

Possono essere veramente molte le raccomandazioni di Measure, relative agli errori rilevati sul sito web preso in esame. Mi fermerò a parlare dei 16 errori più comuni e rilevanti.

Alcuni di questi possono essere risolti semplicemente installando sul CMS WordPress temi grafici professionali o prodotti di tipo professionale, come page builder di ultima generazione. Inoltre è possibile ricevere un significativo aiuto dai plugin, che andrò a consigliare nei vari casi specifici. In quest’ultimo caso, sarebbe meglio non abusarne e installare solo quelli che servono per risolvere i problemi riscontrati.

Dopo aver fatto questa premessa, possiamo iniziare ad analizzare le raccomandazioni fornite dal servizio.

Eliminate render-blocking resources – 01

L’errore più comune, rilevato dal sistema, è quello relativo alle risorse che bloccano la visualizzazione (render blocking resources).

https://webdev.imgix.net/render-blocking-resources/blocking-resources.png
Eliminate render-blocking resources

Questo avviso fa riferimento ai JavaScript e CSS, elementi che possono impedire il caricamento rapido delle pagine del sito web. Vuol dire che il browser del visitatore (strumento per la navigazione su internet), è costretto ad elaborare numerose stringhe di dati, prima di poter visualizzare qualcosa (in gergo tecnico “above the fold”): altro impedimento che può influire negativamente sulla velocità del sito web.

Il processo tecnico, riferito a quanto detto sopra, riguarda il tempo che passa per scaricare e analizzare una pagina web e ritarda il caricamento delle parti essenziali per l’effettiva visualizzazione. Questo problema è dovuto dai JavaScript e CSS, che non rispettano la struttura e sono inseriti dentro il codice sorgente HTML. Questo non piace per niente ai motori di ricerca!

Le suddette pagine web verranno definite “grezze” e quindi da evitare, a favore di altri siti web meglio predisposti alle esigenze dei visitatori.

Ci sono diversi modi per evitare questo inconveniente. È importante innanzitutto specificare che non tutti i file CSS e JavaScript bloccano la visualizzazione.

Per esempio, è corretto posizionare i CSS critici vicino alla parte superiore del codice, altrimenti i vostri visitatori potrebbero sperimentare quello che è conosciuto come “FOUC” ossia un flash di contenuti non stilizzati (titoli, testi e immagini sovrapposte come nell’immagine di seguito).

FOUC

Come eliminare le risorse che bloccano la visualizzazione su WordPress

È necessario rispettare la struttura e scrivere nell’ordine giusto ciò che serve nel linguaggio di programmazione HTML, evitando il più possibile i JavaScript e CSS superflui nelle linee del codice.

Non tutti sono pratici nel personalizzare l’HTML e i CSS in WordPress, quindi è bene rispettare queste semplici regole:

1. Evitare temi grafici scadenti e installare temi professionali (purtroppo a pagamento). Ancora meglio, se parliamo dei Page Bulder di nuova generazione come Elementor o Divi (a pagamento anche questi).

2. Usare i due plugin performanti Autoptimize + Async JavaScript, per eliminare i JavaScript e i CSS superflui (questi plugin richiedono regolazioni diverse nelle impostazioni, che variano in base ai casi specifici).

I due metodi per ottimizzare ed eliminare il problema sono:

  • ASYNC evita di interrompere il rendering dell’HTML durante il download dello <script>, che di fatto avviene in parallelo. Lo <script> viene eseguito subito dopo il download. Il parsing della pagina viene messo in pausa soltanto mentre lo <script> viene eseguito.
  • DEFER evita di interrompere il rendering dell’HTML durante il download dello <script>, che di fatto avviene in parallelo. Lo <script> viene eseguito subito dopo il parsing della pagina HTML, che non viene mai messo in pausa.

Rendering di una pagina web: sono le operazioni che il browser compie, per visualizzare una pagina web completamente.

Non importa quando lo <script> sarà disponibile. ASYNC è il migliore dei due metodi: il parsing del codice HTML può continuare e lo <script> verrà eseguito non appena è pronto. Questo è l’unico modo che funziona davvero e permette ad una pagina web un caricamento fluido e veloce.

Asynk vs Defer

Configurare il Plugin Autoptimize

Come configurare il plugin Autoptimize
Plugin Autoptimize

Configurare il plugin Async JavaScript

Come configurare il plugin Async JavaScript
Plugin Async JavaScript

L’opzione Async potrebbe causare problemi di visualizzazione del sito web. Se così fosse, consiglio di provare ad escludere jQuery: trovare l’opzione nelle impostazioni.

Una volta impostato il plugin Async JavaScript, andate in Impostazioni → Autoptimize  e selezionate la casella Optimize JavaScript Code e Optimize CSS Code.

Se sei un utente esperto, puoi provare ad accedere alle impostazioni avanzate per una migliore e più performante ottimizzazione, ma procedi con cautela e soprattutto preoccupati di effettuare un backup del sito web e del database prima di effettuare i tuoi esperimenti.

Se continui ad avere problemi con le risorse che bloccano la visualizzazione ti consiglio di chiedere assistenza qui. Riceverai tutti i consigli di cui hai bisogno!

Dopo aver effettuato le operazioni sopra descritte il tuo sito dovrebbe essere in grado di passare il test.

Riepilogando

Questo lungo paragrafo merita un riepilogo. Sono diversi i concetti da tenere a mente e le operazioni da effettuare. Li vado a sintetizzare il più possibile.

Le risorse di blocco del rendering rallentano i tempi di caricamento delle pagine del vostro sito WordPress, costringendo i browser dei visitatori a ritardare la visualizzazione dei contenuti. Per aiutare i visitatori a caricare più rapidamente la parte visibile delle vostre pagine, dovreste ritardare il caricamento delle risorse che non sono immediatamente necessarie.

Per eliminare le risorse di blocco, preoccupati di installare un tema grafico professionale o un theme builder ed installa e configura correttamente i plugin Autoptimize e Async JavaScript.

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Minimize critical requests depth – 02

Un altro errore piuttosto comune riguarda il concetto di concatenamento delle richieste critiche, che si riferisce in gergo al Critical Rendering Path (CRP). Anche in questo caso i browser caricano le vostre pagine in maniera errata, perdendo tempo ad elaborare i dati che non rispettano un concatenamento prestabilito. Alcuni elementi come il JavaScript e i CSS, di cui abbiamo parlato sopra, devono essere caricati completamente prima che una pagina web diventi visibile.

https://webdev.imgix.net/critical-request-chains/critical-request-chains.png
Minimize critical requests depth

Come ridurre al minimo la profondità delle richieste fondamentali con WordPress

Con il seguente diagramma ti mostrerò il concatenamento delle richieste che devono essere soddisfatte prima la pagina web diventi visibile. In teoria, si dovrebbe ridurre al minimo il numero di richieste dipendenti, così come le loro dimensioni.

La raccomandazione Mantieni un Numero Ridotto di Richieste e Dimensioni di Trasferimento Limitate
Keep request counts low and transfer sizes small

Esistono diversi metodi per raggiungere l’obiettivo:

  • eliminare le risorse che bloccano la visualizzazione
  • rimandare le immagini fuori schermo
  • minimizzare CSS e JavaScript

Ho già affrontato alcuni di questi aspetti, che sono stati abbondantemente spiegati nei capitoli precedenti. Dobbiamo quindi preoccuparci di ottimizzare l’ordine in cui vengono caricate le risorse, al fine di abbreviare il CRP. Per fare questo, dobbiamo innanzitutto spostare il contenuto sopra il fold nella parte superiore del vostro file HTML.

La buona notizia è che le operazioni trattate nel capitolo precedente servono a sistemare anche questo fattore. Infatti i plugin Autoptimize + Async JavaScript contribuiranno ad aggiustare le cose, se correttamente impostati.

Ottimizzazione del percorso di rendering critico

Il tempo necessario per eseguire l’intero processo può dipendere da molti fattori, come la dimensione del documento, il numero di richieste, gli stili applicati, il dispositivo dell’utente, ecc.
Una delle raccomandazioni più rilevanti è quella di dare priorità ai contenuti visibili, in modo da rendere il più veloce possibile la parte Above the Fold. È importante seguire alcune regole principali: ottimizzare la struttura dell’HTML in modo che carichi prima il contenuto critico Above the Fold e ridurre la quantità di dati utilizzati dalle risorse HTML, CSS e JS.

Se la quantità di dati necessari per rendere la pagina visibile non supera la finestra di congestione iniziale, saranno necessari altri round trip di rete, per vedere la parte Above the Fold. Sulle reti mobili, con latenze elevate, ritarda notevolmente il caricamento delle pagine.
Il browser costruisce il tipo di visualizzazione in modo incrementale, e questo ci dà l’opportunità di ridurre il tempo, strutturando l’HTML in modo da caricare prima l’above the fold e rimandare successivamente il resto della pagina.

Ma l’ottimizzazione non si esaurisce con la costruzione di una struttura efficiente. Si tratta piuttosto di un processo di miglioramento e di misurazione che coinvolge l’intera sequenza del percorso di rendering, detto “critico

Ottimizzare il codice

La minimizzazione è un processo che riguarda la rimozione dei caratteri non necessari, come i commenti e gli spazi vuoti, nel codice sorgente. Questa operazione risulta estremamente utile nello sviluppo, ma non essenziale al browser per aprire la pagina web.

La compressione è la capacità dei server web e dei client di ridurre le dimensioni dei file trasmessi al fine di migliorare la velocità e diminuire l’utilizzo di banda.

La combinazione di file CSS è fondamentale, per ridurre al minimo il numero di richieste HTTP. Questa azione è particolarmente importante nelle connessioni mobili, dove le prestazioni sono influenzate da un’elevata latenza.

L’inserimento in linea dei CSS critici serve a rendere l’above the fold della pagina web immediatamente visibile. Consideriamo sempre la possibilità di inserire gli stili critici in linea direttamente nel markup HTML, per evitare ulteriori richieste HTTP. Evitiamo invece l’inlining di file CSS di grandi dimensioni, perché questo potrebbe richiedere ulteriori round trip e rendere l’above the fold molto più lento.

Ottimizzare il critical rendering path

Gli utilizzatori di WordPress possono usufruire di una serie di plugin che raggruppano tutti i processi di ottimizzazione del critical rendering path, agendo sulla cache del sito web. Si può installare un plugin completo, oppure più plugin contemporaneamente, ognuno dei quali fornisce specifiche funzionalità di ottimizzazione.

W3 Total Cache

Il mio consiglio è quello di installare W3 Total Cache. Fra tutti quelli che ho provato è qello che ha ottimizzato al meglio il percorso di rendering critico. Per cui, senza installare tanti plugin, questa è la soluzione migliore.

https://lh3.googleusercontent.com/proxy/9MkNG5PpxepP0hv7GmthQGwjzAS_2welDfziDFoyVa9uWfHTnG9S7SSPCKYjNZcvQWzk3-Q1-gy9O2nNYE2SobD5SK8GWeoQh-ELlrjHoV6zoTLnbk84-JKNEv3Z75wHhPAGeOj_bA
w3 database cache

A primo acchito la configurazione di questo plugin potrebbe risultare scoraggiante, ma una volta acquisita una maggiore familiarità con la sequenza del Critical Rendering Path, si potrà beneficiare di un potente e performante set di strumenti. Alcune funzionalità comprendono:

  • Cache HTML (post e pagine), CSS e JavaScript in memoria, su disco o su CDN
  • Cache di feed, risultati di ricerca, oggetti database, oggetti WordPress e Freamwork
  • Minimizzazione di HTML (post e pagine)
  • Minimizzazione di JavaScript e CSS
  • Ottimizzazione di JavaScript con async e defer
  • Cache del browser con controllo della cache, header expire futuri e tag entity
  • Compressione HTTP (gzip)
  • Risultati di Google PageSpeed sul cruscotto di WordPress

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Keep request counts low and transfer sizes small – 03

Questa è una richiesta più che lecita da parte dei motori di ricerca. Ridurre al minimo il numero di richieste necessarie, aiuta i browser che devono agire sulle pagine web a diminuire le richieste che il server restituisce in risposta.

https://webdev.imgix.net/resource-summary/resource-summary.png
Keep request counts low and transfer sizes small

Come mantenere un numero ridotto di richieste e dimensioni di trasferimento limitate con WordPress

La raccomandazione “riduci al minimo la profondità delle richieste fondamentali”, in realtà non è un errore vero e proprio, ma un semplice elenco del numero di richieste effettuate e delle loro dimensioni.

Non c’è un numero ideale di richieste o di dimensioni massime da tenere in considerazione. La raccomandazione è quella di fissare uno standard, per raggiungere una corretta performance. Si tratta di un insieme di obiettivi minimi che possono essere collegati a questi aspetti pratici:

  • Dimensioni massime delle immagini
  • Numero di web font utilizzati
  • Numero di chiamate inviate a risorse esterne
  • Dimensione degli script e dei framework

Una buona performance è fedele a degli standard a cui bisogna rimanere fedeli. Quando si supera il numero massimo di richieste, è possibile decidere se eliminare o ottimizzare le risorse per attenersi alle linee guida prestabilite.

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Remove unused CSS – 04

Sono effettivamente utili tutti i CSS utilizzati sul tuo sito internet? Il codice nel foglio di stile è un contenuto che deve essere caricato, affinché la tua pagina diventi visibile agli utenti. Nel caso fossero presenti alcuni CSS inutili, si aggiunge un carico che incide sulle prestazioni.

https://webdev.imgix.net/unused-css-rules/unused-css-rules.png
Remove unused CSS

I file .css scaricati dal browser, sono noti come fogli di stile esterni, poiché vengono memorizzati separatamente dall’HTML che lo utilizza.

Per impostazione predefinita, un browser deve scaricare, analizzare ed elaborare tutti i fogli di stile esterni che incontra prima di poter visualizzare o eseguire il rendering di qualsiasi contenuto sullo schermo di un utente. Non avrebbe senso per un browser tentare di visualizzare il contenuto prima che i fogli di stile siano stati elaborati, poiché i fogli di stile possono contenere regole che influiscono sullo stile della pagina.

Ogni foglio di stile esterno deve essere scaricato come download esterno e usufruire delle risorse di rete. Questa operazione di scaricamento extra, aumenta significativamente il tempo che gli utenti devono attendere, prima di vedere qualsiasi contenuto sui loro schermi.

I CSS inutilizzati rallentano anche la costruzione dell’albero di rendering di un browser. L’albero di rendering è simile all’albero DOM, tranne per il fatto che include anche gli stili per ciascun nodo. Per costruire l’albero di rendering, un browser deve percorrere l’intero albero DOM e verificare quali regole CSS si applicano a ciascun nodo. Più CSS non viene utilizzato, maggiore è il tempo che un browser potrebbe potenzialmente impiegare a calcolare gli stili per ciascun nodo.

Come rimuovere il CSS inutilizzato con WordPress

La soluzione è essenzialmente la stessa utilizzata per l’eliminazione dei CSS che bloccano le risorse della visualizzazione (paragrafo 1). Possiamo inserirli in linea o differire gli stili nel modo più logico per migliorare il caricamento delle vostre pagine web. È anche possibile utilizzare uno strumento come Chrome DevTools per trovare i CSS inutilizzati, che possono essere eliminati oppure ottimizzati.

Chrome DevTools: Coverage tab
Dev Tools

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Minimize main-thread work – 05

Il ‘thread principale è l’elemento primario del browser ed ha il compito di trasformare il codice di programmazione in una visualizzazione di una pagina web, con cui i visitatori possono interagire. Inoltre analizza ed esegue i comandi dettati dal codice HTML, CSS e JavaScript, responsabili della gestione delle interazioni con gli utenti.

https://i.stack.imgur.com/bXTaU.png
Minimize main-thread work

Come ridurre al minimo il lavoro del main-thread con WordPress

Il thread principale lavora sul codice del sito internet e non può contemporaneamente gestire anche le richieste degli utenti. Se l’elaborazione del codice da parte del thread principale richiede troppo tempo a causa di una scadente prestazione del codice, il rallentamento nel caricamento delle pagine segnalerà un errore. Si calcola che in circa 4 secondi il thread principale deve liberarsi dall’elaborazione, per dedicarsi alla gestione delle richieste. Un tempo superiore viene appunto segnalato come errore.

Alcuni dei metodi utilizzati, per ridurre il lavoro sul filo principale sono già stati trattati in altre sezioni di questo post, tra cui quelle dedicate a:

  • Minimizzare il codice
  • Rimuovere il codice non utilizzato
  • Implementare la cache

Tuttavia, si potrebbe anche prendere in considerazione la suddivisione del codice. Questo processo comporta la suddivisione di JavaScript in blocchi, che vengono eseguiti solo quando sono necessari, invece di richiedere ai browser di caricarli tutti prima che la pagina diventi interattiva.

Webpack è spesso utilizzato per dividere il codice. Si noti che si tratta di una tecnica abbastanza avanzata e che i principianti dovrebbero evitare di eseguire da soli.

https://codingjam.it/wp-content/uploads/2016/11/how-it-works.png
Webpack

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Reduce JavaScript execution time – 06

I siti internet di ultima generazione fanno uso, spesso eccessivo, di JavaScript ed Ajax. La diffusione di librerie JavaScript come JQuery, Mootols, Prototype, YUI Library, Dojo, ecc. ecc., ha consentito agli sviluppatori di siti web di creare con più facilità interfacce utili e altamente interattive come finestre modali, messaggi di notifica, gallerie di immagini, menu a scomparsa. Insomma, la disponibilità di plugin di questo tipo è praticamente infinita.

Questo comporta l’uso massiccio di JavaScript e la scrittura dei siti web è fortemente penalizzata in prestazioni che, di conseguenza, influiscono negativamente sulla velocità di caricamento delle pagine. Measure calcola la velocità di navigazione, testando proprio queste caratteristiche e rilevando i fattori che condizionano le performance di un sito web. Per eliminare questo inconveniente e ridurre il tempo di esecuzione di JavaScript, dobbiamo innanzitutto ridurre la complessità della struttura HTML del documento.

Come ridurre il tempo di esecuzione di JavaScript con WordPress

In linea generale la prassi consiste nel passare in esame il codice HTML, per eliminare i tag vuoti inutili, gli spazi bianchi, i commenti HTML, l’uso ridondante di nodi annidati (come ad esempio i <div>). Sono da controllare anche gli stili CSS, che non devono essere in linea nel documento, ma vanno collocati in un file CSS esterno (operazione già vista e discussa nei capitoli precedenti).

Lo stesso consiglio vale per il codice JavaScript. Una struttura HTML più semplice, oltre ad essere letta più velocemente dal browser, giova anche al tempo di esecuzione dei nostri script.

È ovvio che compiere anche solo alcune di queste operazioni, non è un gioco da ragazzi. Quindi affidiamoci ad alcuni dei migliori plugin per wordpress, che svolgeranno egregiamente il lavoro al posto nostro.

01 Merge Minify Refresh

Il plugin Unisciti + Minimizza + Aggiorna (Merge + Minimize + Refresh) è uno strumento molto interessante che agisce sulla compressione del codice CSS e JavaScript, inoltre combina i fogli di stile CSS e i file JavaScript in gruppi e li riduce al minimo.

02 WP Super Minify

Questo plugin ridimensiona e memorizza i file CSS e JavaScript nella cache accelerando così il loro nel PHP Framework. Lo strumento è un software open source. Quindi, per coloro che sono pratici di programmazione, possono adattarlo al meglio alle proprie esigenze. Nelle impostazioni non c’è molto da impostare, quindi accontentiamoci.

03 Fast Velocity Minify

Fast Velocity Minify consente di ottimizzare i tempi di caricamento e riduce le richieste HTTP unendo i file CSS e JavaScript. Dopo l’installazione troverai le opzioni offerte dal plugin un po’ difficoltose. Fortunatamente le impostazioni predefinite, permettono al sistema di compiere egregiamente quello che serve. 

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Reduce server response times (TTFB) – 07

Il Time to First Byte (TTFB) è il tempo necessario al browser per ricevere il primo byte di dati dal server/host su cui è depositato il vostro sito internet. Dal momento dell’invio di una richiesta viene calcolata la velocità complessiva di risposta. È quindi molto importante avere un TTFB basso. Se riceverete questo avviso, le prestazioni del vostro server/host sono da migliorare.

https://webdev.imgix.net/time-to-first-byte/time-to-first-byte.png
Reduce server response times (TTFB)

Come ridurre i tempi di risposta del server con WordPress

Le soluzioni per migliorare il TTFB sono molteplici e dipendono da diversi fattori. Tra quelle che ritengo più opportuno indicare, penso ci sia anche quella che risolverà il vostro problema:

  1. Scegliere un provider server/hosting web di alta qualità (il servizio potrebbe essere caro, ma vi garantisco che ne vale la pena. Questo è uno dei punti chiave per risolvere il problema)
  2. Utilizzare temi grafici e plugin leggeri, performanti e professionali nel CMS WordPress
  3. Ridurre al minimo indispensabile il numero di plugin, installati sul vostro sito
  4. Utilizzare una rete di distribuzione dei contenuti (CDN)
  5. Implementare un plugin per la cache del browser
  6. Tenere aggiornato linguaggio di script dal PHPMyAdmin all’ultima versione disponibile (ad oggi la 7.3)
https://it.siteground.com/img/other/1200x630_fb_IT.jpg
SiteGround Web Hosting

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Properly size images – 08

I file multimediali, come video, audio e immagini, possono essere un vero e proprio freno per le prestazioni del sito web. Il corretto dimensionamento e soprattutto la compressione giusta, che permette di non perdere qualità e guadagnare spazio sul disco, riduce notevolmente i tempi di caricamento di una pagina.

Properly size images

Usare immagini più grandi del necessario è comunque possibile: dovrai però utilizzare i CSS per ridimensionarle in modo appropriato. L’operazione di ridimensionamento è comunque un’operazione che richiede tempo, rispetto al semplice caricamento delle immagini. Per questo motivo, preoccuparsi della giusta dimensione, avrà un impatto positivo sulle prestazioni di caricamento delle pagine web.

Qual è la soluzione per caricare le immagini nelle dimensioni appropriate, visto che gli schermi dei dispositivi variano dai 4 fino ai 32 pollici? Un’immagine 640×480 pixel sullo smatphone da 4 pollici risulta essere adeguata, ma sullo schermo da 32 pollici la stessa immagine è minuscola…

L’unica soluzione è quella di utilizzare “immagini reattive”. Ciò comporta la creazione di immagini di dimensioni diverse per vari dispositivi. Ovviamente anche in questo caso non dovrai preoccuparti di creare centinaia di immagini, potrai optare nell’utilizzo dell’attributo “srcset”, che viene aggiunto ai tag < img> per specificare file immagine aventi dimensioni diverse. I browser potranno leggere preventivamente questo elenco, determinare quale sia l’opzione migliore per la schermata in uso dall’utente e fornire l’immagine con la dimensione appropriata.

Per esempio, si possono caricare tre versioni da: 800, 480 e 320 pixel di larghezza, per applicare l’attributo srcset, come è possibile vedere in questa stringa di programmazione:

<img srcset="header-image-800w.jpg 880w,
                                         Header-image-480w.jpg 480w,
                                         Header-image-320w.jpg 320w"
                    sizes="(max-width: 320px) 280px,
                                         (max-width: 480px) 440px,
                                         800px"
                    src="header-image-800w.jpg">

L’attributo srcset specifica le varie dimensioni dell’immagine messe a disposizione, mentre l’attributo sizes indica al browser quale deve essere utilizzata, in base alla dimensione dello schermo che sta utilizzando l’utente.

Usare immagini, adeguando le dimensioni con WordPress

Se non hai dimestichezza con il linguaggio di programmazione, non è un problema! Usa un tema grafico professionale come quelli proposti nei miei articoli precedenti, l’attributo srcset fa parte delle caratteristiche dei template professionali. I contenuti multimediali del tuo sito diventeranno automaticamente responsivi e si adatteranno a qualsiasi dispositivo usato dagli utenti.

Responsive design template

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Defer offscreen images – 09

Il processo di rinvio delle immagini fuori schermo, noto come “lazy loading”, significa che il browser, soprattutto nei dispositivi mobili cellulari, tende a caricare le immagini della pagina web da visualizzare, solo quando serve. Questa tecnica di programmazione viene principalmente utilizzata per le immagini perché solitamente sono tra le componenti che influiscono maggiormente sul tempo di caricamento (download) e che possono costituire dei punti di blocco in fase di rendering (visualizzazione). Se gli elementi più pesanti, come le immagini e i vari nodi del DOM, risultano già presenti in pagina, chi accederà al sito web, sarà costretto a scaricare tutti i contenuti anche se non dovesse usufruirne. Non è detto, infatti, che l’utente legga tutto o sia interessato all’intera pagina del sito. Di conseguenza potrebbe aver scaricato un sacco di dati inutilmente.

https://webdev.imgix.net/offscreen-images/offscreen-images.png
Defer offscreen images

Questo incide parecchio sulle prestazioni del nostro sito e di conseguenza anche sulla velocità. Sebbene siano varie le operazioni che possiamo svolgere, soprattutto quelle volte a migliorare la cache (vedesi capitolo 02), il fattore degli elementi fuori schermo impatta tantissimo sul caricamento di un sito internet.

I social network come Facebook utilizzano un metodo che si chiama infinite scroll. Vuol dire che le pagine non hanno fine, l’utente prosegue verso il basso fino a che non sia più interessato a proseguire e chiude il browser o l’applicazione di visualizzazione. Provate ad aprire il social network in questione e vi renderete immediatamente conto della dinamica usata. Al primo caricamento la pagina è fruibile e leggibile, ma quando l’utente ha effettuato piena fruizione degli elementi della pagina stessa, arrivando fino in fondo, cosa succede? Essendo programmato come “pagina infinito”, il social fa partire una richiesta AJAX che non fa altro che comunicare al browser di continuare a caricare i contenuti perché, l’utente vuole proseguire la navigazione e leggere oltre. Questa operazione si rivela fondamentale; pensate se per visualizzare una pagina di Facebook, l’utente dovesse scaricare sul proprio smartphone tutto quello che c’è sulla piattaforma del social network; sarebbe impossibile!

Rimandare le immagini fuori schermo con WordPress

A questo punto è facile capire l’importanza di rimandare le immagini fuori schermo e di poter dividere i processi di download dei contenuti solo quando servono. Per questo motivo consiglio di affidarsi ai migliori plugin per WordPress appositamente studiati per un corretto lazy load, tra cui A3 Lazy Load e Lazy Load by WP Rocket. Anche Autoptimize, di cui ho già parlato in precedenza, dispone di funzioni sul lazy load.

https://blog.serverplan.com/wp-content/uploads/2020/04/lazy-load.png
Plugin a3 Lazy Load

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Efficiently encode images – 10

Come già accennato in precedenza, le immagini hanno un impatto significativo sulle prestazioni di un sito web. L’ottimizzazione richiesta per codificare in maniera efficace le immagini è la compressione delle stesse. Ridurne le dimensioni senza sacrificare la qualità di risoluzione, permette una buona visualizzazione e un’ottima velocità di caricamento.

https://webdev.imgix.net/uses-optimized-images/uses-optimized-images.png
Efficiently encode images

Altre raccomandazioni, che influiscono sul controllo delle immagini codificate in modo efficiente, comprendono:

  • Adeguare le immagini nel giusto dimensionamento
  • Rimandare le immagini fuori schermo (paragrafo 09)
  • Pubblicare immagini nei formati più recenti, come WebP
  • Usare formati video per i contenuti animati

Codificare in modo efficace le immagini con WordPress

Plugin come Imagify e Smush possono aiutare a rispettare queste raccomandazioni.

https://ps.w.org/wp-smushit/assets/screenshot-4.png?rev=1997463
Plugin Smush

Il plugin, che consiglio caldamente di installare, è AMP. Questa implementazione è gratuita, per un numero limitato di immagini, mentre è a pagamento per siti web che contengono un numero elevato di file multimediali. Se non avete un sito di grandi dimensioni, è fondamentale usare AMP. Grazie a questo fantastico strumento, si possono migliorare i tempi di caricamento e anche il ranking (posizionamento sui motori di ricerca) del sito web.

Nell’ultimo anno sono stati apportati molti miglioramenti riguardanti le pratiche di ottimizzazione delle immagini ed ora sono tutte disponibili su AMP. Il sistema ha introdotto un’ulteriore ottimizzazione per connessioni di rete lente. I motori di ricerca, grazie a questa nuova implementazione, ridurranno i tempi di caricamento del 45% (massimo delle prestazioni consentite). Stupefacente vero?

https://wpastra.com/wp-content/uploads/2020/04/install-official-amp-plugin.jpg
Plugin AMP

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Serve images in next-gen formats – 11

Come già visto in precedenza, adeguare le immagini nei formati di nuova generazione, è una raccomandazione necessaria per ridurre i tempi di caricamento. Alcuni formati di file immagine di nuova generazione sono predisposti appositamente per gli ambienti web. Sfortunatamente i soliti formati PNG o JPEG frequentemente utilizzati, sono ormai obsoleti. Le immagini WebP stanno diventando il nuovo standard e continuare ad usare i vecchi standard non è più tollerato dai motori di ricerca.

https://webdev.imgix.net/uses-webp-images/uses-webp-images.png
Serve images in next-gen formats

Pubblicare immagini in formati più recenti con WordPress

Questa può sembrare una raccomandazione difficile da rispettare, derivante dal fatto che probabilmente ci sono già molte immagini sul tuo sito internet e sostituirle tutte, sarebbe una bella impresa. Per fortuna i plugin, di cui ho parlato nel paragrafo precedente (10), servono anche a trasformare tutte le immagini, contenute nel sito internet, nel nuovo formato WebP.

Online, inoltre, si possono trovare facilmente convertitori di immagini in formato WebP. Ce ne sono a bizzeffe. Converti le tue immagini e pubblicale nel nuovo formato sul tuo WordPress per evitare penalizzazioni dai motori di ricerca.

https://miro.medium.com/max/4000/1*5Q5G1CLfbWcP1dS4Eygrvg.png
WebP format

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Use video formats for animated content – 12

Le immagini animate, come per esempio le GIF, possono contribuire a rendere efficace un post o un articolo. Le animazioni umoristiche alzano il tono di una discussione e renderla divertente, aggiunge valore per i lettori.

Purtroppo questi benefici hanno un costo elevato, per le prestazioni di un sito web. Il caricamento di immagini in formato GIF richiede molte risorse. Per questo measure propone il consiglio: “usa formati video per i contenuti animati“. Si tratta di sostituire i formati GIF nei nuovi MP4 o WebM.

https://webdev.imgix.net/efficient-animated-content/efficient-animated-content.png
Use video formats for animated content

Purtroppo la conversione delle GIF in questi formati video di nuova generazione, non è la cosa più semplice del mondo.

Una volta fatta la scelta più sensata per il un video, è necessario convertire i formati dei file tramite una riga di comando. Sarà necessario installare FFmpeg, strumento open-source, per la conversione di formati di file.

Aprire l’interfaccia della riga di comando:

ffmpeg -i input.gif output.mp4

Questo comando convertirà la GIF in un video MP4. Tuttavia solo cambiare il formato non basta. È necessario anche incorporare il video in un modo che lo faccia apparire come se fosse una GIF animata.

Incorporare contenuti video per le animazioni

Se hai dimestichezza con i file GIF, sai benissimo che sono tutte in autoplay (partono in automatico): si comportano mostrando un loop infinito (seguono sempre lo stesso ciclo di movimento) e sono sempre senza suono. Incorporare il nuovo file MP4 o WebM sul sito internet, non avrà queste caratteristiche.

Tuttavia, è possibile creare un effetto simile aggiungendo quanto segue alla pagina o al post dove voi includere il video:

<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>

Usare formati video per i contenuti animati su WordPress

Quella precedentemente descritta, è la soluzione più accreditata per rendere un video il più simile possibile ad una GIF. Puoi comunque affidarti ai convertitori che trovi online. Anche in questo caso trovi tutto quello che ti serve sul online.

https://www.aranzulla.it/wp-content/contenuti/2016/01/xconvertire_gif1.jpg.pagespeed.ic.2CYYSDVsbi.jpg
Converti GIF in Video

Una volta convertita la tua GIF, puoi importarla su WordPress come file Video e potrai evitare l’errore su Measure.

Non essendo un fan sfegatato delle GIF o delle animazioni in generale sui siti web, questo passaggio me lo sono risparmiato a priori. Molto meglio una foto o un’immagine ben concepita per attirare l’attenzione del lettore. I contenuti superflui possono solo causare danni. Se metto a confronto i benefici, preferisco avere un sito internet indicizzato sui motori di ricerca, piuttosto che un’immagine animata.

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Ensure text remains visible during webfont load – 13

Quando parliamo di visibilità del testo, apriamo il concetto di font.

Il font è lo stile del carattere con cui viene scritto il testo. Anche questo che stai leggendo, è un font. Come le immagini, anche i font potrebbero essere file di grandi dimensioni, che richiedono molto tempo per essere caricati. In alcuni casi i browser possono impiegare molto tempo, fino a quando il font che stai usando, non viene completamente caricato. Questa operazione produce una latenza sul tempo di caricamento e quindi una penalizzazione da parte dei motori di ricerca.

https://webdev.imgix.net/font-display/font-display.png
Ensure text remains visible during webfont load

Il mio consiglio, per risolvere questo problema, è applicare la direttiva swap della Font Display API nel vostro stile @font-face. Per farlo, accedi al tuo foglio di stile (style.css) e aggiungi quanto segue dopo l’attributo src sotto @font-face:

font-display: swap

Assicurarsi che il testo rimanga visibile durante il caricamento dei caratteri web con WordPress

L’operazione descritta non è adatta ai neofiti; quindi l’unica opzione che ti rimane, è quella di scegliere un font web. Un font di tipo standard web non produce latenza ed è leggibile su qualsiasi dispositivo. Anche i temi grafici di tipo professionale aggiungono automaticamente l’attributo sopra descritto e non ti devi preoccupare di inserirlo manualmente. Usa un template grafico professionale, per evitare penalizzazioni dai motori di ricerca.

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Preconnect to required origins – 14

Le risorse di terze parti, sul vostro sito web, come per esempio Google Analytics, sono piuttosto comuni e largamente usate. Purtroppo però, i browser devono stabilire una connessione in più verso tali risorse. Questo rallenta il caricamento delle pagine web.

https://webdev.imgix.net/uses-rel-preconnect/uses-rel-preconnect.png
Preconnect to required origins

Implementare preload e preconnect in WordPress

Se Measure ritiene che una pagina web possa trarre beneficio da questa soluzione, vedrai il suggerimento di preconnect to required origins. È possibile utilizzare il tag di precaricamento o preconnessione, per indicare al browser di recuperare in anticipo alcune delle risorse statiche. Queste operazioni sono raccomandate se:

1. usiamo risorse di terze parti. Avvisare con il comando preconnect il browser, suggerendo subito di stabilire una connessione ad altri domini in background, permette di risparmiare tempo per la ricerca DNS, il reindirizzamento, l’handshake TCP, la negoziazione TLS, ecc. ecc. Permettiamo in questo modo di ridurre la latenza e forniamo un caricamento rapido delle risorse.

2. si prevede che gli utenti visitino più pagine del sito web in successione. Accade spesso nei siti e-commerce, in cui l’utente esterno visita la pagina del prodotto, successivamente quella sulle informazioni per poi aggiungere il prodotto al carrello, pagare e terminare la transazione. Un sacco di pagine da visualizzare, una dietro l’altra. Quindi premunirsi di usare il comando preload aiuta in maniera significativa il browser a caricare le informazioni che l’utente visiterà, rendendo così la navigazione fluida e priva di attese inutili.

Ho già parlato di WP Rocket, un plugin premium (a pagamento) che potenzia in maniera considerevole le prestazioni del sito web con molte tecniche essenziali. Fra queste c’è anche il precaricamento della cache e della sitemap.

https://www.buddyboss.com/wp-content/uploads/2020/04/WP-Rocket-%E2%80%93-Setting-up-the-plugin.png
Plugin WP Rocket

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Preload key requests – 15

Partendo dal presupposto che questa raccomandazione è molto simile a quella del paragrafo precedente, potrete ridurre al minimo il numero di richieste che i browser devono fare al server del sito internet, permettendo agli stessi di memorizzare nella cache alcuni contenuti attraverso la funzione di precaricamento delle key requests. Questa operazione di memorizzazione nella cache, aiuta a migliorare la velocità di caricamento delle pagine di un sito web.

https://webdev.imgix.net/uses-rel-preload/uses-rel-preload.png
Preload key requests

Precaricare le richieste fondamentali in WordPress

Anche in questo caso WP Rocket è l’applicazione che ha la soluzione tecnica, con la quale aggiungere tag link al file header.php diventa un gioco da ragazzi. Il plugin aggiungerà automaticamente questa stringa:

<link rel=“preload” href=“example.com”>
https://v3b4d4f5.rocketcdn.me/wp-content/uploads/1/new-preload-system.png

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Avoid multiple page redirect – 16

I reindirizzamenti vengono utilizzati, quando un URL di partenza finisce in una pagina di destinazione diversa. Un esempio di reindirizzamento potrebbe essere https://www.1234.com >> https://www.4321.com.

Anche se un reindirizzamento è comunemente usato, quando si cancella una pagina del sito web e si vuole evitare l’errore 404 page not found (pagina non trovata), questo aumenta il tempo di caricamento.

https://webdev.imgix.net/redirects/redirects.png
Avoid multiple page redirect

Evita i reindirizzamenti tra più pagine su WordPress

Sinceramente su questo punto non c’è molto da dire. L’unica cosa che si può fare, in risposta a questa raccomandazione, è assicurarsi di utilizzare il plugin redirect solo quando è assolutamente necessario, evitando di indirizzare gli url su pagine che poi, a loro volta, verranno cancellate e reindirizzate ulteriormente.

Cerchi aiuto? Clicca qui, se desideri contattarmi e chiedere assistenza.

Conclusioni finali

Sappiamo benissimo quanto conti la velocità di caricamento per i siti web al giorno d’oggi. Velocità basse comportano alte frequenze di rimbalzo (gli utenti abbandonano la navigazione su quel sito web e cercano altro). La conseguenza potrebbe essere fatale; meno visitatori, meno conversioni e persino meno vendite, se parliamo di siti aziendali. Ancora peggio quando parliamo di scansioni da parte dei motori di ricerca che, inevitabilmente segnalano questa situazione come un errore.

Measure dovrebbe essere considerato un punto di partenza, per effettuare un’analisi approfondita del proprio sito web. Ho citato solo alcuni degli errori e consigli forniti dal servizio. Ce ne sono così tanti, che potrebbe diventare paranoico soffermarsi sul proprio punteggio.

Piuttosto preferisco che alcune di queste brevi linee guida, sviluppate per l’ottimizzazione dei siti web, possano migliorarne le prestazioni e di conseguenza anche l’indicizzazione sui motori di ricerca.


Se vuoi mettere il turbo al tuo sito web, contattami!


É vietata la copia e la riproduzione dei contenuti di questo articolo.
É vietata la redistribuzione e la pubblicazione dei contenuti non autorizzata espressamente dall’autore.

Copyright © Antonino Mariano · all rights reserved.

Siti internet professionali

Chiama

    La informiamo che i dati forniti, saranno trattati nel rispetto delle disposizioni vigenti e rispettano il Regolamento in materia di protezione dei dati personali.

    Facebook Linkedin
    WhatsApp Chiedi info