Una guida dettagliata ed approfondita di tutte le possibili attività legate all’uso della Search Console di Google.

Test di velocità

Impatto commerciale di Pagespeed

La velocità delle pagine (Pagespeed/Load Time) influenza direttamente le conversioni, il tempo di permanenza sulla pagina, la frequenza di rimbalzo, il tempo di lettura, il posizionamento nei risultati dei motori di ricerca Google, l’esperienza dell’utente e le entrate. Per i siti di e- commerce, il miglioramento della velocità delle pagine aumenta le vendite, riduce la quantità di carrelli abbandonati e aumenta la percentuale di utenti che completano il processo di pagamento.

L’ottimizzazione delle prestazioni è una delle cose più importanti che si possono fare per migliorare un sito web, sia per migliorare l’esperienza dell’utente che per aumentare il fatturato generato dall’azienda.

Articolo di Web.dev

https://web.dev/case-studies/vitals-business-impact

Analisi dell’impatto commerciale dei miglioramenti di Core Web Vitals direttamente da Google.

Articolo su case histor

https://www.conductor.com/academy/page-speed-resources/

Un altro articolo con solidi casi di studio dei miglioramenti in molte metriche che i siti hanno riscontrato dopo aver migliorato il loro Pagespeed.

Rapporto Deloitte

https://www.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Mill ions_report.pdf

Un’analisi approfondita dell’impatto di Pagespeed Improvement sulle entrate delle aziende.

Spiegazione delle metriche

Articolo creativo sulla fuga

https://escapecreative.io/google-pagespeed-insights-explained/

Questa pagina offre una buona panoramica delle metriche e del loro significato.

Articolo di Corelogix

https://coralogix.com/guides/real-user-monitoring/core-web-vitals/

Un altro utile articolo con spiegazioni piuttosto approfondite delle varie metriche di Core Web Vitals e delle loro definizioni.

Documentazione sui dati vitali del web di Google

https://web.dev/articles/vitals

Documentazione e definizioni di Core Web Vitals direttamente da Google.

Perché i punteggi dei test cambiano ogni volta che si esegue un test di velocità?

Sono molti i fattori che influiscono sul punteggio ottenuto in questi test. Queste variabili possono andare dalla vostra posizione rispetto al sito web, all’attività sul vostro server, ai percorsi e alla variabilità della rete e persino all’attività in background del vostro dispositivo locale. Ci sarà sempre una variazione tra i test, tra tutti i fornitori di test di velocità, e non ci saranno due test esattamente uguali, indipendentemente dal test di velocità utilizzato.

Se il sito è ben ottimizzato, l’intervallo di valori sarà minore e si otterranno punteggi più coerenti nello stesso intervallo, mentre un sito non ottimizzato avrà punteggi molto variabili tra i test.

Tuttavia, come già detto, ci sarà sempre una variazione tra i test, sia per i dispositivi mobili che per quelli desktop.

Nota: i punteggi reali si misurano meglio come media di più test di velocità della pagina.

In genere eseguo 3 test prima di fare una media.

I punteggi di velocità delle pagine mobili sono gli unici che contano

Il motivo per cui le prestazioni mobili sono l’unica cosa che conta è molteplice.

Il miglioramento dei punteggi mobile migliora intrinsecamente i punteggi desktop.

La fonte dei problemi di velocità delle pagine (css, js, immagini non ottimizzate, ecc.) non è specifica dei dispositivi mobili o desktop, ma il loro impatto è universale e viene avvertito sia dagli utenti desktop che da quelli mobili.

Tuttavia, gli impatti di ciascun problema di prestazioni sono più accentuati sui dispositivi mobili e l’impatto sulle prestazioni di questi svantaggi è maggiore.

Non esistono ottimizzazioni “uniche” che migliorano le prestazioni solo su mobile o solo su desktop. Quando si migliorano le prestazioni per i dispositivi mobili, si migliorano le prestazioni di tutto il sistema, compreso il desktop.

La telefonia mobile presenta una maggiore variabilità tra i punteggi dei test

I punteggi presentano una maggiore variabilità. Se ci si basasse solo sui punteggi del Desktop, si potrebbe facilmente finire con l’ingannarsi sul fatto che non è necessario ottimizzare nient’altro.

È abbastanza facile ottenere un sito desktop con un tempo di caricamento inferiore a 1 secondo e ottenere 90+ o 100/100 su desktop è generalmente una passeggiata, ma questo è solo il desktop.

I problemi di prestazioni hanno un impatto maggiore sui dispositivi mobili

Un tempo di caricamento di 1 secondo su desktop può essere compreso tra 2 e 6 secondi su mobile, potenzialmente peggiore a causa della maggiore potenza dei desktop rispetto ai dispositivi mobili.

Questo perché le condizioni della rete possono cambiare (servizio cellulare o distanza da un punto di accesso alla rete Wifi) e anche il carico del dispositivo è in costante evoluzione. Ogni kilobyte aggiuntivo di dati (in particolare le immagini) ha un effetto molto maggiore sulle prestazioni di un dispositivo mobile rispetto a un dispositivo desktop.

Un’immagine di 60 KB rispetto a un’immagine di 30 KB può non avere alcun impatto sul punteggio totale delle prestazioni del desktop su 100, ma la differenza di dimensioni può certamente avere un impatto notevole sul mobile.

I punteggi dei desktop possono mostrare 0 CLS, ma questo può essere molto ingannevole, poiché i dispositivi mobili possono avere una grande quantità di CLS quando accedono allo stesso sito web.

I test di velocità delle pagine mobili vengono eseguiti in condizioni simulate e controllate.

Queste condizioni simulate sono equivalenti allo “scenario peggiore” di un dispositivo sottoalimentato (attualmente l’obiettivo simulato è un Moto G Power).

La ponderazione di Google per la velocità delle pagine nelle classifiche Sono classificate in base alla velocità delle pagine mobili, sempre, senza eccezioni.

Il fatto che la maggior parte del traffico del vostro sito sia su Desktop o su Mobile è irrilevante ai fini del posizionamento della vostra pagina web da parte di Google. Quando classifica un sito

web, Google non si preoccupa delle prestazioni del desktop. Oltre l’80% del traffico su Internet proviene da dispositivi mobili e Google calcola le classifiche di conseguenza. Anche se gli utenti del vostro sito web navigano in maggioranza da dispositivi desktop, il vostro punteggio mobile è l’unico che verrà considerato come fattore di ranking.

I punteggi dei desktop sono irrilevanti

I punteggi dei desktop hanno un valore diagnostico talmente scarso da essere sostanzialmente inutili. In effetti, il loro unico valore diagnostico è quello di una metrica inversa. Punteggi scadenti per il desktop indicano una cosa e una sola: un’enorme quantità di problemi di prestazioni che devono essere risolti. Buoni punteggi di prestazioni per il desktop non indicano in alcun modo il livello di ottimizzazione di un sito web.

Hanno un valore così basso che possono essere sommariamente ignorati, i punteggi del Desktop sono irrilevanti.

Nella stragrande maggioranza dei casi, le schermate di un sito web con punteggi elevati negli anni ’90 mostrano generalmente punteggi relativi alle prestazioni del desktop. Chiunque si vanti dei propri punteggi relativi alle prestazioni su Desktop sta ingannando se stesso e i propri clienti e la reazione immediata dovrebbe essere di scetticismo e di aprire immediatamente la console del proprio browser con l’ispezione per eseguire un test mobile lighthouse sul proprio sito web.

La quantità di “esperti” di prestazioni che affermano che una buona prestazione del desktop significa che il loro sito è ben ottimizzato è di gran lunga troppo elevata.

Esempio di prestazioni su desktop e prestazioni su mobile

Ecco un ottimo esempio di un sito con buoni punteggi di performance per il desktop e scarsi per il mobile. Verificate sempre quali sono i punteggi mobile di un sito quando afferma di avere prestazioni solide, quasi sempre si riferisce al Desktop.

La versione Desktop ha ottenuto un punteggio molto buono, con quasi zero CLS e tutte le metriche visualizzate come caricamento in meno di 1 secondo, eppure i punteggi Mobile sono completamente diversi da quelli Desktop. Google incorporerà gli scarsi punteggi di Mobile Pagespeed di questo sito come metriche di performance nel loro punteggio di ranking, senza dare peso al punteggio del Desktop.

TTFB

Componenti TTFB DNS

Il tempo di ricerca DNS è il tempo necessario per interrogare e ricevere una risposta da un server DNS con l’indirizzo IP del dominio. Se la risposta DNS non viene memorizzata nella cache locale, questo processo può aggiungere un tempo significativo al TTFB.

Come ottimizzare la parte DNS di TTFB

Utilizzate un provider DNS veloce con cache DNS, come Cloudflare. Anche se non lo utilizzate come CDN, vi consiglio vivamente di utilizzarlo come provider DNS.

Collegare

Il tempo di connessione include il tempo necessario per eseguire l’handshake TCP, essenziale per impostare una connessione TCP prima che possano essere inviati i dati. In genere, questo comporta l’invio di pacchetti SYN e ACK tra il client e il server per confermare la connessione.

Come ottimizzare la parte Connect di TTFB

Seguire i passi della sezione ottimizzazione TCP della sezione VPS.

SSL

Il tempo di handshake SSL/TLS è la durata dell’autenticazione del server (e facoltativamente del client), nonché della negoziazione della crittografia e dello scambio di chiavi per la sessione. Questo processo comporta diverse fasi di scambio di messaggi e può aggiungere un tempo considerevole al TTFB, soprattutto nei casi in cui viene stabilita una nuova sessione senza utilizzare tecniche di ripresa della sessione.

Come ottimizzare la parte SSL di TTFB

La sezione sull’ottimizzazione SSL contiene numerose risorse su come ottimizzare la velocità della connessione SSL.

Invio

Questo componente misura il tempo necessario per inviare il primo byte della risposta dal server al client dopo che il server ha terminato l’elaborazione della richiesta. Questo include il tempo necessario per inviare i dati iniziali dell’intestazione della risposta HTTP.

Come ottimizzare la parte di invio della

compressione TTFB Brotli/Gzip

Utilizzare tecniche di compressione come GZIP o Brotli per comprimere i dati inviati dal server. In questo modo si riduce la dimensione dei dati trasmessi, diminuendo il tempo necessario al primo byte per raggiungere il client. È particolarmente efficace per i contenuti basati sul testo, come i file HTML, CSS e JavaScript.

Ottimizzare la configurazione del server

Assicuratevi che il vostro server sia ben configurato per gestire le richieste in modo efficiente. Ciò include la messa a punto delle impostazioni del software del server web (come Apache o Nginx) per ottenere prestazioni migliori, regolando i processi worker, le impostazioni di keep- alive e la gestione delle richieste dei client.

Considerate l’utilizzo di un reverse proxy o di un bilanciatore di carico in grado di gestire le connessioni e distribuire il traffico in modo efficace, riducendo al minimo i ritardi nell’invio dei dati.

Utilizzare HTTP/2 o HTTP/3

Implementare HTTP/2 o HTTP/3, poiché entrambi i protocolli apportano miglioramenti rispetto a HTTP/1.1, riducendo l’overhead associato all’invio dei dati. HTTP/2 introduce il multiplexing, che consente di mescolare più richieste e risposte su una singola connessione, riducendo la latenza associata alla creazione di più connessioni TCP. HTTP/3 migliora ulteriormente il processo riducendo il tempo di creazione della connessione e minimizzando l’impatto della perdita dei pacchetti.

.

Ridurre al minimo i ritardi dell’handshake TLS

• Se si utilizza HTTPS (consigliato), ottimizzare le impostazioni SSL/TLS scegliendo suite di cifratura più veloci che richiedono meno potenza di calcolo e supportano tecniche come TLS False Start e Session Resumption. Questi metodi possono ridurre significativamente il tempo necessario per stabilire una connessione sicura, accelerando così la fase di invio.
• Considerate l’utilizzo di una Content Delivery Network (CDN) con nodi edge che supportano le moderne funzionalità TLS e sono più vicini ai vostri utenti per ridurre la distanza che i dati devono percorrere.

(Ulteriori strategie di ottimizzazione SSL sono riportate nella sezione Ottimizzazione SSL di cui sopra) Revisione e ottimizzazione del codice dell’applicazione

Analizzare e ottimizzare il codice di backend dell’applicazione. Assicuratevi che qualsiasi scripting lato server (come PHP, Python o Node.js) sia ottimizzato per le prestazioni. Ciò include la riduzione dei tempi di interrogazione del database, l’ottimizzazione degli algoritmi e l’elaborazione efficiente dei dati.

Utilizzate gli strumenti di performance lato server per monitorare e identificare i colli di bottiglia in tempo reale.

Questo comprende anche tutte le ottimizzazioni di WordPress riportate di seguito. Rete di consegna dei contenuti (CDN)

La distribuzione dei contenuti attraverso una CDN può potenzialmente ridurre in modo significativo il tempo di invio. Le CDN archiviano copie dei vostri dati in più località geografiche, riducendo la distanza fisica tra il server e il client e minimizzando così il tempo di viaggio dei dati.

Ottimizzazione del database

Ottimizzare le query del database per garantire che vengano eseguite rapidamente e non diventino un collo di bottiglia. Un’indicizzazione efficiente, l’ottimizzazione delle query e strategie di caching appropriate possono ridurre il tempo necessario al server per recuperare i dati e iniziare a inviarli al client.

(L’ottimizzazione del database ha una sezione in basso)

Attesa (tempo di elaborazione del server)

È il tempo impiegato dal server per elaborare la richiesta e preparare la risposta. Include il tempo necessario per eseguire gli script lato server, interrogare i database e caricare le risorse necessarie per generare la risposta.

Come ottimizzare la porzione di attesa del TTFB

Ottimizzare WordPress a livello di applicazione. È qui che entra in gioco l’ottimizzazione di WordPress. JavaScript in linea, peso dell’HTML, CSS in linea, ecc. È qui che entrano in gioco il DOM dell’HTML e la dimensione del documento.

Ricezione

Questo componente finale tiene conto del tempo necessario al client per ricevere il primo byte di dati dal server.

Come ottimizzare la parte di ricezione del TTFB

1. Ridurre le dimensioni della risposta del server

Per la parte ricevente, i file CSS e JavaScript sia in linea che esterni sono importanti perché possono influenzare la dimensione della risposta iniziale del server. Mentre le risorse inline si aggiungono direttamente alle dimensioni del documento HTML, i file esterni contribuiscono al numero complessivo di byte che il browser deve gestire dopo la ricezione dell’HTML iniziale.

Ridurre la dimensione complessiva di queste risorse (sia in linea che esterne) può ridurre il tempo necessario al client per iniziare a ricevere i dati dal server. Tecniche come la minificazione e la compressione (con GZIP o Brotli) di queste risorse sono direttamente applicabili.

1. Semplificare il carico iniziale

Fornire solo ciò che è necessario per il rendering iniziale della pagina. Ciò potrebbe significare ottimizzare l’HTML per includere solo i CSS/JS inline essenziali e rinviare tutto il resto.

Per le risorse esterne, regolare la tempistica del loro recupero (tramite gli attributi async e defer nei tag di script) in modo che non intasino il payload iniziale, ritardando potenzialmente l’inizio della trasmissione dei dati.

Seguire i passaggi di ottimizzazione di WordPress riportati di seguito

1. Utilizzare HTTP/2 o HTTP/3

Sia HTTP/2 che HTTP/3 migliorano l’efficienza del trasferimento dei dati. La funzione di multiplexing di HTTP/2 consente di mescolare più richieste e risposte tra client e server su un’unica connessione, riducendo l’overhead causato da connessioni multiple.

HTTP/3 migliora ulteriormente questo aspetto riducendo la latenza della connessione e del trasporto, utilizzando QUIC, che può iniziare a inviare i dati non appena viene stabilita la connessione, riducendo potenzialmente il ritardo nella ricezione del primo byte.

1. Uso efficiente di TCP e regolazione delle finestre TCP

Ottimizzare le impostazioni TCP, compresa la finestra di congestione iniziale, che può influenzare la quantità di dati che possono essere inviati all’inizio della connessione. Una finestra più grande permette di avere più dati “in volo” sulla rete, riducendo potenzialmente il tempo di ricezione del primo byte.

Assicurarsi che lo stack TCP del server sia ottimizzato per una consegna rapida, il che include considerazioni sull’avvio lento del TCP, sui riconoscimenti e sulle ritrasmissioni.

L’Ottimizzazione TCP è una sottosezione della sezione VPS

ByteCheck (gratuito)

https://www.bytecheck.com/

Byte Check fornisce un’ottima analisi del TTFB e lo suddivide nei suoi componenti (DNS, tempo di connessione, SSL, invio, attesa, ricezione).

Byte Check indica un tempo di elaborazione di 16 MS dal server di origine, che viene suddiviso in un componente separato etichettato come TTFB. Nella maggior parte degli altri test di velocità, il valore totale di 154 MS, che comprende i 6 componenti sulla destra, viene indicato come TTFB.

Ciò significa che GTMetrix, Debug Bear, ecc. visualizzeranno il TTFB come il tempo totale prima che i file inizino a essere serviti dal browser dell’utente. Mentre Debug Bear e GTMetrix includono piccole sottosezioni nei loro grafici a cascata per la richiesta iniziale del documento html, Bytecheck è molto più facile da interpretare e leggere ed è lo strumento migliore per misurare il TTFB.

Byte Check è un utile test di velocità da utilizzare come complemento a Debug Bear/GtMetrix/Pagespeed insights.

Nota

Avviso a tutti coloro che utilizzano Bytecheck: assicuratevi che il codice di risposta HTTP non sia un 403. A Cloudflare piace bloccare Bytecheck, restituendo un 403, ma Bytecheck non lo rende immediatamente evidente se non si controlla il codice di risposta HTTP. Quindi i risultati possono sembrare eccellenti, ma in realtà è perché viene caricata solo una pagina di errore 403 di base.

Merito di /u/TTEH3 su Reddit.

Che cos’è un buon TTFB?

Meno di 300 SM per il desktop e meno di 500 per il mobile.

Contrariamente a quanto dicono molte guide online, un TTFB superiore a 300 ms su Desktop è inaccettabile. Molti siti vi diranno che è inferiore a 800 ms, che in parole povere è… generoso. Si tratta di un TTFB ridicolmente, assurdamente grande e di un valore riservato ai pigri. Per i siti che ottimizzo, dopo l’ottimizzazione il TTFB è generalmente pari a ~200 ms. Mi arrabbio con me stesso quando non riesco a scendere sotto i 300 ms. Su un buon host posso raggiungere i 150-200 ms quando il sito è completamente ottimizzato, a seconda del modo in cui è stato costruito. Quando il sito ha un TTFB elevato, lo si sente. Ridurre il punteggio TTFB è fondamentale per la velocità delle pagine.

Mobile TTFB

Nota: il TTFB mobile sarà sempre più grande del TTFB desktop. Un TTFB inferiore a 300 MS è per i punteggi del desktop, mentre per il TTFB mobile si deve puntare a un massimo di

~400-500 MS, se possibile. Poiché il TTFB ha 6 componenti diversi, può essere una sfida ridurre il tempo di TTFB a un valore ragionevole, quindi preparatevi a un po’ di tentativi ed errori.

Se il vostro sito viene testato con un TTFB desktop superiore a 300 o un TTFB mobile superiore a 500 MS, è probabile che vi siano ancora opportunità di ottimizzazione non implementate.

Non avete bisogno di piani di test di velocità a pagamento

Tutto ciò che serve per ottimizzare un sito può essere ricavato dai test di velocità gratuiti. I piani di speed test a pagamento non sono assolutamente necessari, a meno che non si desideri un monitoraggio continuo. Anche in questo caso, ci sono 2 strumenti gratuiti open source autogestiti inclusi in fondo a questa sezione per il monitoraggio continuo.

Grafici a cascata

Come analizzare un grafico a cascata

https://www.keycdn.com/blog/waterfall-analysis

Peso della pagina e riduzione della quantità di file caricati.

Uno degli obiettivi principali dell’ottimizzazione è ridurre il peso totale (dimensione in KB/MB) di una pagina al minimo indispensabile.

Per le sezioni seguenti utilizzo un grafico a cascata di GTMetrix, ma qualsiasi grafico a cascata contiene le stesse informazioni.

1. Inserite l’URL che volete sottoporre a speed test:
2. È possibile vedere il peso del file di una pagina nella parte inferiore del grafico a cascata di GTMetrix, un altro motivo per cui è uno degli strumenti più utili per i test di velocità.

1. L’altra metrica importante che si sta cercando di ridurre è il numero di richieste, mostrato nella parte inferiore della waterfall di GTMetrix.

Sia il peso totale della pagina che il numero di richieste devono essere ridotti ai valori minimi possibili.

1. Ecco come ordinare i file per dimensione:

Qual è il peso ideale della pagina?

Il peso ideale di una pagina è di 500 kb o meno. La homepage del mio sito con Elementor + Woocommerce è di 168 kb prima dell’interazione con l’utente.

Come filtrare per tipo di file

Ecco come filtrare per tipo di file su GTMetrix. Debug Bear dispone di filtri simili:

Ogni richiesta aggiuntiva (anche se incredibilmente piccola, persino una richiesta di 0,3 kb) aggiunge ulteriore latenza. Eliminate il maggior numero possibile di richieste. Ritardare i file javascript annullerà completamente l’impatto sulla velocità delle pagine, poiché i file non verranno scaricati prima dell’interazione con l’utente. È così che il peso della pagina del mio sito viene testato a 250 kb.

La pagina verrà caricata istantaneamente e il javascript non avrà alcun impatto sul tempo di caricamento iniziale della pagina. L’utente non subirà alcun ritardo visibile o impatto sulle prestazioni quando il javascript ritardato viene caricato.

Come identificare i file che devono essere ottimizzati

Gli obiettivi principali per l’ottimizzazione sono i file Javascript e di immagine. I file CSS possono essere eliminati in un colpo solo con la rimozione dei CSS inutilizzati (a meno che non sia necessario aggiungere esclusioni alla funzione di rimozione dei CSS).

Basandoci sull’immagine precedente, analizziamo file per file. Lazysizes.min.js non può essere ritardato o differito. Questo perché lazysizes è un file JS di ottimizzazione che modifica il caricamento delle immagini per migliorare la velocità della pagina.

Tingle.js, pur essendo piccolo (3 kb), è probabilmente un file estraneo che non deve essere caricato immediatamente. Dovrebbe essere ritardato (e aggiungere un’esclusione, se necessario). Si vuole ridurre il più possibile la quantità di file da caricare, anche se sono piccoli.

Keen_slider.js può essere tranquillamente ritardato. Un cursore richiede l’interazione dell’utente per funzionare, quindi, a meno che il cursore non sia impostato per la riproduzione automatica tra le diverse foto e questa funzione sia necessaria subito dopo il caricamento del cursore, può essere ritardato senza problemi. Se il plugin del cursore è sensibile al ritardo e il file non può essere ritardato, aggiungere un’esclusione.

Global.js sembra qualcosa che Klaviyo caricherebbe. Se si espande l’elemento della cascata, si può vedere da dove proviene il file. Un plugin, una terza parte, ecc. In base a queste informazioni, è possibile capire se si tratta di un buon obiettivo da ritardare.

Main.js e Klaviyo.min.js sono entrambi file di terze parti. Provengono rispettivamente da Order Groove e da Klaviyo. Tra i due, Order Groove ha maggiori probabilità di rompere qualcosa perché sembra far parte del set di funzionalità dell’e-commerce. Klaviyo è per l’analisi e può essere tranquillamente rimandato. Il file di Order Groove deve essere testato per garantire che non interrompa alcuna funzionalità.

Consiglierei di provare a ritardare ogni file js individualmente, uno alla volta, per essere sicuri. Se possibile, non si vuole lasciare sul tavolo alcuna prestazione non ritardandola. Per ribadire che si vuole ridurre il più possibile la quantità di file caricati durante il caricamento iniziale della pagina.

Quale test di velocità utilizzare per la diagnosi

Per i dispositivi mobili, lo strumento migliore per eseguire i test è Debug Bear.

Debug Bear è superiore a Pagespeed insights per i punteggi Mobile e fornisce informazioni più efficaci su ciò che è necessario ottimizzare, in quanto è possibile accedere al grafico a cascata per vedere i tempi di caricamento di file specifici, nonché un elenco di tutti i file CSS e JS che vengono caricati su una pagina specifica che si sta testando. È possibile eseguire il test su singoli URL, come la homepage, una pagina informativa, una pagina di servizio o qualsiasi altra cosa si voglia verificare sul sito che si sta testando.

Se il vostro punteggio Mobile è buono su Debug Bear, dovrebbe essere sufficiente per Google.

Strumenti di Chrome Dev Scheda di rete

La scheda di rete degli strumenti di Chrome dev è accessibile facendo clic con il pulsante destro del mouse su una pagina, facendo clic su “ispeziona” e quindi facendo clic sulla scheda di rete nella parte superiore del pannello. Sebbene la scheda di rete negli strumenti di sviluppo fornisca informazioni meno dettagliate rispetto a Debug Bear, è possibile accedervi semplicemente facendo clic con il pulsante destro del mouse su una pagina e facendo clic su ispeziona. È utile per un’analisi rapida dell’albero delle richieste di un dominio, ma per un’analisi approfondita si raccomanda Debug Bear.

Test di velocità della pagina mobile

Nota: per i test di velocità sui dispositivi mobili (gli unici che contano davvero), Pagespeed Insights è il punto di arrivo della barra del limbo, ma la sua utilità diagnostica

(per capire cosa è necessario ottimizzare) è praticamente nulla. È necessario utilizzare strumenti di terze parti per identificare effettivamente i problemi.

Google Pagespeed Insights (gratuito)

https://pagespeed.web.dev/

È necessario soddisfare i test di velocità di Google per la SEO. Altri siti possono offrire test di velocità delle pagine mobili e forse hanno un grafico a cascata per i dispositivi mobili, ma la soluzione definitiva per i test mobili è lo strumento di test Pagespeed Insights di Google.

Sebbene stiate cercando di offrire all’utente la migliore esperienza possibile su mobile (poiché la maggior parte del traffico del sito proverrà da mobile), l’unica azienda che dovete soddisfare per i test di velocità è Google, perché è il guardiano della SEO. Bing invia meno del 5% del traffico ai vostri siti rispetto a Google e se le vostre metriche soddisfano Google, soddisferanno anche Bing. Per la SEO vi interessa solo ottimizzare per Google.

Debug Bear (gratuito)

https://www.debugbear.com/test/website-speed

Uso Debug Bear per diagnosticare i miei problemi, ma Pagespeed insights per valutare quanto ancora devo fare per le mie ottimizzazioni.

L’obiettivo è sempre quello di ottimizzare il punteggio mobile su Pagespeed Insights. Pagespeed Insights è l’unica metrica utilizzata da Google per il ranking dei risultati di ricerca. Debug Bear serve semplicemente per la diagnosi, in modo da sapere cosa correggere.

Non lo sottolineerò mai abbastanza: le metriche che Pagespeed Insights misura per il mobile sono le uniche che contano. I punteggi di Debug Bear hanno un valore reale solo come indicatore dei vostri progressi e di ciò che dovete correggere.

Se il punteggio mobile migliora su Debug Bear, migliorerà anche il punteggio delle prestazioni mobili su Pagespeed Insights.

Strumenti Debug Bear (gratuito)

https://www.debugbear.com/tools

Una raccolta molto utile di strumenti gratuiti per il test della velocità delle pagine

Strumenti del laboratorio giallo (gratuito)

Versione online (gratuita)

https://yellowlab.tools/

Yellow Lab Tools dispone di alcune metriche uniche che possono essere utili in alcuni casi per diagnosticare problemi che potrebbero non essere indicati da altri scanner.

Immagine Docker (gratuita)

https://github.com/YellowLabTools/YellowLabTools

Immagine Docker per gli strumenti Yellow Lab.

Test di velocità delle pagine in blocco

Esperto (gratuito)

https://www.experte.com/pagespeed

Test di massa di più pagine di un sito in una sola volta.

Ottimizzare i punteggi dei dati di laboratorio di Pagespeed Insights

Ottimizzate sempre per i dati di laboratorio. Quasi tutti gli altri tutorial vi diranno di concentrarvi sui dati di campo, i tempi di caricamento sui dispositivi degli utenti del mondo reale. Quando si esegue una scansione pagespeed, i punteggi che vengono immediatamente riportati (indipendentemente dal servizio utilizzato) sono “dati di laboratorio”. Quando si migliorano le metriche dei test di laboratorio, si migliora intrinsecamente il tempo di caricamento nel mondo reale, i dati sul campo, per gli utenti. Le metriche dei dati di laboratorio sono lì per un motivo. I test di velocità delle pagine “sintetici” (dati di laboratorio) sono gli unici punteggi per i quali si può effettivamente ottimizzare, poiché è quello che i test di velocità delle pagine generano. Le metriche del mondo reale (dati sul campo) sono raccolte in un periodo di 30 giorni, il che non ha alcuna utilità diagnostica.

Prestazioni nel mondo reale

La velocità può sembrare artificialmente più alta nei test di velocità (cioè i punteggi sono migliorati), ma nel mondo reale potrebbe caricarsi più velocemente di quanto riportato nei test di velocità. I miglioramenti dei tempi di caricamento nel mondo reale sono più importanti dei risultati di laboratorio di Pagespeed Insights, ma sono direttamente legati ai dati sul campo. I miglioramenti dei dati di laboratorio significano che ci sono miglioramenti nel mondo reale, che si rifletteranno quando il prossimo ciclo di dati sul campo verrà raccolto nei 30 giorni successivi all’implementazione delle ottimizzazioni.

I risultati di laboratorio dei test di velocità delle pagine sono per lo più accurati (e la soddisfazione di Pagespeed Insights è assolutamente necessaria per la SEO), ma la misurazione nel mondo reale dovrebbe essere misurata dalla vostra percezione e sempre dai vostri occhi. In alcuni casi, un test di velocità delle pagine può dirvi che le vostre prestazioni sono buone e solide, ma caricando il sito da soli e visualizzando le tempistiche si può effettivamente notare che è più lento (raramente).

La velocità nel mondo reale che non corrisponde ai risultati di un test di velocità è molto rara, ma si verifica a volte, quindi verificate sempre la velocità di caricamento del sito sui vostri dispositivi, invece di effettuare test di velocità sintetici (strumenti di misurazione della velocità delle pagine).

Se c’è una discrepanza tra le prestazioni del mondo reale e i test di velocità, c’è qualcosa di sbagliato che deve essere diagnosticato e potrebbe essere necessario ripristinare un backup se non è possibile annullare gli effetti delle modifiche apportate per qualsiasi motivo.

È necessario migliorare sia il tempo di caricamento nel mondo reale sia i risultati dei test di pagespeed su pagespeed insights, ma i dati di laboratorio sono sempre la migliore euristica da utilizzare e la mancata corrispondenza è talmente improbabile da essere considerata un caso limite.

Non tutti i test di velocità sono uguali

Alcuni fornitori di test di velocità restituiscono risultati estremamente imprecisi. Dotcom tools è uno di questi. Per ribadire che gli unici risultati dei test che contano davvero sono quelli di Google. Tutto il resto serve solo per l’analisi.

Qual è il punteggio ideale di Pagespeed Mobile su Pagespeed Insights?

Qualsiasi sito che state ottimizzando dovrebbe idealmente avere un punteggio mobile di 90+ una volta ottimizzato. Per la stragrande maggioranza dei siti questo risultato è facilmente raggiungibile. Chiunque legga questa guida dovrebbe essere in grado di ottenere questo risultato su qualsiasi sito normale, una volta implementata la maggior parte dei passaggi. Alcuni siti dinamici richiedono alcune strategie speciali aggiuntive che devono ancora essere aggiunte alla guida, ma si tratta di casi particolari e non della norma.

Come si presenta un punteggio mobile ideale?

Non accontentatevi di un punteggio inferiore a 90! Tutto ciò che serve è un piccolo sforzo e qualche prova ed errore. Una volta implementate tutte le informazioni contenute in questa guida, sarà facile raggiungere e ripetere questo risultato, sito dopo sito.

Dopo tutto siamo verdi.

Monitoraggio continuo

Il monitoraggio continuo misura i punteggi dei dati del mondo reale e del laboratorio nel tempo, che sono metriche utili in quanto le fluttuazioni hanno un’utilità diagnostica. Questi due strumenti sono autogestiti e non sono strumenti/servizi SAAS. Vi consiglio di procurarvi un VPS separato per ospitare questi strumenti, in modo da non causare un carico inutile su un server che ospita siti live o siti di staging. Ci sono fornitori di VPS a basso costo menzionati nella sezione hosting che sono utili a questo scopo.

Strumenti self-hosted

Questi possono essere auto-ospitati sulla vostra macchina locale o su un server VPS a basso costo.

Lighthouse CI (gratuito)

https://github.com/GoogleChrome/lighthouse-ci

Lighthouse CI è una suite di strumenti che semplificano al massimo l’esecuzione continua, il salvataggio, il recupero e l’asserzione dei risultati di Lighthouse.

Lighthouse CI richiede un servizio di CI, che viene elencato qui, comprese le opzioni gratuite:

https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/introduction-to-ci.md

Gitlab CI (gratuito)

https://docs.gitlab.com/ee/ci/quick_start/

Lighthouse CI Server (gratuito)

https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md

Lighthouse CI Visual Frontend/Dashboard

SiteSpeed.io (gratuito)

https://github.com/sitespeedio/sitespeed.io

Un altro toolkit Open Source gratuito per il monitoraggio continuo, che presenta visivamente dati più utili rispetto a Lighthouse CI.

È disponibile come immagine Docker (multipiattaforma, compreso il supporto per Windows) o come pacchetto NodeJS NPM (Linux).

Analisi comparativa e dei concorrenti

App più leggera (gratuita)

https://lightest.app/

Test di velocità gratuiti di confronto con concorrenti e domini multipli.

Debug Bear (gratuito)

https://www.debugbear.com/docs/compare-pages

Nota 1: richiede un account gratuito

Nota 2: dai miei test, le statistiche dei test di velocità di confronto non corrispondono e hanno punteggi inferiori a quelli di un normale test di velocità Debug Bear. I normali test di velocità Debug Bear sono più accurati.

WebPageTest (gratuito)

https://www.webpagetest.org/video/

L’interfaccia è piuttosto complicata, ma offre un test comparativo della velocità rispetto a più URL.

Inferenze

Analisi del diagramma a cascata

L’ottimizzazione delle prestazioni richiede inferenze. Non sarà mai possibile identificare tutte le opportunità di ottimizzazione da un test delle prestazioni di Pagespeed, indipendentemente dal fatto che si stia utilizzando il miglior test delle prestazioni della categoria.

Uno strumento esterno non è in grado di identificare i problemi del backend e nessuno di essi è in grado di identificare tutti i problemi del frontend. Pertanto, è necessario identificare i problemi sulla base di informazioni non esplicitamente identificate nei rapporti di Pagespeed. Per questo è necessario trarre queste conclusioni attraverso l’interpretazione del grafico a cascata delle richieste di test di Pagespeed.

L’esempio che segue contiene alcune delle deduzioni che si possono fare esaminando un grafico a cascata.

Anche i siti ben ottimizzati possono avere molte opportunità di miglioramento

Studio di caso ThemeIsle

Alcuni siti sono al limite delle prestazioni perfette, ma hanno alcune ottimizzazioni che farebbero schizzare i loro punteggi a 90-100 con alcune semplici modifiche. Questo è un ottimo esempio di un sito che è già all’85-90% della strada per essere completamente ottimizzato in base al suo rapporto pagespeed.

_ fa-soIId-900.woff2 !::-: :..

“SWmey , Headers B00y., :CeMfIsafe” Tk Ings fIequast:CI¥sk1″

Intestazione della risposta4 o

età

cfcachoslaie

lunghezza antcnt conleñt-npe dBte

Scade

WO0r

byias

450623

– “z ‘- –

maggio-età-ñT d000

HIT

Ra “79B49le¢:4o6763-ALL 7$444

fom/wofi2

mar. 21 ./uI Zg24 fI6 12:18 F>M

Gio. 17 luglio 7025 t3:TO:b0 GMT

Dal grafico a cascata sopra riportato si possono trarre molte, moltissime conclusioni. Nella schermata superiore sono visualizzate solo 16 richieste, mentre alcuni siti possono avere centinaia di richieste. Nessuno di questi dati viene esplicitamente segnalato in un report di Pagespeed; è necessario trarre queste conclusioni attraverso la propria analisi di un report.

Icone

Font Awesome

È in uso la libreria di icone Font Awesome e si stanno caricando due file di font woff2 separati per Font Awesome, con pesi di 400 e 900 (notare i valori nel nome del file). Questi file sono precaricati, il che li costringe in cima all’albero delle richieste.

Le dimensioni dei file sono rispettivamente di 13,4 kb e 77,7 kb, quindi il sito sta caricando un totale di 91,4 kb di font di icone. Si tratta di un grosso problema, che avrà un impatto notevole su un test di velocità. Queste due richieste devono essere eliminate, se possibile, e le icone devono essere sostituite con singoli file svg di piccole dimensioni. Anche nelle pagine con 1 o 2 icone, molti plugin e temi richiamano l’intera libreria di font con la totalità delle icone (forse migliaia di icone), completamente inutilizzata.

A volte font awesome ha una levetta nei plugin e nei temi, a volte no. Questa è solo una delle conclusioni che si possono trarre dal grafico a cascata.

Singolo Twitter SVG

La libreria Font Awesome è in uso, ma viene caricata anche un’icona Twitter SVG individuale. Questo non è assolutamente necessario, dato che le librerie Font Awesome hanno già un’icona di Twitter inclusa. Si dovrebbe fare una delle due cose, sostituire tutte le icone con SVG individuali (meglio

), oppure utilizzare l’icona Twitter della libreria Font Awesome (preferibile quando Font Awesome non può essere rimosso) per eliminare una richiesta non necessaria.

Immagini non ottimizzate Le immagini non vengono caricate pigramente

Nell’albero delle richieste vengono caricate 9 immagini, il che rappresenta subito il problema più evidente. Innanzitutto, solo una di queste immagini è effettivamente nella viewport (la foto dell’autore). Nessuna delle foto fuori dalla viewport viene caricata in modo pigro, il che significa che nel rendering iniziale vengono scaricate tonnellate di peso inutile della pagina, con un impatto negativo su tutte le metriche, ma con l’impatto più significativo sui punteggi LCP e CLS.

Le immagini possono essere ulteriormente compresse

In secondo luogo, molte immagini sono di grandi dimensioni e possono essere ulteriormente compresse, se possibile manualmente.

Dimensioni dell’immagine

Esistono diverse dimensioni di immagine che possono essere identificate dai nomi dei file delle 9 richieste di immagine: 772×250, 1024×683, 1024×512 e 1024×736.

Questo indica alcune cose. Le dimensioni delle immagini sono estremamente incoerenti; nella pagina vengono utilizzate 4 dimensioni diverse. Più piccole sono le dimensioni dell’immagine, minore sarà il peso del file, riducendo l’impatto sulle prestazioni.

Potrebbe essere possibile ridimensionare alcune di queste immagini mantenendo la qualità visiva sui dispositivi mobili (è possibile puntare a risoluzioni/breakpoint specifici con i plugin SRC set/image resizing), riducendo ulteriormente le dimensioni dei file.

Il rapporto contiene un avviso esplicito sulle dimensioni delle immagini, ma è possibile ricavare ancora più informazioni dalla semplice ispezione dei nomi dei file.

Formati dei file

Nella cascata si possono individuare due formati di file per le 9 immagini che si stanno caricando: jpg e png. Le dimensioni delle immagini possono essere ulteriormente ridotte, al di là del semplice ridimensionamento e della compressione, servendo formati “next-gen” come AVIF e WebP ai browser più recenti e continuando a servire i file jpg e png ai browser più vecchi non supportati come ripiego.

Documento HTML di grandi dimensioni

Un problema dei test sulle prestazioni è che la soglia per l’avviso di documento HTML di grandi dimensioni è impostata troppo alta. La soglia appropriata per il peso di un documento HTML dovrebbe essere 50 kb, qualsiasi cosa superiore a questo valore deve essere considerata di grandi dimensioni e ha un effetto notevolmente negativo sulle prestazioni.

In base alla richiesta principale per la pagina “blog” (la radice html della pagina), possiamo vedere che il peso del documento HTML è di 86,0 kb, che supera la soglia massima di 50 kb. Il peso del documento HTML di un sito dovrebbe essere ridotto il più possibile per ottenere il massimo miglioramento delle prestazioni.

Plugin di cache utilizzato WP Rocket

Dato che i file CSS sono stati inlineati usando una funzione di rimozione dei CSS inutilizzati e tutti i javascript sono stati ritardati (probabile) o inlineati (improbabile), poiché non ci sono file javascript in caricamento nell’albero delle richieste, il plugin di ottimizzazione non può essere identificato analizzando gli URL nell’albero delle richieste.

Invece, è necessario visualizzare il corpo HTML. Non appena il corpo HTML viene aperto, è chiaro che WP Rocket è in uso, poiché vi si fa riferimento più volte (“nowprocket”).

Sebbene WP Rocket sia sconsigliato, in quanto è generalmente possibile ottenere risultati migliori con Flyingpress, la sua implementazione funziona perfettamente e non si dovrebbero apportare modifiche a meno che non sorgano problemi durante l’esecuzione di ulteriori ottimizzazioni. WP Rocket, con tutti i suoi difetti, è ancora uno dei plugin per la cache più performanti.

CDN

Il sito utilizza Cloudflare come CDN e per alcuni file (serviti dalla cache di Cloudflare) si verifica un hit della cache (ovvero il file viene servito correttamente dalla cache).

Brotli

Brotli è in uso.

Componenti per il blocco dei documenti

Debug Bear scompone i componenti del documento HTML e ne visualizza le dimensioni. Il 28,91% del peso del documento HTML proviene da CSS inline (stile), il 12,79% da javascript inline (script), il 9,93% da SVG inline (percorso).

Gli stili CSS in linea hanno il maggiore impatto sulle prestazioni, 26,6 KB di stili CSS in linea sono eccessivi.

11,1 KB di javascript hanno un impatto significativo sulle prestazioni.

Anche l’inserimento di un numero eccessivo di SVG può avere un impatto negativo. L’inlining dovrebbe essere usato con parsimonia e solo per le risorse critiche.

È necessario esaminare i sottocontenuti di questi elementi e determinare l’origine, quindi si può procedere all’ottimizzazione. Per questo è necessario ispezionare manualmente l’albero HTML in Debug Bear.

Chiamate esterne di terzi

Ci sono 9 richieste di file dal dominio host.

In fondo alla cascata ci sono 6 richieste a domini di terze parti. 2 a use.typekit.net (font) e 4 a ps.w.org (immagini). Le chiamate a typekit sono inevitabili e devono essere fatte a meno che i font non siano ospitabili localmente; quindi, se sono necessarie, devono essere impostate per preconnettersi al dominio di terze parti (use.typekit.net), oltre che per precaricare la risorsa.

L’attributo preload è impostato in modo appropriato per le richieste di typekit, ma l’attributo preconnect non lo è e dovrebbe essere aggiunto.

Le 4 chiamate a ps.w.org sono immagini che dovrebbero essere sostituite con copie ospitate localmente.

La quantità di richieste è bassa

Nell’albero delle richieste vengono richiamate pochissime risorse (23 risorse + la radice HTML, 14 risorse visualizzate nell’albero non espanso screenshottato). Questo è un buon indicatore di un sito ben ottimizzato.

Qualsiasi cosa al di sotto dei 40 anni si trova nel punto giusto.

Priorità di recupero delle risorse

Due file hanno l’attributo Fetch Priority impostato su “high”, logo.png e

best-wordpress-image-optimizer.xxx.png. Ci sono altre due richieste ad alta priorità al dominio use.typekit.net. Tutte le altre richieste, oltre alla priorità di recupero del documento HTML principale, sono impostate su “bassa”. L’attributo “low” della priorità di recupero può essere mantenuto anche quando il file è impostato per il precaricamento, il che non influisce negativamente sulla funzionalità di precaricamento.

Troppi font precaricati

Sono precaricati troppi file di font. Il numero di risorse precaricate dovrebbe essere ridotto al minimo e utilizzato solo per le risorse critiche.

Il CSS non utilizzato è stato rimosso

Non ci sono file CSS caricati nell’albero delle richieste. Questa è una buona cosa e indica che è stata attivata la funzione Rimuovi CSS inutilizzati in un plugin di ottimizzazione o che il codice necessario è stato inserito manualmente. Tutti i CSS inutilizzati sono stati rimossi e i CSS critici sono stati inseriti nel documento HTML. Il CSS può essere tranquillamente spuntato dall’elenco e contrassegnato come ottimizzato.

Nessuna richiesta di Javascript

Non ci sono richieste di file javascript. Questo è un dato molto positivo, poiché indica che il sito ha ritardato tutti i javascript (nel loro caso, tutti possono essere tranquillamente ritardati) o che si tratta di un sito web statico. Non c’è codice javascript che viene scaricato o eseguito durante il rendering iniziale, annullando completamente qualsiasi impatto sulle prestazioni che il codice javascript avrebbe sul rendering iniziale della pagina.

Le immagini vengono servite su HTTP/2

HTTP/3 è abilitato su themeisle.com, tuttavia alcune risorse sono ancora servite tramite HTTP/2. I file di immagine vengono ancora serviti su HTTP/2, il che comporta una riduzione delle prestazioni.

Evita le catene di reindirizzamento

Non esiste un reindirizzamento intermedio HTTP > HTTPS > HTTPS://WWW.

LCP (Logo) è precaricato

L’immagine LCP è precaricata correttamente.

Spostamento del layout

Il punteggio CLS (Layout Shift) indica che gli attributi di altezza e larghezza non sono stati applicati alle immagini.

Un TTFB basso indica un database ottimizzato e a basso carico

Un TTFB basso indica che il backend del database è stato ben ottimizzato e sta subendo un carico di lavoro. Un TTFB elevato è solitamente indicativo di un database sovraccarico, di un VPS/Hosting con poca RAM o CPU debole, o di un’implementazione mysql mal configurata.

Un tempo di CPU basso indica un Javascript ottimizzato e un database ottimizzato

Il tempo di valutazione della CPU deriva in gran parte da javascript. Poiché tutto il Javascript critico è stato inlineato (nessun file JS caricato nell’albero delle richieste), il Javascript inlineato nel documento HTML è minimo e ben ottimizzato. È probabile che il database sia ben ottimizzato, poiché un database mal ottimizzato può avere un impatto significativo sulle prestazioni, sia in termini di tempo di CPU che di TTFB.

Nessun Iframe in uso

Non ci sono chiamate di terze parti per gli Iframe.

È in uso TLS 1.3

Sul dominio è abilitato TLS 1.3 (SSL), che è attualmente la versione più recente e performante di TLS disponibile.

Oltre la metà del peso della pagina corrente può essere eliminata dal rendering iniziale

La semplice implementazione di una soluzione funzionale per il caricamento pigro dimezzerebbe automaticamente il peso della pagina. Dopo aver implementato tutti i suggerimenti di cui sopra, il peso della pagina potrebbe essere ridotto di circa 3 volte da 1,16 MB a ~400-450 kb. Una riduzione di 700 kb, che si traduce in un significativo miglioramento delle prestazioni.

Caso di studio 2: Elementor.com

Comic Relief

Siete arrivati fino a questo punto della guida, chi è pronto per un po’ di comicità?

https://www.debugbear.com/test/website-speed/jl9XSI2N/overview Ecco

alcune schermate dei rapporti di pagespeed di Elementor.com.

Ed ecco il report di Pagespeed per un sito di Pagespeed Optimization Services sviluppato e ottimizzato personalmente (attualmente non in diretta perché è ancora in fase di sviluppo!) costruito con Elementor:

Analisi

Tenetevi forte, questa sarà lunga. Lo farò a pezzi, perché ci sono troppe schermate da fare tutte insieme.

Ottimizzatore visuale di siti web

https://vwo.com/

Dal secondo elemento della cascata è chiaro che stanno usando Visual Website Optimizer per l’analisi dei clienti. Per ottimizzare VWO, il javascript dovrebbe essere ritardato con una funzione javascript di ritardo in un plugin di ottimizzazione.

Geo-Loader

Elementor.com utilizza un plugin auto-sviluppato per la geolocalizzazione chiamato “geo- loader”. Possiamo dedurre che lo utilizzano per identificare la posizione dei clienti e che i dati vengono inseriti in una piattaforma di analisi esterna o in una sviluppata su misura.

Numeratore Jquery

È in corso il caricamento di Jquery Numerator, utilizzato per animare i numeri. Questo file js può di solito essere ritardato per annullare l’impatto sulle prestazioni, a meno che l’elemento animato non sia above the fold e l’animazione sia necessaria immediatamente senza interazione da parte dell’utente.

Iscrizione alla newsletter

Stanno utilizzando un plugin per l’iscrizione alla newsletter sviluppato su misura. Questo può essere quasi certamente ritardato per annullare l’impatto sulle prestazioni senza che la funzionalità ne risenta, poiché non è necessario finché l’utente non interagisce con il modulo collegato alla funzionalità.

WP Polyfill

È in corso il caricamento del file WP Core wp-polyfill.min.js, che può essere tranquillamente scaricato con Asset Cleanup/Perfmatters/un plugin per lo scaricamento selettivo delle risorse, oppure ritardato. L’indicazione che si tratta di un file caricato da WP Core (nucleo di WordPress) è che il percorso del file contiene “wp-includes”, che è il luogo in cui sono memorizzati tutti i file di WP Core.

Il polyfill serve per il rendering di fallback per i vecchi browser non supportati (internet explorer), che non è necessario.

Tempo di esecuzione del rigeneratore

Un altro file di WP Core non necessario nella maggior parte dei casi. Elementor non ha bisogno di questo file per alcuna funzionalità e può essere tranquillamente ritardato o disattivato. Alcuni plugin dipendono da questo file (raramente), quindi verificate il vostro sito dopo averlo disabilitato/ritardato, ma nella maggior parte dei casi dovrebbe essere tranquillamente rimovibile.

Mirage di Cloudflare

Ci sono alcune cose che possiamo dedurre da questa richiesta. La prima è che Elementor.com utilizza Cloudflare come CDN. In secondo luogo, sta utilizzando la funzione Mirage Image Optimization. Consiglio di evitarlo, poiché l’ottimizzazione delle immagini dovrebbe essere eseguita localmente sul server web e una funzione CDN come questa è un cerotto, non una vera soluzione. Se Mirage è veramente desiderato, dovrebbe essere usato come supplemento dopo che le immagini sono già state ottimizzate manualmente o con un plugin per l’ottimizzazione delle immagini. Non sostituisce l’ottimizzazione delle immagini.

Elementor.com ha commesso l’errore di affidarsi completamente a Mirage per l’ottimizzazione delle immagini, motivo per cui ha molte immagini grandi e gonfie sulla pagina.

Immagini caricate JS

Il file javascript imagesloaded è un altro file javascript di WP Core che di solito può essere tranquillamente rimandato. Di solito viene caricato per impostazione predefinita. A volte questo file non è necessario nel rendering iniziale, anche quando le immagini sono nella finestra di visualizzazione/al di sopra della piega al momento del caricamento della pagina. Tuttavia, i cursori possono potenzialmente dipendere da questo file, quindi assicuratevi di provare a ritardarlo o addirittura a scaricarlo su un sito di staging prima di passare la modifica alla produzione.

i18n

Un altro file di WP Core che viene caricato di default su ogni sito WordPress. Questo file è utilizzato per le funzionalità di traduzione. Se il vostro sito non è multilingue, questo file è estraneo e può essere tranquillamente scaricato o ritardato. Se questo file viene scaricato o ritardato, si otterrà un errore nella console del browser, ma questo errore è ignorabile e non pregiudica le prestazioni e la funzionalità.

Ganci.min.js

Un altro file di WP Core che viene caricato per impostazione predefinita. Molti plugin e temi dipendono da questo file js per le loro funzionalità, ma la maggior parte di essi non ne richiede il caricamento immediato, il che significa che nella maggior parte dei casi può essere tranquillamente ritardato. Non consiglio di scaricare questo file, ma di ritardarlo.

Google Tag Manager

Elementor utilizza Google Tag Manager per implementare alcuni tracciamenti analitici. Questo file può essere ritardato per ridurre l’impatto sulle prestazioni, ma è bene tenere presente che ritardando Tag Manager le analisi saranno un po’ confuse, in particolare le statistiche sulla frequenza di rimbalzo. Si tratta di un compromesso utile, perché il vero obiettivo è l’aumento del traffico, delle conversioni e delle vendite. I dati in nome dei dati non tengono conto degli obiettivi reali di un sito web.

Captcha

Senza espandere questa richiesta non è immediatamente evidente che si tratta di un captcha, anche se la prima schermata fa riferimento a google.com sul lato destro. Tuttavia, una volta espansa, possiamo vedere la parola “recaptcha” nell’url, che è un indicatore diretto dell’utilizzo di un captcha di Google.

I captchas sono estremamente intensivi dal punto di vista delle prestazioni e appesantiscono notevolmente la pagina. Se possibile, i captcha dovrebbero essere evitati del tutto e si dovrebbe implementare una soluzione diversa. Dal momento che il sito utilizza già Cloudflare, se è veramente necessario un captcha, si dovrebbe utilizzare quello di Cloudflare. Esistono soluzioni alternative ai captcha per i moduli e i bot, elencate più avanti nella guida.

ScrollTrigger.min.js

Possiamo fare alcune deduzioni sulla base di questa richiesta. La prima è che la funzionalità è legata alle azioni attivate dallo scorrimento. La seconda è che si tratta di una richiesta di terze parti a un dominio esterno, in questo caso a un CDN.

Questo file javascript è triplamente problematico. Aggiunge 17,2 kb di peso alla pagina, che è già notevole per un file javascript e può causare una quantità significativa di tempo di elaborazione aggiuntivo, anche con il peso relativamente piccolo del file.

In secondo luogo, poiché effettua una richiesta esterna a un dominio separato, introduce una latenza di rete di andata e ritorno a causa della richiesta HTTP.

In terzo luogo, tutti i file javascript bloccano il parser, il che significa che la metrica del tempo di blocco (talvolta indicata anche come TBT in alcuni test di velocità) aumenterà, danneggiando anche i punteggi di velocità delle pagine.

Questo file dovrebbe essere rimosso completamente, se possibile, e se è necessario dovrebbe essere ritardato se non interrompe la funzionalità prevista.

Da continuare

Sono rimasti altri 120-130 file nella cascata di elementor.com da aggiungere a questo caso di studio; continuerò presto l’analisi.

Oltre i grafici a cascata

BuiltWith

Alcuni plugin e servizi (ad esempio, analytics) non possono essere identificati dall’albero della cascata. Per identificare questi plugin, BuiltWith è un fantastico strumento che permette di identificarli.

BuiltWith è in grado di identificare esplicitamente i plugin più comuni. Qui possiamo vedere Yoast, ConvertBox, Google Tag Manager per WordPress e WP Rocket identificati direttamente. Anche TypeKit è in uso.

I malintesi più comuni

I punteggi di Pagespeed Lab non contano

Un’idea sbagliata comune è che i punteggi di laboratorio di Google Pagespeed Insights non siano importanti. Sono le metriche da ottimizzare, perché qualsiasi test di velocità può misurare solo dati di laboratorio “sintetici”, simulati in condizioni controllate. I test utilizzano una versione simulata di un telefono del minimo comune denominatore con un hardware debole, su una connessione con larghezza di banda limitata. I test hanno lo scopo di simulare lo “scenario peggiore” quando un utente carica un sito.

Questi punteggi sono molto accurati in questo contesto. I miglioramenti dei punteggi di laboratorio tramite l’ottimizzazione si tradurranno direttamente in miglioramenti delle prestazioni nel mondo reale.

È impossibile creare un sito performante con un page builder

Un ritornello comune è che bisogna evitare del tutto i page builder perché sono gonfi e lenti. Questa è solo una mezza verità. Qualsiasi pagebuilder sarà lento senza ottimizzazione. Oxygen e Bricks sono relativamente ben ottimizzati, ma se si inseriscono immagini di grandi dimensioni sopra la piega, l’indice LCP e l’indice di velocità non saranno comunque all’altezza. Ogni costruttore di pagine può trarre vantaggio dalla cache, dalla cache del database, dall’ottimizzazione dei CSS, ecc. Bricks e Oxygen inclusi.

Una volta ottimizzato, un costruttore ben o anche mal codificato può facilmente raggiungere punteggi superiori a 90 in un test di Mobile Pagespeed Insights.

Il caching della pagina a livello di server sostituisce i plugin di caching di WordPress

Si tratta di un’idea sbagliata molto comune e non corretta. Il caching delle pagine html a livello di WordPress con i plugin è complementare al caching delle pagine html a livello di server e dovrebbero essere usati contemporaneamente.

Flusso di lavoro e interazione Gestione iniziale delle richieste

Quando un utente richiede una pagina per la prima volta, la richiesta passa attraverso il server web (ad esempio, NGINX, Apache). Se la cache a livello di server (ad esempio, Varnish, NGINX FastCGI) non ha una versione in cache della pagina, inoltra la richiesta all’applicazione (WordPress).

Caching della pagina a livello di WordPress

Il plugin per la cache di WordPress (ad esempio, Flyingpress, W3 Total Cache) verifica se dispone di una versione HTML statica in cache della pagina richiesta.

Se esiste una versione in cache, viene servito il contenuto HTML statico in cache. In caso contrario, WordPress genera dinamicamente la pagina e il plugin di caching salva una versione HTML statica per le richieste future.

Caching a livello di server

Il contenuto HTML statico generato o memorizzato nella cache da WordPress viene quindi rinviato al server web.

La cache a livello di server può ora memorizzare questo contenuto HTML statico per una consegna ancora più rapida nelle richieste successive.

Livelli di cache Sequenza della prima richiesta

Richiesta dell’utente → server web (cache a livello di server) → WordPress (cache a livello di WordPress) → WordPress genera dinamicamente la pagina → il plugin di caching di WordPress salva l’HTML statico → il server riceve l’HTML statico → la cache a livello di server salva l’HTML statico.

Richieste successive

Richiesta dell’utente → server Web (hit della cache a livello di server) → l’HTML statico viene servito dalla cache a livello di server.

Se le miss della cache a livello di server

Richiesta dell’utente → Web server (cache miss a livello di server) → WordPress (cache hit a livello di WordPress) → WordPress serve HTML statico in cache → Il server riceve e mette in cache HTML statico.

Riepilogo della cache a livello di server dell’interazione

Opera per primo, mettendo in cache l’intera risposta a livello di server web per una consegna molto veloce. Gestisce la richiesta prima che raggiunga WordPress.

Cache a livello di WordPress

Agisce come una cache secondaria che gestisce le richieste se la cache a livello di server non funziona. Genera o serve HTML statico dall’applicazione WordPress.

La stratificazione delle cache crea un sistema di cache a più livelli

La cache a livello di server (ad esempio, NGINX, Varnish) funge da prima linea di difesa, memorizzando e servendo rapidamente HTML statico senza coinvolgere PHP o WordPress.

La cache a livello di WordPress (ad esempio, Flyingpress, W3 Total Cache) fornisce un livello secondario, assicurando che anche se la cache a livello di server non funziona, una versione in cache all’interno di WordPress possa essere servita senza rigenerare la pagina dinamicamente.

Perché i plugin per la cache della pagina sono necessari

Generazione HTML ottimizzata

I plugin per la cache di WordPress spesso fanno molto di più della semplice cache. Ottimizzano anche l’output HTML rimuovendo i caratteri, i commenti e gli spazi bianchi non necessari, riducendo così le dimensioni complessive del documento HTML.

Controllo granulare

I plugin per la cache di WordPress consentono un controllo più granulare su cosa viene memorizzato nella cache e come. Possono includere regole specifiche per gli utenti che hanno effettuato l’accesso, per le pagine di e-commerce o per altri contenuti dinamici che il caching a livello di server potrebbe non gestire in modo altrettanto efficiente.

Riduzione del carico del backend

Mentre la cache a livello di server riduce il carico sul server web, i plugin per la cache di WordPress riducono il carico sull’applicazione WordPress stessa. Ciò significa un minor numero di query al database e di esecuzioni PHP, con conseguenti tempi di risposta più rapidi e punteggi migliori.

Miglioramento del TTFB (tempo al primo byte)

I plugin di caching di WordPress possono migliorare il TTFB servendo contenuti HTML statici direttamente dal livello di WordPress. Questa risposta immediata aiuta a ottenere punteggi PageSpeed migliori.

Riscaldamento della cache

Alcuni plugin di caching offrono una funzione di pre-cache o di “riscaldamento” delle pagine, assicurando che i visitatori ricevano sempre la risposta più veloce possibile.

Esempio pratico

Anche con la cache a livello di server attivata, considerate i seguenti miglioramenti che un plugin per la cache di WordPress potrebbe apportare

Prima dell’installazione del plugin

La cache a livello di server è attivata, ma la generazione iniziale dell’HTML potrebbe comportare query di database non necessarie e un output HTML non ottimizzato. I punteggi di PageSpeed sono buoni ma non ottimali.

Dopo l’installazione del plugin

Il plugin di caching di WordPress inizia a servire una versione HTML della pagina più pulita e ottimizzata.

Ulteriori ottimizzazioni come la minificazione, la compressione delle immagini e la riduzione delle richieste HTTP migliorano ulteriormente le prestazioni.

L’effetto combinato si traduce in tempi di caricamento delle pagine più bassi, TTFB migliorato e punteggi PageSpeed più elevati.

L’immediato miglioramento dei punteggi di PageSpeed dopo l’aggiunta di un plugin per la cache di WordPress, anche con la cache a livello di server abilitata, è dovuto principalmente alle ottimizzazioni aggiuntive e ai miglioramenti dell’efficienza che il plugin apporta alla generazione dell’HTML e alla gestione complessiva delle risorse. Questi miglioramenti vanno oltre il semplice caching e contribuiscono in modo significativo a migliorare le metriche delle prestazioni.

Un DOM grande danneggia le prestazioni

Questa è un’altra mezza verità. La verità è che un DOM grande, insieme a un peso del documento HTML elevato, danneggia in modo significativo la velocità delle pagine. Il DOM può essere grande se il peso del documento è basso senza effetti significativi sulle prestazioni.

Elementor, per esempio, aggiunge molti elementi DOM, il che è un peccato perché rende più difficile il puntamento degli elementi con i css personalizzati; tuttavia, una volta ottimizzato, l’impatto sulle prestazioni dell’eccessiva dimensione del DOM è mitigato. Il fattore più significativo per l’ottimizzazione è sempre il peso della pagina/dell’oggetto.

Idealmente, la dimensione del DOM di una pagina dovrebbe essere inferiore a 1000 elementi per ridurre al minimo l’impatto sulle prestazioni. Una volta che le dimensioni del DOM aumentano oltre, si noteranno cali minimi nella velocità delle pagine. Una pagina con 1500 o addirittura 2000 elementi può essere resa rapidamente se il peso del documento HTML è basso. Se si superano i 2000 elementi, si iniziano a registrare cali evidenti (ma relativamente piccoli) nei punteggi di pagespeed, anche con un documento HTML più piccolo.

I siti Pagebuilder non riescono a gestire l’elevato carico del server su siti ad alto traffico

Anche questo è un errore parziale. Un sito creato con un pagebuilder non ottimizzato collasserà facilmente sotto lo sforzo di un traffico eccessivo. Il server di database (MySQL o qualsiasi altra variante di database (come MariaDB)) sarà rapidamente sopraffatto da un afflusso di query al database, anche con la cache degli oggetti.

Per ridurre l’impatto di queste query, assicurarsi che tutte le opzioni di caricamento automatico che possono essere impostate su “no” siano configurate di conseguenza. L’ottimizzazione dei CSS, dei Javascript e di tutti gli altri file ottimizzabili del pagebuilder ridurrà le query del database, riducendo così la pressione sul server. Un sito Elementor ottimizzato può facilmente gestire 100.000 utenti contemporanei su un VPS di livello medio, e potenzialmente può arrivare a milioni di utenti contemporanei.

Elementor può funzionare altrettanto bene di Gutenberg se ottimizzato correttamente.

Per ottenere le migliori prestazioni, le intestazioni e i piè di pagina devono essere codificati nel CSS invece che nel costruttore.

Sebbene la codifica rigida di intestazioni e piè di pagina nei CSS possa avere vantaggi in termini di prestazioni, l’impatto è al massimo minimo quando si utilizza la funzione Rimuovi CSS inutilizzati con i plugin di ottimizzazione. Molti Pagebuilder generano file CSS ingombranti per molti elementi, comprese le intestazioni e i piè di pagina, che possono essere attenuati con una semplice opzione.

Avvertenza: alcuni Page Builder trarranno maggiori vantaggi dalla codifica di intestazione e piè di pagina rispetto ad altri.

La velocità delle pagine influisce solo sulla SEO

Sebbene la motivazione principale per migliorare la velocità delle pagine sia spesso il miglioramento delle classifiche SEO, un fattore spesso trascurato è la fidelizzazione dei clienti. Una maggiore fidelizzazione dei visitatori può portare a un aumento sostanziale delle entrate, oltre al semplice aumento del numero totale di visitatori e alla riduzione della frequenza di rimbalzo. Ad esempio, ridurre la frequenza di rimbalzo dal 60% al 30% può portare a un aumento significativo dei ricavi/conversioni, a un incremento delle vendite e a un miglioramento di azioni come la compilazione del modulo di contatto.

I vantaggi di un maggiore coinvolgimento/ritenzione dei visitatori vanno al di là della semplice capacità di attrarre un maggior numero di visitatori; l’importanza di trattenere i visitatori non può essere sopravvalutata.

I punteggi Pagespeed non contano

Questo è uno dei ritornelli più palesemente assurdi che si possano trovare quando si parla di pagespeed. I punteggi di Pagespeed sono assolutamente importanti. Come discusso nelle sezioni Test di velocità e Inferenze, i punteggi di Pagespeed sono un insieme di varie metriche che si traducono in un unico punteggio composito su 100.

Il valore diagnostico del punteggio totale è una misura del progresso verso le metriche di ottimizzazione desiderate, ma il punteggio di per sé non fornisce informazioni diagnostiche utili. Il

Le sottometriche su cui si basa il punteggio composito di Pagespeed (TTFB, INFP, INTP, CLS, Speed Index, LCP, FCP, Blocking Time (TBT)) sono le metriche con utilità e hanno un significato specifico spiegato sopra. Queste metriche sono quantificabili, con chiare indicazioni del motivo per cui sono rilevanti per l’esperienza dell’utente sul sito web.

Quando qualcuno dice che queste metriche non sono importanti, indica un fraintendimento di fondo del loro significato.

Qui di seguito sono riportate ancora una volta le loro definizioni:

Articolo creativo sulla fuga

https://escapecreative.io/google-pagespeed-insights-explained/

Questa pagina offre una buona panoramica delle metriche e del loro significato.

Articolo di Corelogix

https://coralogix.com/guides/real-user-monitoring/core-web-vitals/

Un altro utile articolo con spiegazioni piuttosto approfondite delle varie metriche di Core Web Vitals e delle loro definizioni.

Documentazione sui dati vitali del web di Google

https://web.dev/articles/vitals

Documentazione e definizioni di Core Web Vitals direttamente da Google.

Wordfence è un requisito

Vero a metà. I file dovrebbero essere scansionati a cadenza semi-regolare solo su un sito di staging. Wordfence ha un effetto negativo significativo sulle prestazioni del sito. Un sito ben ottimizzato può perdere 10-15 punti in un test di velocità delle pagine mobile solo attivando Wordfence.

Le prestazioni del server di staging sono irrilevanti per gli utenti e non hanno alcun impatto sulle conversioni.

Invece di utilizzare la funzionalità firewall di Wordfence, si consiglia di utilizzare un plugin firewall leggero a livello di applicazione (WordPress) (Ninja Firewall e BBQ firewall sono opzioni relativamente valide).

Invece di affidarsi esclusivamente ai plugin firewall, si consiglia di avere tre livelli di firewall. Uno a livello di WAF (ad esempio Cloudflare). Un firewall a livello di server (come il firewall 8G/7G per Apache/NGINX) e infine un firewall a livello di applicazione per WordPress. WordPress dovrebbe essere l’ultima linea di difesa in assoluto, se i bot riescono a superare i primi due livelli c’è già un grosso problema. Inoltre, l’aggiunta di Patchstack è altamente raccomandata.

Sicurezza

Misure di sicurezza Impatto sulle prestazioni

Carico elevato della CPU e pressione eccessiva sulla RAM

L’elevato carico della CPU e/o l’eccessiva pressione sulla RAM rallentano il sito e, in molti casi, possono causare il blocco temporaneo del server fino a quando l’infezione non viene rimossa.

Impatto dannoso del malware sulle prestazioni

Un improvviso e inspiegabile carico elevato della CPU o un’eccessiva pressione sulla RAM possono indicare un’infezione da malware. Le mitigazioni della sicurezza sono fondamentali per risolvere i problemi legati al malware, tuttavia non aumentano le prestazioni di un sito web, ma prevengono solo gli effetti dannosi fino alle prestazioni di base esistenti.

Un esempio: Un sito ottiene un punteggio di 60 punti senza carico aggiuntivo di CPU e RAM prima di un incidente di sicurezza come un’infezione da malware o un DDOS. Una volta che il sito inizia a subire l’attacco, il punteggio medio scende a 30 punti.

La correzione di un’infezione da malware riporterà il punteggio del sito alla linea di base, cioè a 60 in questa ipotesi. Le prestazioni del sito non miglioreranno rispetto a quelle di base senza il malware, ma solo gli effetti negativi dell’infezione da malware/DDOS/altro tipo di attacco saranno attenuati.

Mitigazioni Impatto sulle prestazioni

Infatti, le soluzioni di sicurezza e la mitigazione implementate per rimediare al malware, i metodi di protezione dalle infezioni come i firewall e i plugin di sicurezza possono e avranno un effetto negativo sulle prestazioni di base. Tuttavia, il compromesso tra la prevenzione di questo tipo di attacchi e un piccolo calo delle prestazioni può valere la pena se il vostro sito sta subendo attacchi informatici, in particolare attacchi informatici regolari.

Attacchi di forza bruta

È un articolo di WP

https://www.isitwp.com/stop-brute-force-attacks-wordpress-website/

L’articolo di base contiene alcuni metodi per mitigare gli attacchi brute force.

Gli attacchi Brute Force comportano un numero eccessivo di tentativi di accesso che possono causare un elevato carico della CPU e saturare la RAM del server. Migliaia di tentativi di accesso possono rallentare il vostro sito e persino causarne il crash. Può interrompere l’esperienza dell’utente, il che significa che i visitatori abbandoneranno il sito perché non si carica abbastanza velocemente assorbendo tutte le risorse del server.

Limitare i tentativi di accesso (gratuito)

https://wordpress.org/plugins/limit-login-attempts-reloaded/

Limit Login Attempts Reloaded funziona come un robusto deterrente contro gli attacchi di forza bruta. Limita il numero di tentativi di accesso consentiti. Questo vale non solo per il metodo di login standard, ma anche per XMLRPC, Woocommerce e le pagine di login personalizzate.

Disattivare XML-RPC

Perché disabilitare XML-RPC?

Gli attacchi DDoS (Distributed Denial-of-Service) si verificano quando un malintenzionato sovraccarica un server web con il traffico internet per impedire ad altri utenti di accedere ai siti e ai servizi online. Gli aggressori utilizzano la funzione PingBack per inviare pingback a numerosi siti e con XML-RPC, fornendo all’aggressore una quantità illimitata di indirizzi IP per distribuire gli attacchi DDoS.

Attacchi di forza bruta

XML-RPC.php viene utilizzato per testare diverse combinazioni di nomi utente e password. Questa falla di sicurezza consente loro di automatizzare l’attacco con un comando che invia migliaia di combinazioni in una sola volta, aggirando la sicurezza del vostro sito web e ottenendo l’accesso ad esso.

Come disattivare la pulizia delle risorse XML-RPC (Free e Pro)

Asset Cleanup è un plugin multifunzione altamente raccomandato che si concentra in gran parte sulla disabilitazione selettiva delle risorse CSS e JS, oltre alla possibilità di disabilitare completamente il caricamento dei plugin su pagine selezionate.

Asset Cleanup dispone anche di una funzionalità per disabilitare XML-RPC.

Semplice disabilitazione di XML-RPC (gratuito)

https://wordpress.org/plugins/simple-disable-xml-rpc/

L’unica funzione di Simple Disable XML-RPC è quella di disabilitare XML-RPC, con una notevole possibilità di configurazione. Molto leggero, il plugin ha un peso totale di soli 10 kb.

Firewall

Tipi di firewall

I firewall avranno sempre un impatto negativo sulle prestazioni del sito. Sicurezza e prestazioni sono un compromesso che deve essere considerato/valutato quando si implementano varie

misure di sicurezza.

Differenze tra WAF e firewall a livello di rete/server

Impatto delle prestazioni dei firewall Articolo IJSTR

https://www.ijstr.org/final-print/mar2017/Impact-Of-Firewall-On-Network-Performance.pdf

Un’analisi completa dell’impatto dei firewall sulle prestazioni dei siti web.

Impatto delle prestazioni della rete WAF Aisnet

https://aisel.aisnet.org/cgi/viewcontent.cgi?article=1007&context=wisp2020

RicercaGate

https://www.researchgate.net/profile/Francis-Agbenyegah/publication/326260720_Impact_Of_Fi rewall_On_Network_Performance/links/5b420199458515f71cb221e8/Impact-Of-Firewall-On-Ne twork-Performance.pdf

Articolo di Fortinet

https://www.fortinet.com/resources/cyberglossary/waf-vs-firewall#:~:text=A%20 WAF%20 protegge%20le%20applicazioni%20web%20, il%20traffico%20esterno%20e%20interno%20alla%20rete.

Performant Firewall a livello di server 7G NGINX Firewall (gratuito)

https://perishablepress.com/7g-firewall-nginx/

Il performante firewall 7G di Jeff Starr per NGINX. La versione 8G per NGINX è attualmente in fase di sviluppo.

Firewall Apache 8G (gratuito)

https://perishablepress.com/8g-firewall/

Firewall Apache 8G di Jeff Starr.

Firewall per applicazioni Web (WAF) performanti

Firewall per applicazioni web

Un Web Application Firewall (WAF), solitamente di una CDN, opera a livello di rete per bloccare il traffico dannoso prima che raggiunga il server web. Cloudflare ha un solido WAF, Microsoft ha Front Door per Azure e ce ne sono molti in circolazione. Ciò consente un controllo molto più granulare e definizioni cloud regolarmente aggiornate per le minacce che emergono.

Un WAF vi consentirà anche di disporre di alcune funzioni interessanti che vi permetteranno di vietare l’accesso a tutti i Paesi per limitare il traffico, riducendo così il carico del server (se il vostro sito viene attaccato regolarmente) e i tentativi di hacking.

BunkerWeb (Gratuito)

https://github.com/bunkerity/bunkerweb

WAF a livello di server flessibile e configurabile gratuito.

NGINX App Protect WAF (gratuito)

https://gigaom.com/report/high-performance-web-application-firewall-testing/

Nei test di GigaOm, NGINX App Protect è risultato più performante dei 3 Cloud WAF testati.

Guida alla configurazione

https://docs.nginx.com/nginx-app-protect-waf/v4/configuration-guide/configuration/

Cloudflare WAF (Free e Pro)

https://www.cloudflare.com/application-services/products/waf/

Un WAF performante sviluppato da Cloudflare. Come ogni firewall, ha un impatto negativo sulle prestazioni, ma quello di Cloudflare è relativamente ben ottimizzato. È ideale in combinazione con Argo di Cloudflare e con altre funzioni di ottimizzazione delle prestazioni della rete e del traffico di Cloudflare.

Regole del firewall di Cloudflare per la protezione dei siti web WordPress

https://gridpane.com/blog/cloudflare-firewall-rules-for-securing-wordpress-websites/

Errori PHP

Gli errori PHP possono avere effetti negativi sulle prestazioni.

Debug Log Manager (gratuito)

https://wordpress.org/plugins/debug-log-manager/

Debug Log Manager è in grado di attivare automaticamente diversi tipi di registrazione, il che è un ottimo modo per individuare gli errori PHP, che possono trasmettere una serie di informazioni diagnostiche per scoprire e correggere gli errori PHP. La maggior parte dei plugin e dei temi presenta errori PHP, anche se minori, e ogni errore PHP può avere un impatto negativo sulle prestazioni.

Se avete del codice personalizzato, Debug Log Manager può aiutarvi a identificare i problemi con il codice che avete scritto, e se avete errori PHP da plugin o temi, vi darà informazioni chiare da segnalare come bug allo sviluppatore in modo che possa implementare una correzione.

Query Monitor (gratuito)

https://wordpress.org/plugins/query-monitor/

Query Monitor segnala gli errori PHP.

Plugin di sicurezza

Articolo per principianti di WP

https://www.wpbeginner.com/plugins/how-to-scan-your-wordpress-site-for-potentially-malicious- codice/

Un articolo molto semplice che spiega come utilizzare un plugin per lo scanner di sicurezza.

GOTMLS (Gratuito)

https://wordpress.org/plugins/gotmls/

Leggero plugin anti-malware

Plugin da evitare

Wordfence

Non utilizzate Wordfence sul vostro sito live. È estremamente ingombrante e dannoso per le prestazioni. Wordfence è un buon modo per scansionare il vostro sito alla ricerca di malware, ma usatelo solo in fase di staging! Le funzionalità di firewall e scanner possono essere facilmente ottenute con altri plugin più performanti.

Autenticazione a due fattori

Due fattori (gratuito)

https://wordpress.org/plugins/two-factor/

Plugin ufficiale per il login a 2 fattori del team di sviluppatori di WordPress. Leggero e con un ottimo supporto per qualsiasi problema.

Fluent Auth (gratuito)

https://wordpress.org/plugins/fluent-security/

Leggero plugin per l’autenticazione a due fattori

BBQ Firewall (gratuito)

https://wordpress.org/plugins/block-bad-queries/

Ottimo firewall a livello di applicazione di Jeff Starr. Si consiglia di affiancarlo al firewall a livello di server 8G e a un WAF.

Bloccare i bot cattivi

Banhammer (gratuito)

https://wordpress.org/plugins/banhammer/

Banhammer vi dà il pieno controllo su chi e cosa può accedere al vostro sito.

Intestazioni di sicurezza

Scanner delle intestazioni di sicurezza (gratuito)

https://securityheaders.com/

Il vostro sito dovrebbe ottenere una A su securityheaders.com. È molto facile da ottenere!

Sicurezza delle intestazioni avanzata e HSTS WP (gratuito)

https://wordpress.org/plugins/headers-security-advanced-hsts-wp/

Sicurezza delle intestazioni avanzata e HSTS WP (gratuito)

https://wordpress.org/plugins/headers-security-advanced-hsts-wp/

Il progetto Headers Security Advanced & HSTS WP implementa intestazioni di risposta HTTP che il vostro sito può utilizzare per aumentare la sicurezza del vostro sito web.

Il plug-in imposterà automaticamente tutte le Best Practice (non dovrete pensare a nulla), queste intestazioni di risposta HTTP possono impedire ai browser moderni di incorrere in vulnerabilità facilmente prevedibili.

Il progetto Headers Security Advanced & HSTS WP vuole diffondere e aumentare la consapevolezza e l’utilizzo di queste intestazioni per tutti gli utenti di wordpress.

Patchstack (Freemium)

https://patchstack.com/

Patchstack può applicare patch virtuali ai plugin vulnerabili prima ancora che questi vengano aggiornati dagli sviluppatori, evitando così che il vostro sito venga violato. Patchstack è una delle migliori società di analisi delle vulnerabilità e spesso è quella che trova i giorni zero.

Altamente raccomandato.

Patchstack ha un livello gratuito, ma per ottenere le cose veramente buone e utili è necessario uno dei piani a pagamento.

Tempra (gratuito)

Protezione: Test completo di configurazione del sito

web Scansiona il sito per individuare i problemi di

sicurezza più comuni.

Niente script in linea non sicuri (gratuito)

https://wordpress.org/plugins/no-unsafe-inline/

Guida al rafforzamento dei server Linux

https://ivansalloum.com/comprehensive-linux-server-hardening-guide/

Conformità SOC per WordPress

https://www.kevinleary.net/blog/soc-compliance-wordpress-websites/

Imunify360 (a pagamento)

https://www.imunify360.com/

Una suite di sicurezza molto completa. Fa molte cose interessanti che non ho visto fare da altri fornitori di sicurezza. L’interfaccia, però, ha un aspetto insignificante da primi anni 2000.

Blog di Kevin Leary

https://www.kevinleary.net/blog/securing-a-wordpress-website/

Registro di controllo

Diario di CoreActivity (gratuito)

https://wordpress.org/plugins/coreactivity/

CoreActivity Log è un plugin gratuito per il monitoraggio e la registrazione di varie attività. Il plugin è altamente modulare, con eventi registrati e controllati da più componenti.

Attualmente, il plugin ha 28 componenti per un totale di 174 eventi, con integrazione diretta con 12 plugin popolari. Tra tutte le opzioni per la registrazione degli audit, questa è la più completa.

Streaming (gratuito)

https://wordpress.org/plugins/stream/

Il plugin registra le azioni degli utenti di WordPress e del sistema nei registri Stream. Ogni azione dell’utente connesso viene visualizzata in un flusso di attività e organizzata in modo da poter essere facilmente filtrata per utente, ruolo, contesto, azione o indirizzo IP. Gli amministratori possono evidenziare le voci del registro Stream, ad esempio le attività sospette degli utenti, per indagare su ciò che sta accadendo in tempo reale. Stream consente anche di configurare avvisi via e-mail e webhook per integrazioni come Slack e IFTTT per notificare a voi e al vostro team quando qualcosa è andato storto.

Il flusso è completamente gratuito, senza piani pro

Diario delle attività di Aryo (gratuito)

https://wordpress.org/plugins/aryo-activity-log/

Un altro plugin per il monitoraggio delle attività, anch’esso completamente gratuito.

DecaLog (gratuito)

https://wordpress.org/plugins/decalog/

Sebbene DecaLog non registri specificamente gli eventi dell’utente, ha la meravigliosa funzione di registrare vari eventi su un sito che non vengono registrati né da Stream né da Aryo, il che consente di ottenere diverse informazioni sui processi in background, il che rende più facile cogliere il malware in flagrante.

Se avete difficoltà a interpretare i risultati, vi suggerisco di fare uno screenshot dei log e di caricarli su un bot AI che li interpreti per voi. I bot AI a pagamento sono accessibili gratuitamente tramite Poe.

Aggiornamento automatico del software del server

Software server obsoleto

I software obsoleti come le vecchie versioni di PHP, le vecchie versioni di MySQL, le vecchie versioni di NGINX, le vecchie versioni di Apache, le vecchie versioni di Varnish, ecc. possono potenzialmente rappresentare un grosso problema di sicurezza. Le patch per questi software vengono rilasciate regolarmente e si consiglia di aggiornare regolarmente il software installato sul server per ridurre gli incidenti di sicurezza.

Programmare le attività Cron del sistema (gratuito)

Questi aggiornamenti possono essere automatizzati tramite Cron Jobs

Articolo sulla velocità dell’alveare

https://www.hivelocity.net/kb/how-to-schedule-system-updates-and-tasks-using-cron-jobs/

Generatori di Cronjob di sistema

Generatori gratuiti di cronjob di sistema

Cronhub (gratuito)

https://crontab.cronhub.io/

Crontab Guru (gratuito)

https://crontab.guru/

Generatore di Crontab (gratuito)

https://crontab-generator.org/

Monitoraggio delle modifiche ai file

Monitoraggio delle modifiche ai file del sito web (gratuito)

https://wordpress.org/plugins/website-file-changes-monitor/

Ricevere avvisi via e-mail delle modifiche ai file sui siti WordPress per aumentare l’affidabilità e la sicurezza.

Carico elevato della CPU e pressione eccessiva sulla RAM

Incidenti di sicurezza

Oltre alle infezioni da malware, agli attacchi Brute Force, ai DDOS e ad altri incidenti di sicurezza, l’elevato utilizzo della CPU e la pressione sulla RAM possono essere causati da altri fattori.

Carico eccessivo del database

Una grande quantità di opzioni caricate automaticamente, una quantità eccessiva di revisioni, una quantità eccessiva di transitori, tabelle di database gonfie, query lente, mancanza di Object Caching, mancanza di indici su tabelle specifiche possono causare un elevato carico della CPU e una pressione eccessiva sulla RAM.

Mitigazioni

Una quantità eccessiva di cronjob per WordPress

Disattivare i Cronjob di WordPress e attivare i Cronjob del server (gratis)

Articolo per principianti di WP

https://www.wpbeginner.com/wp-tutorials/how-to-disable-wp-cron-in-wordpress-and-set-up-prop er-cron-jobs/

Generatori di Cronjob di sistema

Generatori gratuiti di cronjob di sistema

Cronhub (gratuito)

https://crontab.cronhub.io/

Crontab Guru (gratuito)

https://crontab.guru/

Generatore di Crontab (gratuito)

https://crontab-generator.org/

Autoscaling del server cloud (a pagamento)

Molti fornitori di Cloud VPS e Serverless dispongono di una funzionalità di autoscaling che aggiorna e riduce automaticamente le risorse del server in base al carico del server. Questo servizio è basato sull’utilizzo e non ha un costo mensile fisso. L’autoscaling è una necessità per i siti ad alto traffico.

Troppe schede di WP-Admin aperte contemporaneamente

Avere troppe schede del backend amministrativo di WP aperte contemporaneamente può causare un carico eccessivo della CPU e della RAM, anche con altre mitigazioni applicate. Modificando l’intervallo di WordPress Heartbeat si può attenuare l’impatto sulle prestazioni di numerose schede di WP-Admin nel browser.

WordPress Heartbeat WP Articolo per principianti

https://www.wpbeginner.com/plugins/how-to-limit-heartbeat-api-in-wordpress/ Breve spiegazione della funzionalità Heartbeat di WordPress.

Controllo dinamico del battito cardiaco di WordPress (gratuito)

https://wordpress.org/plugins/dynamic-front-end-heartbeat-control/

Il plugin offre un approccio efficiente per controllare dinamicamente il battito cardiaco del front- end, determinando automaticamente le impostazioni ottimali per il vostro sito web. Analizzando l’utilizzo da parte degli utenti, le risorse del sito WordPress e l’ambiente del server, consente alle prestazioni di WordPress di raggiungere il suo pieno potenziale.

Una volta attivato, inizia immediatamente a migliorare le prestazioni senza bisogno dell’intervento dell’utente. Regola in modo intelligente l’intervallo del battito cardiaco in tempo reale, adattandosi alle mutevoli esigenze del vostro sito web. Questo controllo dinamico garantisce un sistema di heartbeat ottimizzato ed efficiente, che si traduce in un miglioramento delle prestazioni complessive e della reattività.

Amministrazione e miglioramenti del sito (gratuito)

https://wordpress.org/plugins/admin-site-enhancements/

Admin e Site Enhancements consentono di controllare anche la frequenza del battito cardiaco. Meno flessibile del Controllo dinamico del battito cardiaco del frontend.

Sintonizzare le impostazioni di configurazione di MySQL (gratuito) Sintonizzazione automatica

MySQL Tuner (gratuito)

https://github.com/major/MySQLTuner-perl

MySQLTuner è uno script scritto in Perl che consente di esaminare rapidamente un’installazione MySQL e di apportare modifiche per aumentarne le prestazioni e la stabilità. Le variabili di configurazione e i dati di stato attuali vengono recuperati e presentati in un breve formato insieme ad alcuni suggerimenti di base sulle prestazioni.

MySQLTuner supporta ~300 indicatori per MySQL/MariaDB/Percona Server in questa versione.

Rilascio (pagato)

https://releem.com/

Releem mette a punto automaticamente la configurazione di MySQL su un VPS e la regola in base al carico attuale e medio di MySQL sul server.

Ridurre le opzioni automatiche Sweeppress (gratuito)

https://wordpress.org/plugins/sweeppress/

Modificare le impostazioni di autocaricamento o eliminare le opzioni di autocaricamento

Ottimizzatore di opzioni AAA (gratuito)

https://wordpress.org/plugins/aaa-option-optimizer/

Un altro plugin per l’ottimizzazione delle opzioni di caricamento automatico

Caching degli oggetti

Docket Cache (gratuito)

https://wordpress.org/plugins/docket-cache/

La cache Docket può essere utilizzata quando non è possibile installare Redis (alcuni piani di hosting condiviso non lo prevedono, ad esempio). Docket cache è una cache a oggetti, proprio come Redis, ma funziona a livello di WordPress e non a livello di server. In molti casi può avere prestazioni migliori di Redis.

Redis (gratuito)

Guida all’ottimizzazione delle prestazioni di Dragonfly Redis

https://www.dragonflydb.io/guides/redis-memory-and-performance-optimization

Ampio articolo sull’ottimizzazione delle prestazioni di Redis.

Informazioni generali su Redis per WordPress

Redis è anche un servizio a livello di server, per il quale è necessario un plugin WordPress da utilizzare come connettore per il servizio redis a livello di server. Affinché il plugin funzioni, è necessario che REdis sia installato sul vostro VPS/da parte del vostro provider di hosting.

Redis Object Cache (gratuito)

https://wordpress.org/plugins/redis-cache/

Redis Object Cache sviluppato da Till Krüss.

Plugin e temi mal codificati

Script PHP mal codificati in plugin e temi

Molti temi e plugin codificati male hanno sia una grande quantità di script PHP, sia script PHP codificati male che possono sovraccaricare un server quando si verifica un traffico anche moderatamente elevato.

Diagnosi

F12 Profiler (gratuito)

https://wordpress.org/plugins/f12-profiler/

F12 Profiler è un ottimo plugin per diagnosticare l’impatto sulle prestazioni di plugin e temi. Aggiunge una sezione alla barra di amministrazione di WordPress che può visualizzare l’impatto sul tempo di caricamento di ciascuno di essi.

Non è stato aggiornato da un po’ di tempo, ma dai miei test funziona ancora perfettamente.

Code Profiler (Gratuito e Pro)

Code Profiler può essere utilizzato per diagnosticare quali plugin/temi causano un elevato carico della CPU e un’eccessiva pressione sulla RAM.

Configurazione inadeguata o mancanza di caching della pagina e/o del server

Una configurazione inadeguata o l’assenza di cache può avere un forte impatto sul carico della CPU e causare una pressione eccessiva sulla RAM.

Soluzione molto semplice, basta abilitare il caching del server e quello della pagina. Questo è coperto

~a metà di questa guida.

Collegamento diretto:

https://docs.google.com/document/d/1ncQcxnD-CxDk4h01QYyrlOh1lEYDS-DV/edit#heading=h. 3cqmetx

Reinstallare WordPress Core (gratuito)

Articolo per principianti di WP

https://www.wpbeginner.com/wp-tutorials/how-to-uninstall-and-reinstall-wordpress/

Quando tutto il resto fallisce, a volte la reinstallazione di WordPress Core può risolvere il problema del carico elevato della CPU e della pressione eccessiva della RAM. Questa operazione è necessaria molto raramente.

Correggere le catene di reindirizzamento

È necessario correggere sempre le catene di reindirizzamento. Il sito dovrebbe essere impostato in modo da avere un singolo reindirizzamento https a https://yourdomain.com o un singolo reindirizzamento direttamente alla versione https://www.yourdomain.com.

Non si dovrebbe mai avere un reindirizzamento intermedio tra la versione http senza protezione SSL e la versione https www. Se si sceglie di usare www., si dovrebbe avere un reindirizzamento intermedio.

Ad esempio, http>https://>https://www. Questo hop aggiuntivo introduce sempre una latenza supplementare. Assicurarsi di eliminarlo.

Per ribadire, nel vostro grafico a cascata su gtmetrix dovreste avere solo il link http che viene immediatamente reindirizzato al link https corretto.

Se si tratta di www, dovrebbe essere http://yourdomain.com>https://www.yourdomain.com. Non si dovrebbe avere un reindirizzamento intermedio a https://example.com.

Se il vostro dominio non ha un link WWW, dovrebbe essere http://yourdomain.com> https://yourdomain.com senza alcun reindirizzamento intermedio.

Questo può essere fatto attraverso una regola htaccess/nginx, un plugin di reindirizzamento o tramite il vostro CDN. Cloudflare consente di creare una regola di reindirizzamento che inoltra sempre i link http direttamente a www, saltando il reindirizzamento intermedio. Anche il vostro plugin SEO di solito ha questa opzione, ma farlo dal lato di wordpress introdurrà una latenza aggiuntiva. Per ottenere la latenza più bassa, si consiglia di implementare questa funzione a livello di server o tramite il CDN.

Opzioni e articoli del plugin

https://wordpress.org/plugins/safe-redirect-manager/

https://wordpress.org/plugins/redirection/

Quasi certamente il vostro plugin SEO ha anche un’opzione per i reindirizzamenti. Le correzioni del plugin possono avere prestazioni leggermente peggiori rispetto all’implementazione dei reindirizzamenti tramite file di configurazione .htaccess o NGINX, ma sono più facili da gestire.

Identificazione manuale dei reindirizzamenti e come risolverli

https://kinsta.com/blog/remove-the-following-redirect-chain-if-possible/

https://prerender.io/blog/do-redirect-chains-hurt-seo/

https://tillison.co.uk/blog/how-to-fix-redirect-chains-and-loops-in-wordpress/

https://www.semrush.com/blog/301-redirect-htaccess/

Monitoraggio delle prestazioni di server e rete

Attivare New Relic solo quando si diagnosticano problemi sul sito live o, preferibilmente, su quello in fase di allestimento.

New Relic e Signoz hanno un overhead di prestazioni e quindi avranno un impatto negativo sulle prestazioni del server. Se possibile, attivate New Relic o SigNoz solo quando risolvete/registrate/analizzate i problemi per evitare qualsiasi impatto sulle prestazioni che potrebbero causare lasciandoli attivi a lungo termine.

New Relic (Gratuito e Pro)

Progetti open source di New Relic (gratuiti)

https://github.com/orgs/newrelic/repositories?type=all

New Relic dispone di progetti github open source gratuiti, che in pratica funzionano anche come edizione comunitaria gratuita. Un’opzione fantastica per l’osservabilità e le statistiche sulle prestazioni.

https://docs.newrelic.com/docs/network-performance-monitoring/get-started/npm-introduction/

New Relic è un’applicazione a livello di server che monitora una serie di statistiche e traffico di rete, fornendo un alto livello di osservabilità dei problemi di prestazioni e di risoluzione dei problemi. New Relic è uno strumento diagnostico inestimabile, che ogni sviluppatore dovrebbe integrare nel proprio kit di strumenti.

Monitora tutti gli aspetti delle prestazioni dello stack web.

Script di automazione per l’installazione automatica di New Relic open source sulla maggior parte delle distribuzioni Linux

https://docs.google.com/document/d/1wtIcwh4vjAEIr_71WioxIUCV1q3DtIzhQKYxDz6RcbY/

SigNoz (Gratuito e Pro)

https://signoz.io/

https://signoz.io/docs/install/docker/

https://github.com/signoz/signoz

SigNoz dispone di una versione comunitaria open source auto-ostabile, che può essere utilizzata gratuitamente. Una buona alternativa a New Relic. Leggermente più facile da installare rispetto a New Relic.

Ottimizzazione di WordPress

Devo utilizzare contemporaneamente tutte le opportunità di ottimizzazione di questa guida?

Sì! Tutte le funzionalità elencate sono complementari e possono e devono essere utilizzate contemporaneamente. Implementate tutte le funzionalità possibili per ottenere i migliori benefici in termini di prestazioni. Contrariamente a quanto si pensa, non esistono “troppi” plugin. Un plugin è semplicemente un frammento di codice preconfezionato e sviluppato da uno sviluppatore di plugin. Un plugin può essere una semplice funzione PHP. Ciò che conta è la qualità e il contenuto del codice contenuto in un plugin.

Se il plugin è leggero e non interferisce con un altro, non c’è nulla di male nell’eseguire tutti i plugin che si desidera. Un sito correttamente ottimizzato potrebbe eseguire 90 plugin contemporaneamente senza problemi di prestazioni. Gli effetti negativi dei plugin non ottimizzati sono additivi, quindi assicuratevi di scegliere solo plugin di qualità e ottimizzati per evitare di rallentare il vostro sito.

D’altra parte, i plugin di debug e di analisi dovrebbero essere attivi solo quando sono necessari, poiché se lasciati attivi causano un calo delle prestazioni e rallentano il sito. Questi dovrebbero essere attivati solo su un sito di staging, per evitare rallentamenti agli utenti.

Anche quando i plugin di debug sono ben ottimizzati, le visite al database sono numerose, quindi è bene utilizzarli solo in fase di staging o abilitarli sul sito live per il tempo necessario a ottenere le informazioni necessarie.

Utilizzate il numero di plugin necessario per ottenere il design che desiderate, ma non esiste un numero eccessivo di plugin di ottimizzazione (o di altri plugin in generale, se sono ben ottimizzati). I plugin di ottimizzazione hanno lo scopo di migliorare le prestazioni, non di danneggiarle. Non impasterete il vostro sito eseguendo tutti i plugin di ottimizzazione contemporaneamente. L’implementazione di tutte queste tecniche insieme è il modo per ottenere punteggi ottimali.

Le migliori pratiche

Attivare i plugin che si stanno testando su staging.

Non attivate sul vostro sito live alcun plugin che non siete certi di volere. Testateli sempre in staging o su un server di sviluppo wordpress locale. Questo non sarà mai sottolineato abbastanza. Alcuni plugin introducono un ritardo che non può essere completamente eliminato nemmeno pulendo le tabelle del database/disabilitando le opzioni di caricamento automatico o cancellando completamente le opzioni.

Eseguire backup regolari

Create spesso dei backup quando lavorate su WordPress. Non volete perdere il lavoro svolto a causa di un errore facilmente evitabile che vi costringa a ripristinare. È meglio crearli dopo ogni modifica per evitare di perdere i progressi.

A volte un plugin o una modifica creano un errore critico (relativamente raro), bloccano l’accesso a una sezione specifica del backend di amministrazione, impediscono il caricamento completo del backend di amministrazione o altri comportamenti strani. In questi casi, l’unica soluzione è ripristinare un backup funzionante.

Ho recuperato un po’ di prestazioni rimuovendo le voci del database create da alcuni plugin, ma a volte non è possibile recuperare tutte le prestazioni perse e bisogna tornare a un backup.

Testate sempre i vostri nuovi plugin in un ambiente di staging non live prima di impegnarli e implementarli sul vostro sito live.

Scegliere plugin di qualità

Se ci sono più plugin che soddisfano le vostre esigenze per una determinata attività, scegliete quello più ottimizzato, perché funzionerà meglio. Se ci sono 3 plugin, uno da 300 kb, uno da 700 kb e uno da 1,2 MB, il plugin da 300 kb è quello che funzionerà meglio nella maggior parte dei casi (anche se non è sempre così). Confrontate sempre le dimensioni dei file dei plugin, ma l’unico vero modo per saperlo è testarli uno alla volta. Confrontare le dimensioni dei file per avere un’idea dell’impatto sulla velocità delle pagine è comunque una buona regola. I plugin con una dimensione di file inferiore di solito hanno prestazioni migliori, quindi è una buona euristica per giudicare il probabile impatto di un plugin.

Tutti i plugin elencati in questa guida sono ottimizzati per le prestazioni. Tutti i plugin per funzioni specifiche (grafici, SEO, tabelle, campi personalizzati, backup, gestione degli utenti, woocommerce, moduli, LMS, plugin di supporto, ecc.) che ho incluso sono stati scelti intenzionalmente perché hanno un codice ottimizzato e performante. Se costruite il vostro sito con i soli plugin elencati in questa guida, il peso della vostra pagina sarà basso anche prima dell’ottimizzazione.

Disattivare le opzioni di autoricaricamento del database non necessarie

Dopo aver installato un plugin, assicurarsi di ispezionare il database con Advanced Database Cleaner per verificare quante tabelle e opzioni del plugin sono state aggiunte. Molti plugin creano un numero eccessivo di opzioni impostate sul caricamento automatico, che possono rallentare seriamente il sito. In genere, la maggior parte delle opzioni può essere impostata in modo da non avere alcun impatto sulla funzionalità, ma non è sempre così.

La disabilitazione dell’autoload può avere gravi impatti negativi se si disabilita l’opzione sbagliata, in alcuni casi estremi si può addirittura essere completamente bloccati dal backend e innescare errori critici del plugin. Disabilitare le opzioni di autocaricamento è sempre una buona idea per le prestazioni, ma fate attenzione a quali disabilitate e testate sempre le vostre modifiche prima su staging!

Testate SEMPRE la disattivazione delle opzioni di caricamento automatico per i plugin attivi sullo staging prima di rendere effettive le modifiche. Ci sono prove ed errori, assicuratevi di avere dei backup prima di modificare le impostazioni di autocaricamento sul sito live!

Rimuovere le voci del database non necessarie

Se un plugin aggiunge troppe tabelle e opzioni al database e si desidera rimuovere il plugin, è necessario eliminare le voci del database con Advanced Database Cleaner o un altro plugin per la pulizia del database nella sezione del database dopo aver eliminato il plugin, poiché la maggior parte dei plugin lascia tutte le opzioni e le tabelle nel database quando li si disattiva/elimina. Molti plugin impostano il caricamento automatico delle opzioni anche se non è necessario, quindi assicuratevi di disabilitare il maggior numero possibile di opzioni caricate automaticamente (senza interrompere la funzionalità).

Aggiornamenti automatici di plugin e temi

Mantenere aggiornati i temi e i plugin.

Mantenete aggiornati i vostri temi e plugin per motivi di sicurezza e prestazioni. In genere i programmatori rilasciano frequentemente aggiornamenti per le prestazioni, le funzionalità e la sicurezza dei loro plugin, che dovrebbero essere sempre aggiornati.

Impostare l’aggiornamento automatico solo per alcuni dei plugin che non hanno funzionalità critiche per il sito. Ad esempio, non è il caso di aggiornare automaticamente un pagebuilder. Alcuni aggiornamenti di plugin possono interrompere completamente alcune funzionalità introducendo nuovi bug, quindi è una buona idea eseguire dei backup prima dell’aggiornamento, nel caso in cui sia necessario eseguire un revert. Eseguire test su staging quando si aggiornano i plugin. In casi molto rari anche un plugin non critico può rompere il vostro sito, quindi, come sempre, eseguite regolarmente dei backup!

Anche gli aggiornamenti del tema potrebbero danneggiare il vostro sito, soprattutto perché se state seguendo i consigli di questa guida, dovreste disabilitare tutto ciò che è umanamente possibile nel vostro tema e lavorare esclusivamente con un qualche tipo di page builder o

personalizzare il vostro sito con un codice personalizzato, se è la vostra preferenza.

WP-Config Limite di memoria costante

Potete incollarlo nel vostro file wp-config appena sopra la riga “/* Questo è tutto, smettete di modificare! Buona pubblicazione. */”, assicurandosi di modificare il valore in modo che corrisponda a quello impostato nelle impostazioni PHP.

Ad esempio

define( ‘WP_MEMORY_LIMIT’, ‘256M’ );

Nota: Il limite di memoria è la quantità di RAM che può essere allocata a un singolo processo PHP. Non si dovrebbero avere plugin o script che occupano così tanta RAM. Se così fosse, vi consiglio di cambiare plugin. La raccomandazione predefinita sulla maggior parte delle guide è 256M. Se si deve aumentare il valore oltre i 256M, non impostare un valore superiore a 512M. 512M dovrebbe essere il limite massimo.

Disattivare XML-RPC

Disattivare XML-RPC. Esistono vari modi per disabilitarlo. Io uso Asset Cleanup per farlo, ma ci sono molte opzioni di plugin. Questo migliorerà la sicurezza del vostro sito e preverrà anche alcuni attacchi ddos. Potete semplicemente cancellare il file, XML-RPC non è utilizzato dal 99% dei siti wordpress, ma va attivato solo se è necessario per il funzionamento di un plugin.

Diagnosi e analisi

Strumenti per il database

Analisi delle query di database Query Monitor (gratuito)

https://wordpress.org/plugins/query-monitor/

Aiuta a eseguire il debug delle query di database, degli errori PHP, degli hook e delle azioni, dei blocchi dell’editor di blocchi, degli script e dei fogli di stile in attesa, delle chiamate API HTTP e molto altro ancora.

Componenti aggiuntivi (gratuiti)

https://querymonitor.com/help/add-on-plugins/

Collezione di componenti aggiuntivi di Query Monitor per estendere le funzionalità di Query Monitor.

Logger di query Fluent (gratuito)

https://wordpress.org/plugins/fluent-query-logger/

Query Logger con funzionalità di registrazione selettiva.

Istantanee del database di WP (gratuito)

https://wordpress.org/plugins/wpvivid-snapshot-database/

WPvivid Database Snapshots consente di creare rapidamente istantanee di tutte le tabelle del database di WordPress.

Fare un’istantanea del database è molto più veloce che fare un backup del database. Se avete bisogno di una soluzione di rollback più rapida per testare in modo sicuro le modifiche al database di WordPress, utilizzate un’istantanea.

Abilitare gli strumenti di database (gratuito)

https://wordpress.org/plugins/enable-database-tools

Fa una cosa: consente di ottimizzare e riparare le tabelle InnoDB e MyISAM utilizzando gli strumenti di database integrati in WordPress.

Amministrazione del database Amministrazione del database (gratuito)

https://github.com/qriouslad/database-admin

Sostituzione dell’amministratore, direttamente dalla dashboard di amministrazione di WordPress!

WP phpMyAdmin (gratuito)

https://wordpress.org/plugins/wp-phpmyadmin-extension/

PHP My Admin dalla dashboard di amministrazione di WordPress.

Profilazione delle prestazioni

Code Profiler (Gratuito e Pro)

https://wordpress.org/plugins/code-profiler/

https://code-profiler.com/

Code Profiler vi aiuta a misurare le prestazioni dei vostri plugin e temi a livello di PHP e a individuare rapidamente qualsiasi potenziale problema nella vostra installazione di WordPress. È utile per la risoluzione dei problemi e per identificare quali plugin utilizzate hanno prestazioni insufficienti.

Può indicare le linee di codice e i plugin specifici che causano problemi di prestazioni. È molto utile se si sta creando un proprio plugin, se si vuole modificare quello di qualcun altro per risolvere il problema, se si identifica un plugin che danneggia le prestazioni o se si vuole segnalare il problema identificato a uno sviluppatore di plugin, in modo che possa essere risolto.

F12 Profiler (gratuito)

https://wordpress.org/plugins/f12-profiler/

Un plugin per la profilazione del codice, non così granulare o dettagliato come Code Profiler, ma con alcune caratteristiche interessanti che Code Profiler non ha, come la barra del menu di amministrazione del frontend che mostra le informazioni sulla profilazione della pagina corrente che si sta visualizzando sul frontend.

AIO Performance Profiler (gratuito)

https://wordpress.org/plugins/all-in-one-performance-accelerator/

Nota: non consiglio di attivarlo su un sito live, ma di attivarlo su un sito di staging. È utile per la diagnosi, ma ha rallentato molto il sito su cui stavo lavorando anche una volta disattivato, non ho mai indagato sul perché. Suggerisco di utilizzare questo plugin solo su un sito di staging.

Profilazione delle prestazioni LAPS (gratuito)

https://github.com/Rarst/laps

Profilatore di prestazioni leggero. Fornisce un riepilogo visivo nella barra degli strumenti dell’amministratore, facile e veloce da ispezionare.

Risolvere i conflitti tra i plugin

Controllare i conflitti (gratuito)

https://wordpress.org/plugins/check-conflicts/

Il plugin consente di disabilitare/abilitare i plugin e/o attivare un tema predefinito per verificare i conflitti tra di essi solo per il proprio IP; gli altri utenti non vedranno alcuna modifica durante i test.

Detective di plugin (gratuito)

https://wordpress.org/plugins/plugin-detective/

Aiuta a diagnosticare i conflitti tra i plugin in modo graduale.

Strumenti WP (gratuiti)

https://wordpress.org/plugins/wptools/

Il plugin WP Tools (wp-tools) presenta una dashboard completa che mostra le statistiche del server, compreso un grafico degli errori, il tempo di caricamento della pagina anche per pagina e vanta oltre 47 strumenti progettati per semplificare le attività di gestione di WordPress.

Cruscotto di sistema (gratuito)

https://wordpress.org/plugins/system-dashboard/

Questo plugin fornisce una dashboard centrale per monitorare vari componenti, processi e dati di WordPress, tra cui l’hardware del server, il software e l’utilizzo delle risorse. Si abbina bene a Query Monitor

Filtri e ganci

WP Hooks Finder (gratuito)

https://wordpress.org/plugins/wp-hooks-finder/

Se si guarda a qualsiasi pagina o post di WordPress, appaiono attraverso la combinazione di ganci per azioni e filtri. A volte sono utili per il debug e lo sviluppo di plugin.

Per pagina Elenco dei plugin in uso

Elenco dei plugin (gratuito)

https://wordpress.org/plugins/plugins-list/

Il plugin inserisce un elenco XHTML in qualsiasi post/pagina tramite uno shortcode. Se si è interessati alla personalizzazione, è possibile specificare un argomento di formato e indicare l’output esatto che si desidera.

C’è anche un’opzione per visualizzare i plugin inattivi.

• Un semplice sistema di template consente di formattare il modo in cui si desidera che vengano visualizzate le informazioni del plugin.
• I tag modello sono disponibili per gli elementi collegati automaticamente e per il testo semplice.
• Scegliere una serie di dati del plugin da inviare in uscita
• Visualizzare i plugin inattivi e quelli attivi, se lo si desidera.
• Limita automaticamente le descrizioni lunghe a lunghezze specifiche e rimuove persino le emoji dall’output.
• L’output viene memorizzato nella cache per fornire una risposta rapidissima.
• Uno shortcode separato consente di visualizzare il numero di plugin presenti!

Utilizzo del blocco Gutenberg

Trova i miei blocchi (gratis)

https://wordpress.org/plugins/find-my-blocks/

Ricerca rapida delle posizioni dei blocchi

Risparmiate il vostro tempo scansionando l’intero sito (compresi i post, le pagine e i tipi di post personalizzati) per individuare le istanze di WordPress Blocks.

• Trova e sostituisci i blocchi in modo sicuro con collegamenti rapidi di modifica e anteprima.
• Supporto per la modifica completa del sito WordPress. I modelli di blocco e le parti di modello saranno ricercati.
• Impostazioni delle prestazioni per hosting di basso livello (condiviso) e di alto livello.
• 100% gratuito e open source.

Tracciamento dei problemi (gratuito)

https://wordpress.org/plugins/issues-tracker/

Issues Tracker consente di visualizzare e cercare i log di debug di WordPress, ricevere consigli sulla sicurezza, tenere traccia degli errori 404 e visualizzare le impostazioni del server.

Ispezionare e bloccare le richieste HTTP (gratuito)

https://wordpress.org/plugins/inspect-http-requests/

Monitorare tutte le richieste HTTP effettuate tramite i metodi HTTP di WP, ossia wp_remote_get, wp_remote_post. Bloccate qualsiasi richiesta con un semplice clic su un pulsante.

Tenere traccia del tempo impiegato da una richiesta come l’aggiornamento di core/plugin/tema (può essere utile per l’analisi del consumo di banda).

Gestore dei transitori (gratuito)

https://wordpress.org/plugins/transients-manager/

La gestione dei transitori consente di

1. Pulsante della barra degli strumenti per sospendere le scritture transitorie
2. Visualizza tutti i transitori nel database
3. Modificare il nome, la scadenza e il valore di qualsiasi transitorio.
4. Cancellare tutti i transitori
5. Ricerca dei transitori per nome
6. Azioni massive per eliminare: tutti, scaduti, non scaduti o transitori persistenti.

Test delle prestazioni dalla dashboard dell’amministratore

La sezione dei test di velocità di cui sopra è una delle principali risorse da utilizzare per diagnosticare i problemi di prestazioni. I grafici a cascata sono fondamentali per diagnosticare quali file devono essere ritardati, disabilitati, compressi, caricati in modo pigro o necessitano di attributi di caricamento come il rinvio.

Vibes (Gratuito)

https://wordpress.org/plugins/vibes/

Un plugin della suite PerfOps one, che consente di eseguire test lighthouse gratuiti direttamente dalla dashboard di amministrazione, molto utile.

WP Velocità della luce (gratuito)

https://wordpress.org/plugins/wp-speed-of-light/

WP Speed Of Light è un plugin di ottimizzazione gratuito con test di velocità delle pagine integrato. Esiste una versione pro, ma è del tutto inutile se viene utilizzato come plugin di ottimizzazione/caching oltre alla funzionalità di test della velocità. Tutte le funzionalità pro sono disponibili tramite plugin gratuiti in altre sezioni.

Verificatore WPO (gratuito)

https://wordpress.org/plugins/wpo-checker/

Aggiunge collegamenti a strumenti esterni di pagespeed nell’elenco delle pagine e dei post.

Non è stato aggiornato da un po’ di tempo, attivarlo su staging per assicurarsi che non ci siano conflitti.

Guardia di velocità (gratuito)

https://wordpress.org/plugins/speedguard/

Strumento di test di Pagespeed Insights in blocco. Aggiungete gli URL da testare nel backend e lo strumento eseguirà test di velocità delle pagine in blocco su tutti gli URL.

Avvertenze: la funzionalità di visualizzazione del punteggio LCP di ogni pagina testata nella pagina delle impostazioni del plugin non è funzionante e tutti i rapporti pagespeed devono essere aperti singolarmente (non c’è una panoramica) per vedere i punteggi.

Strumenti della barra di amministrazione (gratis)

https://wordpress.org/plugins/admin-bar-tools/

Aggiunge un link a Pagespeed Insights nella barra di amministrazione per lanciare un test su qualsiasi pagina visualizzata nel frontend.

SEO Booster (a pagamento)

https://wordpress.org/plugins/seo-booster/

La versione a pagamento di SEO Booster dispone della funzionalità di test Pagespeed Insights.

WP Performance Tester (gratuito)

https://wordpress.org/plugins/wpperformancetester/

WPPerformanceTester è stato scritto come strumento per effettuare il benchmark di WordPress nei benchmark delle prestazioni dell’hosting WordPress (2015) di Review Signal. I benchmark attuali sono su WPHostingBenchmarks.com. È stato progettato per testare le prestazioni del server stressando PHP, MySql ed eseguendo query $wpdb.

WPPerformanceTester esegue i seguenti test

• Matematica – 100.000 test sulle funzioni matematiche
• Manipolazione delle stringhe – 100.000 test di manipolazione delle stringhe
• Loop – 1.000.000 di iterazioni di loop
• Condizionali – 1.000.000 di controlli logici condizionali
• MySql (connect, select, version, aes_encrypt) – funzioni mysql di base e 5.000.000 di iterazioni AES_ENCRYPT()
• \$wpdb – 250 operazioni di inserimento, selezione, aggiornamento e cancellazione attraverso \$wpdb
• Inoltre, vi permette di vedere come le prestazioni del vostro server si posizionano rispetto al nostro benchmark di settore. Il nostro benchmark di settore è la media di tutti i risultati dei test inviati.

Analisi delle

dimensioni della

pagina GreenerWP

(gratuito)

https://wordpress.org/plugins/greenerwp/

Scanner delle dimensioni delle pagine in blocco. Le informazioni non sono molto dettagliate, ma forniscono una rapida panoramica del peso delle singole pagine su più pagine.

Registrazione

Registrazione della posta

WP Mail Logging (gratuito)

https://wordpress.org/plugins/wp-mail-logging/

Utilizzate questo plugin per registrare tutte le e-mail in uscita dal vostro sito WordPress. Se si verificano errori durante l’invio di un’e-mail dal vostro sito, i nostri registri delle e-mail rileveranno l’errore e lo mostreranno all’utente.

Registrazione di debug Debug Log Manager (gratuito)

https://wordpress.org/plugins/debug-log-manager/

• • Analizzare il file debug.log e visualizzare gli errori distinti e l’ultima volta che si sono verificati.
  • Individuate e filtrate rapidamente gli errori più specifici per il vostro lavoro di debug.
  • Facilitare la lettura dei dettagli degli errori identificando la fonte dell’errore.
  • Visualizza facilmente i file in cui si sono verificati errori PHP. Questo include i file del nucleo di WordPress, dei plugin e dei temi.
  • Attivare l’aggiornamento automatico per caricare automaticamente le nuove voci del registro.
  • Cancellare facilmente il file debug.log per risparmiare spazio su disco e osservare più facilmente gli errori che si verificano di recente sul sito.
  • Mostra un indicatore sulla barra di amministrazione quando la registrazione degli errori è abilitata.
  • Aggiungere un widget del cruscotto che mostri gli ultimi errori registrati.
  • Usare error_log() per inviare informazioni sugli errori nel log di debug.

Bugfu (gratuito)

https://wordpress.org/plugins/bugfu-console-debugger/

Registrare/debuggare il codice PHP nel tema/plugin nella console del browser (non è necessaria alcuna estensione).

Debug This (gratuito)

https://wordpress.org/plugins/debug-this/

Fornisce un sacco di informazioni sulla vostra installazione di WordPress, tutto dalla barra di amministrazione del front-end.

• • L’oggetto WP_Query corrente
  • Info e opzioni del blog
  • Incorporare i fornitori
  • File nell’HTML renderizzato (CSS, immagini, JavaScript)
  • Filtri e azioni
  • Dimensioni delle immagini
  • Globali e costanti
  • Menu
  • Statistiche della cache degli oggetti
  • Plugin, plugin indispensabili e drop-in
  • Riscrivere le regole
  • Domande
  • Informazioni su PHP e server
  • Allegati postali
  • Tipi di messaggi
  • Script e stili in attesa
  • Shortcodes
  • Barre laterali e widget
  • Tassonomie e termini
  • Temi
  • Utenti
  • Pianificazioni e lavori cron di WP
  • Registro di debug di WP

Barra di debug (gratuita)

https://wordpress.org/plugins/debug-bar/

Aggiunge alla barra di amministrazione un menu di debug che mostra le query, la cache e altre utili informazioni di debug.

Registrazione delle azioni e

delle verifiche CoreActivity Log

(gratuito)

https://wordpress.org/plugins/coreactivity/

CoreActivity Log è un plugin gratuito per il monitoraggio e la registrazione di varie attività. Il plugin è altamente modulare, con eventi registrati e controllati da più componenti.

Attualmente, il plugin ha 28 componenti per un totale di 174 eventi, con integrazione diretta con 12 plugin popolari. Tra tutte le opzioni per la registrazione degli audit, questa è la più completa.

Log Dash (gratuito)

https://wordpress.org/plugins/logdash-activity-log/

Il registro delle attività consente di monitorare e tenere traccia di tutte le azioni sul vostro sito WordPress, compresi gli accessi degli utenti, le modifiche ai contenuti, gli aggiornamenti dei plugin e altro ancora. Il suo

Il dashboard di facile utilizzo consente di accedere immediatamente alle informazioni critiche, facilitando l’identificazione e la risoluzione rapida dei problemi.

Streaming (gratuito)

https://wordpress.org/plugins/stream/

Il plugin registra le azioni degli utenti di WordPress e del sistema nei registri Stream. Ogni azione dell’utente connesso viene visualizzata in un flusso di attività e organizzata in modo da poter essere facilmente filtrata per utente, ruolo, contesto, azione o indirizzo IP. Gli amministratori possono evidenziare le voci del registro Stream, ad esempio le attività sospette degli utenti, per indagare su ciò che sta accadendo in tempo reale. Stream consente anche di

configurare avvisi via e-mail e webhook per integrazioni come Slack e IFTTT per notificare a voi e al vostro team quando qualcosa è andato storto.

Il flusso è completamente gratuito, senza piani pro

Diario delle attività di Aryo (gratuito)

https://wordpress.org/plugins/aryo-activity-log/ Un

altro plugin per il monitoraggio delle attività, anch’esso completamente gratuito.

DecaLog (gratuito)

https://wordpress.org/plugins/decalog/

Sebbene DecaLog non registri specificamente gli eventi dell’utente, ha la meravigliosa funzione di registrare vari eventi su un sito che non vengono registrati né da Stream né da Aryo, il che consente di ottenere diverse informazioni sui processi in background, rendendo più facile l’individuazione del malware.

Se avete difficoltà a interpretare i risultati, vi suggerisco di fare uno screenshot dei log e di caricarli su un bot AI che li interpreti per voi. I bot AI a pagamento sono accessibili gratuitamente tramite Poe.

Storia semplice (gratuito)

https://wordpress.org/plugins/simple-history/

Registro di controllo per WordPress, utile per diagnosticare le modifiche apportate dagli utenti, con registrazione dettagliata e integrazione diretta con diversi plugin.

Registrazione degli eventi Ajax

Amuga Ajax Log (Gratuito)

https://wordpress.org/plugins/amuga-ajax-log/

Registra le chiamate Ajax

Registrazione Cron

Cron Logger (gratuito)

https://wordpress.org/plugins/cron-logger/

Questo plugin vi aiuterà a identificare quali Cronjob (se ce ne sono) sono problematici.

Analisi delle prestazioni e di WordPress

Query Monitor (gratuito)

https://wordpress.org/plugins/query-monitor/

Aiuta a eseguire il debug e a identificare le query di database lente, gli errori PHP, gli hook e le azioni, i blocchi dell’editor di blocchi, gli script e i fogli di stile in attesa, le chiamate API HTTP e altro ancora. Uno strumento fondamentale nella cintura degli strumenti per diagnosticare i problemi di prestazioni.

Plugin PerfOps One (gratuito)

Una suite di plugin gratuiti e open source per WordPress dedicati all’osservabilità e alle prestazioni delle operazioni.

OPcache Manager (gratuito)

https://wordpress.org/plugins/opcache-manager/

Strumento completo di gestione di OPcache e di reportistica analitica. OPcache Manager consente di supervisionare e ottimizzare le operazioni di OPcache su un sito WordPress.

Sessioni (gratuite)

https://wordpress.org/plugins/sessions/

Potente gestore di sessioni per WordPress con limitatore di sessioni multi-criterio e reportistica analitica completa. Sessions si basa sul gestore di sessioni standard di WordPress e aggiunge ulteriori funzioni e controlli.

Traffico (gratuito)

https://wordpress.org/plugins/traffic/

Strumento di reportistica analitica completo che fornisce un controllo accurato su tutte le chiamate API in entrata e in uscita effettuate da/verso un sito WordPress.

Vibes (Gratuito)

https://wordpress.org/plugins/vibes/

Soluzione di monitoraggio dell’esperienza utente e delle prestazioni di navigazione che analizza le prestazioni percepite dal punto di vista degli utenti.

Keys Master (gratuito)

https://wordpress.org/plugins/keys-master/

Robusto gestore di password di applicazioni per WordPress con controllo dell’uso basato sui ruoli e reportistica analitica completa. Keys Master si basa sulla funzione standard di WordPress “application password” e aggiunge ulteriori funzioni e controlli.

oEmbed Manager (gratuito)

https://wordpress.org/plugins/oembed-manager/

Strumento di gestione che aiuta a mettere a punto e ad attivare in modo condizionato i produttori/consumatori del nucleo di WordPress oEmbed. oEmbed Manager può aiutare a raggiungere la conformità GDPR.

DecaLog (gratuito)

https://wordpress.org/plugins/decalog/

Standard di riferimento per l’osservabilità di WordPress, DecaLog fornisce funzioni di log, monitoraggio e tracciamento affidabili e potenti per il core di WordPress, PHP, database, plugin e temi.

Gestore APCu (gratuito)

https://wordpress.org/plugins/apcu-manager/

Strumento completo di gestione di APCu e di reportistica analitica. APCu Manager consente di supervisionare e ottimizzare le operazioni APCu su un sito WordPress.

Localizzatore IP (gratuito)

https://wordpress.org/plugins/ip-locator/

Servizio di rilevamento di paesi e lingue per WordPress. Veloce, affidabile e plug & play. IP Locator fornisce un’API di personalizzazione e rilevamento condizionale per il nucleo di WordPress e i plugin che ne hanno bisogno.

Rilevatore di dispositivi (gratuito)

https://wordpress.org/plugins/device-detector/

Strumento di rilevamento e gestione che rileva tutti i dispositivi che accedono a un sito WordPress. Device Detector fornisce rapporti analitici completi, personalizzazione dei CSS e API di rilevamento per il nucleo di WordPress e i plugin che ne hanno bisogno.

MailArchiver (gratuito)

https://wordpress.org/plugins/mailarchiver/

Strumento di archiviazione automatica della posta in uscita che funziona perfettamente indipendentemente dal provider di servizi di posta e dalla tecnologia utilizzata: API, SMTP, IMAP o PHP nativo.

Stato e informazioni su Apache (gratuito)

https://wordpress.org/plugins/htaccess-server-info-server-status/

Strumento per attivare e impostare gli url per i moduli Apache server-status e server-info. Inoltre, Apache Status & Info consente di controllare la configurazione e le impostazioni di Apache all’interno di WPadmin.

Ottimizzazione delle immagini

La maggior parte delle opzioni incluse in questa sezione sono gratuite.

Compressione manuale dell’immagine

Comprimere sempre più volte (il maggior numero possibile) finché non si arriva al punto in cui la compressione ulteriore degrada in modo inaccettabile la qualità. Ho già eseguito 10-20 passaggi di compressione diversi su un’immagine senza che la qualità peggiorasse in modo evidente. Eseguire TinyJPG e TinyPNG sulle immagini il maggior numero di volte possibile prima di passare a un altro compressore.

Una volta compressa un’immagine con un servizio alternativo, è possibile farla passare nuovamente attraverso TinyPNG e TinyJPG per ulteriori compressioni!

A titolo di esempio: TinyPNG > TinyPNG > TinyPNG > TinyPNG > TinyJPG > TinyJPG > TinyPNG

> TinyPNG > 11zon > TinyPNG > 11zon > TinyJPG > TinyPNG

Continuate a comprimere l’immagine e a farla girare tra i vari servizi per comprimerla ulteriormente, fino a quando non potrete comprimere ulteriormente l’immagine su nessun servizio o la qualità si ridurrà oltre un livello accettabile.

Anche quando un servizio esaurisce la sua capacità di comprimere ulteriormente dopo più esecuzioni, l’uso di un altro servizio per generare un’immagine ancora più compressa consentirà talvolta al sito di compressione precedente di comprimere ulteriormente. La conversione di un’immagine in un altro formato consente sempre di utilizzare i servizi di compressione per comprimerla ulteriormente una volta convertita.

TinyPNG (gratuito)

https://tinypng.com/

Ottimo sito di ottimizzazione. Tinypng è unico in quanto è possibile eseguire più passaggi di compressione. Ad esempio, è possibile comprimere l’immagine una volta, scaricarla e trascinarla immediatamente in tinypng per comprimerla ulteriormente. TinyPNG di solito può eseguire almeno 3 passaggi. Eseguire sempre più passaggi con TinyPNG!

Una volta che TinyPNG non è in grado di ridurre ulteriormente le dimensioni, passare l’immagine attraverso TinyJPG

TinyJPG (gratuito)

https://tinyjpg.com/

Incredibilmente simile a tinypng, ma utilizza un algoritmo leggermente diverso. Eseguire le immagini attraverso TinyJPG dopo TinyPNG (o viceversa)

Comprimere o morire (gratuito)

https://compress-or-die.com/

Comprimere in blocco (gratuito)

https://batchcompress.com/en

La compressione batch converte i PNG in JPG ed elimina qualsiasi effetto di trasparenza sul png compresso. Usare batchcompress solo se non si ha bisogno della trasparenza dei png.

Spremere le foto (gratis)

https://www.squeeze.pics/ Comprimere le immagini in batch

11zon (Gratuito)

https://imagecompressor.11zon.com/

Convertire gratuitamente (gratuito)

https://www.freeconvert.com/

Nota

Consiglio di far rimbalzare le immagini da comprimere attraverso più servizi, comprimendo l’immagine più volte.

È meglio iniziare con un’immagine di alta qualità e di grandi dimensioni, perché quando la si fa passare più volte attraverso un compressore, la qualità si degrada a ogni passaggio.

Con questo procedimento è possibile ridurre le immagini a meno di 100 kb, anche se l’immagine parte da 4-9 MB. È certamente una seccatura, ma funziona. La qualità diminuisce a ogni compressione, quindi è meglio iniziare con un’immagine ultra nitida e di alta qualità, in modo che la degradazione non si noti. Una volta che si inizia ad arrivare alle centinaia di immagini basse, controllare la qualità dell’immagine dopo ogni operazione di compressione per assicurarsi che sia ancora accettabile.

Alcuni servizi di compressione sono migliori di altri e producono immagini di qualità migliore con dimensioni equivalenti.

Quando si nota che la qualità dell’immagine si degrada oltre il punto in cui è accettabile (la foto diventa troppo sgranata), utilizzare l’immagine compressa con il peso del file più basso (versione più compressa) dell’immagine che è ancora visivamente di alta qualità.

Le immagini compresse dovrebbero essere possibilmente inferiori a 100 kb. Più bassa è la dimensione del file, meglio è. Una differenza di 300-400 kb nel peso del file potrebbe fare la differenza tra un punteggio di 80 e 90 (ad esempio, 490 kb per il file originale e 90 kb per l’immagine compressa).

Il peso dei file immagine può sicuramente fare la differenza nei punteggi di pagespeed, quindi comprimete le immagini il più possibile!

Plugin di compressione delle immagini

Controllo della qualità delle immagini (gratuito)

https://wordpress.org/plugins/still-be-image-quality-control/

Piccolo plugin pulito, molto personalizzabile, utilizzo gratuito illimitato.

Ottimizzatore di immagini (gratuito)

https://wordpress.org/plugins/bulk-image-resizer/

Comprime le immagini, le ridimensiona e le converte in WebP. Tutto completamente gratuito, senza limiti di dimensione delle immagini, tutto sul server dell’host, senza servizi di terze parti.

Smush (gratuito e premium)

https://wordpress.org/plugins/wp-smushit/

Uno dei migliori plugin per l’ottimizzazione delle immagini. Il suo livello gratuito è estremamente generoso (immagini illimitate sotto i 5 MB) e ha una suite completa di funzioni di ottimizzazione delle immagini. Smush Pro è utile perché permette di eseguire l’ottimizzazione delle immagini in background, il che è necessario se avete una grande quantità di immagini sul vostro sito (se scegliete Smush).

PhastPress (gratuito)

https://wordpress.org/plugins/phastpress

Ottimizzazione delle immagini:

• Phast ottimizza le immagini utilizzando la quantizzazione PNG (pngquant) e la ricodifica JPEG (libjpeg-turbo).
• Phast inserisce immagini piccole (< 512 byte) nella pagina.
• Phast converte le immagini JPEG in WebP per i browser supportati.
• Phast consente il caricamento pigro nativo per accelerare il caricamento delle pagine e risparmiare larghezza di banda.

Immagini volanti (gratuito)

https://wordpress.org/plugins/nazy-load/

Plugin gratuito per l’ottimizzazione delle immagini con compressione al volo. Utilizzo gratuito e illimitato.

ShortPixel (Freemium)

https://wordpress.org/plugins/shortpixel-image-optimiser/

Articolo di ThemeIsle

https://themeisle.com/blog/wordpress-image-optimizer-plugins-compared/#image-compression- vincitore

ShortPixel è il miglior plugin per l’ottimizzazione delle immagini secondo i test di confronto di ThemeIsle.

Il mobile è l’obiettivo dell’ottimizzazione e ShortPixel vince di gran lunga. Sebbene la compressione delle immagini di ShortPixel sia apparentemente inferiore a quella di Optimole, ShortPixel ottiene risultati complessivi migliori e migliora le prestazioni rispetto a Optimole.

Resmush it (Gratuito)

https://wordpress.org/plugins/resmushit-image-optimizer/

“ReSmush.it Image Optimizer consente di utilizzare gratuitamente l’ottimizzazione delle immagini basata sulle API di reSmush.it. reSmush.it fornisce una riduzione delle dimensioni delle immagini basata su diversi algoritmi avanzati. L’API accetta file JPG, PNG e GIF fino a 5MB”.

CompressX (gratuito)

https://wordpress.org/plugins/compressx/

Compressione e conversione di immagini gratuita, completamente locale.

WP Vivid Image Optimization (freemium)

https://wordpress.org/plugins/wpvivid-imgoptim/

Plugin di ottimizzazione completo, con la maggior parte delle funzioni di ottimizzazione abilitate gratuitamente. 2000 immagini/mese, qualsiasi immagine di dimensioni inferiori a 5 MB. Si consiglia vivamente di verificare questo plugin e di confrontarlo con le altre opzioni.

WP-Optimize (gratuito)

https://wordpress.org/plugins/wp-optimize/

Compressione massiva di immagini gratuita

Ridurre i colori

Riducendo la quantità di colori utilizzati in un’immagine si riduce la dimensione del file. È possibile rimuoverne alcuni senza danneggiare la qualità dell’immagine, ma è necessario fare qualche prova per trovare ciò che rientra in una soglia accettabile. La quantità di colori che può essere rimossa senza danneggiare la qualità dell’immagine varia da immagine a immagine.

Strumenti PNG online (gratuiti) Riduzione del numero di colori PNG

https://onlinepngtools.com/decrease-png-color-count

Ridurre il numero di colori WebP

https://onlinetools.com/webp/reduce-webp-colors

Ridurre i colori JPG

https://onlinejpgtools.com/reduce-jpg-colors

Software di compressione installabile

Software di compressione installabile sul dispositivo host (Windows, Mac, Linux)

LibVips (gratuito)

https://github.com/libvips/libvips

LibVips è una libreria per la compressione e l’ottimizzazione delle immagini con una moltitudine di funzioni che vanno oltre la semplice compressione delle immagini, consentendo di comprimere/ottimizzare le immagini in modo profondo e granulare.

GUI ufficiale Nip2 (gratuita)

https://github.com/libvips/nip2

WSRV (gratuito)

https://wsrv.nl/

https://github.com/weserv/images

wsrv.nl è un servizio di cache e ridimensionamento delle immagini. I loro server ridimensionano le immagini, le mettono in cache in tutto il mondo e le visualizzano. Utilizza la libreria LibVips e la estende con ulteriori funzionalità.

ImgProxy (gratuito)

https://github.com/imgproxy/imgproxy

Utilizza la libreria LibVips e dispone di una moltitudine di funzioni di ottimizzazione delle immagini.

Documentazione

https://docs.imgproxy.net/

Caricamento pigro di immagini e video

Lazyload impedisce il caricamento delle immagini che si trovano sotto la piega (fuori dal viewport dell’utente al momento del caricamento del sito) fino a quando l’immagine non entra nel viewport dell’utente (cioè, può essere vista sullo schermo), riducendo così il peso delle pagine che contengono immagini e accelerando in modo significativo il loro tempo di caricamento. Questo è fondamentale se avete un sito web molto ricco di immagini.

Escludere le immagini Above the Fold dal caricamento pigro

Le immagini sopra la piega (immagini che vengono caricate all’interno della viewport senza scorrere) devono essere escluse dal caricamento pigro. Caricare solo le immagini sotto la piega. La maggior parte dei plugin è in grado di rilevare automaticamente le posizioni delle immagini, ma potrebbe essere necessario aggiungere esclusioni manuali. Perfmatters fa un buon lavoro (ed è quello che uso io) per escludere automaticamente le immagini che riesce a rilevare, ma non è perfetto.

Ogni plugin per il caricamento pigro è funzionalmente uguale per quanto riguarda l’esclusione delle immagini. Ci sarà una casella di testo in cui incollare il nome del file dell’immagine per escluderla dal caricamento pigro, basta controllare le impostazioni.

Dimensioni automatiche per le immagini caricate con lazy (gratis)

https://wordpress.org/plugins/auto-sizes/

Questo plugin implementa le specifiche HTML per l’aggiunta di sizes=”auto” alle immagini caricate in modo pigro. Per informazioni di base, vedere: https://github.com/whatwg/html/issues/4654

Immagini volanti (gratuito)

https://wordpress.org/plugins/nazy-load/

Ha una funzione di caricamento pigro, sia nativo del browser che in javascript.

Rocket Lazyload (gratuito)

https://wordpress.org/plugins/rocket-lazy-load/

A3 Lazyload (gratuito)

https://wordpress.org/plugins/a3-lazy-load/

Plugin di ottimizzazione a pagamento

Tutti i plugin di caching a pagamento hanno la capacità di caricare le immagini in modo pigro. Anche molti plugin per l’ottimizzazione delle immagini ne sono dotati.

Convertitori di immagini

Convertitore per media (gratuito)

https://wordpress.org/plugins/webp-converter-for-media/

Converte automaticamente le immagini in WebP.

Convertitore batch di formato immagine XnConvert (gratuito)

https://www.xnview.com/en/xnconvert/

XnConvert è un convertitore di immagini batch multipiattaforma veloce, potente e gratuito. È possibile convertire e comprimere facilmente le immagini, le foto e le immagini, e applicare oltre 80 azioni (come ridimensionamento, ritaglio, regolazioni del colore, filtro e altro ancora). Sono supportati tutti i formati di immagine e grafica più comuni (JPEG, TIFF, PNG, GIF, WebP, PSD, JPEG2000, JPEG-XL, OpenEXR, Camera RAW, HEIC,

PDF, DNG, CR2). È possibile salvare e riutilizzare le preimpostazioni per un’altra conversione di immagini in batch.

Selezionare la giusta dimensione dell’immagine

Una volta caricato il file su WordPress, WordPress creerà automaticamente diverse dimensioni delle immagini. Se si sceglie una delle dimensioni più piccole create (media, medio-grande ecc.), se si utilizza un costruttore di pagine come Elementor, è possibile selezionare la dimensione più piccola (se appropriata) e la dimensione del file verrà ulteriormente ridotta.

È anche possibile utilizzare un plugin per immagini adattive/reattive per ridimensionarle automaticamente.

Assicuratevi che l’immagine sia di qualità accettabile prima di pubblicarla sul vostro sito.

Immagini volanti (gratuito)

https://wordpress.org/plugins/nazy-load/

Flying Images per la compressione delle immagini, WebP e lazyload (gratuito):

È possibile utilizzare Flying Images per comprimere e ottimizzare le immagini.

Li serve automaticamente da un cdn basato sulle immagini e li converte al volo nel formato WEBP per i browser supportati. Non installate Flying Images se state usando WP-Rockets lazyload invece di Flying Images lazyload, che caricherà i file multimediali dal vostro sito invece del cdn statico. Se si desidera utilizzare Flying Images/il cdn statico, il Lazy Load deve essere disabilitato negli altri plugin. Si dovrebbe utilizzare un solo plugin per la funzionalità di caricamento pigro.

Correggere i problemi del CLS relativi alle immagini

Aggiungere gli attributi di larghezza e altezza mancanti alle immagini

L’aggiunta degli attributi di altezza e larghezza mancanti alle immagini contribuisce a ridurre la velocità della pagina del Content Layout Shift (CLS).

Perfmatters (a pagamento)

https://perfmatters.io/docs/missing-width-height-images/

Flyingpress (a pagamento)

https://docs.flyingpress.com/en/article/add-missing-width-and-height-i1n2w9/

L’aggiunta delle dimensioni mancanti di altezza e larghezza alle immagini riduce in modo significativo il Content Layout Shift (CLS) nei punteggi di Page Speed.

Ottimizzare di più! Immagini (gratuito)

https://wordpress.org/plugins/optimize-more-images/

Aggiunge gli attributi di altezza e larghezza mancanti per migliorare i punteggi CLS.

Specificare le dimensioni mancanti dell’immagine (gratuito)

https://wordpress.org/plugins/specify-missing-image-dimensions/

Plugin gratuito, l’unica caratteristica è l’aggiunta delle dimensioni delle immagini mancanti

JCH Optimize (gratuito)

https://wordpress.org/plugins/jch-optimize/

Plugin per l’ottimizzazione di più funzioni in grado di aggiungere gli attributi di altezza e larghezza mancanti

Phastpress (gratuito)

https://wordpress.org/plugins/phastpress/

Plugin di ottimizzazione multifunzione, può anche aggiungere gli attributi di altezza e larghezza mancanti Tuttavia, è necessario aggiungere esclusioni di immagini nella casella di esclusione a tutte le

immagini che vengono caricate nel contenuto above the fold, in modo che non vengano caricate pigramente nelle impostazioni di WP-Rockets se si utilizza il loro caricamento pigro.

Non si deve effettuare il lazyload dei file che si trovano sopra la piega, perché questo rallenterà artificialmente i loro tempi di caricamento, in quanto verranno caricati dopo il file js di lazyload. Questo avrà un impatto negativo sulle prestazioni se non si aggiungono le esclusioni, quindi non dimenticatelo! Se non si dimentica di aggiungere le esclusioni, lazyload aumenterà notevolmente le prestazioni del sito.

Ridimensionamento dell’immagine

Imsanity (completamente gratuito)

https://wordpress.org/plugins/imsanity/

Caratteristiche:

1. Ridimensiona automaticamente i caricamenti di immagini di grandi dimensioni a dimensioni più “sane”.
2. Funzione di ridimensionamento in blocco per ridimensionare le immagini esistenti
3. Ridimensionare selettivamente le immagini direttamente nel Catalogo multimediale (vista elenco)
4. Consente la configurazione di larghezza/altezza massima e qualità JPG
5. Converte facoltativamente i file BMP e PNG in JPG per un maggiore risparmio.
6. Una volta attivata, Imsanity non richiede alcuna azione da parte dell’utente.
7. Utilizza le funzioni di ridimensionamento delle immagini integrate in WordPress

Bulk Image Optimizer (completamente gratuito)

https://wordpress.org/plugins/bulk-image-resizer/

Comprime le immagini, le ridimensiona e le converte in WebP. Tutto completamente gratuito, senza limiti di dimensione delle immagini, tutto sul server dell’host, senza servizi di terze parti.

Dimensioni semplici delle immagini (gratuito)

https://wordpress.org/plugins/simple-image-sizes/

Questo plugin consente di creare dimensioni personalizzate per le immagini del sito. Sostituisce le dimensioni del tema direttamente nella pagina delle opzioni multimediali.

Migliori dimensioni delle immagini (completamente gratuito)

https://wordpress.org/plugins/better-image-sizes/

Questo plugin consente di:

• disabilitare le dimensioni delle immagini generate automaticamente
• generare dinamicamente solo le dimensioni delle immagini necessarie per le sole immagini necessarie
• eliminare le dimensioni delle immagini generate da questo plugin singolarmente o tutte insieme
• specificare un diverso punto focale da mettere a fuoco durante la creazione di versioni ritagliate dell’immagine
• rilevare automaticamente il punto focale tramite l’algoritmo di rilevamento del volto
• disabilitare la soglia per le immagini di grandi dimensioni, in modo che le immagini più grandi di 2560x2560px non vengano ridimensionate.

ImgProxy (gratuito)

https://github.com/imgproxy/imgproxy

Imgproxy è un server autonomo veloce e sicuro per il ridimensionamento, l’elaborazione e la conversione delle immagini. I principi guida di imgproxy sono sicurezza, velocità e semplicità.

Immagini adattive

Immagini adattive (gratuito)

https://wordpress.org/plugins/adaptive-images/

Plugin gratuito per la generazione di immagini adattive

Immagini adattive ShortPixel (Freemium)

https://wordpress.org/plugins/shortpixel-adaptive-images/

Abilitare le immagini reattive per Gutenberg (gratis)

https://wordpress.org/plugins/enable-responsive-image/

Immagini volanti (gratuito)

https://wordpress.org/plugins/nazy-load/

Plugin gratuito per l’ottimizzazione delle immagini con funzioni interessanti come CDN gratuito per le immagini, compressione delle immagini al volo, conversione webP al volo e immagini adattive.

Precaricare le immagini

Lazyload, Preload e altro (gratis)

https://wordpress.org/plugins/lazyload-preload-and-more/

Può aggiungere l’attributo Preload e l’attributo loading eager.

Preload è più potente di Fetch Priority e ha la precedenza sull’attributo Fetch Priority. Se si desidera che un’immagine venga scaricata il prima possibile, utilizzare Preload rispetto a Fetch Priority.

Precaricare le immagini in primo piano (gratuito)

https://wordpress.org/plugins/preload-featured-images/

Precarica automaticamente le immagini in primo piano

Pre-festa (gratuito)

https://wordpress.org/plugins/pre-party-browser-hints/

Pre-Party può aggiungere una serie di attributi di caricamento, tra cui l’attributo preload.

Perfmatters (a pagamento)

https://perfmatters.io/docs/preload/

Perfmatters dispone di una funzione integrata di precaricamento delle immagini

Priorità di recupero delle immagini

Attributi immagine personalizzati (gratuito)

https://wordpress.org/plugins/custom-image-attributes/ Un altro

plugin per aggiungere gli attributi delle immagini (compresa la priorità di recupero).

Priorizzatore di immagini (gratuito)

https://wordpress.org/plugins/image-prioritizer/

Questo plugin ottimizza il caricamento delle immagini che sono l’elemento LCP (Largest Contentful Paint), compresi gli elementi img e gli elementi con immagini di sfondo CSS (dove esiste un attributo di stile con proprietà background-image). Diversi punti di rottura nella progettazione responsive di un tema possono far sì che elementi diversi siano l’elemento LCP. L’elemento LCP per ogni punto di interruzione viene catturato in modo da aggiungere collegamenti di precaricamento ad alta priorità con query multimediali che danno la priorità al caricamento dell’immagine LCP specifica per il viewport del visitatore.

Plugin Fetch Priority (gratuito)

https://wordpress.org/plugins/fetchpriority/

Plugin Fetch Priority realizzato dal WordPress Performance Team. Applica automaticamente l’attributo fetch priority a una singola immagine determinata automaticamente. Non ci sono impostazioni e non c’è nulla da configurare.

Se avete bisogno di un controllo granulare sull’attributo Fetch Priority, vi consiglio di acquistare Perfmatters.

Perfmatters (a pagamento)

https://perfmatters.io

https://perfmatters.io/docs/fetch-priority/

Perfmatters offre un controllo esplicito su quali immagini hanno l’attributo di priorità di fetch

SpeedSize (a pagamento)

https://wordpress.org/plugins/speedsize-ai-image-optimizer/

Interessanti caratteristiche uniche. Potrebbe essere buono, ma non ho ancora avuto modo di testarlo.

Decodifica dell’immagine

Immagine WordPress Async

https://kybernaut.cz/en/clanky/the-unintended-consequences-of-decodingasync-on-your-wordpr ess-sites-lcp/

Immagine in linea Base64 (gratuito)

https://wordpress.org/plugins/inline-image-base64/

Con Inline Image Base64 è possibile inserire immagini specifiche direttamente nell’HTML come base64.

Nota: utilizzare questa funzione solo con immagini estremamente piccole, inferiori a 20- 30 kb (idealmente meno di 10 kb). Se possibile, mantenere la dimensione del file delle immagini in linea ancora più bassa.

Rigenerazione delle miniature

Rigenerare le miniature (gratis)

https://wordpress.org/plugins/regenerate-thumbnails/

Rigenerare le miniature consente di rigenerare tutte le dimensioni delle miniature di una o più immagini caricate nel Catalogo multimediale.

WebP e AVIF

CompressX (gratuito)

https://wordpress.org/plugins/compressx/

Plugin di conversione WebP e AVIF del team WPVivid. Completamente gratuito, la compressione e la conversione vengono effettuate localmente sul vostro sito.

QuickWebP (gratuito)

https://wordpress.org/plugins/quickwebp/

Plugin di conversione WebP completamente gratuito. Converte completamente in WebP, senza fallback.

PhastPress (gratuito)

https://wordpress.org/plugins/phastpress

Ottimizzazione delle immagini:

• Phast ottimizza le immagini utilizzando la quantizzazione PNG (pngquant) e la ricodifica JPEG (libjpeg-turbo).
• Phast inserisce immagini piccole (< 512 byte) nella pagina.
• Phast converte le immagini JPEG in WebP per i browser supportati.
• Phast consente il caricamento pigro nativo per accelerare il caricamento delle pagine e risparmiare larghezza di banda.

Convertitori di formato immagine di

nuova generazione WebP Express

(gratuito)

https://wordpress.org/plugins/webp-express/

Servire immagini WebP generate automaticamente invece di jpeg/png ai browser che supportano WebP.

WebP Express Plus (a pagamento)

https://wordpress.org/plugins/webp-express-plus/

Addon per WebP Express che aggiunge ulteriori funzioni. Richiede che il plugin WebP Express sia attivo.

AVIF Express (gratuito)

https://wordpress.org/plugins/avif-express/

Al momento del caricamento, le immagini vengono convertite in formato AVIF. Le immagini AVIF sono un nuovo formato e non sono supportate da tutti i browser. Le immagini di riserva sono in formato WebP.

Miniature di immagini remote (gratuito)

https://wordpress.org/plugins/wp-remote-thumbnail/

WP Remote Thumbnail è un plugin per WordPress molto leggero che non richiede alcuna configurazione e si configura con un solo clic. Utilizzando questo plugin, è possibile impostare facilmente qualsiasi immagine esterna come immagine in primo piano di qualsiasi post/pagina o anche di tipi di post personalizzati.

Nota: Assicurarsi di usarlo insieme a un plugin per i suggerimenti delle risorse (pre- party) per aggiungere gli attributi preload e preconnect al dominio di terze parti.

Caching dinamico delle immagini

Memorizzazione locale con blob IndexedDB

Fasi di implementazione

Aprire un database: Utilizzare JavaScript per aprire un database IndexedDB. Creare un archivio di oggetti per le immagini, se non esiste già.

Recupero e archiviazione delle immagini: Quando si recupera un’immagine dalla galleria remota, la si scrive nell’archivio IndexedDB. È possibile che la chiave sia basata su un identificatore univoco, come un URL o un ID personalizzato.

Controllare prima la cache: prima di recuperare un’immagine, verificare se esiste nella cache di IndexedDB. Se esiste, caricarla da lì.

Strategia di aggiornamento: Decidere una strategia per l’aggiornamento delle immagini nella cache. Per le foto in tempo reale, potrebbe essere necessario un controllo periodico per verificare se sono disponibili versioni più recenti delle immagini.

Filtri immagine

Filtri immagine facili (gratis)

https://wordpress.org/plugins/easy-image-filters/

Plugin leggero e gratuito per aggiungere filtri alle immagini

Immagini gratuite di alta qualità

Immagini istantanee (gratis)

https://wordpress.org/plugins/instant-images/

Immagini gratuite di alta qualità

Filigrana dell’immagine

Filigrana immagine (gratuito)

https://wordpress.org/plugins/image-watermark/

Plugin ultra leggero per la filigrana delle immagini.

Ottimizzazione delle icone

Icone SVG gratuite

È possibile scaricare gratuitamente gli SVG da qui:

FontAwesome (gratuito)

https://fontawesome.com/download

FlatIcon (gratuito)

https://www.flaticon.com/

IconFinder (gratuito)

https://www.iconfinder.com/

Comprimere gli SVG

Utilizzate insieme Vecta.io e SVGOMG per ridurre il più possibile le dimensioni delle vostre icone SVG.

Vecta.io (Gratuito)

https://vecta.io

Compressore SVG

SVGOMG (gratuito)

https://jakearchibald.github.io/svgomg/

Un altro ottimizzatore SVG. Consiglio di usarlo insieme a Vecta.io

<!––nextpage––>

Ottimizzazione video

Caricamento pigro degli iframes

Incorporamento pigro (gratuito)

https://wordpress.org/plugins/lazy-embed/

Il plugin Lazy Embed rinvia il caricamento di qualsiasi risorsa necessaria per la riproduzione del video fino a quando non viene richiesta la riproduzione del video. Lo fa aggiungendo un attributo srcdoc all’iframe, che viene visualizzato al posto del normale contenuto dell’iframe.

Altri plugin

Molti plugin, oltre a Lazy Embed, possono caricare in modo pigro gli iframe video. Anche Perfmatters, Flyingpress e un’ampia gamma di altri plugin gratuiti possono farlo.

Compressione video

Handbrake (gratuito)

https://handbrake.fr/

Un programma open source installabile che può comprimere i video.

Convertire i video in WebM per comprimere ulteriormente le dimensioni dei file video

I file video WebM sono più piccoli del 30% rispetto agli MP4. Handbrake consente di convertire i video in formato WebM. WebM è l’equivalente video delle immagini WebP.

Convertitore video gratuito (gratuito)

https://www.freeconvert.com/video-compressor

Articolo di 10web.io sull’ottimizzazione dei video

https://10web.io/blog/optimizing-videos-on-your-wordpress-site/

Ottimo articolo con ulteriori suggerimenti per l’ottimizzazione dei siti con video.

Plugin per lettori video

Lettore Presto (gratuito)

https://wordpress.org/plugins/presto-player/

Lettore video leggero. Supporto video HTML5, Youtube e Vimeo.

Super Video Player (gratuito)

https://wordpress.org/plugins/super-video-player

Super Video Player è un plugin leggero e completamente personalizzabile per la riproduzione di video self-hosted che supporta MP4/OGG e più tracce di didascalie o file di sottotitoli.

Lettore video HTML5 (gratuito)

https://wordpress.org/plugins/videojs-html5-player/

Un altro lettore video leggero.

Pacchetto video (gratuito)

https://wordpress.org/plugins/video-embed-thumbnail-generator/ Lettore

video leggero, hosting locale.

Compressore di animazione Lottie

Plugin leggero di animazione Lottie

AM Lottie Player (gratuito)

https://wordpress.org/plugins/am-lottieplayer/

Il Lottie Player gratuito più completo che ci sia.

AM LottiePlayer è facile da usare, leggero e vi dà il controllo totale su come implementare animazioni nitide e vettoriali nel vostro sito web.

Ottimizzazione Lottie

Lottiemizer (gratis)

https://www.lottiemizer.com/ Comprime

le animazioni di Lottie

Ottimizzatore JSON Lottie (gratuito)

https://lottiefiles.com/tools/lottie-json-to-optimized-lottie-json

Ottimizzare i file JSON di Lottie.

dotLottie (Gratuito)

https://dotlottie.io/

dotLottie è un formato di file open-source che aggrega uno o più file Lottie e le loro risorse associate in un unico file. Sono archivi ZIP compressi con il metodo di compressione Deflate e hanno l’estensione “.lottie”.

Come creare animazioni interattive di Lottie

Tutorial su Youtube (gratuito)

https://www.youtube.com/watch?v=-bGTLlnGbZo

Tutorial su come realizzare l’interattivo di Lottie

Gif

Convertire gratuitamente (gratuito)

https://www.freeconvert.com/gif-compressor

Ezgif (Gratuito)

https://ezgif.com/optimize

Un altro compressore gif

Gifcompressor (gratuito)

https://gifcompressor.com/

Compressore Gif

Xconvert (gratuito)

https://www.xconvert.com/compress-gif

ILoveIMG (gratuito)

https://www.iloveimg.com/compress-image/compress-gif

Veed.io (Gratuito)

https://www.veed.io/tools/video-compressor/gif-compressor

Animatamente (gratuito)

https://animately.co/tools/compress-gif

Ottimizzare gli embed

Embed Optimizer (gratuito)

https://wordpress.org/plugins/embed-optimizer/

Lo scopo di questo plugin è quello di ottimizzare le prestazioni degli embed in WordPress, come i video di YouTube, TikToks e così via. Inizialmente questo obiettivo viene raggiunto caricandoli in modo pigro solo quando vengono visualizzati.

Questo migliora le prestazioni, perché gli embed sono in genere molto impegnativi dal punto di vista delle risorse e quindi il caricamento pigro assicura che non competano con le risorse durante il caricamento della pagina. Altre ottimizzazioni sono previste per il futuro.

Temi

Utenti di Pagebuilder

Il vostro tema vi sta rallentando

Se si utilizza un page builder, i temi sono un peso morto. Non aggiungono assolutamente nulla al design, poiché tutti i css e i js necessari per una pagina sono generati dal costruttore di pagine stesso. Astra, per esempio, inserisce centinaia di kb di codice inutile e non necessario nell’html, nel css e nel js, quando non ne serve nemmeno una riga. E lo smantellamento di un tema pesante è di per sé problematico. Anche quando tutte le funzionalità del tema sono inutilizzate, la disattivazione dei file css e js generati dal tema compromette il design e la funzionalità del sito.

Il sistema dei temi è una parte fondamentale di WordPress e non può essere disattivato, quindi non si può essere veramente “senza temi”. Dovreste scegliere il tema più ottimizzato e che carichi meno codice fin dall’inizio, per minimizzare il più possibile l’impatto del sistema dei temi. Sarà comunque necessario rimuovere i css inutilizzati e ritardare i js con un plugin, ma i risultati saranno molto migliori.

Se si utilizza un costruttore, si costruisce la pagina da zero o con modelli importati direttamente nel costruttore. Per Elementor, ad esempio, si tratta di “kit di modelli” o di elementi della libreria di modelli.

Non utilizzate mai i componenti aggiuntivi del tema o qualsiasi funzione fornita dal tema e, se possibile, disabilitate le impostazioni che influiscono sulle prestazioni dal pannello delle impostazioni. Tutto ciò aggiunge “ulteriore peso” che si caricherà sul frontend. I plugin installati tramite il tema (in genere accade con i temi a pagamento) vanno bene se sono ben ottimizzati, ma le funzionalità specifiche del tema dovrebbero essere evitate.

Il mio consiglio è di utilizzare Hello Elementor o Picostrap. Questi due caricano pochissimo codice nel frontend. La mia preferenza personale va a Hello Elementor, l’intero zip del plugin è 3 volte più piccolo di Picostrap e carica pochissimo codice. Picostrap è comunque un’opzione fantastica ed entrambi sono incredibilmente veloci. Vi consiglio di provarli entrambi per vedere quale si adatta meglio al vostro caso d’uso. Non uso Picostrap dalla v4 (attualmente è alla v5), quindi sono sicuro che le sue prestazioni siano ulteriormente migliorate.

Temi ottimizzati per le

prestazioni Hello Elementor

(gratis)

https://wordpress.org/themes/hello-elementor/

Hello Elementor è un tema molto, molto leggero e semplice.

Picostrap (gratuito)

https://picostrap.com/

Picostrap è un tema molto leggero. Se state iniziando a costruire il vostro sito, vi consiglio vivamente Picostrap.

Temi da evitare

Astra (Free e Pro)

Non posso più raccomandare Astra. Evitate Astra per le nuove costruzioni se il vostro sito non è già stato costruito su di esso. Astra aggiunge una quantità follemente elevata di css e javascript, che compromette le prestazioni di velocità delle pagine. Aggiunge oltre 300 kb di js/css su un sito di beaver builder che ho ottimizzato. Ritardando il js si interrompono anche le funzionalità (intestazione, menu, ecc.). Non usarlo quando possibile.

Ottimizzazione di Astra

Se si deve usare Astra, ecco alcune misure che possono essere adottate per ottimizzare le prestazioni di Astra.

Non è necessaria la versione pro, che renderà il vostro sito più lento.

Secondo la mia esperienza, queste sono le impostazioni ottimali per Astra da abilitare con Asset Cleanup. Se necessario, eseguire una prova approfondita e riabilitare i file:

– ” . “- u-‘^°u ^” *”‘* o*!?e I.” Iflii’>-i1 aite mm – e – n- I” “‘ Ui iIoz-‘J +^ Ae P>gw -‘f “p>$e” |’nrt.ryfJe

i “. uiiiua<I il1nr vaJ.s lee.e’t Ulgi mu’Efiing ‘hiu Reg£c|+yJ! @

|-Traduzione: “Non è vero che non ci sono più i soldi”. : Mostra;’ nId -Ł

I U-iIoaJ i11or LffiŁa wItI- i jest UKI mai;hing łhls Reg-L¥[e*): @

in\ix /,wąSrript rode ascnrnscd ‘ I-h rhr h°ndIo” “Show./ Hiule +

Dovresti anche scaricare il tema child astra: https://wpastra.com/child-theme-generator/

Copiare e incollare questo file nel file functions.php nell’editor del tema:

Mettete queste righe proprio sotto il punto in cui si dice “definire le costanti”.

function astra_remove_header() {

remove_action( ‘astra_masthead’, ‘astra_masthead_primary_template’ );

}

add_action( ‘wp’, ‘astra_remove_header’ );

add_filter( ‘astra_schema_enabled’, ‘return_false’ ); add_filter( ‘astra_meta_box_options’, ‘default_disable_options’ );

/**

• Disattivare per default le Opzioni Meta

*

• @param array $meta_option Meta della pagina.
• @Ritorno array

*/

funzione default_disable_options( $meta_option ) {

$meta_option[‘ast-main-header-display’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

$meta_option[‘footer-sml-layout’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

$meta_option[‘footer-adv-display’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

$meta_option[‘site-post-title’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

$meta_option[‘site-sidebar-layout’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

$meta_option[‘site-content-layout’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

$meta_option[‘ast-featured-img’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

$meta_option[‘ast-breadcrumbs-content’] = array( ‘default’ => ‘disabled’,

sanitize’ => ‘FILTER_DEFAULT’,

);

restituire $meta_option;

}

add_filter( ‘astra_amp_support’, ‘ return_false’ );

Costruttori di pagine ottimizzati per le prestazioni

Costruttore di ossigeno (a pagamento)

https://oxygenbuilder.com/

Oxygen Builder è un costruttore di pagine ben ottimizzato che consente una grande flessibilità, producendo allo stesso tempo codice pulito e ottimizzato per la velocità della pagina. Molti meno tag div non necessari, troppi tag div portano a un DOM enorme. Un DOM troppo grande aumenterà il tempo di analisi dell’HTML, con conseguente aumento del TTFB.

Costruttore di mattoni (a pagamento)

https://bricksbuilder.io/

Bricks è un altro page builder ben ottimizzato che produce codice pulito.

Tela dal vivo (a pagamento)

https://livecanvas.com/

LiveCanvas: l’unico page builder che produce un codice HTML5 super pulito e personalizzato con Bootstrap 5, che è sempre possibile modificare e perfezionare tramite un editor di codice live integrato.

Live Canvas è estremamente leggero e crea codice pre-ottimizzato. Si consiglia vivamente di considerare Live Canvas come un’opzione.

Live Canvas è meglio abbinato a Picostrap, un tema ottimizzato per le prestazioni realizzato dagli stessi sviluppatori:

Picostrap (gratuito)

https://picostrap.com/

Tema ottimizzato per le prestazioni creato dal team di sviluppatori di Live Canvas.

Elementor (Freemium)

https://elementor.com/

Contrariamente a quanto si crede, una volta ottimizzato, Elementor è molto performante. Elementor non ottimizzato, invece, ha prestazioni molto scarse. Mentre Elementor è molto pesante pre-ottimizzazione, è uno dei costruttori più leggeri dopo l’ottimizzazione ed è molto facile da ottimizzare.

I plugin per rimuovere i CSS inutilizzati e ritardare i Javascript hanno esclusioni incorporate per Elementor (tranne Flyingpress, che non ha esclusioni incorporate con una casella di controllo), il che significa che ottimizzare le risorse CSS e JS di Elementor core e Elementor Pro è un gioco da ragazzi. Debloat e Perfmatters hanno un modo per applicare esclusioni automatiche quando viene utilizzata la funzionalità Delay All JS.

Esperimenti sulle prestazioni

Elementor ha molte funzioni di miglioramento delle prestazioni integrate che si trovano nella scheda Caratteristiche (Impostazioni>Caratteristiche).

Molti di questi non sono attivati per impostazione predefinita, soprattutto se si dispone di un sito preesistente quando sono stati aggiunti in un aggiornamento. Ciò significa che molti siti Elementor stanno lasciando sul tavolo prestazioni gratuite che possono essere migliorate semplicemente cambiando l’esperimento da inattivo ad attivo nel menu a tendina!

Ad esempio, Elementor ha aggiunto di recente il caricamento ottimizzato dei controlli, che può migliorare notevolmente le prestazioni dei siti di grandi dimensioni. Questa funzione non è abilitata di default e deve essere attivata manualmente.

Nota: è possibile attivare la funzionalità di Elementor Lazy Loading sopra un altro plugin di ottimizzazione. Personalmente, non ho trovato che il caricamento pigro nativo di Elementor funzioni bene, quindi continuo a utilizzare le opzioni di caricamento pigro dei plugin di ottimizzazione delle prestazioni.

Tuttavia, l’abbinamento con la funzionalità nativa di Elementor non compromette le prestazioni.

A parte questo, vi consiglio di eseguire un test di pagespeed per vedere i vostri punteggi di base prima di attivare ogni funzione di performance, e poi un altro test dopo che la funzione è stata attivata per fare un confronto.

Limitare l’uso di Contenitori, Sezioni e Colonne

Ogni contenitore/sezione/colonna aggiuntiva aggiunge ulteriori elementi DOM e peso HTML alla pagina. Sebbene i contenitori/sezioni/colonne siano talvolta più facili da usare nel design, influiscono negativamente sulla velocità della pagina. I contenitori (che sostituiscono le sezioni e le colonne) sono molto flessibili e consentono di posizionare più elementi al loro interno. Se lo si desidera, è possibile utilizzare i contenitori in formato griglia per imitare le colonne.

Metodo di stampa CSS Incorporamento

interno

L’abilitazione del metodo di stampa del CSS di incorporamento interno nelle impostazioni di Elementor consente di allineare alcuni dei CSS che la funzione Rimuovi CSS inutilizzati non può utilizzare. Si consiglia di attivarlo solo dopo aver applicato tutte le ottimizzazioni CSS.

Se si vedono file post-xxxx.css nell’albero delle richieste, la modifica del metodo di stampa dei CSS eliminerà queste richieste, inlining nel documento HTML. Se viene inlining una quantità eccessiva di CSS, questo può avere l’effetto contrario a quello desiderato e danneggiare le prestazioni, quindi assicuratevi di eseguire i test di Pagespeed prima di abilitare la funzione e una volta abilitata per verificare se il suo impatto è positivo. Rimuovi le funzioni CSS inutilizzate in genere non si rivolgono a questi file, quindi l’inlining è necessario per eliminare queste richieste.

Non impostare immagini di sfondo su elementi non convenzionali

Le immagini di sfondo impostate su elementi non convenzionali non possono essere caricate pigramente con i plugin di ottimizzazione, poiché non vengono rilevate dai loro algoritmi. Se un’immagine è impostata come immagine di sfondo su un elemento come uno spaziatore, la funzione di caricamento pigro delle immagini di sfondo di Elementor ne catturerà alcune, ma non tutte, il che influirà negativamente sulla velocità delle pagine. Anche la funzione di caricamento pigro di Elementor non le rileva per qualche motivo.

È necessario impostare le immagini solo sui widget che contengono una sezione con un selezionatore di immagini O come immagine di sfondo normale (non attraverso la sezione avanzata quando si modifica un elemento).

Se le immagini non possono essere caricate pigramente, ciò influisce negativamente sulla velocità delle pagine. Quando si ottimizza un sito, controllare sempre nella scheda network di inspect per vedere quali file vengono caricati. Questo vale per qualsiasi sito, che sia costruito con Elementor o meno.

Integrare le icone SVG nel documento HTML principale (gratis)

https://github.com/jazir555/Inline-SVGs-uploaded-to-Elementor-Icon-Widget

Questo è il mio plugin sviluppato personalmente per inserire le icone SVG nel documento HTML principale per il widget delle icone di Elementor (attualmente l’unico widget supportato). Questo plugin è ancora in fase di sviluppo e sarà ampliato per coprire tutti i widget/elementi con funzionalità di icone SVG ospitate localmente.

La funzionalità attuale funziona come previsto e aggiunge un toggle alla scheda Impostazioni avanzate per il widget Icona, che può essere attivato su base individuale (non è globale, il che consente un’implementazione granulare).

Ulteriori aggiornamenti successivi del plugin (dopo che la funzionalità sarà stata estesa a tutti i widget Elementor basati su icone) includeranno una pagina di opzioni nella dashboard dell’amministratore che consentirà l’hosting locale di qualsiasi file SVG arbitrario, ospitato localmente o in remoto da un dominio di terze parti, eliminando tutte le richieste HTTP.

Nota: questo plugin sarà aggiunto al Repository dei plugin di WordPress.org una volta che la funzionalità di Elementor sarà stata completata.

Editor del pannello Elementor Pannello Elementor flessibile (gratuito)

https://wordpress.org/plugins/flexible-elementor-panel/

Plugin molto leggero che migliora il pannello dell’editor. Può essere tranquillamente disattivato in modo selettivo nel frontend.

• Pannello Elementor trascinabile e salvataggio della posizione
• Spostarsi sul lato destro e passare alla modalità RTL
• Pannello Elementor verticale e pieghevole
• Ridimensionare il pannello di Elementor e salvare le dimensioni
• Più skin scure per l’editor di Elementor
• Categoria “Tutti i widget” collassabili
• Categoria dei widget ordinabile e salvataggio della posizione
• Aggiungere il pulsante di uscita nel piè di pagina dell’editor del pannello
• Opzione per chiudere la prima scheda nel widget Accordion
• Aggiungere altre opzioni per la modalità responsive

Editor Performance Optimization Pro Elements (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

Element Manager consente di disattivare tutti i widget nativi di Elementor.

Pulizia dell’editor per Elementor (gratis)

https://wordpress.org/plugins/editor-cleanup-for-elementor/

Editor Cleanup For Elementor è un componente aggiuntivo di Freesoul Deactivate Plugins per ripulire l’editor di Elementor.

• Non solo pulirà le risorse degli altri plugin, ma il loro codice PHP non verrà eseguito.
• L’editor di Elementor sarà più veloce e senza conflitti con altri plugin.
• Sia Freesoul Deactivate Plugins che Elementor devono essere installati e attivi, altrimenti questo plugin non funzionerà.

Contenuto limitato QuentnWP (gratuito)

https://wordpress.org/plugins/quentn-wp/

Plugin gratuito per la limitazione dei contenuti con integrazione di Elementor.

Visibilità dinamica per Elementor (gratis)

https://wordpress.org/plugins/dynamic-visibility-for-elementor/

L’estensione Dynamic Visibility consente di nascondere widget, colonne, contenitori, sezioni o pagine.

È particolarmente utile quando si sta costruendo qualcosa che non si vuole mostrare a tutti.

• Scegliere una condizione OR/AND.
• Limitare la visibilità di specifici campi o pagine personalizzate.
• Impostate una data (dal al), un giorno della settimana o un’ora e decidete quando ogni elemento sarà visibile.
• Limitare la visibilità per ruoli utente specifici, meta-utente, IP, referral o utenti.
• Limitare la visibilità dei prodotti WooCommerce
• Impostare un testo di riserva (ad esempio: “Prossimamente”) per gli elementi nascosti, che verrà visualizzato al posto dell’elemento.
• Si può scegliere di nascondere l’elemento tramite i CSS o di rimuoverlo dal DOM.

Query avanzate (gratuito)

https://wordpress.org/plugins/advanced-post-queries/

Un’estensione di Elementor PRO che consente di interrogare facilmente e dinamicamente i risultati dei widget dei post e del portfolio senza ID di interrogazione personalizzati.

Nota: richiede Elementor Pro

Classi CSS extra per i widget

Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

Fundamento (gratuito)

https://wordpress.org/plugins/fundamento/

Permette di iniettare classi CSS aggiuntive nei widget di Elementor.

Colonne e sezioni cliccabili

Rendere cliccabili le sezioni e le colonne (gratuito)

https://wordpress.org/plugins/make-section-column-clickable-elementor/

Plugin ultraleggero per rendere cliccabili sezioni e colonne.

Elementor gratuito Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

CSS personalizzato

Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

RRdevs (gratuito)

https://wordpress.org/plugins/rrdevs-for-elementor/

Plugin gratuito per Elementor che aggiunge css personalizzati

Ultra Addons lite (Gratuito)

https://wordpress.org/plugins/ultraaddons-elementor-lite/

Pacchetto di addon gratuiti con funzionalità CSS personalizzate.

Componenti aggiuntivi Xpro (gratuiti)

https://wordpress.org/plugins/xpro-elementor-addons/

Un altro plugin per Elementor Free che abilita la funzionalità CSS personalizzata.

Mini carrello per Woocommerce Pro Elements (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole

funzioni di Elementor Pro elencate.

Ultra Addons Lite (gratuito)

https://wordpress.org/plugins/ultraaddons-elementor-lite/

Include un widget per il mini-carrello

Chat in diretta (gratuita) Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, pulsanti flottanti, ecc.) I pulsanti fluttuanti in Elementor Pro hanno la funzionalità di chat dal vivo.

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

Plugin di chat semplice (gratuito)

https://wordpress.org/plugins/simple-chat-button/

Plugin gratuito ultra leggero (senza javascript!) per la chat live di Whatsapp

Chat dal vivo Indigital (gratis)

https://wordpress.org/plugins/indigitall-web-push-notifications/

Plugin ultraleggero per la chat Whatsapp gratuita.

Costruttore di temi Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

Costruttore di temi Xpro (gratuito)

https://wordpress.org/plugins/xpro-theme-builder/

Create layout personalizzati per i tipi di post, gli archivi dei blog, i prodotti e le categorie di WooCommerce, le pagine di ricerca, le pagine 404 e altro ancora con Elementor Free. È possibile personalizzare l’esperienza del negozio WooCommerce modificando il layout predefinito per adattarlo a qualsiasi stile.

• Intestazione
• Piè di pagina
• Layout singolari
• Messaggio singolo
• Pagina singola
• Pagina Archivio(Blog)
• 404 Pagina
• Pagina di ricerca
• Pagina di prodotto singola WooCommerce
• Pagina del carrello di WooCommerce
• Pagina di checkout di WooCommerce
• Pagina dell’account WooCommerce
• Post singolo personalizzato (CPT)
• Layout di archivio
• Archivio dei post del blog
• Archivi di categoria
• Archivio dei tag
• Archivio autori
• Archivio messaggi personalizzato (CPT)
• Tag dinamici e globali
• Tag dinamici ACF
• Tag del Gruppo ACF
• Tag post dinamici
• Tag dinamici di Woo
• Tag di termini e tassonomia
• Tag utente e sito
• Tag PHP personalizzato
• Importatore di modelli con un solo clic

Tag dinamici

Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

Componenti aggiuntivi reali (gratuiti)

https://wordpress.org/plugins/royal-elementor-addons/

Aggiunge la funzionalità dei tag dinamici a Elementor free. È molto più di questo, un costruttore di siti web dinamici completo per Elementor.

Usare i tag dinamici per creare siti web guidati da contenuti dinamici. Creare tipi di post e tassonomie personalizzate. Modellare e personalizzare campi personalizzati, tipi di post personalizzati e modelli di tassonomie personalizzate. Aggiungete dati dinamici sui prodotti anche per le pagine di Woocommerce Archive Grid e Single Products e molto altro ancora.

Campi personalizzati avanzati supportati: Testo, casella di testo, numero, intervallo, e-mail, URL, password, selezione, casella di controllo, pulsante di opzione, vero/falso, galleria, immagine, ripetitore, file, contenuto flessibile, clone, editor WYSIWYG, oEmbed, selezionatore di date, relazioni, tassonomia, selezionatore di orari, selezionatore di colori, oggetto post, fisarmonica, scheda, Google Maps.

Visibilità dinamica

Visibilità dinamica per Elementor (gratis)

https://wordpress.org/plugins/dynamic-visibility-for-elementor/

L’estensione Dynamic Visibility consente di nascondere widget, colonne, contenitori, sezioni o pagine.

È particolarmente utile quando si sta costruendo qualcosa che non si vuole mostrare a tutti.

• Scegliere una condizione OR/AND.
• Limitare la visibilità di specifici campi o pagine personalizzate.
• Impostate una data (dal al), un giorno della settimana o un’ora e decidete quando ogni elemento sarà visibile.
• Limitare la visibilità per ruoli utente specifici, meta-utente, IP, referral o utenti.
• Limitare la visibilità dei prodotti WooCommerce
• Impostare un testo di riserva (ad esempio: “Prossimamente”) per gli elementi nascosti, che verrà visualizzato al posto dell’elemento.
• Si può scegliere di nascondere l’elemento tramite i CSS o di rimuoverlo dal DOM.

Intestazione appiccicosa per Elementor

Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

JetSticky per Elementor (Gratuito)

https://wordpress.org/plugins/jetsticky-for-elementor/

Aggiunge la funzionalità sticky alla versione gratuita di Elementor.

Incorporamento di documenti

Incorporatore di documenti (gratuito)

https://wordpress.org/plugins/media-player-addons-for-elementor/

Animazioni

Elementi Pro (gratuito)

https://proelements.org/

https://github.com/proelements/proelements

Abilita tutte le funzionalità di Elementor Pro (costruttore di intestazioni/footer, tag dinamici, css personalizzati, ecc).

Se utilizzato, non è necessario alcuno dei plugin necessari per abilitare le singole funzioni di Elementor Pro elencate.

UiCore Animate (gratuito)

https://wordpress.org/plugins/uicore-animate/

Leggere animazioni aggiuntive gratuite per

Elementor.

Incorporati

Tutti incorporano (gratis)

https://wordpress.org/plugins/all-embed-addons-for-elementor/

All Embed Addon For Elementor è una raccolta di widget audio, video e social media per Elementor. Dispone di oltre 20 widget e consente di incorporare qualsiasi contenuto.

Pacchetti di addon Elementor Xpro Addons (gratis)

https://wordpress.org/plugins/xpro-elementor-addons/

Un altro plugin per Elementor Free ha una serie di widget solitamente premium e abilita la funzionalità CSS personalizzata per Elementor free.

Componenti aggiuntivi superbi (gratis)

https://wordpress.org/plugins/superb-blocks/

Un piccolo pacchetto di addon con miglioramenti all’editor, nuovi widget e modelli gratuiti.

LA-Studio Element Kit (gratuito)

https://wordpress.org/plugins/lastudio-element-kit/

Kit di widget e modelli gratuiti.

Effetti Hover dell’immagine (gratis)

https://wordpress.org/plugins/image-hover-effects-addon-for-elementor/

Plugin ultraleggero per gli effetti hover delle immagini.

Icone personalizzate (gratis)

https://wordpress.org/plugins/custom-elementor-icons/

Gestore di icone personalizzato gratuito con icone aggiuntive

Elementi di hash (gratuito)

https://wordpress.org/plugins/hash-elements/

Set gratuito di elementi aggiuntivi.

Costruttore di intestazioni e piè di pagina (gratuito)

https://wordpress.org/plugins/header-footer-elementor/

Permette di costruire l’intestazione e il piè di pagina con la versione gratuita di Elementor (non è necessario un professionista). Leggero.

Kit di modelli (gratuiti) Modelli SKT (gratuiti)

https://wordpress.org/plugins/skt-templates/

Modelli gratuiti.

Estensioni Rife (gratuito)

https://wordpress.org/plugins/rife-elementor-extensions/

Ampio set di modelli gratuiti. Leggero.

Templately (Gratuito e Pro)

https://wordpress.org/plugins/templately/ Leggero

plugin di template gratuito

Envato Elements (Gratuito e Pro)

https://wordpress.org/plugins/envato-elements/

Kit di modelli precostruiti da Envato. Sia template gratuiti che pro. Modelli leggeri, ma come qualsiasi altra cosa richiedono un’ottimizzazione.

Widget ottimizzati per Elementor (gratis)

https://wordpress.org/plugins/optimized-widgets-for-elementor/

Riduce la dimensione del DOM rimuovendo uno dei contenitori annidati predefiniti in ogni widget.

I widget inclusi sono: Titolo, Testo, Immagine.

Poiché sta rimuovendo il div elementor-widget-container, può potenzialmente rompere il tema o altri plugin/script che richiedono la presenza del div. Si prega di usare con cautela e di testare la pagina per vedere se tutto funziona ancora. Si consiglia di attivare questo plugin in fase di staging prima di attivarlo in modalità live.

Importazione di disegni Figma UIChemy (Free e Pro)

https://wordpress.org/plugins/uichemy/

Permette di importare 10 progetti al mese con il piano gratuito. Per utilizzare il piano gratuito per importare un numero illimitato di modelli, basta creare un nuovo sito temporaneo su instawp.com e registrare un altro account.

Ottimizzazione di Elementor Punteggio di velocità delle pagine

Elementor può essere facilmente ottimizzato per ottenere punteggi di pagespeed mobile superiori a 90.

Questo sito si trova nel 5% delle classifiche di velocità delle pagine web. Questo risultato è stato banale da ottenere. Plugin utilizzati:

1. Advanced Database Cleaner Pro (Sostituire AAA Option Optimizer e Advanced Database Cleaner Free per l’equivalente gratuito)
2. Indice WP MySQL per la velocità (gratuito)
3. Asset Cleanup Pro (Asset Cleanup Pro ha delle alternative, tra cui le opzioni di plugin gratuiti elencati nella sezione Disabilita selettivamente i plugin). Utilizzate la versione gratuita se non volete spendere per quella pro per disabilitare il caricamento di file WP Core non necessari, come ad esempio i polyfill.

Se si utilizza Asset Cleanup Free, è necessario un plugin sostitutivo per la disattivazione selettiva dei plugin, come Freesoul Plugin Deactivator o WP Plugin Manager. Scorrete la sezione “Disabilitazione selettiva dei plugin” per maggiori informazioni. Asset Cleanup Free può comunque disabilitare selettivamente le risorse css e js.

1. Perfmatters (a pagamento)
2. Disattivare Gutenberg (gratuito)
3. Docket Cache (gratuito)
4. Pre-festa (gratuito)
5. Flyingpress (a pagamento). Ci sono altri plugin gratuiti per la cache che potrebbero soddisfare il requisito di plugin per la cache anche sul repository https://wordpress.org/plugins (consiglio WP Speed Of Light per un’ottima opzione gratuita come sostituto).
6. Flying Pages (gratuito): Precarica le pagine interne HTML per velocizzare i tempi di caricamento (assicurarsi di ritardare flying-pages.min.js nel plugin javascript delay per annullare l’impatto sulle prestazioni).
7. Ispezione delle richieste HTTP (gratuito)
8. Disattivare la pesantezza di WordPress e Woocommerce (gratuito)
9. Yabe Webfont (Gratuito)
10. Tema: Hello Elementor (gratuito).

Le alternative gratuite necessarie per ottenere le stesse funzionalità di Perfmatters sono:

1. Pulizia delle risorse (versione gratuita)
2. Debloat (gratuito)
3. Pre-festa (gratuito)
4. Rimuovere gli stili globali (gratuito)
5. Disabilitare la pesantezza di WordPress e Woocommerce (gratis)
6. CAOS per l’analisi locale (gratuito)
7. Disattivatore di plugin Freesoul (gratuito)
8. Snippet fluenti (gratuito)
9. A3 Lazyload o qualsiasi plugin con funzionalità Lazy Load (gratuito)
10. Controllo dinamico del battito cardiaco (gratuito)
11. CDN Enabler (se desiderato per la riscrittura di URL CDN) (gratuito)
12. Yabe Webfont (per l’hosting locale dei font) (gratuito)
13. Disable Google Fonts (Disabilita completamente Google Fonts, se lo si desidera) (Gratuito)
14. WPS Hide Login (gratuito)
15. Caricare pigramente qualsiasi cosa (gratuito)

Nota: poiché sono necessari 15 plugin gratuiti per replicare completamente le funzionalità di Perfmatters, consiglio di acquistare Perfmatters, ma l’accozzaglia di plugin gratuiti combinati funziona altrettanto bene se il denaro è un problema.

Raccomando inoltre di utilizzare Yabe Webfont invece di Perfmatters o OMGF per ospitare localmente i font di Google.

Hosting: VPSDime.

File Javascript ritardati con perfmatters (potete usare qualsiasi plugin con Javascript Delay, incluso Debloat):

https://pastebin.com/m94cSYku

Selettori CSS esclusi da Rimuovi CSS inutilizzati: https://pastebin.com/j4QeL89d

È possibile rilasciare le esclusioni del selettore anche nella casella delle esclusioni di Debloat, dopo aver selezionato l’opzione per rimuovere i css inutilizzati da tutti i file.

Dovrete implementare la disabilitazione selettiva dei plugin, nonché la disabilitazione selettiva delle risorse (ci sono sezioni dedicate a questo aspetto più avanti nella guida). Non dimenticate di disabilitare i file WP Core non necessari. È necessario attivare l’impostazione che consente di disabilitare i file WP Core tramite una casella di controllo nel pannello delle impostazioni della pulizia delle risorse.

Un sito Elementor può essere ottimizzato a 90+ in 20 minuti se fatto bene. Facile.

Questo è replicabile su qualsiasi sito Elementor! Una volta che la configurazione è stata stabilita sul primo sito, è possibile esportare le impostazioni e importarle su qualsiasi sito Elementor. Alcune funzioni caricano file aggiuntivi (ad esempio le animazioni di Elementor), quindi a seconda che si utilizzino le animazioni su un sito o su un altro, potrebbe essere necessario aggiungere qualche altro file all’elenco dei ritardi o delle esclusioni.

Nota

È necessario configurare manualmente la disattivazione selettiva delle risorse di Asset Cleanup, la disattivazione selettiva dei plugin, il ritardo di javascript e la rimozione delle esclusioni css inutilizzate. È necessaria una configurazione minore per i plugin di cache.

Per la cache degli oggetti, una volta installata Docket Cache è necessario entrare nelle impostazioni di Docket Cache e abilitare manualmente la cache degli oggetti, quindi entrare nella scheda delle impostazioni di configurazione e abilitare le funzioni di ottimizzazione aggiuntive che si desidera utilizzare. Anche Pre-Party deve essere configurato manualmente. Le impostazioni dell’opzione di caricamento automatico del database devono essere configurate manualmente tramite uno dei plugin di ottimizzazione del database.

Gli altri 5 plugin non hanno impostazioni da configurare, basta attivarli e il gioco è fatto. Se disattivate Google Fonts, dovrete caricare i font locali (ammesso che vogliate dei font personalizzati), che potrete scaricare tramite il link nella sezione fonts. Non dimenticatevi di fare il subset per ridurre il peso dei file dei font!

Se qualcosa si rompe copiando i miei elenchi Delay JS e Remove Unused CSS, è possibile rimuovere i file dall’elenco javascript delay uno alla volta (o pochi alla volta) finché non si identifica il file che deve essere escluso dal delay, quindi riadattare i file all’elenco che sono sicuri per il delay.

Perché ricevo errori nella console dopo aver ritardato i file del vostro elenco?

Sto intenzionalmente ritardando il file javascript i18n.min.js, necessario per le traduzioni. WordPress dà un errore nella console quando questo file viene ritardato, ma non ci sono impatti sulla funzionalità del sito, a meno che non si utilizzino le traduzioni. È possibile rimuovere questo file dall’elenco dei ritardi se si desidera eliminare gli errori della console, oppure è possibile scaricarlo completamente con Asset Cleanup.

I file che potrebbero dover essere rimossi dall’elenco dei ritardi a seconda della configurazione: wp-util.min.js

underscore.min.js i18n.min.js hooks.min.js

Costruttori da evitare

Panificio WP

Ma… non fatelo. È difficile trovare un plugin più problematico di WPBakery. Evitatelo.

Costruttore di castori

Beaver Builder è scarsamente ottimizzato. Mentre il suo javascript può essere tranquillamente ritardato senza problemi, funzioni di base come i divisori di forma nativi di Beaver Builder gonfiano massicciamente il documento HTML. Inoltre, i temi generano una tonnellata di CSS inutilizzato per beaver builder, che viene inserito sia nel documento HTML sia nei file, aggiungendo tonnellate di codice morto che non fanno altro che appesantire la pagina, rallentando il sito.

135 KB di CSS per una singola sezione della pagina per implementare un divisore di forma che non può essere rimosso con la funzione Rimuovi CSS inutilizzati (Debloat, Flyingpress, Perfmatters, ecc.). Sebbene l’HTML sia compresso da GZIP e Brotli e la dimensione finale del documento HTML sia di ~240 kb, il documento HTML dovrebbe essere al massimo di 80 kb, preferibilmente 50 KB o meno. Beaver Builder = Cruft. Questo documento HTML è almeno 3 volte più grande di quanto dovrebbe essere.

Divi

Un altro sviluppatore estremamente pesante. È possibile mitigare l’impatto di Divi sulle prestazioni, ma non del tutto. Questo costruttore poco ottimizzato ha anche delle croste inamovibili e quindi dovrebbe essere evitato. Per ribadire che, anche se Elementor ha prestazioni scarse fuori dalla scatola, una volta ottimizzato è il costruttore drag and drop più performante.

File di terze parti

Ospitare i file in locale per ridurre le richieste esterne e migliorare le prestazioni:

I file di terze parti sono tutti i file che non sono serviti dal vostro dominio.

Dovreste sempre ospitare ogni file possibile sul vostro server in locale. Questo include le immagini, anche se si utilizza un CDN per la distribuzione delle immagini. Non caricate mai i file da server di terze parti se potete evitarlo, perché si caricheranno sempre molto più lentamente.

Non si vuole che il sito scarichi Google Fonts o il file di Google Analytics per ogni utente da un dominio esterno. Introduce una latenza aggiuntiva e ci sarà sempre un ritardo aggiuntivo quando ci si connette a un sito esterno. Utilizzate Perfmatters o Pre-Party per precaricare i font, i css e i file js che volete caricare per primi, come già detto. Tutti i font locali (che potete identificare tramite il grafico a cascata di Gtmetrix/Debug Bear, se vedete un’estensione di font (WOFF, WOFF2, TTF ecc.) potete precaricarli in Perfmatters. Di seguito è riportato un frammento del grafico a cascata di GTMetrix per un test di velocità del dominio CBDMDs.

Youtube, fonts.gstatic.com e cdn.searchspring.net sotto la colonna dei domini nel grafico a cascata sono i domini di terze parti elencati in questa schermata.

È consigliabile ospitare il maggior numero possibile di file dei plugin in locale sul sito. Foto, video, tutto ciò che è possibile. CAOS per Google Analytics, ad esempio, scarica i file necessari per Google Analytics in locale e li serve dal vostro sito, invece di scaricarli dai server di Google.

A questo proposito, le normali implementazioni di Youtube, nello specifico, distruggono assolutamente la velocità del sito (utilizzare WP Youtube Lyte, elencato di seguito). Se il vostro cliente vi chiede di usare Youtube e voi non potete fare a meno di usarlo, la velocità del vostro sito ne risentirà a prescindere dal player usato, ma una parte di questo peso può essere mitigata usando player Youtube ottimizzati.

Ci sarà un breve ritardo per la comparsa del lettore video se si carica il video in modo pigro (verrà caricato/apparirà mentre l’utente scorre verso il basso), e forse un po’ di CLS dato che il lettore è così grande (specialmente sulle connessioni mobili), dato che richiede un po’ di tempo per essere scaricato una volta entrato nel viewport, ma è meglio che rallentare il tempo di caricamento iniziale della pagina. Molti plugin di youtube ora hanno immagini segnaposto che impediscono il download dell’intero video finché l’utente non interagisce con l’iframe del player tramite un clic o un tocco.

I tempi di caricamento per gli utenti mobili (soprattutto per i video) saranno esacerbati dalla bassa velocità di Internet, quindi se i siti dei vostri clienti operano in aree rurali, subiranno un ritardo ancora più grave rispetto alle aree popolate come le grandi città.

Ritardate il WP Youtube Lyte JS per ottenere i migliori risultati!

Ospitare localmente script di terze parti e

articoli di stile Articolo di Daan.dev

https://daan.dev/blog/how-to/host-js-locally-crontab/

Articolo WPFY

https://wpfy.org/host-any-external-file-locally-in-wordpress/

Script e stili per la cache GDPR (gratis)

https://wordpress.org/plugins/gdpr-cache-scripts-styles/

Memorizza nella cache gli script e gli stili CSS e JS esterni di terze parti.

Flyingpress (a pagamento)

https://flyingpress.com/

Non esiste ancora una documentazione, ma si tratta di una funzione aggiunta di recente a Flyingpress, che ospita localmente tutti i file CSS e JS di terze parti.

HELL (Ospitare qualsiasi cosa a livello locale) (gratuito)

https://github.com/Dan0sz/host-everything-locally/

Estrae i file CSS e JS di terze parti e li serve localmente dal vostro dominio. Non è stato aggiornato da molto tempo, attivatelo in fase di staging per assicurarvi che non ci siano problemi prima di attivarlo su un sito live. Dai miei test precedenti, i CSS e i JS della pagina delle opzioni non funzionano sulle versioni più recenti di WordPress, ma non è detto.

Font di Google ospitati localmente

Scaricare manualmente in locale i file dei font di Google Google Fonts Web Helper (gratuito)

https://gwfh.mranftl.com/fonts

I font sono file pesanti che appesantiscono la pagina e quando si utilizzano i font di Google dal CDN di Google, l’utente deve effettuare richieste al server esterno, con un notevole costo in termini di prestazioni. Se si utilizza un VPS veloce o un host gestito, è preferibile servire i font in locale.

Ogni singola chiamata esterna a un dominio di terze parti introduce un ulteriore ritardo. Riducete il più possibile le chiamate di terze parti. I font rappresentano una grande opportunità per ridurre i ritardi, quindi si tratta di un tipo di file fondamentale da auto-ospitare.

Controllare il waterfall di GTMetrix per identificare i font utilizzati. Molti plugin caricano font che non vengono nemmeno utilizzati, per cui si consiglia di disabilitare completamente la funzione Google Fonts del plugin e di sostituirli con i file WOFF2 scaricati (che hanno la massima compatibilità con i browser e le dimensioni più ridotte).

Se si utilizza Elementor, nelle impostazioni è presente una sezione per caricare i font personalizzati. Quando si utilizza un elemento, utilizzare l’impostazione per selezionare il font, che dovrebbe essere elencato in cima alla lista una volta caricato. Anche altri costruttori dovrebbero avere questa opzione; se non si utilizza Elementor, è necessario controllare la loro documentazione per scoprire come utilizzarla sul proprio costruttore.

Ospitare automaticamente in locale i file di font Yabe Webfont (gratuito)

https://wordpress.org/plugins/yabe-webfont/ Il

miglior plugin per ospitare localmente i font di Google.

OMGF (Gratuito)

https://wordpress.org/plugins/host-webfonts-local/

OMGF ospiterà anche localmente i Google Webfonts, eliminando così le chiamate esterne per i font. Consiglio invece di utilizzare Yabe.

Flyingpress (a pagamento)

https://docs.flyingpress.com/en/article/optimize-google-fonts-1lotnj4/

Flyingpress può anche ospitare localmente i font di Google. Non può servire font locali specificati manualmente; utilizzare OMGF o Yabe Webfont se si desidera caricare manualmente i font locali.

Suggerimenti sulle risorse

Quando non è possibile ospitare localmente file di terze parti, è opportuno utilizzare i suggerimenti sulle risorse per migliorare la velocità di connessione e le prestazioni quando si richiama un file da un dominio di terze parti.

Pre-festa (gratuito)

https://wordpress.org/plugins/pre-party-browser-hints/

Questo plugin consente agli utenti di incorporare automaticamente e facilmente i suggerimenti alle risorse per migliorare il tempo di caricamento delle pagine.

Suggerimenti sulle risorse inclusi: Sono supportati DNS prefetch, prerender, preconnect, prefetch e preload.

Combinazione con HTTP/2 Server Push (gratuito)

HTTP/2 Server Push è più potente e ha un vantaggio in termini di prestazioni rispetto ai suggerimenti sulle risorse.

HTTP/2 e i suggerimenti per le risorse sono complementari e dovrebbero essere usati insieme. Tuttavia, HTTP/2 Rel=”preload” è più potente del suggerimento di risorsa Rel=”preload”, perché con HTTP/2 Server Push il server invia la risorsa prima che il browser dell’utente la richieda (prima che il documento HTML venga servito).

I suggerimenti di risorse, invece, sono collocati all’interno del documento HTML, il che significa che il browser dell’utente deve prima effettuare una richiesta della risorsa per avviare il trasferimento. I suggerimenti di risorse hanno vantaggi in termini di prestazioni e dovrebbero essere usati quando possibile, ma Server Push ha ulteriori vantaggi in termini di prestazioni rispetto ai suggerimenti di risorse e dovrebbe essere usato al loro posto quando possibile.

Spiegazione estesa e confronto/confronto

https://docs.google.com/document/d/1ZHGvCrXyKxAFLwVqj-Y1nRtzIYmU_vur0G1Ro8TDEkk/e dit?usp=sharing

Caratteri

Migliori pratiche

• Utilizzare WOFF/WOFF2, non TTF/altri formati di font, poiché WOFF2 ha la migliore compressione.
• Consolidare le famiglie di font, i pesi e le icone.
• Disattivare le librerie di icone di font (woff2, ttf, ecc.) e utilizzare invece singoli file SVG. Le librerie di icone di font caricano l’intero set di icone invece delle sole icone necessarie, appesantendo inutilmente la pagina.
• Ospitare i font a livello locale (anziché i font di Google da fonts.gstatic.com).
• Una volta ospitati localmente, precaricate i file di font importanti caricandoli sopra la piega.
• Se il caso d’uso richiede il caricamento di font da un dominio esterno (ad esempio Google Fonts da fonts.gstatic.com), assicurarsi di impostare la preconnessione (suggerimenti di risorse pre-party, perfmatters e altri plugin hanno questa funzione) al dominio esterno.

Font di Google ospitati localmente

Scaricare manualmente in locale i file dei font di Google Google Fonts Web Helper (gratuito)

https://gwfh.mranftl.com/fonts

I font sono file pesanti che appesantiscono la pagina e quando si utilizzano i font di Google dal CDN di Google, l’utente deve effettuare richieste al server esterno, con un notevole costo in termini di prestazioni. Se si utilizza un VPS veloce o un host gestito, è preferibile servire i font in locale.

Ogni singola chiamata esterna a un dominio di terze parti introduce un ulteriore ritardo. Riducete il più possibile le chiamate di terze parti. I font rappresentano una grande opportunità per ridurre i ritardi, quindi si tratta di un tipo di file fondamentale da auto-ospitare.

Controllare il waterfall di GTMetrix per identificare i font utilizzati. Molti plugin caricano font che non vengono nemmeno utilizzati, per cui si consiglia di disabilitare completamente la funzione Google Fonts del plugin e di sostituirli con i file WOFF2 scaricati (che hanno la massima compatibilità con i browser e le dimensioni più ridotte).

Se si utilizza Elementor, nelle impostazioni c’è una sezione per caricare i font personalizzati. Quando si utilizza un elemento, utilizzare l’impostazione per selezionare il font, che dovrebbe essere elencato in cima all’elenco una volta

li caricate. Anche altri costruttori dovrebbero avere questa opzione, ma dovrete controllare la loro documentazione per scoprire come usarla sul vostro costruttore se non usate Elementor.

Yabe Web Font (Gratuito)

https://wordpress.org/plugins/yabe-webfont/

Yabe è un plugin per l’hosting di font locali molto flessibile.

• Compatibile con GDPR / DSGVO: potete importare/auto-ospitare i file di Google Fonts dal vostro server attraverso la pagina di amministrazione di WordPress. Meno motivi per preoccuparsi della conformità GDPR / DSGVO.
• Google Fonts e Adobe Fonts sono pronti: Iniziate a utilizzare tutti i font disponibili su Google Fonts e Adobe Fonts.
• Font personalizzati: Un gestore di font personalizzati dedicato per WordPress. Il luogo centrale per gestire tutti i font e la tipografia.
• Leggero e velocissimo: Il sistema di gestione dei caratteri utilizza WordPress REST API e un moderno framework JavaScript per un’esperienza utente immediata e reattiva. La cache della prima pagina garantisce un caricamento rapido e riduce le query al database.
• Supporto dei font variabili: Il formato consente a un singolo file di font di contenere più variazioni stilistiche.

OMGF (Gratuito)

https://wordpress.org/plugins/host-webfonts-local/

OMGF ospiterà localmente i vostri Google Webfonts, eliminando così le chiamate esterne per i vostri font.

Flyingpress (a pagamento)

https://docs.flyingpress.com/en/article/optimize-google-fonts-1lotnj4/

Flyingpress può anche ospitare localmente i font di Google. Non può servire font locali specificati manualmente; utilizzare OMGF o Yabe Webfont se si desidera caricare manualmente i font locali.

Sottoimpostazione dei caratteri

Utilizzate un subsetter di font per eliminare i caratteri inutilizzati dai file di font, in modo da ridurre le dimensioni dei file.

Everything Fonts Subsetter (gratuito)

https://everythingfonts.com/subsetter

Aspose Subsetter (gratuito)

https://products.aspose.app/font/generator

Typst Subsetter (gratuito)

https://github.com/typst/subsetter

Glyphhanger (Gratuito)

https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/

https://github.com/zachleat/glyphhanger

Sottofondo (gratuito)

https://github.com/Munter/subfont

Font Squirrel (Gratuito)

https://www.fontsquirrel.com/tools/webfont-generator

Generatore di font Web ottimizzato per le prestazioni granulari. Può ridurre in modo significativo le dimensioni dei font ospitati localmente. Lo consiglio vivamente.

Font Squirrel può essere abbinato a qualsiasi font ospitato localmente ed è complementare agli altri plugin qui elencati. È possibile utilizzarli insieme.

Molto simile alla suddivisione. Raccomanderei l’uso di entrambi.

Visualizzazione dei caratteri (gratuito)

Come funzionano le proprietà di visualizzazione dei caratteri

https://css-tricks.com/almanac/properties/f/font-display/

Caricatore WP FOFT (gratuito)

https://wordpress.org/plugins/wp-foft-loader/

Questo plugin implementa e automatizza il metodo di Zach Leatherman “Critical FOFT with preload, with a polyfill fallback emulating font-display: optional” per ottimizzare e velocizzare il caricamento dei font web e migliorare l’UX riducendo al minimo Flash of Invisible Text, Flash of Unstyled Text e DOM Reflow.

Articolo

https://github.com/zachleat/web-font-loading-recipes#the-compromise-critical-foft-with-preload-w ith-a-polyfill-fallback-emulating-font-display-optional

Pulizia delle attività (gratuito)

https://wordpress.org/plugins/wp-asset-clean-up/

È possibile applicare le proprietà di visualizzazione dei font sia ai font ospitati localmente che a quelli di Google.

OMGF (Gratuito e Pro)

https://wordpress.org/plugins/host-webfonts-local/

Font Style Matcher (gratuito)

https://meowni.ca/font-style-matcher/

Se si utilizza un font per il Web, è inevitabile vedere un lampo di testo non stilizzato (o FOUC), tra il rendering iniziale del font websafe e il font Web scelto. Di solito questo comporta un cambiamento stridente nel layout, dovuto alle discrepanze di dimensione tra i due font. Per ridurre al minimo questa discrepanza, si può cercare di far coincidere le altezze e le larghezze x del font di riserva con quelle del font Web previsto. Questo strumento aiuta a fare esattamente questo.

Articolo

https://blog.hubspot.com/website/web-safe-html-css-fonts

FontForge (gratuito)

https://fontforge.org/en-US/

Rimuovere i glifi non necessari per ridurre il peso dei caratteri (gratuito)

FontForge è un software gratuito e open-source che vi permetterà di scavare nei file dei font. Rimuovendo i glifi non necessari, possiamo tranquillamente ridurre le dimensioni dei nostri font dell’80-90%!

Ottimizzare i glifi dei caratteri (gratuito)

Anche la semplificazione del disegno dei glifi nel font può ridurre le dimensioni del file. Si tratta di eliminare i punti superflui dei contorni dei glifi senza compromettere il design.

Rimuovere le caratteristiche dei caratteri per ridurre le dimensioni del file

La regolazione delle impostazioni dei font, come l’accenno, le coppie di crenatura e le legature, può essere un modo per ottimizzare le dimensioni dei file dei font, ma queste regolazioni spesso comportano compromessi in termini di aspetto e funzionalità del testo.

Rimuovere il font hinting (gratuito)

L’accenno è una tecnica utilizzata per migliorare la leggibilità dei caratteri a piccole dimensioni sui display digitali. Regola il contorno del carattere per allinearlo meglio alla griglia di pixel.

Impatto della rimozione: L’eliminazione dell’accenno può ridurre le dimensioni del file, ma può peggiorare l’aspetto del carattere su schermi a bassa risoluzione dove il rendering del carattere si basa sull’accenno per la chiarezza.

Coppie di crenatura (gratuito)

La crenatura consiste nel regolare la spaziatura tra coppie specifiche di caratteri per renderla più uniforme. Questa operazione è particolarmente importante per alcune combinazioni di caratteri in cui la spaziatura predefinita appare sgradevole.

Impatto della rimozione: L’eliminazione o la riduzione del numero di coppie di crenatura può ridurre le dimensioni del file del font, ma può portare a una spaziatura dei caratteri non uniforme che può influire sulla leggibilità e sull’estetica.

Legature (gratuito)

Le legature sono glifi singoli che rappresentano una combinazione di due o più caratteri, comunemente utilizzati per coppie di caratteri come “fi”, “fl”, ecc.

Impatto della rimozione: L’omissione delle legature può ridurre le dimensioni del file e semplificare il carattere, ma può degradare la qualità tipografica del testo, soprattutto nella stampa o nelle visualizzazioni ad alta risoluzione.

Ottimizzazione del database

Eseguite sempre dei backup prima di implementare qualsiasi ottimizzazione del database.

Disattivare le opzioni del database caricate automaticamente e non necessarie

Disattivare le opzioni del database non necessarie e caricate automaticamente è un ottimo modo per aumentare le prestazioni, eliminando le spese generali e i pesi morti. Molte opzioni dei plugin non hanno bisogno di essere caricate automaticamente e possono essere

tranquillamente impostate su no.

Tuttavia, l’impostazione di alcune opzioni di caricamento automatico su no per molti plugin può danneggiare il sito. Eseguire sempre un backup del database prima di modificare queste impostazioni. In genere si dovrebbe essere in grado di ripristinare l’opzione autoload yes se qualche funzionalità si interrompe, ma come migliore prassi si raccomanda sempre di eseguire un backup del database prima di modificare qualsiasi cosa, per sicurezza. In rari casi è possibile essere bloccati completamente dal backend di WP-Admin a causa di un errore critico causato dalla disabilitazione di un’opzione di autocaricamento.

SweepPress (gratuito)

https://wordpress.org/plugins/sweeppress/

Autoload Option Manager e Database Sweeper con 43 elementi separati puliti. Molto utile.

Ottimizzatore di opzioni AAA (gratuito)

https://wordpress.org/plugins/aaa-option-optimizer/

Questo plugin tiene traccia di quali opzioni autocaricate sono utilizzate in una pagina e memorizza questi dati alla fine del rendering della pagina. Mantiene un array di opzioni che ha visto essere utilizzate. Nella pagina di amministrazione, confronta tutte le opzioni caricate automaticamente con l’array di opzioni memorizzate e mostra le opzioni caricate automaticamente che non sono state utilizzate durante la navigazione del sito.

Se si è visitata ogni pagina del sito o si è tenuto il plugin per una settimana o poco più, significa che probabilmente non è necessario caricare automaticamente le opzioni.

Controllo del caricamento automatico (gratuito)

https://wordpress.org/plugins/autoload-checker/

Autoload Checker aiuta a monitorare la dimensione totale dei dati caricati automaticamente nella tabella wp_options del database. I dati caricati automaticamente sono quelli che vengono caricati a ogni caricamento di pagina, indipendentemente dal fatto che siano necessari o meno. Questo può influire sulle prestazioni e sulla velocità del sito, soprattutto se sono installati molti plugin.

Autoload Checker non rimuove alcun dato caricato automaticamente dal database, ma si limita a verificarne lo stato e a visualizzarlo nella dashboard di WordPress. È possibile vedere la dimensione totale dei dati caricati automaticamente e le voci di dati più caricate ordinate per dimensione. Questo può aiutare a identificare i plugin o i temi che aggiungono più dati in autocaricamento al database e a decidere se è necessario ottimizzarli o meno.

Pulitore di database (gratuito)

https://wordpress.org/plugins/database-cleaner/

Un’altra opzione gratuita per gestire lo stato di autocaricamento delle opzioni del database.

Advanced Database Cleaner (Freemium)

https://wordpress.org/plugins/advanced-database-cleaner/

Neat plugin per la gestione dei database.

Pulitori di database

SweepPress (gratuito)

https://wordpress.org/plugins/sweeppress/

Sweeper del database con 43 elementi separati puliti. Molto utile.

WP-Sweep (gratuito)

https://wordpress.org/plugins/wp-sweep/

Advanced Database Cleaner (Freemium)

Versione gratuita:

https://wordpress.org/plugins/advanced-database-cleaner/

Advanced DB Cleaner PRO ‘3.1.6″

e Alcuni di voi optzsns am m t categoruad y “o ‘ Please ¢iiclr on.the. buI1on belt to ca e’gorizo theml

r “{, i i –r i”- i it I ” ‘ i i I I ir’r -: i; – i”.¿ – i: : i:: i I . i ‘ . .’ . ‘ ‘ . .i :;. I –.’-‘

Versione Pro a pagamento

https://sigmaplugin.com/downloads/wordpress-advanced-database-cleaner/.

È importante esaminare ed eliminare tutte le opzioni non necessarie; le opzioni del database non necessarie si accumulano nel tempo con la rimozione dei plugin e il cambio dei temi e possono rallentare il sito senza che ve ne rendiate conto. Se installate un plugin e poi lo disinstallate, cancellate sempre le tabelle e le opzioni rimaste con advanced database cleaner pro o un altro plugin per la pulizia del database.

Alcuni plugin creano una tonnellata di tabelle e opzioni del database, quindi è meglio evitarli (Sumo Plugin, ad esempio). Si vuole un impatto sulla base dati il più basso possibile, quindi è meglio un numero minore di query. Questo è importante per le prestazioni della cache degli oggetti (Redis, Docket Cache, Memcached, ecc.).

I plugin meglio ottimizzati effettueranno meno chiamate al database. Impostare anche tutto ciò che non dovrebbe essere caricato automaticamente su “autoload no” tramite la pulizia avanzata del database o un altro plugin.

Molti plugin caricano automaticamente dati non necessari a ogni caricamento di pagina, quindi la disabilitazione del caricamento automatico dovrebbe aumentare la velocità del sito.

Assicuratevi di eseguire un bug test sul sito per verificare che le voci disabilitate non causino problemi con le funzioni del plugin.

Analisi e diagnosi delle query di database

Query Monitor (gratuito)

https://wordpress.org/plugins/query-monitor/

Usate Query Monitor per eseguire il debug e identificare i plugin che hanno query di database lente. È uno dei migliori strumenti che si possono usare per diagnosticare i problemi di prestazioni.

Una volta individuati i plugin che presentano query lente, è possibile cercare plugin alternativi che abbiano le stesse funzionalità, ma che siano più snelli e veloci.

Componenti aggiuntivi (gratuiti)

https://querymonitor.com/help/add-on-plugins/

Collezione di componenti aggiuntivi di Query Monitor per estendere le funzionalità di Query Monitor.

Logger di query Fluent (gratuito)

https://wordpress.org/plugins/fluent-query-logger/

Query Logger con funzionalità di registrazione selettiva.

Indicizzazione del database

Non si dovrebbe utilizzare Index MySQL for Speed e Scalability Pro insieme. Scegliete uno o l’altro

Indice WP MySQL per la velocità (gratuito)

https://wordpress.org/plugins/index-wp-mysql-for-speed/

(Non necessario se si usa Scalability Pro)

Indicizzare gli utenti WP per la velocità (gratuito)

https://wordpress.org/plugins/index-wp-users-for-speed/

Questo plugin velocizza la gestione degli utenti registrati su WordPress, soprattutto quando il vostro sito ne ha molte migliaia.

Questo plugin inserisce indici separati che Index MySQL for Speed non indicizza. Non consiglio di usare questo plugin insieme a Scalability Pro. Se acquistate Scalability Pro, non usate nessuno degli altri plugin per l’indicizzazione dei database di cui sopra.

Non lasciare Index WP Users For Speed attivo dopo l’aggiunta degli indici, perché quando è attivo effettua molte chiamate al database non necessarie per ogni caricamento di pagina, il che probabilmente avrà un impatto negativo sulla velocità delle pagine del sito. Una volta aggiunti gli indici, è possibile disattivare il plugin.

Scalabilità Pro (a pagamento)

https://www.wpintense.com/product/scalability-pro/

Utile praticamente per qualsiasi sito, ma in particolare per i negozi Woocommerce. Se il vostro sito utilizza Woocommerce, vi consiglio vivamente di scegliere Scalability Pro rispetto a Index Mysql For Speed, se potete permettervelo, in quanto aggiunge indici alle tabelle di Woocommerce (purtroppo Index MySQL For Speed non lo fa).

–

Meta Optimizer (gratuito)

https://wordpress.org/plugins/meta-optimizer/

Questo plugin ottimizza la memorizzazione dei meta-dati di WordPress salvando tutti i meta-dati per ogni post, commento, utente o termine in un’unica riga con colonne separate per ogni meta- chiave. Questo riduce il numero di righe e migliora le prestazioni delle query e l’esportazione dei dati. Converte le tabelle myISAM in InnoDB.

Ottimizzatore di template (gratuito)

https://wordpress.org/plugins/templ-optimizer/

Converte automaticamente le tabelle myISAM in tabelle InnoDB, più performanti. La stragrande maggioranza dei siti WordPress utilizza già tabelle InnoDB, ma questo plugin è utile per tutti i siti legacy che utilizzano ancora myISAM.

Gestore dei transitori (gratuito)

https://wordpress.org/plugins/transients-manager/

Gestire i transitori di WordPress memorizzati nel database.

Eliminare i transitori scaduti (gratuito)

https://wordpress.org/plugins/delete-expired-transients/

Eliminare i transienti vecchi e scaduti dalla tabella delle opzioni di WordPress (wp_options), per evitare che gonfino il database e rallentino il sito web.

Disattivare WP Rest API (gratuito)

https://wordpress.org/plugins/disable-wp-rest-api/

Disabilita l’API Rest.

Analisi

Ritardare l’uso di Javascript per le analisi influisce sulle vostre metriche

Consiglio di ritardare tutti gli script di analisi per mitigare l’impatto sulle prestazioni. Le piattaforme di analisi funzionano tramite javascript, che è incredibilmente pesante dal punto di vista delle prestazioni e causa un forte impatto sulla velocità delle pagine. Il rinvio dell’esecuzione del javascript attenua solo leggermente il problema; per eliminare completamente l’impatto sulle prestazioni, il javascript deve essere ritardato dal download fino all’interazione con l’utente.

Se si ritarda il javascript di analisi, i dati si confondono. È un compromesso per mantenere le prestazioni. I dati raccolti non saranno accurati al 100% se il javascript viene ritardato e il conteggio del traffico potrebbe essere superiore a quello indicato dai dati raccolti. Ciò che conta sono le conversioni, non le statistiche. Un aumento delle conversioni in cambio di dati più confusi non è un problema.

Analitica locale autogestita

Matomo Analytics (Freemium)

https://wordpress.org/plugins/matomo/

Matomo è un ottimo plugin di analisi open source e gratuito. Senza addons, ha funzionalità equivalenti a quelle di Google Analytics. È possibile ospitare localmente le analisi di Matomo e non è necessario condividerle con un servizio di terze parti, una necessità fondamentale per il GDPR. Le analisi saranno anche più accurate di quelle di Google Analytics.

Consiglio di preferire Matomo a Google Analytics, anche se, se lo si desidera, è possibile utilizzare entrambi contemporaneamente.

Ottimizzazione

Ritardare Matomo.js nel plugin di ritardo javascript per mitigare l’impatto sulle prestazioni.

Koko Analytics (gratuito)

https://wordpress.org/plugins/koko-analytics/

Analisi locali leggere e ospitate. Statistiche molto semplici. Consiglierei di preferire Matomo a Koko Analytics solo per ottenere dati più approfonditi, ma sono entrambe ottime soluzioni in hosting locale.

Analisi del carico pigro

Veri analitici pigri (gratuito)

https://wordpress.org/plugins/true-lazy-analytics/

Questo plugin abilita il caricamento pigro per Google Analytics, Facebook Pixel, Hotjar, Yandex Metrica (Yandex Metrika) e Liveinternet.

Chiarezza del carico pigro (gratuito)

https://wordpress.org/plugins/lazy-load-clarity/

Caricamento pigro dello script di monitoraggio di Microsoft Clarity

Heatmap e Clickmap

Aurora Heatmap (gratuito)

https://wordpress.org/plugins/aurora-heatmap/

Un piccolo plugin gratuito, heatmap e clickmap, tutte raccolte e memorizzate localmente sul vostro server web.

Microsoft Clarity (gratuito)

https://clarity.microsoft.com/

https://wordpress.org/plugins/microsoft-clarity/

Microsoft Clarity è un sostituto di Hotjar per la raccolta di dati analitici sui clic e sugli scorrimenti (Heatmap, scrollmap, mappe dei clic, clic rabbiosi, ecc.), nonché per la registrazione delle sessioni e alcune altre funzioni interessanti, completamente gratuite!

Microsoft Clarity è migliore e ha più funzioni di Aurora Heatmaps, ma è necessario creare un account (gratuito). Non ci sono vincoli, è davvero totalmente gratuito.

Caricamento pigro Microsoft Clarity (gratuito)

https://wordpress.org/plugins/lazy-load-clarity/

Il plugin Lazy Load Clarity è un semplice plugin che consente di caricare lo script Microsoft Clarity senza influire sulla velocità della pagina del sito web.

Lo script verrà caricato solo dopo un’interazione iniziale da parte dell’utente, riducendo così a zero l’impatto di Clarity sulla velocità della pagina.

Registrazione della

sessione Microsoft Clarity

(gratuita)

https://clarity.microsoft.com/

https://wordpress.org/plugins/microsoft-clarity/

https://wordpress.org/plugins/lazy-load-clarity/

Test A/B

Mojito (gratuito)

https://github.com/mint-metrics/mojito

https://github.com/mint-metrics/mojito-js-delivery

Mojito è un toolkit open source incredibilmente potente per i test A/B con un peso del file JS di soli 5 KB. È il modo più veloce e performante per eseguire test A/B basati su JavaScript. Può anche essere collegato a Google Optimize per vedere i dati in uscita nell’interfaccia web di Google.

NOTA

Mojito può sembrare morto a prima vista a causa dell’inattività del repo di primo livello, ma i suoi repo di dipendenza (e quindi il progetto) sono ancora in fase di sviluppo attivo!

Non ritardare il file JS di Mojito

Nota: non ritardare il file JS di Mojito. Deve essere caricato senza ritardi per determinare correttamente la variante di pagina da visualizzare.

Google Analytics

Come mitigare l’impatto delle prestazioni di Google Analytics Ritardo di Analytics Javascript

Elenco dei file Javascript da ritardare (è possibile copiare e incollare questo elenco):

gtag.js gtag.min.js analytics.min.js

google-analytics.com ga

/gtag/js gtag(

/gtm.js

/gtm- gtm.js gtag

googletagmanager.com

Ospitare localmente Google Analytics

Oltre a ritardare i file javascript di analytics, è necessario ospitarli localmente. Di seguito sono riportati un paio di plugin che consentono di ospitare localmente i file di analisi, ma anche molti altri plugin dispongono di questa funzione.

Rankmath – Analitica in hosting (a pagamento)

Nella versione pro, Rankmath offre come opzioni il tracciamento cookieless e l’hosting di Google Analytics in locale. È sempre consigliabile ospitare il file di analisi in locale.

La sua opzione di tracciamento senza cookie significa che è possibile rimuovere completamente o ignorare qualsiasi plugin di conformità GDPR relativo ai cookie, poiché non si tracciano più gli utenti con i cookie!

CAOS (gratuito)

https://wordpress.org/plugins/host-analyticsjs-local/

Se si utilizzano analisi di tracciamento o tag (si dovrebbe!), utilizzare CAOS analytics per ospitare gtag.js localmente per annullare l’impatto sulle prestazioni del sito.

Il valore dei cookie dipenderà dalle leggi vigenti nelle aree in cui si trovano i clienti, quindi è bene tenere presente le leggi locali sulla privacy.

Google Tag Manager

https://tagmanager.google.com/#/home

Utilizzare Google Tag Manager per aggiungere tag di tracciamento di terze parti. Non utilizzate mai plugin di tracciamento aggiuntivi. Una volta impostati tutti i tag con Tag Manager, utilizzare CAOS per scaricare gtag.js. Tutti i tag di tracciamento dovrebbero funzionare attraverso questo file, che dovrebbe ridurre le richieste e accelerare i tempi di caricamento. Molti siti sono molto lenti a causa di cattive implementazioni dei tag di tracciamento.

Kit GTM (gratuito)

https://wordpress.org/plugins/gtm-kit/

Plugin gratuito per l’hosting locale di Google Tag Manager, in grado di caricare gli script di Tag Manager con un ritardo per eliminare l’impatto sulle prestazioni di Tag Manager.

Ottimizzazione

Vedere la sezione precedente per ottimizzare google analytics. È possibile ritardare gli stessi file JS. È sufficiente copiare e incollare l’elenco nell’elenco di script del plugin di ritardo javascript.

Klaviyo (a pagamento)

Ritardo Klaviyo Javascript

Klaviyo non dispone di una soluzione per il caricamento pigro, tuttavia i file Javascript di Klaviyo possono essere ritardati utilizzando qualsiasi plugin con una funzione di ritardo JS, compresi quelli elencati di seguito.

Altre piattaforme di analisi

L’impatto sulle prestazioni di altri fornitori di analisi/piattaforme può essere annullato semplicemente ritardando i loro file javascript con la funzione Delay JS di qualsiasi plugin di ottimizzazione.

Ritardo Javascript

Stessa cosa, tutti i plugin di analisi utilizzano javascript per calcolare le analisi. Ritardare i file di analisi o i domini di analisi per evitare che vengano caricati fino all’interazione con l’utente, in modo da mitigare l’impatto sulle prestazioni.

Server HTTP Push

Articolo della rivista Smashing

https://www.smashingmagazine.com/2017/04/guide-http2-server-push/

Contenuto HTTP Push (gratuito)

https://wordpress.org/plugins/http2-push-content/

• Push / Pre-load di tutti i file JS nel sito con una semplice opzione
• Spingete / precaricate tutti i file CSS del vostro sito web
• Push / Pre-load di altre risorse in tutto il sito o in base ai tipi di pagina
• Caricare i CSS in modo asincrono o Rimuovere qualsiasi file CSS in tutto il sito, o c’è un selettore condizionale che è possibile applicare
• Async / Defer / Rimuovere qualsiasi file JS in tutto il sito o in base al tipo di pagina WordPress
• È possibile creare regole specifiche per i dispositivi mobili per spingere, precaricare, rimuovere, asincronizzare js o css, in base al rilevamento dell’agente utente del dispositivo.
• È possibile creare regole specifiche per i dispositivi desktop per spingere, precaricare, rimuovere, asincronizzare js o css, in base al rilevamento dell’agente utente del dispositivo.
• Rimuovete in modo condizionato JS e CSS da varie pagine di WooCommerce come la pagina di checkout, la pagina del carrello, la pagina del prodotto e la pagina della categoria di prodotto.
• Si può spingere il pre-caricamento di risorse specifiche su alcune pagine con l’ID
• Rimuovere CSS e JS specifici per la pagina o il post in base al loro ID.

Rimuovere CSS e JS in linea tramite l’ID risorsa HTTP

Ottimizzare di più! (Gratuito)

https://wordpress.org/plugins/optimize-more/

Ha la capacità di rimuovere gli stili CSS in linea e i file javascript in linea in modo selettivo per ogni pagina.

Suggerimenti sulle risorse

Suggerimenti per il browser prima delle feste (gratis)

https://wordpress.org/plugins/pre-party-browser-hints/

Questo plugin consente agli utenti di incorporare automaticamente e facilmente i suggerimenti alle risorse per migliorare il tempo di caricamento delle pagine.

Suggerimenti sulle risorse inclusi: Sono supportati DNS prefetch, prerender, preconnect, prefetch e preload.

Pulire i tipi di post personalizzati non utilizzati

Pulizia dei tipi di post personalizzati (gratuito)

https://wordpress.org/plugins/custom-post-type-cleanup/

Pulizia dei tipi di post personalizzati inutilizzati per migliorare le prestazioni del database.

Ridurre le richieste HTTP

Ispezione delle richieste HTTP (gratuito)

https://wordpress.org/plugins/inspect-http-requests/

Monitorare tutte le richieste HTTP effettuate tramite i metodi HTTP di WP, ossia wp_remote_get, wp_remote_post. Bloccate qualsiasi richiesta con un semplice clic su un pulsante.

Tiene traccia anche di quanto tempo richiede una richiesta come l’aggiornamento di core/plugin/theme.

Gestore delle richieste HTTP (gratuito)

https://wordpress.org/plugins/http-requests-manager/

Impedite che le richieste HTTP di WP rallentino il vostro sito web WordPress e l’interfaccia di amministrazione. Il plugin HTTP Requests Manager registra tutte le richieste HTTP di WP con il tempo di completamento di ciascuna richiesta. Se ci sono più richieste per pagina, saranno raggruppate per colore.

Aiuta a prevenire il rallentamento del sito web grazie a:

• Imposta il periodo di timeout della richiesta a 2 secondi. L’impostazione predefinita è 5.
• Limita il numero di richieste per pagina di 3. L’impostazione predefinita è illimitata.
• Limita la richiesta HTTP di WP se il tempo di caricamento della pagina è superiore a 3 secondi. L’impostazione predefinita è illimitata.
• Possibilità di bloccare tutte le richieste esterne o di consentire solo le richieste a wordpress.org per gli aggiornamenti di plugin, temi e core.

Ascoltatori passivi

Helper Lite For Pagespeed (Gratuito)

https://wordpress.org/plugins/helper-lite-for-pagespeed/

Rimuove l’avviso Passive Listeners nei test Pagespeed, migliorando i punteggi. Non è stato aggiornato da oltre un anno, testatelo in fase di staging prima di attivarlo su un sito live!

Ottimizzare di più! (Gratuito)

https://wordpress.org/plugins/optimize-more/

Funzione per rimuovere l’avviso di ascolto passivo

Ridurre l’uso di Ajax da parte dell’amministratore

Diagnosticare l’uso elevato di admin-ajax: https://kinsta.com/blog/admin-ajax-php/

https://koerge.com/learn/wordpress-admin-ajax-php-error/

Registrazione dell’uso di Ajax

Amuga Ajax Log (Gratuito)

https://wordpress.org/plugins/amuga-ajax-log/

Amuga Ajax Log traccia e registra le azioni che colpiscono l’admin-ajax.

• Nome dell’azione richiesta
• Possibile nome di funzione o metodo
• Luogo sospetto
• Pagina che ha generato l’hit

Nota: lasciare attivo solo durante la diagnosi, disattivare dopo l’uso per eliminare l’impatto sulle prestazioni.

Controllo del battito cardiaco

Controllo dinamico del battito cardiaco del frontend (gratuito)

https://wordpress.org/plugins/dynamic-front-end-heartbeat-control/

L’API WordPress Heartbeat fornisce una comunicazione in tempo reale tra il server e il browser quando si è connessi al pannello di amministrazione di WordPress. Utilizza il file

/wp-admin/admin-ajax.php per eseguire chiamate AJAX dal browser. Per impostazione predefinita, le richieste AJAX vengono inviate ogni 15 secondi sulle pagine di modifica dei post e ogni 60 secondi sulla dashboard.

Quasi tutti i plugin di ottimizzazione a pagamento hanno una funzione per controllare anche il battito cardiaco di WordPress.

Cache delle richieste Ajax

Rompere la cache dei cookie per memorizzare nella cache i contenuti dinamici Ajax

https://wpshout.com/crash-course-ajax-wordpress/

https://wpshout.com/using-cookies-in-wordpress-part-ii-cache-busting-with-ajax/

Prestazioni rapide

https://swiftperformance.io/

https://swiftperformance.io/blog/how-to-cache-ajax-get-requests-with-swift-performance-pro/

https://docs.swiftperformance.io/knowledgebase/cache-ajax-requests/

Swift Performance Lite (gratuito)

https://wordpress.org/plugins/swift-performance-lite/

La versione Lite è in grado di memorizzare nella cache le richieste Ajax. Questo è probabilmente il modo più semplice per memorizzare nella cache le richieste Ajax.

Cloudflare Super Page Cache (gratuito)

https://wordpress.org/plugins/wp-cloudflare-page-cache/

Oltre a Varnish (o Swift Performance, se lo si usa), Cloudflare Super Page Cache può memorizzare nella cache le richieste Ajax get (non le richieste post, purtroppo).

https://imgur.com/xWmKHmL

Deselezionate la casella di “Non memorizzare nella cache i contenuti dinamici”, intitolata “Richieste Ajax”.

Limitazioni di Cloudflare

Se le richieste Ajax provengono da un plugin che utilizza Ajax Nonces, la pagina/ajax non potrà essere messa in cache (quando si utilizza Cloudflare Super Page Cache*).

Vedere la spiegazione dello sviluppatore qui: https://wordpress.org/support/topic/how-to-correctly-cache-or-bypass-ajax-requests/

Controllo delle attività di WP-Cron

Cron Scheduler avanzato (gratuito)

https://wordpress.org/plugins/migrate-wp-cron-to-action-scheduler/

Gestore di cronjob avanzato e leggero

WP Crontrol (gratuito)

https://wordpress.org/plugins/wp-crontrol/

WP Crontrol consente di visualizzare e controllare ciò che accade nel sistema WP-Cron.

Registrazione cron (gratuito)

https://wordpress.org/plugins/cron-logger/

Questo plugin vi aiuterà a identificare quali Cronjob (se ce ne sono) sono problematici.

Creare lavori Cron per il server/sistema e disabilitare WP Cron (gratis)

https://wpspeedmatters.com/external-cron-jobs-in-wordpress/

Disattivare i Pingback (gratuito)

https://wordpress.org/plugins/no-self-ping/

Un pingback è un commento automatico che viene creato quando un altro blog vi linka. Ci possono essere anche i self-pingback, che vengono creati quando ci si collega a un articolo all’interno del proprio blog.

Ad alcuni piace molto che WordPress invii dei ping dal proprio sito al proprio sito quando si scrivono dei post; in questo modo si ottiene una traccia di post correlati.

Ad alcune persone questo comportamento non piace, in quanto ingombra i loro commenti. Questo plugin disabilita il ping intra-blog.

Disattivare il Bloat

Unbloater (Gratuito)

https://wordpress.org/plugins/unbloater/

Alcune caratteristiche uniche di debloat che altri plugin non hanno, tra cui:

1. Rimuovere il prefetch DNS a s.w.org
2. Caricare lo script dei commenti solo quando necessario
3. Rimuovere lo stile inline dei commenti recenti
4. Impedire il collegamento automatico agli URL nei commenti
5. Normalizzare la favicon
6. Normalizzare il titolo del logo di accesso
7. Normalizzare l’URL del logo di accesso
8. Disattivare il selettore della lingua di accesso

WP Control (gratuito)

https://wordpress.org/plugins/wpcontrol/

Toolkit gratuito per debloat. Alcune opzioni per disabilitare funzioni non presenti negli altri plugin di questa sezione.

Disabilitare pesantezza per WordPress e WooCommerce (gratuito)

https://wordpress.org/plugins/disable-dashboard-for-woocommerce/

Ottimo plugin con molte funzioni di Debloat sia per Woocommerce che per WordPress. Tutte le opzioni “pro” a pagamento possono essere ottenute con altri plugin gratuiti. Non c’è motivo di acquistare la versione pro del plugin. La versione pro è completamente inutile.

Disattivare i commenti

Disattivare i commenti (gratuito)

https://wordpress.org/plugins/turn-off-comments/

Disabilita i commenti in tutto il sito

Kit di strumenti per l’ottimizzazione

Si tratta di kit di strumenti di ottimizzazione con molte funzioni aggiuntive rispetto agli altri plugin inclusi in questa guida. Tutti i plugin elencati sono complementari a tutto il resto, non sono il fine ultimo dell’ottimizzazione.

Impostazioni avanzate (gratuito)

https://wordpress.org/plugins/advanced-settings/

Toolkit con molte funzioni. Aggiunge altri plugin per l’ottimizzazione.

• Rimuovere l’attributo type=”text/javascript” dal tag <script>.
• Traccia ed elenca gli script/stili richiesti
• Unire e includere gli script/stili rimossi
• Caricamento degli script rimossi nel piè di pagina
• Caricare gli stili rimossi uniti

Tipi di messaggi

• Gestire/creare/modificare
• Supporta: titolo, editore, autore, miniatura, estratto, trackback, campi personalizzati, commenti, revisioni, attributi della pagina, ecc.
• Configurare: gerarchico, has_archive, query_var, show_in_menu, show_ui, publicly_queryable, public, ecc.
• Tassonomie: categoria, post_tag

Codice HTML

• Correggere le miniature non corrette di Facebook, inclusi i meta OG
• Nascondere il menu di amministrazione superiore
• Aggiungere automaticamente una FavIcon (ogni volta che c’è un file favicon.ico o favicon.png nella cartella del modello)
• Aggiungere un meta tag di descrizione utilizzando la descrizione del blog (SEO)
• Aggiungere i meta tag descrizione e parole chiave in ogni post (SEO)
• Rimuovere il meta tag del generatore di WordPress
• Rimuovere il meta tag WLW Manifest dell’intestazione (collegamento a Windows Live Writer)
• Rimuovere il meta tag dell’intestazione RSD (Weblog Client Link)
• Rimuovere il meta tag shortlink dell’intestazione
• Configurare il titolo del sito in modo che utilizzi solo la funzione wp_title() (meglio per la programmazione hardcode)
• Limitare la lunghezza dell’estratto
• Aggiungere un link di approfondimento dopo l’estratto
• Rimuovi il filtro wptexturize
• Rimuovere i trackback e i pingback dal conteggio dei commenti
• Inserire la biografia dell’autore in ogni post
• Consentire l’HTML nel profilo utente
• Comprimere tutto il codice HTML
• Rimuovere i commenti HTML (non rimuovere i commenti condizionali di IE, come: <!-[if IE]>).
• Aggiungere il codice di Google Analytics
• Aggiungere il codice FeedBurner

Sistema

• Nascondere il messaggio di aggiornamento di WordPress nella dashboard
• Aggiungere il logo del cruscotto
• Disinstallare i widget predefiniti di WordPress
• Disattivare il sistema di widget
• Disattivare il sistema dei commenti
• Disattivare il salvataggio automatico dei messaggi
• Generare automaticamente la miniatura del post (dalla prima immagine del post)
• Impostare la qualità JPEG
• Ridimensionare l’immagine al momento del caricamento alla dimensione massima
• Visualizzare il numero totale di query SQL eseguite e il tempo di caricamento della pagina.
• Correggere la paginazione dei tipi di post

Script

• Rimuovere lo script jQuery migrate non necessario (jquery-migrate.min.js)
• Includere jQuery Google CDN invece dello script locale (versione 1.11.0)
• Rimuovere l’attributo type=”text/javascript” dal tag
• Tracciamento degli script in attesa
• Unire e includere gli script rimossi
• Caricamento degli script rimossi nel piè di pagina

Stili

• Traccia degli stili in attesa
• Unire e includere gli stili rimossi
• Filtri/Ganci
• Disabilitare i filtri/ganci di wp

Falcon (gratuito)

https://wordpress.org/plugins/falcon/

Un piccolo kit di strumenti pulito, con funzioni di base, ma con alcune caratteristiche uniche che altri kit non hanno (come la disattivazione della notifica dell’email dell’amministratore).

Strumenti WP (gratuiti)

https://wordpress.org/plugins/wptools/

Il plugin WP Tools (wp-tools) presenta una dashboard completa che mostra le statistiche del server, compreso un grafico degli errori, il tempo di caricamento della pagina anche per pagina e vanta oltre 47 strumenti progettati per semplificare le attività di gestione di WordPress. È un versatile coltellino svizzero per le vostre esigenze di WordPress.

Disattivare tutto (gratuito e pro)

https://wordpress.org/plugins/disable-everything/

Un altro kit di strumenti con alcune caratteristiche uniche, un altro ausiliario.

MagicBox (gratuito)

https://wordpress.org/plugins/magicbox/

Il coltellino svizzero tutto in uno per l’ottimizzazione e la funzionalità.

• SMTP
• Pulsanti di contatto
• Costruttore di moduli
• Posta massiva
• Carico pigro
• Riparazione del database
• Gestore della cache
• Precaricatore
• Popup
• Ricerca in tempo reale
• Fancybox
• CSS personalizzato
• Opzioni per l’informativa sui cookie
• Registri di accesso
• Informazioni sul PHP
• Registri degli errori
• Post-autenticazione
• Commento Disqus
• Commento Manager
• Responsabile del backup
• Ottimizzatore del caricamento delle immagini
• Ridimensionamento di immagini in blocco
• Suggerimento di parole chiave
• Sostituzione dell’URL
• Reindirizzamenti del sito
• Mappa del sito
• Immagine Seo
• Reindirizzamenti di errore
• Gestione delle pagine di errore
• Gestione duplicati
• Reindirizzamenti personalizzati
• Limitazione della visita
• URL di accesso
• Autenticatore Google
• Captcha
• Codici di tracciamento
• Editor User.ini
• Editor Htaccess
• Gestione inserimento codice
• Modifiche all’editor Gutenberg
• Etichetta bianca
• Interruttore utente
• Modalità di manutenzione
• Gestore di cloni
• Accesso personalizzato
• Cruscotto personalizzato
• Admin Menu Manager
• Permessi dell’utente
• Robot Txt Editor

WPMasterToolKit (gratuito)

https://wordpress.org/plugins/wpmastertoolkit/

Ottimo toolkit con numerose funzionalità. Alcune caratteristiche uniche.

Stili globali

Disabilitare gli stili globali (gratuito)

https://wordpress.org/plugins/disable-global-style/

Disabilita gli stili globali inseriti da WordPress a partire da WP 5.9. Rimuove anche gli SVG duotone aggiunti dopo il tag body di apertura. Anche Perfmatters ha questa funzione.

Perfmatters (a pagamento)

Caratteristiche: Disabilitazione selettiva di plugin, CSS e JS.

• Ritardo Javascript
• Rimuovere i CSS inutilizzati
• Precarico e precollegamento
• Inserimento del codice nell’intestazione e nel piè di pagina
• Rimuovere gli stili globali
• Rimuovere il bloat predefinito di WordPress (emoji, RSS, shortlink, ecc.)
• Rinviare Javascript
• Caricamento pigro di immagini e immagini/video
• Disattivare i font di Google
• Riscrittura url CDN
• URL di accesso personalizzato
• Woocommerce disabilita gli script sulle pagine non di Woocommerce
• Minificazione di JS e CSS
• Controllo del battito cardiaco

Plugin gratuiti per replicare le funzionalità di Perfmatters:

1. Pulizia delle attività
2. Debloat (per il rinvio di JS, il ritardo di JS, la minimizzazione e la rimozione dei CSS inutilizzati)
3. Pre-festa
4. Rimuovere gli stili globali
5. Disattivare il bloat di WordPress e Woocommerce
6. CAOS per l’analisi locale
7. Intestazioni e piè di pagina di WP per l’inserimento del codice
8. Disattivatore di plugin Freesoul
9. Plugin per immagini e Iframe Lazy Load (A3 lazy load, Optimize More!, un milione di opzioni)
10. Advanced Database Cleaner free o Database Cleaner
11. Disattivare Google Fonts (se lo si desidera)
12. Abilitatore CDN
13. Accesso nascosto WPS
14. Controllo dinamico del battito cardiaco del front-end

Precaricare le pagine interne

Pagine volanti (gratuito)

https://wordpress.org/plugins/flying-pages/

A mio parere, questo è il miglior plugin per il precaricamento delle pagine interne. Flying Pages non solo precarica i link su cui si passa il mouse, ma anche qualsiasi link che entra nel viewport. Questo è ottimo perché quando si clicca su un link, le pagine sono già precaricate.

Questo plugin precarica le pagine interne. Le pagine interne sono quelle che vengono caricate dopo la pagina iniziale dell’utente. Ad esempio, vengono caricate prima la homepage e ci sono collegamenti ad altre pagine nel menu dell’intestazione e del piè di pagina.

L’HTML di queste pagine è precaricato con Flying Pages, in modo che quando si fa clic su questi collegamenti, il loro HTML è già stato scaricato, con conseguente accelerazione dei tempi di caricamento della pagina interna che è stata cliccata.

Nota: assicurarsi di ritardare il file js “flying-pages.min.js” nel pannello delle impostazioni di Perfmatters (o del plugin che si utilizza per ritardare i javascript). WP Meteor, pur ritardando tutto, non sembra toccare questo file, quindi dovrà essere ritardato con un altro plugin.

Collegamenti rapidi (gratuito)

https://wordpress.org/plugins/quicklink/

Quicklink for WordPress cerca di rendere più veloce la navigazione verso le pagine successive. Il plugin contiene una libreria javascript che rileva i link nella viewport, attende che il browser sia inattivo e preimposta gli URL per questi link. La libreria cerca anche di rilevare se l’utente ha una connessione lenta o un piano dati.

Consiglio di ritardare il file javascript dei collegamenti rapidi, come se si usasse Flying Pages.

Caricamento speculativo (gratuito)

https://wordpress.org/plugins/speculation-rules/

Per impostazione predefinita, il plugin è configurato per eseguire il prerendering degli URL del frontend di WordPress quando l’utente passa il mouse su un link pertinente. Questo può essere personalizzato tramite la sezione “Caricamento speculativo” in Impostazioni > Lettura.

Disattivare selettivamente plugin e CSS/JS

Utilizzate Asset Cleanup, Perfmatters, Freesoul Plugin deactivator o qualsiasi altro plugin con questa funzionalità. Raccomando di usare Asset Cleanup Pro, perché ha il maggior numero di opzioni di configurazione e può anche disabilitare i file WP Core non necessari, oltre alla disattivazione selettiva dei plugin.

Quando disattivare selettivamente i plugin

Se un plugin è utilizzato solo nel frontend o nel backend, è necessario scaricarlo dove non è necessario. Un plugin per la gestione dei file, per esempio, deve essere eseguito solo nel backend, quindi dovrebbe essere disabilitato nel frontend.

Asset Cleanup Pro (a pagamento)

https://www.gabelivan.com/items/wp-asset-cleanup-pro/

La versione a pagamento di Asset Cleanup ha un disattivatore di plugin molto configurabile.

Perfmatters (a pagamento)

https://perfmatters.io

Disattivatore di plugin FreeSoul (gratuito)

https://wordpress.org/plugins/freesoul-deactivate-plugins/

Disattivare selettivamente i plugin per tipo di pagina/post sia nel frontend che nel backend.

WP Asset Manager (gratuito)

https://wordpress.org/plugins/gonzales/

Un efficiente gestore gratuito di risorse e di controllo dei plugin. Completo, può disattivare selettivamente css/js/plugin.

Organizzatore di plugin (gratuito)

https://wordpress.org/plugins/plugin-organizer/

Plugin Organizer consente di disattivare selettivamente i plugin e di modificare l’ordine di caricamento.

Filtro di carico dei plugin (gratuito)

https://wordpress.org/plugins/plugin-load-filter/ Un

altro plugin di disabilitazione selettiva

Gestore di plugin WP (gratuito)

https://wordpress.org/plugins/wp-plugin-manager/

Disattivare selettivamente i file css e js

La disabilitazione selettiva delle risorse (file css e js) è più selettiva della disabilitazione totale di un plugin. A volte è necessario che un plugin venga caricato su una pagina, ma non è necessario che tutti i file caricati dal plugin siano predefiniti. Pulizia delle risorse, Perfmatters

Pulizia delle risorse (gratuita e pro)

https://wordpress.org/plugins/wp-asset-clean-up/

https://www.gabelivan.com/items/wp-asset-cleanup-pro/

Pulizia delle risorse Disabilitare i file CSS e JS nel metabox di pulizia delle risorse nelle pagine:

È necessario disabilitare tutti i file js e css non necessari dei plugin che vengono caricati su una pagina, se non si desidera disabilitarli completamente con il gestore di plugin, senza interrompere la pagina.

Ulteriori informazioni sulle funzioni di Asset Cleanup sono riportate più avanti nella guida.

Ottimizzare di più! (Gratuito)

https://wordpress.org/plugins/optimize-more/

Optimize More! può disattivare selettivamente i file js e css.

Perfmatters (a pagamento)

https://perfmatters.io/

Responsabile della sceneggiatura

Attivare il gestore di script nel pannello delle impostazioni di perfmatters, quindi aprire il gestore di script dalla barra superiore di frontend per accedere all’interfaccia utente del gestore di script.

WP Asset Manager (gratuito)

https://w