{"id":55689,"date":"2024-02-15T09:00:00","date_gmt":"2024-02-15T08:00:00","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=55689"},"modified":"2025-06-16T20:59:35","modified_gmt":"2025-06-16T18:59:35","slug":"wordpress-lento","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/wordpress-lento\/","title":{"rendered":"Come ottimizzare un sito WordPress lento"},"content":{"rendered":"\n<p>In questo articolo vedremo come capire se il nostro sito WordPress \u00e8 lento.<\/p>\n\n\n\n<p>Ti mostreremo come testare il sito per capire quanto si discosta la velocit\u00e0 attuale da quella ideale.<\/p>\n\n\n\n<p>Dopodich\u00e9 vedremo passo passo come fare a identificare gli <strong>elementi che stanno rallentando il sito<\/strong> WordPress.<\/p>\n\n\n\n<p>Per un workflow completo su come ottimizzare le prestazioni, puoi leggere la guida su come <a href=\"https:\/\/supporthost.com\/it\/velocizzare-wordpress\/\" data-type=\"post\" data-id=\"9328\">velocizzare WordPress<\/a>.<\/p>\n\n\n\n<p>Iniziamo a testare!<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#come-capire-se-word-press-e-lento\">Come capire se WordPress \u00e8 lento<\/a><ul><li><a href=\"#come-leggere-il-risultato-del-test\">Come leggere il risultato del test<\/a><\/li><\/ul><\/li><li><a href=\"#ottimizzare-il-sito\">Ottimizzare il sito<\/a><ul><li><a href=\"#ottimizzare-le-immagini\">Ottimizzare le immagini<\/a><\/li><li><a href=\"#ridurre-il-numero-di-font\">Ridurre il numero di font<\/a><\/li><li><a href=\"#ridurre-le-richieste-con-asset-clean-up\">Ridurre le richieste con Asset CleanUp<\/a><\/li><li><a href=\"#trovare-plugin-e-temi-che-rallentano-il-sito\">Trovare plugin e temi che rallentano il sito<\/a><\/li><\/ul><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/ottimizzare-sito-wordpress-lento-1024x538.png\" alt=\"Ottimizzare Sito WordPress Lento\" class=\"wp-image-56059\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-capire-se-word-press-e-lento\">Come capire se WordPress \u00e8 lento<\/h2>\n\n\n\n<p>Prima di cominciare crea una copia del tuo sito in <a href=\"https:\/\/supporthost.com\/it\/staging-sito\/\" data-type=\"post\" data-id=\"16710\">staging<\/a> e fai un backup del sito. In questo modo andrai a lavorare sul sito in staging e se fai delle modifiche che compromettono l&#8217;aspetto o il funzionamento del sito, queste non avranno impatto sul sito pubblicato.<\/p>\n\n\n\n<p>Con l&#8217;<a href=\"https:\/\/supporthost.com\/it\/hosting-wordpress\/\" data-type=\"page\" data-id=\"22570\">hosting WordPress gestito<\/a> di SupportHost puoi creare lo staging con Softaculous in due minuti e puoi subito iniziare.<\/p>\n\n\n\n<p>Per cominciare, la prima cosa da fare \u00e8 testare la <a href=\"https:\/\/supporthost.com\/it\/velocita-sito-web\/\" data-type=\"post\" data-id=\"55415\">velocit\u00e0 del sito web<\/a> per capire se il tuo sito WordPress ha bisogno di essere ottimizzato dal punto di vista delle performance.<\/p>\n\n\n\n<p>In questo video puoi vedere il processo di ottimizzazione su un sito con un singola pagina.<\/p>\n\n\n\n<div data-video-id=\"J-50bjYcwwo\" style=\"--btn-hover-color:#ff0000;--btn-hover-scale:1;\" class=\"wp-block-supporthost-supporthost-youtube-block\">\n    <div class=\"youtube-video-play youtube-video-play--youtube\" style=\"height:60px;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 71.412 50\" style=\"height:60px;\"><g transform=\"scale(.58824)\"><path class=\"yt-bg\" fill=\"rgba(0,0,0,0.8)\" d=\"M118.9 13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7 0 60.7 0 60.7 0s-38 0-47.5 2.5C8.1 3.9 3.9 8.1 2.5 13.3 0 22.8 0 42.5 0 42.5s0 19.8 2.5 29.2C3.9 76.9 8 81 13.2 82.4 22.8 85 60.7 85 60.7 85s38 0 47.5-2.5c5.2-1.4 9.3-5.5 10.7-10.7 2.5-9.5 2.5-29.2 2.5-29.2s.1-19.8-2.5-29.3z\"\/><path fill=\"#ffffff\" d=\"M80.2 42.5L48.6 24.3v36.4z\"\/><\/g><\/svg><\/div>            <img src=\"https:\/\/img.youtube.com\/vi\/J-50bjYcwwo\/maxresdefault.jpg\" loading=\"lazy\" decoding=\"async\">    <\/div>\n\n\n<p>Per fare il test, lo strumento che consigliamo \u00e8 <a href=\"https:\/\/supporthost.com\/it\/gtmetrix\/\" data-type=\"post\" data-id=\"20024\">GTmetrix<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/gtmetrix-analisi-1024x456.png\" alt=\"Gtmetrix Analisi\" class=\"wp-image-20091\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/gtmetrix-analisi-1024x456.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/gtmetrix-analisi-300x134.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/gtmetrix-analisi-768x342.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/gtmetrix-analisi-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/gtmetrix-analisi.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Questo tool ti permette di impostare la localit\u00e0 da cui fare il test e vedere nel dettaglio le risorse che vengono caricate.<\/p>\n\n\n\n<p>Per fare il test bisogna registrarsi al <a href=\"https:\/\/gtmetrix.com\/\" rel=\"noopener\">sito<\/a>. <\/p>\n\n\n\n<p>In questo modo potrai cambiare la localit\u00e0 del test e impostare quella pi\u00f9 vicina alle persone che visitano il tuo sito. Per esempio sceglieremo <strong>Londra <\/strong>come localit\u00e0 di test se la maggior parte dei visitatori provengono dall&#8217;Italia.<\/p>\n\n\n\n<p class=\"note\"><strong>Aggiornamento<\/strong>: a partire da dicembre 2023, GTmetrix fa avviare il test anche agli utenti non registrati, ma per poter vedere il risultato del test bisogna creare un account o fare l&#8217;accesso se lo si ha gi\u00e0. Inoltre con la versione gratuita \u00e8 possibile fare <strong>solo 5 test<\/strong>. Per effettuare pi\u00f9 test, bisogna passare a un piano a pagamento, quello Micro parte da 5$ al mese e include 25 test on demand a settimana.<\/p>\n\n\n\n<p>Quando inserisci l&#8217;URL del sito per fare il test, ricordati di inserire il link diretto alla home, in modo che non ci siano reindirizzamenti.<\/p>\n\n\n\n<p>Inserisci il protocollo corretto, http o https, e l&#8217;indirizzo corretto, www o non www, e inserisci lo slash finale, come in questo esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#047;&#047;supporthost.com\/<\/code><\/pre>\n\n\n\n<p>In questo modo nel test non ci saranno <strong>reindirizzamenti <\/strong>che farebbero aumentare il tempo di caricamento, falsando il risultato finale.<\/p>\n\n\n\n<p>Puoi accorgerti se c&#8217;\u00e8 stato un reindirizzamento guardando nel Waterfall di GTmetrix. Se non ci sono reindirizzamenti nella colonna <strong>Status<\/strong> non vedrai stati 3XX.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"come-leggere-il-risultato-del-test\">Come leggere il risultato del test<\/h3>\n\n\n\n<p>Ci sono alcuni parametri pi\u00f9 importanti di altri a cui dovresti fare attenzione per capire subito se il tuo sito WordPress va lento e<strong> quali possono essere le cause<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"766\" height=\"584\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-page-details-leggere-risultato-del-test.png\" alt=\"Gtmetrix Page Details Leggere Risultato Del Test\" class=\"wp-image-55691\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-page-details-leggere-risultato-del-test.png 766w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-page-details-leggere-risultato-del-test-300x229.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-page-details-leggere-risultato-del-test-83x63.png 83w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/figure>\n\n\n\n<p><strong>Tempo di caricamento totale<\/strong>: indica il tempo necessario a completare il caricamento completo della pagina.<\/p>\n\n\n\n<p class=\"note\">Il tempo ideale dovrebbe essere inferiore a 2 secondi.<\/p>\n\n\n\n<p><strong>Attenzione<\/strong>, il grado di GTmetrix \u00e8 un valore indicativo, ma pu\u00f2 ingannarti. Potresti avere un grado A con performance e structure vicine al 100% e avere comunque un tempo di caricamento alto.<\/p>\n\n\n\n<p>Se vuoi ottimizzare la velocit\u00e0 del sito, come abbiamo visto il primo valore da considerare \u00e8 il tempo di caricamento.<\/p>\n\n\n\n<p><strong>Dimensione totale<\/strong> <strong>della pagina<\/strong>: \u00e8 il peso della pagina, espresso in MB o in KB, ed \u00e8 dato da tutti i dati che vengono scaricati quando qualcuno visita la pagina. Le dimensioni possono dipendere da vari elementi, tra cui immagini, video, font, JavaScript e CSS.<\/p>\n\n\n\n<p class=\"note\">La dimensione ideale \u00e8 inferiore a 1 &#8211; 2 MB.<\/p>\n\n\n\n<p><strong>Numero di richieste<\/strong>: ogni file che viene caricato rappresenta una richiesta.<\/p>\n\n\n\n<p class=\"note\">Il nostro obiettivo \u00e8 stare sotto le 50 &#8211; 70 richieste. Tieni comunque presente che con HTTP\/2 le richieste vengono caricate in simultanea, per cui non \u00e8 stringente ridurre il numero di richieste. Per\u00f2 riducendole, contribuiamo a ridurre la dimensione di pagina.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"397\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-test-esempio-web-vitals-e-gtmetrix-grade-1024x397.png\" alt=\"Gtmetrix Test Esempio Web Vitals E Gtmetrix Grade\" class=\"wp-image-55692\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-test-esempio-web-vitals-e-gtmetrix-grade-1024x397.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-test-esempio-web-vitals-e-gtmetrix-grade-300x116.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-test-esempio-web-vitals-e-gtmetrix-grade-768x298.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-test-esempio-web-vitals-e-gtmetrix-grade-120x47.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-test-esempio-web-vitals-e-gtmetrix-grade.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Web vitals: queste metriche danno informazioni sul caricamento della pagina.<\/p>\n\n\n\n<p><strong>LCP o Largest Contentful Paint <\/strong>indica il tempo che serve a caricare l&#8217;elemento pi\u00f9 grande nella pagina. <\/p>\n\n\n\n<p class=\"note\">Il tempo ideale \u00e8 inferiore a 1,2 secondi.<\/p>\n\n\n\n<p><strong>TBT o Total Blocking Time<\/strong> \u00e8 il tempo che passa da quando sono visibili i primi elementi della pagina a quando le persone possono interagire con essa. <\/p>\n\n\n\n<p class=\"note\">Dovrebbe essere inferiore ai 150 millisecondi.<\/p>\n\n\n\n<p><strong>CLS o Cumulative Layout Shift<\/strong> \u00e8 una misura di quanto si spostano gli elementi della pagina durante il caricamento. <\/p>\n\n\n\n<p class=\"note\">L&#8217;ideale \u00e8 che ci sia il minor spostamento possibile, e il punteggio deve essere inferiore a 0,1. <\/p>\n\n\n\n<p>Quest&#8217;ultima metrica non \u00e8 legata alla velocit\u00e0 di caricamento, ma al modo in cui viene caricata la pagina e quindi al suo impatto sull&#8217;esperienza utente.<\/p>\n\n\n\n<p>Il <strong>waterfall<\/strong> \u00e8 un grafico a cascata che ci mostra tutte le risorse che vengono caricate. Possiamo filtrare per tipo di richieste, ad esempio concentrarci solo sulle immagini e ordinare le richieste in base alla dimensione.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"469\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/waterfall-ordinato-per-dimensione-gtmetrix-1024x469.png\" alt=\"Waterfall Ordinato Per Dimensione Gtmetrix\" class=\"wp-image-55693\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/waterfall-ordinato-per-dimensione-gtmetrix-1024x469.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/waterfall-ordinato-per-dimensione-gtmetrix-300x138.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/waterfall-ordinato-per-dimensione-gtmetrix-768x352.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/waterfall-ordinato-per-dimensione-gtmetrix-120x55.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/waterfall-ordinato-per-dimensione-gtmetrix.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ordinando le richieste in base alla dimensione possiamo subito capire quali sono gli elementi che stanno rendendo il sito WordPress lento.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ottimizzare-il-sito\">Ottimizzare il sito<\/h2>\n\n\n\n<p>Prima di procedere all&#8217;ottimizzazione \u00e8 consigliabile <a href=\"https:\/\/supporthost.com\/it\/backup-wordpress\/\" data-type=\"post\" data-id=\"24961\">fare un backup<\/a> e assicurarsi che <a href=\"https:\/\/supporthost.com\/it\/aggiornare-wordpress\/\" data-type=\"post\" data-id=\"23425\">WordPress sia aggiornato<\/a> (core, temi e plugin). \u00c8 essenziale lavorare in <strong>staging<\/strong>, come dicevamo prima, in modo da non causare problemi al sito online.<\/p>\n\n\n\n<p>Prima e dopo ogni passaggio, ad esempio prima di ottimizzare le immagini e dopo averlo fatto, puoi eseguire uno speed test. In questo modo puoi vedere se e quanto sta cambiando il tempo di caricamento della pagina in base alle modifiche che stai facendo.<\/p>\n\n\n\n<p>Andiamo a vedere come agire sugli elementi che rallentano il sito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ottimizzare-le-immagini\">Ottimizzare le immagini<\/h3>\n\n\n\n<p>Una delle prime cose che puoi fare \u00e8 controllare se stai caricando le immagini nel formato corretto. Ogni formato ha un utilizzo specifico. <\/p>\n\n\n\n<p>Vediamo alcuni esempi e poi, se vorrai approfondire, puoi seguire la guida su come <a href=\"https:\/\/supporthost.com\/it\/ottimizzare-immagini-wordpress\/\" data-type=\"post\" data-id=\"13818\">ottimizzare le immagini su WordPress<\/a>.<\/p>\n\n\n\n<p><strong>SVG<\/strong>: \u00e8 il formato indicato per i loghi.<\/p>\n\n\n\n<p><strong>PNG<\/strong>: \u00e8 pi\u00f9 pesante rispetto al JPG, ma ha una qualit\u00e0 migliore. \u00c8 indicato per gli <strong>screenshot<\/strong>, in modo da garantire una qualit\u00e0 adeguata affinch\u00e9 lo screenshot sia effettivamente leggibile.<\/p>\n\n\n\n<p><strong>JPG<\/strong>: \u00e8 il formato ideale per le <strong>foto<\/strong>. Rispetto al png, infatti, \u00e8 pi\u00f9 leggero.<\/p>\n\n\n\n<p><strong>WEBP<\/strong>: \u00e8 un formato pi\u00f9 compresso, ma alcuni browser ancora non lo supportano; ne parliamo meglio nella <a href=\"https:\/\/supporthost.com\/it\/avif-vs-webp\/\">guida comparativa fra i formati moderni AVIF e WebP<\/a>.<\/p>\n\n\n\n<p>Nella guida che abbiamo linkato prima, parliamo di <strong>ShortPixel<\/strong>, il plugin che utilizziamo su SupportHost.<\/p>\n\n\n\n<p>Questo plugin ha il vantaggio di mostrare le immagini in <a href=\"https:\/\/supporthost.com\/it\/webp-wordpress\/\">webp<\/a> per i browser compatibili, altrimenti utilizzer\u00e0 un altro formato compatibile, per esempio png o jpg.<\/p>\n\n\n\n<p>In questo modo tutte le immagini del nostro sito verranno visualizzate correttamente indipendentemente dal browser che le persone stanno utilizzando.<\/p>\n\n\n\n<p>Da GTmetrix possiamo visualizzare dal Waterfall solo le immagini e ordinarle per dimensioni. Inoltre possiamo vedere quante immagini ci sono, guardando il numero di richieste, e qual \u00e8 la loro dimensione.<\/p>\n\n\n\n<p>Cliccando sulla singola richiesta possiamo vedere il nome dell&#8217;immagine, e cliccando su <em>Img (from URL) <\/em>possiamo vedere l&#8217;anteprima dell&#8217;immagine. Questo ci aiuta a capire subito quali immagini devono essere ottimizzate.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"515\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-image-from-url-1024x515.png\" alt=\"Gtmetrix Image From Url\" class=\"wp-image-55696\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-image-from-url-1024x515.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-image-from-url-300x151.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-image-from-url-768x386.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-image-from-url-120x60.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/gtmetrix-image-from-url.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Come dicevamo uno dei metodi pi\u00f9 pratici \u00e8<strong> automatizzare l&#8217;ottimizzazione delle immagini<\/strong>.<\/p>\n\n\n\n<p>ShortPixel e altri plugin simili fanno proprio questo. Dopo averli impostati, tutte le immagini che caricheremo sul nostro sito verranno ottimizzate in base alle nostre impostazioni.<\/p>\n\n\n\n<p>Se, invece, stai andando a ottimizzare un sito gi\u00e0 creato, dovrai ricordarti di andare a comprimere le immagini gi\u00e0 caricate. Puoi farlo sempre con un plugin, o manualmente nel caso in cui si tratti di poche immagini, per esempio una landing page: esistono diversi strumenti per <a href=\"https:\/\/supporthost.com\/it\/strumenti-per-ottimizzare-immagini\/\">ottimizzare le immagini<\/a>.<\/p>\n\n\n\n<p>Parliamo proprio dell&#8217;ottimizzazione manuale.<\/p>\n\n\n\n<p><em>Come si fa a capire qual \u00e8 la dimensione adeguata?<\/em><\/p>\n\n\n\n<p>Usando lo strumento <em>Ispeziona<\/em> del browser, possiamo vedere le dimensioni dell&#8217;immagine che abbiamo caricato e le <strong>dimensioni visualizzate<\/strong>. In questo modo possiamo capire se abbiamo caricato l&#8217;immagine nelle dimensioni corrette o se \u00e8 troppo grande.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"395\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/dimensioni-visualizzate-delle-immagini-wordpress-1024x395.png\" alt=\"Dimensioni Visualizzate Delle Immagini WordPress\" class=\"wp-image-55702\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/dimensioni-visualizzate-delle-immagini-wordpress-1024x395.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/dimensioni-visualizzate-delle-immagini-wordpress-300x116.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/dimensioni-visualizzate-delle-immagini-wordpress-768x296.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/dimensioni-visualizzate-delle-immagini-wordpress-120x46.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/dimensioni-visualizzate-delle-immagini-wordpress.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In questo esempio l&#8217;immagine \u00e8 2048 x 1365 px, mentre viene visualizzata a 385 x 209 px. Considerando gli schermi retina, per avere una dimensione adeguata possiamo raddoppiare la dimensione visualizzata e, quindi, per questa specifica immagine potremo ridimensionarla in modo da passare da 2048 px di larghezza a 770 px, mantenendo invariate le proporzioni.<\/p>\n\n\n\n<p>Per ridimensionarla possiamo usare un qualsiasi programma, ad esempio <em>Image Tricks Lite<\/em> per macOS o anche, <em>Foto<\/em>, il programma integrato di Windows 10 che ci mostra anche il peso iniziale e finale del file. In questo caso stiamo riducendo il peso da 300 a 53 KB.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"511\" height=\"561\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/ridimensionare-immagine-windows-10.png\" alt=\"Ridimensionare Immagine Windows 10\" class=\"wp-image-55697\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/ridimensionare-immagine-windows-10.png 511w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/ridimensionare-immagine-windows-10-273x300.png 273w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/ridimensionare-immagine-windows-10-57x63.png 57w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" \/><\/figure>\n\n\n\n<p>Possiamo ripetere lo stesso procedimento per tutte le immagini e poi caricare le immagini ridimensionate sul sito.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ridurre-il-numero-di-font\">Ridurre il numero di font<\/h3>\n\n\n\n<p>Dal Waterfall di GTmetrix possiamo vedere il numero di font utilizzati sulla pagina testata.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"345\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/esempio-di-waterfall-font-gtmetrix-1024x345.png\" alt=\"Esempio Di Waterfall Font Gtmetrix\" class=\"wp-image-55698\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/esempio-di-waterfall-font-gtmetrix-1024x345.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/esempio-di-waterfall-font-gtmetrix-300x101.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/esempio-di-waterfall-font-gtmetrix-768x259.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/esempio-di-waterfall-font-gtmetrix-120x40.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/esempio-di-waterfall-font-gtmetrix.png 1062w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Se i font utilizzati hanno un peso rilevante, si possono ridurre in modo da <strong>usare meno font <\/strong>e ridurre il numero complessivo di risorse. Come linea generale ti consigliamo di usare 2 o 3 font.<\/p>\n\n\n\n<p>Nei font vengono riportati anche quelli utilizzati per le <strong>icone<\/strong>, in genere da font awesome o altri font per le icone. Anche in questo caso, si pu\u00f2 utilizzare un solo tipo di icone in modo da caricare un solo font.<\/p>\n\n\n\n<p>Adesso vediamo come ridurre il numero di richieste.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ridurre-le-richieste-con-asset-clean-up\">Ridurre le richieste con Asset CleanUp<\/h3>\n\n\n\n<p><strong>Asset CleanUp<\/strong> \u00e8 un plugin che ci permette di evitare che siano caricati script JavaScript e fogli di stile (CSS) nelle pagine in cui non servono, lasciandoli attivi solo nella pagine in cui sono realmente necessari.<\/p>\n\n\n\n<p>Dopo aver installato il plugin, aprendo Gutenberg vedremo il box di Asset CleanUp in basso e potremo vedere quali script sono stati caricati e disattivare quelli inutili.<\/p>\n\n\n\n<p>Possiamo impostare in modo da:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>non caricare lo script o il file css solo nella pagina che stiamo modificando;<\/li>\n\n\n\n<li>non caricarlo su tutto il sito;<\/li>\n\n\n\n<li>non caricare su tutti i post del tipo pagina, articolo, ecc.<\/li>\n<\/ul>\n\n\n\n<p>Oppure possiamo impostare un&#8217;eccezione in modo da caricare lo script o il css:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>solo sulla pagina corrente;<\/li>\n\n\n\n<li>solo sul tipo di post &#8220;pagina&#8221; (quindi per esempio non caricandolo sugli articoli).<\/li>\n<\/ul>\n\n\n\n<p class=\"note\"><strong>Importante<\/strong>: Quando andiamo a usare Asset CleanUp e non sappiamo se la risorsa che stiamo disattivando serve al funzionamento di quella pagina, dobbiamo disattivare una risorsa alla volta e controllare di volta in volta che il sito continui a funzionare e a vedersi correttamente.<\/p>\n\n\n\n<p>Dalle impostazioni di <em>Asset CleanUp &gt; Settings &gt; Site-Wide Unload<\/em> possiamo disattivare il caricamento di alcuni script e CSS sull&#8217;intero sito.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"595\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/05\/eliminare-risorse-inutili-dal-tuo-sito.png\" alt=\"Eliminare Risorse Inutili Dal Tuo Sito\" class=\"wp-image-13033\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/05\/eliminare-risorse-inutili-dal-tuo-sito.png 800w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/05\/eliminare-risorse-inutili-dal-tuo-sito-300x223.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/05\/eliminare-risorse-inutili-dal-tuo-sito-768x571.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2020\/05\/eliminare-risorse-inutili-dal-tuo-sito-85x63.png 85w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Per esempio possiamo disattivare embed, emoji, commenti. Ovviamente dobbiamo andare a disattivare solo le funzioni che non ci servono sul sito.<\/p>\n\n\n\n<p><strong>Nota<\/strong>: un&#8217;altra cosa che si pu\u00f2 fare \u00e8 il merge e minify dei CSS e dei JavaScript. Tuttavia, visto che con HTTP\/2 le risorse vengono caricate in simultanea, si recupera poco tempo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"trovare-plugin-e-temi-che-rallentano-il-sito\">Trovare plugin e temi che rallentano il sito<\/h3>\n\n\n\n<p>Ai fini di questa guida stiamo andando a vedere come capire cosa sta effettivamente <strong>rallentando <\/strong>il nostro sito.<\/p>\n\n\n\n<p>Ad ogni modo per velocizzare WordPress, potrai fare anche altri passaggi, come controllare che non ci siano plugin inutili. <\/p>\n\n\n\n<p>Per esempio due plugin che hanno la stessa funzione, oppure plugin che hai attivato, ma che non stai usando e che quindi dovresti eliminare. Ci sono plugin che in generale sarebbe meglio evitare, come abbiamo visto nella guida ai <a href=\"https:\/\/supporthost.com\/it\/plugin-che-rallentano-wordpress\/\">plugin che rallentano WordPress<\/a>.<\/p>\n\n\n\n<p>Adesso, invece, andiamo a vedere come capire <strong>quanto incidono plugin e temi sul caricamento<\/strong>.<\/p>\n\n\n\n<p>Per trovare rapidamente temi e plugin che rallentano il sito, possiamo usare un plugin gratuito chiamato <strong>Query Monitor<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"823\" height=\"385\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-plugin.png\" alt=\"Query Monitor Plugin\" class=\"wp-image-55699\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-plugin.png 823w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-plugin-300x140.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-plugin-768x359.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-plugin-120x56.png 120w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><\/figure>\n\n\n\n<p>Questo plugin serve a monitorare le chiamate al database e ci permette di capire se ci sono plugin o temi che stanno facendo tante richieste.<\/p>\n\n\n\n<p>Dopo aver installato il plugin possiamo cliccare su <em>Query per Componente<\/em> per individuare le richieste al database eseguite da un singolo plugin o tema. In questo modo possiamo vedere quali plugin eseguono il maggior numero di query o le query che impiegano pi\u00f9 tempo.<\/p>\n\n\n\n<p>Questo ci permette di capire <strong>quali sono i plugin critici<\/strong>.<\/p>\n\n\n\n<p>In questo esempio ho creato un sito di prova con l&#8217;hosting gratuito di SupportHost e aggiunto tre plugin:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Beaver Builder, un builder per costruire le pagine;<\/li>\n\n\n\n<li>Social Warfare, per aggiungere le icone social;<\/li>\n\n\n\n<li>Broken link checher, che identifica i <a href=\"https:\/\/supporthost.com\/it\/broken-link\/\" data-type=\"post\" data-id=\"66907\">link rotti<\/a> che rimandano a errori.<\/li>\n<\/ul>\n\n\n\n<p>Come vedi possiamo ordinare i plugin in base al numero di query che fanno al database.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"198\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-ordinare-per-numero-di-query-1024x198.png\" alt=\"Query Monitor Ordinare Per Numero Di Query\" class=\"wp-image-55700\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-ordinare-per-numero-di-query-1024x198.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-ordinare-per-numero-di-query-300x58.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-ordinare-per-numero-di-query-768x148.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-ordinare-per-numero-di-query-120x23.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/01\/query-monitor-ordinare-per-numero-di-query.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Riporto il risultato:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table data-mtr-unique-id=\"66c020f4489a8c7e2491b9a8c59bed86-1\" class=\"has-fixed-layout mtr-table mtr-thead-th\"><thead><tr><th data-mtr-content=\"Plugin\/Tema\/Componente\" class=\"mtr-th-tag\"><div class=\"mtr-cell-content\">Plugin\/Tema\/Componente<\/div><\/th><th data-mtr-content=\"N\u00b0 di query\" class=\"mtr-th-tag\"><div class=\"mtr-cell-content\">N\u00b0 di query<\/div><\/th><\/tr><\/thead><tbody><tr><td data-mtr-content=\"Plugin\/Tema\/Componente\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Beaver builder<\/div><\/td><td data-mtr-content=\"N\u00b0 di query\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">41<\/div><\/td><\/tr><tr><td data-mtr-content=\"Plugin\/Tema\/Componente\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Core<\/div><\/td><td data-mtr-content=\"N\u00b0 di query\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">34<\/div><\/td><\/tr><tr><td data-mtr-content=\"Plugin\/Tema\/Componente\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Social Warfare<\/div><\/td><td data-mtr-content=\"N\u00b0 di query\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">21<\/div><\/td><\/tr><tr><td data-mtr-content=\"Plugin\/Tema\/Componente\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">Broken Link Checker<\/div><\/td><td data-mtr-content=\"N\u00b0 di query\" class=\"mtr-td-tag\"><div class=\"mtr-cell-content\">2<\/div><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>A questo punto possiamo decidere se vale la pena sostituire il plugin con uno pi\u00f9 leggero, oppure se possiamo eliminare il plugin se magari non \u00e8 essenziale per il nostro sito.<\/p>\n\n\n\n<p>In questo caso specifico, la prima cosa che potremmo fare sarebbe eliminare il plugin Social Warfare e <a href=\"https:\/\/supporthost.com\/it\/aggiungere-icone-social\/\">aggiungere le icone social<\/a> in modo da ridurre al minimo l&#8217;impatto sulle prestazioni, come abbiamo spiegato nella nostra guida.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Abbiamo visto come capire se un sito WordPress \u00e8 lento effettuando un test sulla velocit\u00e0 in modo da paragonare il tempo di caricamento attuale a quello <em>ideale<\/em>. <\/p>\n\n\n\n<p>Il metodo consiste nell&#8217;analizzare i risultati del report in modo da trovare <strong>quali elementi stanno effettivamente rallentando il sito<\/strong>.<\/p>\n\n\n\n<p>Dopodich\u00e9 bisogna passare alla pratica e andare a intervenire sugli elementi critici che possono essere:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>immagini non ottimizzate;<\/li>\n\n\n\n<li>font inutili o non utilizzati;<\/li>\n\n\n\n<li>script che vengono caricati in pagine in cui non servono;<\/li>\n\n\n\n<li>plugin o temi che effettuano chiamate al database rallentando il sito.<\/li>\n<\/ul>\n\n\n\n<p>Abbiamo visto come individuare questi problemi e come risolverli per migliorare la velocit\u00e0 del nostro sito WordPress.<\/p>\n\n\n\n<p>Questa guida ti \u00e8 stata utile? Che miglioramenti hai avuto dopo aver ottimizzato il sito? Faccelo sapere nei commenti.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questo articolo vedremo come capire se il nostro sito WordPress \u00e8 lento. Ti mostreremo come testare il sito per capire quanto si discosta la velocit\u00e0 attuale da quella ideale. Dopodich\u00e9 vedremo passo passo come fare a identificare gli elementi che stanno rallentando il sito WordPress. Per un workflow completo su come ottimizzare le prestazioni, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":63480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[30],"tags":[],"class_list":["post-55689","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-velocita"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/55689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=55689"}],"version-history":[{"count":7,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/55689\/revisions"}],"predecessor-version":[{"id":127991,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/55689\/revisions\/127991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/63480"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=55689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=55689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=55689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}