{"id":296,"date":"2024-08-19T14:55:56","date_gmt":"2024-08-19T14:55:56","guid":{"rendered":"https:\/\/blog.devlancer.it\/?p=296"},"modified":"2024-08-23T10:25:12","modified_gmt":"2024-08-23T10:25:12","slug":"seo-core-web-vitals-come-migliorarli","status":"publish","type":"post","link":"https:\/\/blog.devlancer.it\/en\/seo-core-web-vitals-come-migliorarli\/","title":{"rendered":"I Core Web Vitals per la SEO: Come funzionano e come migliorarli"},"content":{"rendered":"<p>Con l\u2019aggiornamento del Page Experience Update di Google, \u00e8 diventato sempre pi\u00f9 importante avere delle <strong>buone prestazioni<\/strong> per il proprio sito web: <strong>caricamenti di pagina in tempi brevi<\/strong>, <strong>stabilit\u00e0 visiva dei contenuti<\/strong>, uso di <strong>risorse e immagini ottimizzate<\/strong><strong>, <\/strong><strong><a href=\"https:\/\/www.accessibilita.digital\/come-sviluppare-un-sito-web-accessibile\/#i-core-web-vitals-e-laccessibilita\" rel=\"noopener\">accessibilit\u00e0<\/a><\/strong><strong> e altro ancora<\/strong>.<\/p>\n\n<h2>Segnali Web Essenziali e Prestazioni della pagina web<\/h2>\n<p>Tutto questo richiede una serie di accorgimenti tecnici nell\u2019uso di <strong>Javascript e CSS<\/strong>, oltre che la necessit\u00e0 di fare molta attenzione alla fase di <strong>progettazione e design del sito<\/strong>: l\u2019usabilit\u00e0 diventa sempre pi\u00f9 importante.<\/p>\n<p>Questo insieme di novit\u00e0 e di nuove metriche \u00e8 stato denominato <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/core-web-vitals?hl=it\" rel=\"nofollow noopener\">Core Web Vitals<\/a>, tradotto in italiano come Segnali Web Essenziali.<\/p>\n<h3>Le metriche dei Core Web Vitals<\/h3>\n<p>Ecco le metriche principali misurate dai Segnali web essenziali:<\/p>\n<ul>\n<li><b>LCP<\/b> (Largest Contentful Paint): viene usato per misurare le prestazioni di caricamento. Per offrire una buona esperienza utente, dovremmo ottenere un punteggio LCP inferiore a 2,5 secondi dall&#8217;inizio del caricamento della pagina.<\/li>\n<li><b>INP<\/b> (Interaction to Next Paint): misura l&#8217;interattivit\u00e0. Dovremmo assicurarci che il valore sia inferiore a 100 millisecondi. Questa metrica <b>ha sostituito FID<\/b> nel marzo 2024.<\/li>\n<li><b>CLS<\/b> (Cumulative Layout Shift): misura la stabilit\u00e0 visiva. Il punteggio CLS dovrebbe essere inferiore a 0,1<\/li>\n<\/ul>\n<p>Per una <b>spiegazione tecnica pi\u00f9 approfondita<\/b> sul significato e il funzionamento delle singole metriche <b>sono gi\u00e0 disponibili diversi articoli online<\/b>, come ad esempio <a href=\"https:\/\/yoast.com\/core-web-vitals\/\" rel=\"nofollow noopener\">YoastSEO: Learn about the three Core Web Vitals: LCP, FID &amp; CLS<\/a>, per questo motivo preferisco qui concentrarmi su come poter migliorare, <b>dal punto di vista pratico<\/b>, il proprio sito o applicativo web per poter ottenere un <b>miglior posizionamento<\/b>.<\/p>\n<p>In linea generale, il mio suggerimento \u00e8 quello di <b>non spendere troppe energie<\/b> sul capire come migliorare <b>ogni singolo dettaglio<\/b>, anche perch\u00e9 spesso questo porta a dover fare le cose in fretta e farle male. Ad esempio, <b>installare semplicemente un plugin su WordPress<\/b> per la gestione della cache e il miglioramento delle prestazioni, <b>non significa aver fatto una buona operazione<\/b>.<\/p>\n<p>A volte infatti <b>i plugin di caching<\/b> potrebbero <b>sovraccaricare il server<\/b> oppure potrebbero riempire il codice HTML di elementi aggiuntivi tramite Javascript, che possono creare <b>problemi di rendering<\/b> nel lungo termine.<\/p>\n<p>Per capire meglio i vari aspetti dobbiamo <b>fare un po\u2019 di analisi<\/b>, anche aiutandoci con strumenti come <b>Lighthouse<\/b> o la scheda <b>Rete<\/b> del nostro browser.<\/p>\n<h3>Come effettuare una prima analisi per i Core Web Vitals<\/h3>\n<p>Anzitutto partiamo dallo <b>strumento Network<\/b> del nostro browser, facendo <b>clic destro<\/b> sulla pagina web e poi su <b>Ispeziona<\/b>, oppure premendo il tasto <b>F12<\/b> (pu\u00f2 essere diverso a seconda del proprio sistema operativo) e poi aggiorniamo la pagina. Clicchiamo il <b>primo elemento<\/b> della lista a destra e guardiamo i <b>Tempi<\/b> per vedere quanto ci ha messo la pagina a rispondere. Ecco un esempio:<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter wp-image-297 size-large\" src=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-11-Browser-Network-tab-1024x284.png\" alt=\"\" width=\"1024\" height=\"284\" srcset=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-11-Browser-Network-tab-1024x284.png 1024w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-11-Browser-Network-tab-300x83.png 300w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-11-Browser-Network-tab-768x213.png 768w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-11-Browser-Network-tab-600x166.png 600w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-11-Browser-Network-tab.png 1103w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>La scheda Rete del browser ci mostra i tempi di caricamento della pagina<\/figcaption><\/figure>\n<p>Possiamo vedere che la pagina si \u00e8 <b>caricata completamente in meno di 400ms<\/b> e che abbiamo avuto <b>un tempo di attesa del server di 140ms<\/b>, che in genere avviene per il <b>caricamento in HTTPS<\/b> e l\u2019attesa di <b>eventuali query al database<\/b>. In questo esempio, non viene eseguita alcuna operazione sul DB, \u00e8 una pagina <b>semi statica<\/b>, quindi anche per questo \u00e8 pi\u00f9 veloce.<\/p>\n<p>Tuttavia c\u2019\u00e8 da dire che questo risultato lo ottengo su una pagina che il mio browser ha gi\u00e0 in cache, cio\u00e8 ha gi\u00e0 memorizzato alcune risorse nella sua memoria e per questo viene caricata pi\u00f9 velocemente. Il risultato cambia se aggiorno la pagina con CTRL+F5 oppure <b>in incognito<\/b> o <b>eliminando la cache<\/b>. Ecco come:<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter wp-image-298 size-large\" src=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-12-Browser-Network-tab-senza-cache-1024x311.png\" alt=\"\" width=\"1024\" height=\"311\" srcset=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-12-Browser-Network-tab-senza-cache-1024x311.png 1024w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-12-Browser-Network-tab-senza-cache-300x91.png 300w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-12-Browser-Network-tab-senza-cache-768x234.png 768w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-12-Browser-Network-tab-senza-cache-600x183.png 600w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-12-Browser-Network-tab-senza-cache.png 1144w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>La pagina senza cache ci ha messo 400ms in pi\u00f9 a caricarsi<\/figcaption><\/figure>\n<p>Il caricamento completo <b>senza cache<\/b> ci ha messo <b>circa 400ms in pi\u00f9<\/b>, segno che <b>un nuovo utente<\/b> che visita il sito per la prima volta <b>ci mette mediamente il doppio del tempo<\/b> a caricare la pagina rispetto a un utente di ritorno che ha gi\u00e0 memorizzato le risorse del sito nel proprio browser. Ovviamente questa \u00e8 una conclusione un po\u2019 affrettata, ma \u00e8 giusto per comprendere il concetto.<\/p>\n<p>Vediamo ora un esempio di una pagina che esegue <b>diverse query al database<\/b> in background, alcune <b>molto pesanti<\/b>. Come cambiano i tempi di caricamento? Ecco l\u2019esempio:<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter wp-image-299 size-large\" src=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-13-Browser-Network-tab-1024x293.png\" alt=\"\" width=\"1024\" height=\"293\" srcset=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-13-Browser-Network-tab-1024x293.png 1024w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-13-Browser-Network-tab-300x86.png 300w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-13-Browser-Network-tab-768x220.png 768w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-13-Browser-Network-tab-600x172.png 600w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-13-Browser-Network-tab.png 1215w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Una pagina che esegue query e carica immagini ci mette molto pi\u00f9 tempo a caricarsi<\/figcaption><\/figure>\n<p>In questo caso pi\u00f9 realistico, vediamo che abbiamo <b>un tempo maggiore di attesa<\/b> (536ms), probabilmente dovuto all\u2019<a href=\"https:\/\/www.cloudflare.com\/it-it\/learning\/ssl\/what-happens-in-a-tls-handshake\/\" rel=\"nofollow noopener\">handshake SSL<\/a> e all\u2019esecuzione delle query.<\/p>\n<p>Soprattutto per\u00f2 abbiamo <b>un tempo di caricamento totale molto maggiore<\/b>: ben 2,69s, di cui 1,18 per il DOM.<\/p>\n<p>I dettagli sulle varie voci della scheda <b>Network<\/b> variano in base al browser, possiamo trovarli qui: <a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/network_monitor\/request_details\/#network-monitor-request-details-timings-tab\" rel=\"nofollow noopener\">Firefox<\/a>, <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/network\/reference?hl=it#timing-explanation\" rel=\"nofollow noopener\">Chrome<\/a>.<\/p>\n<p>Da queste informazioni ricaviamo alcune prime ipotesi di lavoro: probabilmente potremmo <b>migliorare il caricamento delle immagini<\/b>, ottimizzandone i formati e riducendone il peso, oltre ad <b>analizzare le query<\/b> al database per capire dove si trovano i colli di bottiglia.<\/p>\n<p>Se vogliamo ottenere <b>suggerimenti utili<\/b> per gli addetti ai lavori, possiamo utilizzare <b>Lighthouse<\/b> tramite <a href=\"https:\/\/pagespeed.web.dev\/\" rel=\"nofollow noopener\">PageSpeed Insights<\/a>, oppure <a href=\"https:\/\/www.webpagetest.org\/\" rel=\"nofollow noopener\">WebPageTest<\/a>. Questi strumenti ci permetteno di inserire un URL da analizzare e <b>ottenere un report<\/b> con diverse indicazioni. Vediamo un esempio:<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter wp-image-301 size-full\" src=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-14-Risultati-PageSpeed-Insights.png\" alt=\"\" width=\"978\" height=\"913\" srcset=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-14-Risultati-PageSpeed-Insights.png 978w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-14-Risultati-PageSpeed-Insights-300x280.png 300w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-14-Risultati-PageSpeed-Insights-768x717.png 768w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-14-Risultati-PageSpeed-Insights-268x250.png 268w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><figcaption>Il risultato di una scansione PageSpeed Insights<\/figcaption><\/figure>\n<p>Conoscendo la pagina web analizzata, anche perch\u00e9 ci ho gi\u00e0 lavorato molto per ottimizzarla, so bene che <b>nel concreto non \u00e8 facile soddisfare tutti i punti suggeriti dal report<\/b>. Per questo, il mio consiglio \u00e8 di fare il possibile senza dover risolvere ogni cosa, anche perch\u00e9 spesso \u00e8 difficile spiegare questa necessit\u00e0 al cliente per giustificare ulteriore budget. <b>Facciamo quello che possiamo<\/b>, la perfezione \u00e8 molto difficile da raggiungere e richiede grossi investimenti economici.<\/p>\n<p>In ogni caso vediamo meglio i singoli suggerimenti e <b>cosa fare<\/b> nel concreto:<\/p>\n<ul>\n<li>Dovremmo usare i formati <b>WebP o AVIF<\/b> per le immagini, che sono mediamente <b>pi\u00f9 leggeri del 50%<\/b> rispetto ai classici PNG o JPEG<\/li>\n<li>Dovremmo <b>ridurre le dimensioni delle immagini<\/b>, che potrebbero venire caricate a 1500px di larghezza ma visualizzate al massimo a 900px<\/li>\n<li>Se possibile, <b>riduciamo il codice Javascript<\/b> che non viene mai eseguito, o il <b>codice CSS<\/b> che non viene utilizzato, anche se ovviamente non \u00e8 cos\u00ec semplice come pu\u00f2 sembrare. Il mio suggerimento \u00e8 di verificare quantomeno se nella pagina stiamo <b>caricando Javascript o CSS esterni che in realt\u00e0 non servono<\/b>, ad esempio il plugin di uno slider che nella nostra pagina non \u00e8 presente<\/li>\n<li>Possiamo <b>codificare meglio le immagini esportandole in qualit\u00e0 inferiore<\/b> quando le salviamo, di base si pu\u00f2 stare su una qualit\u00e0 tra 70 e 85, ma dipende dal software e dall\u2019immagine. La percezione visiva in genere cambia di poco.<\/li>\n<li>Verifichiamo <b>qual \u00e8 l\u2019elemento pi\u00f9 grande visualizzato nella pagina<\/b>, ad esempio il banner o l\u2019immagine principale, per capire se possiamo ottimizzarlo<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Minification\" rel=\"nofollow noopener\">Minimizziamo<\/a> i file CSS e Javascript<\/li>\n<li>Verifichiamo il <b>caching delle risorse<\/b> della pagina, in genere possiamo usare l\u2019header <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Cache-Control\" rel=\"nofollow noopener\">Cache-Control<\/a> impostato a <i>\u201cno-cache, max-age=31536000, must-revalidate\u201d<\/i> per la maggior parte di immagini, CSS, Javascript, font e via dicendo<\/li>\n<\/ul>\n<p>Questi sono <b>i punti sui quali<\/b> personalmente ritengo sia <b>pi\u00f9 fattibile iniziare a lavorare<\/b>. Mi \u00e8 infatti capitato di doverlo fare in passato e tra analisi, studio delle soluzioni e lavoro effettivo tutto questo pu\u00f2 richiedere davvero <b>decine di ore<\/b>.<\/p>\n<p>Da questa analisi che abbiamo fatto possiamo trarre delle conclusioni ed <b>elaborare alcune proposte<\/b>.<\/p>\n<h3>Hardware e hosting<\/h3>\n<p>I problemi di lentezza potrebbero in realt\u00e0 derivare da <b>query molto pesanti sul database<\/b> che rallentano la risposta data dal server, problemi di hosting, <b>firewall<\/b>, rewrite rules o altro ancora.<\/p>\n<p>Ci tengo anche a fare una piccola precisazione in merito al <b>servizio di hosting e al relativo hardware<\/b>: spesso si pensa che sia necessario acquistare <b>server dedicati<\/b> con molta RAM e CPU performanti. <b>Per la maggior parte dei siti web medi<\/b>, al giorno d\u2019oggi \u00e8 pi\u00f9 che sufficiente una <b>VPS<\/b> con 4 vCPU e 8GB di RAM che possono tranquillamente reggere anche un centinaio di siti.<\/p>\n<p>Chiaramente se abbiamo un <b>ecommerce con migliaia di visite<\/b> quotidiane o un applicativo che deve svolgere <b>pesanti operazioni<\/b> (query, conversione di immagini massive, ecc.) pu\u00f2 avere pi\u00f9 senso acquistare un <b>server dedicato<\/b> con almeno 8 core e 16 GB di RAM.<\/p>\n<p>La scelta dell\u2019hosting pu\u00f2 <b>influire molto<\/b> sulla velocit\u00e0 di caricamento delle pagine web.<\/p>\n<p>Un <b>fornitore<\/b> da valutare per chi sta cercando un <b>servizio di hosting<\/b> \u00e8 <a href=\"http:\/\/aklam.io\/AoOhjw\" rel=\"nofollow noopener\">Ionos<\/a>, che con la VPS include anche la licenza <b>Plesk<\/b> a prezzo conveniente, o in alternativa posso consigliare anche <a href=\"https:\/\/www.ovhcloud.com\/it\/\" rel=\"nofollow noopener\">OVH<\/a> e <a href=\"https:\/\/www.keliweb.it\/billing\/aff.php?aff=4173\" rel=\"nofollow noopener\">Keliweb<\/a>.<\/p>\n<h3>Come ottimizzare le immagini<\/h3>\n<p><strong>L<\/strong><strong>e pagine web <\/strong><strong><b>caricano molte risorse<\/b><\/strong>: stili CSS per la grafica, file Javascript per i plugin, file dei font per i caratteri, e appunto le <strong>immagini<\/strong>. Se usiamo <strong>immagini troppo pesanti<\/strong>, la pagina si caricher\u00e0 <strong>pi\u00f9 lentamente<\/strong>.<\/p>\n<p>Per questo motivo \u00e8 consigliato utilizzare pi\u00f9 formati e pi\u00f9 dimensioni per ogni immagine. In genere si usano <strong>i formati JPEG, PNG e WEBP<\/strong>. Le dimensioni possono essere inferiori ai <strong>1920px di larghezza<\/strong> (gli schermi Full HD sono 1920&#215;1080) e i <strong>1080px di altezza<\/strong>.<\/p>\n<p>Chiaramente, <strong>per un piccolo sito web \u00e8 meno importante<\/strong>. Se usiamo una sola immagine nel nostro articolo avremo pochi problemi di prestazioni.<\/p>\n<p>Scrivere per\u00f2 <strong>un articolo con una decina di immagini<\/strong> JPEG 1000&#215;1000, dove ognuna pesa 2MB, significher\u00e0 che l\u2019utente dovr\u00e0 scaricare oltre 20MB per caricare la pagina. Questo pu\u00f2 significare il raggiungimento di <strong>tempi di caricamento lunghi<\/strong>, anche di svariati secondi, soprattutto su reti internet pi\u00f9 lente.<\/p>\n<p>La <strong>soluzione pi\u00f9 semplice<\/strong>, alla portata di chiunque, \u00e8 di <b>convertire le immagini in una<\/b><strong><b> versione pi\u00f9 leggera<\/b><\/strong>. Un <strong>JPEG<\/strong> solitamente <strong>non ha bisogno della massima qualit\u00e0<\/strong>. Carichiamo una versione con <strong>qualit\u00e0 inferiore<\/strong>, cos\u00ec <strong>il peso sar\u00e0 molto minore<\/strong> ma <strong>la differenza visiva sar\u00e0 quasi impercettibile<\/strong>.<\/p>\n<p>Usando <strong>Photoshop<\/strong> possiamo salvare l\u2019immagine con <strong>qualit\u00e0 7<\/strong>. Con <strong>GIMP<\/strong> possiamo esportare le immagini in <strong>qualit\u00e0 <\/strong><strong>60<\/strong>. Controlliamo di aver ottenuto <strong>un buon compromesso tra peso e qualit\u00e0 visiva<\/strong> e carichiamo la nostra immagine nel sito.<\/p>\n<p>Da qualche tempo ormai si stanno diffondendo sempre di pi\u00f9 <b>nuovi formati di immagini<\/b>, WEBP e AVIF, che usano una compressione che permette di <b>ridurre di molto, anche del 50%, il peso di una immagine<\/b>. Questo diventa importante per rendere la pagina web pi\u00f9 veloce da caricare.<\/p>\n<p>Per quanto riguarda <strong>larghezza e altezza<\/strong>, un buon compromesso in genere \u00e8 <strong>tra i 600x600px e i 1000x1000px<\/strong>. Dipende anche dal tipo di contenuto: un prodotto potrebbe richiedere una immagine pi\u00f9 grande, anche per esigenze grafiche, mentre un <b>banner<\/b> a schermo intero o un hero probabilmente richieder\u00e0 una dimensione di circa <b>1920x600px<\/b>.<\/p>\n<p>Possiamo riuscire a <b>convertire<\/b> facilmente JPEG e PNG <b>in WEBP<\/b><b> e<\/b> <b>AVIF<\/b>, quest\u2019ultimo un po\u2019 meno diffuso, anche se sta prendendo piede un po\u2019 alla volta. I programmi pi\u00f9 usati in genere sono Photoshop e <a href=\"https:\/\/www.gimp.org\/\" rel=\"nofollow noopener\">GIMP<\/a>, quindi vediamo velocemente cosa possiamo fare con questi software.<\/p>\n<p><b>Adobe Photoshop<\/b> ha <a href=\"https:\/\/helpx.adobe.com\/photoshop\/kb\/support-webp-image-format.html\" rel=\"nofollow noopener\">una sua guida<\/a> dedicata alla conversione in <b>WebP<\/b>, se per\u00f2 usiamo una versione <b>precedente alla 23.2<\/b> possiamo installare un <a href=\"https:\/\/github.com\/webmproject\/WebPShop\" rel=\"nofollow noopener\">plugin disponibile su Github<\/a>. Anche per il formato <b>AVIF<\/b> possiamo trovare <a href=\"https:\/\/github.com\/0xC0000054\/avif-format\" rel=\"nofollow noopener\">un plugin per la conversione<\/a>, scaricandolo da Github.<\/p>\n<p><b>GIMP<\/b>, disponibile gratuitamente, a partire dalla versione 2.10 <a href=\"https:\/\/www.gimp.org\/release-notes\/gimp-2.10.html\" rel=\"nofollow noopener\">supporta nativamente il formato WebP<\/a>. In alternativa possiamo usare un <a href=\"https:\/\/github.com\/nathan-osman\/gimp-webp\" rel=\"nofollow noopener\">plugin per la conversione WebP<\/a>, disponibile su Github. Per quanto riguarda <b>AVIF<\/b>, questo formato \u00e8 <a href=\"https:\/\/linuxreviews.org\/GIMP_2.10.22_Is_Released_With_AVIF_Support_And_Improved_Support_For_Many_Other_File_Formats\" rel=\"nofollow noopener\">supportato da GIMP<\/a> a partire dalla versione 2.10.22.<\/p>\n<p><strong>CMS<\/strong> come <strong>WordPress<\/strong> spesso fanno queste operazioni di conversione in automatico. \u00c8 opportuno comunque verificarlo. \u00c8 possibile anche usare dei <b>plugin<\/b> per il proprio CMS per <b>ottimizzare le immagini <\/b><b>in modo automatico e programmatico<\/b>, come <a href=\"https:\/\/docs.litespeedtech.com\/lscache\/lscwp\/imageopt\/\" rel=\"nofollow noopener\">LiteSpeed Cache per WordPress<\/a>, oppure <a href=\"https:\/\/it.wordpress.org\/plugins\/ewww-image-optimizer\/\" rel=\"nofollow noopener\">EWWW Image Optimizer<\/a>.<\/p>\n<p>Una breve <b>digressione tecnica<\/b> per i pi\u00f9 curiosi (o nerd): in genere le conversioni di questo genere vengono effettuate tramite <b>librerie disponibili gratuitamente<\/b>, che in alcuni casi si possono anche <b>installare sul proprio PC<\/b> ed eseguire da riga di comando: <a href=\"https:\/\/developers.google.com\/speed\/webp\/download?hl=it\" rel=\"nofollow noopener\">libwebp<\/a> e <a href=\"https:\/\/github.com\/AOMediaCodec\/libavif\" rel=\"nofollow noopener\">libavif<\/a> per i nuovi formati citati, ma anche <a href=\"https:\/\/github.com\/winlibs\/libjpeg\" rel=\"nofollow noopener\">libjpeg<\/a> e <a href=\"http:\/\/www.libpng.org\/pub\/png\/libpng.html\" rel=\"nofollow noopener\">libpng<\/a> per i formati vecchi.<\/p>\n<p>Allo stesso modo si possono generalmente <b>installare anche sul proprio server<\/b> e poi programmare un cron per eseguire in modo schedulato la <b>conversione in massa di immagini<\/b>, ad esempio tramite <a href=\"https:\/\/imagemagick.org\/script\/command-line-tools.php\" rel=\"nofollow noopener\">ImageMagick<\/a>. Ecco un <a href=\"https:\/\/imagemagick.org\/script\/webp.php\" rel=\"nofollow noopener\">esempio di comando<\/a> per la conversione da PNG a WebP:<\/p>\n<pre class=\"language-bash\"><code>magick wizard.png -quality 50 -define webp:lossless=true wizard.webp<\/code><\/pre>\n<h3>Come ottimizzare i video e i file audio<\/h3>\n<p>Come le immagini, <strong>anche video e audio possono essere ottimizzati<\/strong>. Fermo restando quanto detto sulle librerie per la conversione di immagini, i file video e audio in genere utilizzano <a href=\"https:\/\/www.ffmpeg.org\/\" rel=\"nofollow noopener\">ffmpeg<\/a> come base, o altre librerie simili. Ecco un esempio da riga di comando:<\/p>\n<pre class=\"language-bash\"><code>$ ffmpeg -i input.mp4 output.avi<\/code><\/pre>\n<p>Questo \u00e8 un sistema molto utile e funzionale, ma poco pratico per i pi\u00f9. Ecco allora che entra in nostro aiuto un <b>ottimo software gratuito e open source<\/b>: <a href=\"https:\/\/handbrake.fr\/\" rel=\"nofollow noopener\">Handbrake<\/a>.<\/p>\n<p>Molto semplicemente, apriamo un video su Handbrake e selezioniamo un <b>preset di conversione<\/b>, ecco uno screenshot di esempio:<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter wp-image-302 size-full\" src=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-17-Handbrake.png\" alt=\"\" width=\"590\" height=\"394\" srcset=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-17-Handbrake.png 590w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-17-Handbrake-300x200.png 300w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-17-Handbrake-374x250.png 374w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><figcaption>Con Handbrake \u00e8 possibile scegliere un preset per la conversione<\/figcaption><\/figure>\n<p>Una volta terminata la conversione, otteniamo <b>un video molto pi\u00f9 leggero<\/b> dell\u2019originale ma con poca differenza visiva.<\/p>\n<p>Succede spesso infatti che chi si occupa di video editing ci fornisca un video con un <b>bitrate o un qualit\u00e0 eccessivi<\/b>, ad esempio un video in 4K con Bitrate di 20.000 Kbit, quando a noi \u00e8 sufficiente un video in Full HD (1080p) con bitrate di 8.000 Kbit.<\/p>\n<p>Ecco una <b>preimpostazione base<\/b> che posso suggerire:<\/p>\n<ul>\n<li>Preset Fast 1080p 30<\/li>\n<li>Formato MP4 oppure WebM<\/li>\n<li>Codificatore Video H.264<\/li>\n<\/ul>\n<p>La conversione potrebbe richiedere pi\u00f9 tempo a seconda del nostro hardware. Se abbiamo una <b>buona scheda video<\/b> possiamo <b>velocizzare il processo<\/b> usando una conversione che sfrutta i codec video, ad esempio <a href=\"https:\/\/handbrake.fr\/docs\/en\/latest\/technical\/video-vcn.html\" rel=\"nofollow noopener\">VCN<\/a><b> <\/b>per schede video <b>AMD<\/b>, o <a href=\"https:\/\/handbrake.fr\/docs\/en\/latest\/technical\/video-nvenc.html\" rel=\"nofollow noopener\">NVENC<\/a> per <b>Nvidia<\/b>, selezionando dai preset la relativa opzione, come H265 AMD VCE, in base alle scelte disponibili.<\/p>\n<p>Per quanto riguarda i <b>file audio<\/b>, pu\u00f2 capitare di dover <b>convertire da un formato ad un altro<\/b>, oppure di voler <b>ridurre il peso finale<\/b>, ad esempio per podcast molto lunghi. In questo caso possiamo usare <a href=\"https:\/\/github.com\/enzo1982\/freac\" rel=\"nofollow noopener\">Free audio converter<\/a>, e trasformare il nostro file in <b>MP3, OGG, AAC<\/b>, o altri formati. Il pi\u00f9 diffuso e usato generalmente \u00e8 l\u2019MP3.<\/p>\n<p>Ecco un esempio di impostazione del software:<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter wp-image-303 size-full\" src=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-18-Free-Audio-Converter.png\" alt=\"\" width=\"813\" height=\"596\" srcset=\"https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-18-Free-Audio-Converter.png 813w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-18-Free-Audio-Converter-300x220.png 300w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-18-Free-Audio-Converter-768x563.png 768w, https:\/\/blog.devlancer.it\/app\/uploads\/2024\/08\/Figura-18-Free-Audio-Converter-341x250.png 341w\" sizes=\"(max-width: 813px) 100vw, 813px\" \/><figcaption>Free audio converter pu\u00f2 essere usato per convertire file audio<\/figcaption><\/figure>\n<p>In alternativa, online possiamo trovare diversi strumenti per la conversione dei nostri file multimediali.<\/p>\n<h3>Servire i contenuti in modo \u201clazy\u201d<\/h3>\n<p>Il <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/Lazy_loading\" rel=\"nofollow noopener\">lazy loading<\/a> ci permette di dire al browser che un contenuto deve essere caricato \u201cin modo pigro\u201d, cio\u00e8 che <b>pu\u00f2 venire scaricato successivamente<\/b> perch\u00e9 \u00e8 di secondaria importanza.<\/p>\n<p>Qui dovremmo parlare in dettaglio di <b>come funziona la coda di rendering di un documento web<\/b>, ma per questo argomento rimando all\u2019utile guida di <b>MDN<\/b>: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/How_browsers_work\" rel=\"nofollow noopener\">Populating the page: how browsers work<\/a> che spiega pi\u00f9 in dettaglio ci\u00f2 che riguarda DNS, Handshake, Parsing, Rendering e via dicendo.<\/p>\n<p>Ci\u00f2 che ci serve sapere nella pratica, che migliora di molto i tempi di caricamento di una pagina ed \u00e8 relativamente semplice da realizzare, \u00e8 che <b>tutte le immagini che vengono visualizzate solo scrollando<\/b> <a href=\"https:\/\/dictionary.cambridge.org\/dictionary\/english\/below-the-fold\" rel=\"nofollow noopener\">below the fold<\/a>, cio\u00e8 sotto alla prima parte visibile della pagina, possono essere <b>caricate in modo lazy<\/b>. In realt\u00e0, se anche applicassimo questa strategia alle prime immagini visibili, non ci sarebbero particolari svantaggi, ma \u00e8 davvero utile soprattutto per le immagini successive.<\/p>\n<p>Per fare questo possiamo <b>aggiungere l\u2019attributo loading<\/b><b>=\u201dlazy\u201d alle nostre immagini<\/b> e agli iframe:<\/p>\n<pre class=\"language-markup\"><code>&lt;img loading=\"lazy\" width=\"1000\" height=\"1000\" alt=\"\" decoding=\"async\" src=\"\/immagine.webp\"&gt;<\/code><\/pre>\n<p>Tutti gli attributi usati sono importanti:<\/p>\n<ul>\n<li>Definire <b>loading lazy<\/b> significa che l\u2019immagine pu\u00f2 essere caricata dopo il resto del contenuto, questo aumenta la velocit\u00e0 di caricamento<\/li>\n<li>Indicare esplicitamente gli attributi <b>width e height<\/b> \u00e8 molto utile perch\u00e9 cos\u00ec il browser sa gi\u00e0 quanto spazio usare per renderizzare l\u2019immagine nella pagina, e anche questo aumenta la velocit\u00e0 di caricamento<\/li>\n<li>Il <b>decoding async<\/b> indica che l\u2019immagine pu\u00f2 essere decodificata dopo aver renderizzato il resto del contenuto, rendendo quindi il caricamento immediato pi\u00f9 veloce<\/li>\n<\/ul>\n<p>\u00c8 quindi raccomandato inserirli tutti quando possibile.<\/p>\n<p>Se usiamo <b>WordPress<\/b>, possiamo caricare una immagine tramite le <b>funzioni PHP del CMS<\/b> nel nostro tema in questo modo, secondo la documentazione di <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image\/\" rel=\"nofollow noopener\">wp_get_attachment_image<\/a>:<\/p>\n<pre class=\"language-php\"><code>&lt;?= wp_get_attachment_image($image['ID'], 'full', false, ['loading' =&gt; 'lazy', 'decoding' =&gt; 'async']); ?&gt;<\/code><\/pre>\n<p>Per quanto riguarda invece il <b>caricamento di Javascript, CSS e Font<\/b>, siano essi in locale o in remoto, \u00e8 consigliato usare <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preconnect\" rel=\"nofollow noopener\">preconnect<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/dns-prefetch\" rel=\"nofollow noopener\">dns-prefetch<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/prefetch\" rel=\"nofollow noopener\">prefetch<\/a> e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\" rel=\"nofollow noopener\">preload<\/a>, a seconda delle necessit\u00e0. Ecco un esempio di caso d\u2019uso reale:<\/p>\n<pre class=\"language-markup\"><code>&lt;link rel=\"preconnect\" href=\"https:\/\/www.googletagmanager.com\/\" crossorigin=\"anonymous\" \/&gt;\r\n&lt;link rel=\"dns-prefetch\" href=\"https:\/\/www.googletagmanager.com\/\" \/&gt;\r\n&lt;link rel=\"preconnect\" href=\"https:\/\/static.hotjar.com\/\" crossorigin=\"anonymous\" \/&gt;\r\n&lt;link rel=\"dns-prefetch\" href=\"https:\/\/static.hotjar.com\/\" \/&gt;\r\n&lt;link rel=\"preconnect\" href=\"https:\/\/snap.licdn.com\/\" crossorigin=\"anonymous\" \/&gt;\r\n&lt;link rel=\"dns-prefetch\" href=\"https:\/\/snap.licdn.com\/\" \/&gt;\r\n&lt;link rel=\"preconnect\" href=\"https:\/\/connect.facebook.net\/\" crossorigin=\"anonymous\" \/&gt;\r\n&lt;link rel=\"dns-prefetch\" href=\"https:\/\/connect.facebook.net\/\" \/&gt;\r\n&lt;link rel=\"preload\" href=\"\/js\/easyautocomplete\/easy-autocomplete.min.css\" as=\"style\" \/&gt;\r\n&lt;link rel=\"preload\" href=\"\/css\/stile-template.css\" as=\"style\" \/&gt;\r\n&lt;link rel=\"preload\" href=\"\/css\/style-print.css\" as=\"style\" \/&gt;\r\n&lt;link rel=\"preload\" href=\"\/js\/jquery.min.js\" as=\"script\"&gt;\r\n&lt;link href=\"\/js\/easyautocomplete\/easy-autocomplete.min.css\" media=\"screen\" rel=\"stylesheet\"&gt;\r\n&lt;link href=\"\/css\/stile-template.css\" title=\"Default\" media=\"screen\" rel=\"stylesheet\"&gt;\r\n&lt;link href=\"\/css\/style-print.css\" title=\"Default\" media=\"print\" rel=\"stylesheet\"&gt;\r\n&lt;script type=\"text\/javascript\" src=\"\/js\/jquery.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Per semplificare molto, queste indicazioni che forniamo al browser sono utili perch\u00e9 <b>aiutano a definire quali risorse vengono caricate nella pagina e in che modo<\/b>. Il browser potr\u00e0 cos\u00ec decidere quali risorse caricare prima perch\u00e9 sono pi\u00f9 importanti, <b>riducendo cos\u00ec il tempo di caricamento<\/b>.<\/p>\n<h2>Link utili<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-sviluppare-un-sito-web-accessibile\/#i-core-web-vitals-e-laccessibilita\" rel=\"noopener\">I Core Web Vitals e l\u2019accessibilit\u00e0<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/core-web-vitals?hl=it\" rel=\"nofollow noopener\">Comprendere Core Web Vitals e i risultati di ricerca di Google<\/a><\/li>\n<li><a href=\"https:\/\/yoast.com\/core-web-vitals\/\" rel=\"nofollow noopener\">YoastSEO: Learn about the three Core Web Vitals: LCP, FID &amp; CLS<\/a><\/li>\n<li>Cloudflare: <a href=\"https:\/\/www.cloudflare.com\/it-it\/learning\/ssl\/what-happens-in-a-tls-handshake\/\" rel=\"nofollow noopener\">Cosa succede in un handshake TLS?<\/a><\/li>\n<li><a href=\"https:\/\/firefox-source-docs.mozilla.org\/devtools-user\/network_monitor\/request_details\/#network-monitor-request-details-timings-tab\" rel=\"nofollow noopener\">Firefox timing tab<\/a>, <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/network\/reference?hl=it#timing-explanation\" rel=\"nofollow noopener\">Chrome timing tab<\/a><\/li>\n<li><a href=\"https:\/\/pagespeed.web.dev\/\" rel=\"nofollow noopener\">PageSpeed Insights<\/a> e <a href=\"https:\/\/www.webpagetest.org\/\" rel=\"nofollow noopener\">WebPageTest<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Minification\" rel=\"nofollow noopener\">Minification<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Cache-Control\" rel=\"nofollow noopener\">Cache-Control<\/a><\/li>\n<li>Servizi hosting: <a href=\"http:\/\/aklam.io\/AoOhjw\" rel=\"nofollow noopener\">Ionos<\/a>, <a href=\"https:\/\/www.ovhcloud.com\/it\/\" rel=\"nofollow noopener\">OVH<\/a>, <a href=\"https:\/\/www.keliweb.it\/billing\/aff.php?aff=4173\" rel=\"nofollow noopener\">Keliweb<\/a><\/li>\n<li><a href=\"https:\/\/www.gimp.org\/\" rel=\"nofollow noopener\">GIMP<\/a><\/li>\n<li>Adobe Photoshop: <a href=\"https:\/\/helpx.adobe.com\/photoshop\/kb\/support-webp-image-format.html\" rel=\"nofollow noopener\">Work with WebP files in Photoshop<\/a><\/li>\n<li>Github: <a href=\"https:\/\/github.com\/webmproject\/WebPShop\" rel=\"nofollow noopener\">WebP file format plug-in for Photoshop<\/a><\/li>\n<li>Github: <a href=\"https:\/\/github.com\/0xC0000054\/avif-format\" rel=\"nofollow noopener\">AVIF plugin for Photoshop<\/a><\/li>\n<li>GIMP: <a href=\"https:\/\/www.gimp.org\/release-notes\/gimp-2.10.html\" rel=\"nofollow noopener\">Supporto nativo a WebP dalla versione 2.10<\/a><\/li>\n<li>Linux Reviews: <a href=\"https:\/\/linuxreviews.org\/GIMP_2.10.22_Is_Released_With_AVIF_Support_And_Improved_Support_For_Many_Other_File_Formats\" rel=\"nofollow noopener\">Supporto AVIF su GIMP dalla versione 2.10.22<\/a><\/li>\n<li>Github: <a href=\"https:\/\/github.com\/nathan-osman\/gimp-webp\" rel=\"nofollow noopener\">GIMP WebP plugin<\/a><\/li>\n<li>Plugin WordPress: <a href=\"https:\/\/docs.litespeedtech.com\/lscache\/lscwp\/imageopt\/\" rel=\"nofollow noopener\">LiteSpeed Cache<\/a>, <a href=\"https:\/\/it.wordpress.org\/plugins\/ewww-image-optimizer\/\" rel=\"nofollow noopener\">EWWW Image Optimizer<\/a><\/li>\n<li>Librerie di conversione immagini: <a href=\"https:\/\/github.com\/winlibs\/libjpeg\" rel=\"nofollow noopener\">libjpeg<\/a>, <a href=\"http:\/\/www.libpng.org\/pub\/png\/libpng.html\" rel=\"nofollow noopener\">libpng<\/a>, <a href=\"https:\/\/developers.google.com\/speed\/webp\/download?hl=it\" rel=\"nofollow noopener\">libwebp<\/a>, <a href=\"https:\/\/github.com\/AOMediaCodec\/libavif\" rel=\"nofollow noopener\">libavif<\/a><\/li>\n<li><a href=\"https:\/\/imagemagick.org\/script\/command-line-tools.php\" rel=\"nofollow noopener\">ImageMagick<\/a> e relativo <a href=\"https:\/\/imagemagick.org\/script\/webp.php\" rel=\"nofollow noopener\">esempio di conversione<\/a><\/li>\n<li>Libreria di conversione video e audio: <a href=\"https:\/\/www.ffmpeg.org\/\" rel=\"nofollow noopener\">ffmpeg<\/a><\/li>\n<li><a href=\"https:\/\/handbrake.fr\/\" rel=\"nofollow noopener\">Handbrake<\/a><\/li>\n<li>Handbrake: Encoder <a href=\"https:\/\/handbrake.fr\/docs\/en\/latest\/technical\/video-vcn.html\" rel=\"nofollow noopener\">VCN<\/a> e <a href=\"https:\/\/handbrake.fr\/docs\/en\/latest\/technical\/video-nvenc.html\" rel=\"nofollow noopener\">NVENC<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/enzo1982\/freac\" rel=\"nofollow noopener\">Free audio converter<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/Lazy_loading\" rel=\"nofollow noopener\">Lazy loading<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/How_browsers_work\" rel=\"nofollow noopener\">Populating the page: how browsers work<\/a><\/li>\n<li>Cambridge Dictionary: <a href=\"https:\/\/dictionary.cambridge.org\/dictionary\/english\/below-the-fold\" rel=\"nofollow noopener\">Below the fold<\/a><\/li>\n<li>WordPress: <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image\/\" rel=\"nofollow noopener\">wp_get_attachment_image<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preconnect\" rel=\"nofollow noopener\">preconnect<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/dns-prefetch\" rel=\"nofollow noopener\">dns-prefetch<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/prefetch\" rel=\"nofollow noopener\">prefetch<\/a> e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Attributes\/rel\/preload\" rel=\"nofollow noopener\">preload<\/a><\/li>\n<\/ul>\n<h2>Leggi anche<\/h2>\n<ul>\n<li><a href=\"https:\/\/blog.devlancer.it\/seo-on-page\/\">SEO On page: Che cos&#8217;\u00e8 e come farla bene<\/a><\/li>\n<li><a href=\"https:\/\/blog.devlancer.it\/seo-come-indicizzare-deindicizzare-contenuti\/\">Come indicizzare e deindicizzare i contenuti tramite robots, noindex e 404<\/a><\/li>\n<li><a href=\"https:\/\/blog.devlancer.it\/come-migliorare-la-seo-del-proprio-sito-web\/\">Come migliorare la SEO del proprio sito web?<\/a><\/li>\n<li><a href=\"https:\/\/blog.devlancer.it\/seo-sitemap\/\">Le Sitemap: cosa sono e come crearle per la SEO<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Con l\u2019aggiornamento del Page Experience Update di Google, \u00e8 diventato sempre pi\u00f9 importante avere delle buone prestazioni per il proprio sito web: caricamenti di pagina in tempi brevi, stabilit\u00e0 visiva dei contenuti, uso di risorse e immagini ottimizzate, accessibilit\u00e0 e altro ancora. Segnali Web Essenziali e Prestazioni della pagina web Tutto questo richiede una serie [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":413,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10,9],"tags":[11],"class_list":["post-296","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-approfondimenti","category-guide","tag-seo"],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/posts\/296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/comments?post=296"}],"version-history":[{"count":7,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/posts\/296\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/posts\/296\/revisions\/318"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/media\/413"}],"wp:attachment":[{"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/media?parent=296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/categories?post=296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/tags?post=296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}