{"id":1328,"date":"2017-12-29T23:33:53","date_gmt":"2017-12-29T23:33:53","guid":{"rendered":"http:\/\/marcosalvo.it\/?p=1328"},"modified":"2021-12-30T12:11:05","modified_gmt":"2021-12-30T12:11:05","slug":"velocita-sito","status":"publish","type":"post","link":"https:\/\/marcosalvo.it\/velocita-sito","title":{"rendered":"Come rendere il tuo sito pi\u00f9 veloce &#8211; Tutorial"},"content":{"rendered":"<p>Prima che tu legga una sola altra parola, ho necessit\u00e0 di mostrarti il risultato di ci\u00f2 che sto per regalarti.<\/p>\n<p>Questi due video che vedi qui sotto sono il prima ed il dopo dell&#8217;ottimizzazione del blog <strong>marcosalvo.it <\/strong><\/p>\n<p><em>Ottimizzazione <strong>NON<\/strong> eseguita con il semplice ausilio di comuni plugin come W3 Total cache o simili, infatti c&#8217;\u00e8 molto ma molto di pi\u00f9 \ud83d\ude42<\/em><\/p>\n<p><strong>Prima dell&#8217;ottimizzazione delle performance<\/strong><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.webpagetest.org\/video\/view.php?id=171222_1a192bc03a4477e333350bc77be60b143be17fa2&amp;embed=1&amp;width=512&amp;height=448\" width=\"100%\" height=\"500\" data-mce-fragment=\"1\"><\/iframe><\/p>\n<p><strong>Dopo l&#8217;ottimizzazione delle performance<\/strong><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.webpagetest.org\/video\/view.php?id=171223_bbcb833f9aa59f2c7a542e048037c54c3de4b4e4&amp;embed=1&amp;width=512&amp;height=448\" width=\"100%\" height=\"500\" data-mce-fragment=\"1\">&amp;lt;span data-mce-type=&#8221;bookmark&#8221; style=&#8221;display: inline-block; width: 0px; overflow: hidden; line-height: 0;&#8221; class=&#8221;mce_SELRES_start&#8221;&amp;gt;\ufeff&amp;lt;\/span&amp;gt;&amp;lt;span data-mce-type=&#8221;bookmark&#8221; style=&#8221;display: inline-block; width: 0px; overflow: hidden; line-height: 0;&#8221; class=&#8221;mce_SELRES_start&#8221;&amp;gt;\ufeff&amp;lt;\/span&amp;gt;<\/iframe><\/p>\n<p>Sei ancora incredulo?<\/p>\n<p>Preparati perch\u00e9\u00a0oggi per te \u00e8 un gran giorno, <strong>stai per leggere uno dei casi studio pi\u00f9 belli che tu abbia mai visto su un blog di marketing e SEO<\/strong> e che ho il piacere di ospitare grazie allo splendido lavoro svolto da <strong>Salvatore Fresta<\/strong>, fondatore di <a href=\"https:\/\/www.speedywordpress.it\" target=\"_blank\" rel=\"noopener noreferrer\">SpeedyWordress.it<\/a> e COO\u00a0di<strong>\u00a0<\/strong><a href=\"https:\/\/www.squeezemind.it\/\" target=\"_blank\" rel=\"noopener noreferrer\">SqueezeMind<\/a>, un amico con cui ho il piacere di collaborare.<\/p>\n<p>In questo caso studio, ti far\u00f2 vedere come Salvatore \u00e8 riuscito ad <strong>ottenere un tempo di caricamento prossimo al secondo<\/strong> per il mio sito ed\u00a0 in particolare ti far\u00f2 vedere<\/p>\n<ol>\n<li>quali <strong>tool<\/strong> sono stati utilizzati per effettuare l&#8217;<strong>analisi delle performance<\/strong><\/li>\n<li>come sono stati interpretati i dati e quali sono stati i passi che hanno consentito al mio sito di <strong>risparmiare ben 17 secondi di tempo<\/strong>!<\/li>\n<\/ol>\n<p>ma prima di iniziare \u00e8 bene che tu sappia quanto segue:<\/p>\n<p>Era l&#8217;ormai lontano 2010 quando Google <a href=\"https:\/\/webmasters.googleblog.com\/2010\/04\/using-site-speed-in-web-search-ranking.html\" target=\"_blank\" rel=\"noopener\">in un post<\/a> su uno dei suoi blog segnala di aver introdotto un <strong>nuovo fattore di ranking<\/strong> all&#8217;interno dei suoi algoritmi.<\/p>\n<p>Inutile descrivere lo scetticismo riguardo ad ogni singolo fattore di ranking, ma questo aveva qualcosa in pi\u00f9 rispetto agli altri.<\/p>\n<p>In quel periodo il loro focus era sulla velocit\u00e0, infatti \u00e8 li che soprono con un metodo scientifico, che <strong>i\u00a0siti pi\u00f9 veloci, sembravano essere quelli che venivano visitati con pi\u00f9 entusiasmo dagli internauti<\/strong>.<\/p>\n<p>Pensa che Google, in uno dei suoi, ha provato a mettere <strong>30 risultati in SERP invece che 10<\/strong> con un conseguente <strong>aumento di caricamento della pagina<\/strong> di 900 milli secondi.<\/p>\n<p>Sai cosa \u00e8 successo? un calo del 25% nelle ricerche e quindi anche nelle entrate.<\/p>\n<p>Gi\u00e0 perch\u00e9 se il sito rallenta anche le vendite ne risentono.<\/p>\n<p>Guarda questo screen molto esaustivo dove puoi evincere quale sia <strong>il rapporto di miglioramento tra velocit\u00e0 del sito e vendite<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1329\" src=\"\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina.png\" alt=\"\" width=\"1376\" height=\"726\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina.png 1376w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina-300x158.png 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina-768x405.png 768w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina-1024x540.png 1024w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina-796x420.png 796w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina-640x338.png 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/diminuisci-tempi-di-caricamento-pagina-681x359.png 681w\" sizes=\"(max-width: 1376px) 100vw, 1376px\" \/><\/p>\n<p>Beh non ti\u00a0 sar\u00e0 difficile crederlo vero?<\/p>\n<p>Eppure ancora oggi, ti assicuro, che in molti non danno il corretto peso alla <strong>velocit\u00e0 del proprio sito<\/strong> e questo, in certi casi, \u00e8 un errore gravissimo.<\/p>\n<p>Dal 2010 ad oggi sono passati 8 anni ed il web ha fatto il suo corso, evolvendosi in una maniera spaventosa, ma dove siamo arrivati?<\/p>\n<p>Che impatto ha avuto questo fattore di ranking nelle ricerche?<\/p>\n<p>Ma sopratutto come faccio a far diventare il mio sito veloce?<\/p>\n<p>Ok,\u00a0Oggi, come consuetudine vuole \ud83d\ude42 <strong>ho una grandissima sorpresa per te<\/strong>! una super chicca.<\/p>\n<p><span style=\"color: #99cc00;\"><strong>La buona notizia:<\/strong><\/span><\/p>\n<p><em>Affronteremo questo argomento con un esperto di sicurezza informatica e di performance. <\/em><\/p>\n<p><span style=\"color: #ff0000;\"><strong>La brutta notizia:<\/strong><\/span><\/p>\n<p><em>Probabilmente non riuscirai a leggere questo post tutto dun fiato, come ti capita su altri blog, anzi, qui ti mancher\u00e0 il respiro ad ogni singola parola che leggerai.\u00a0\u00a0<\/em><\/p>\n<p>Ma a questo ci sei abituato vero? heheheheh<\/p>\n<p>Adesso per\u00f2 \u00e8 arrivato il momento di donarti ci\u00f2 che meriti.<\/p>\n<p>Procediamo? Via!<\/p>\n<p>E&#8217; opportuno precisare che per ottenere questo tipo di risultato Salvatore si \u00e8 focalizzato sulla branca delle performance che si occupa dell&#8217;<strong>ottimizzazione del percorso di rendering critico<\/strong>, ovvero quella sequenza di passi ed elaborazioni necessarie per poter <strong>consentire al browser di visualizzare il contenuto di una pagina web<\/strong>.<\/p>\n<p>MARCO:<br \/>\nPuoi spiegarci in parole semplici? \ud83d\ude42<\/p>\n<p>SALVATORE:<br \/>\nCerto Marco, cercher\u00f2 di essere il pi\u00f9 esaustivo possibile. \ud83d\ude42<br \/>\nDevi sapere che una volta fatta la richiesta di una URL, il browser ne riceve il suo contenuto <strong>HTML<\/strong> e ne inizia la lettura.<\/p>\n<p>Durante questa lettura \u00e8 possibile che incontri risorse critiche come <strong>CSS<\/strong> e\u00a0<strong>Javascript<\/strong> che, se non ottimizzati ad hoc, incidono molto negativamente sul<strong> tempo di visualizzazione della pagina<\/strong>.<\/p>\n<p>Si tratta spesso anche di decine di secondi.<\/p>\n<p>Ottimizzare il percorso di rendering critico significa <strong>ottimizzare il lavoro del browser<\/strong> fornendogli\u00a0inizialmente le sole risorse veramente necessarie per visualizzare il contenuto della pagina e rimandare a posteriori il caricamento di quelle che non lo sono.<\/p>\n<p>Purtroppo non \u00e8 possibile effettuare con parsimonia questo tipo di ottimizzazione con i <strong>plugin tradizionali<\/strong>\u00a0come <em>W3 Total Cache<\/em>, <em>WP-Rocket<\/em>, ecc&#8230;<\/p>\n<p>Questi plugin sono stati progettati per applicare i suggerimenti dei tool pi\u00f9 blasonati, come <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=it\" target=\"_blank\" rel=\"noopener\">PageSpeed Insight<\/a> e <a href=\"http:\/\/yslow.org\/\" target=\"_blank\" rel=\"noopener\">YSlow<\/a><\/p>\n<ul>\n<li><em>ottimizzazione di immagini<\/em><\/li>\n<li><em>compressione della pagina<\/em><\/li>\n<li><em> minificazione di CSS e Javascript<\/em><\/li>\n<\/ul>\n<p>Tutti consigli &#8211;\u00a0<em>non sempre al passo con i tempi<\/em>\u00a0&#8211; che mirano a rendere il sito pi\u00f9 leggero e quindi a <strong>velocizzare il tempo di download<\/strong>.<\/p>\n<p><em>Ma ovviamente, soluzioni del genere non possono essere adottate con successo in ogni occasione, perch\u00e8 come vedrai di seguito serve molto ma molto di pi\u00f9 per eseguire un lavoro professionale.<\/em><\/p>\n<p>\u00c8 una naturale conseguenza!<\/p>\n<p><strong> Otterrai un tempo di caricamento pi\u00f9 veloce<\/strong> se riesci a scaricare prima le risorse ma il grado di performance che otterrai\u00a0 \u00e8 tuttavia <strong>molto limitato <\/strong>e talvolta deludente.<\/p>\n<p>In un presente dove la maggior parte della navigazione avviene da <strong>dispositivi mobile<\/strong>, che dispongono di risorse nettamente inferiori rispetto ai PC tradizionali, se il lavoro del browser non viene snellito ti ritroverai ad avere un sito lentissimo anche se il navigatore possiede una connessione velocissima.<\/p>\n<p>Voglio dividere l&#8217;ottimizzazione che ho fatto, in 3 step fondamentali:<\/p>\n<ol>\n<li>Analisi<\/li>\n<li>Ottimizzazione risorse critiche<\/li>\n<li>Ottimizzazione del TTFB \/ browser caching<\/li>\n<\/ol>\n<p>Adesso per ognuna di queste ti faccio una dettagliatissima descrizione che mi hai chiesto per i tuoi utenti cos\u00ec ti lascio contento.<\/p>\n<p>Marco:<br \/>\nCos\u00ec mi piaci! \ud83d\ude42<\/p>\n<p>Salvatore:<br \/>\nProseguiamo:<\/p>\n<h1><span style=\"font-family: 'Open Sans', arial, sans-serif; font-size: 27px; letter-spacing: -0.02em;\">Ottimizzazione Parte 1:<br \/>\n<strong>Analisi delle performance<\/strong><\/span><\/h1>\n<p>La prima cosa che faccio quando inizio la fase di analisi \u00e8 aprire la <a href=\"https:\/\/developer.chrome.com\/devtools\" target=\"_blank\" rel=\"noopener\">DevTool di Google Chrome<\/a>, cliccare sul tab <em>Network<\/em>, collegarmi sul sito che intendo analizzare e prestare attenzione al valore di <strong><em>DOMContentLoaded<\/em><\/strong> in blu in basso.<\/p>\n<p>Questa metrica mi fa capire se il browser sta effettuando delle elaborazioni che richiedono un tempo &#8220;anormale&#8221; per visualizzare il contenuto della pagina.<\/p>\n<p>Diciamo che <strong>un tempo di DOMContentLoaded superiore al secondo e mezzo \u00e8 quasi sempre un sintomo di sovraccarico.<br \/>\n<\/strong>(Nel caso del tuo sito, prima dell&#8217;ottimizzazione,<em>\u00a0era superiore ai 4 secondi.)<\/em><\/p>\n<p>In contemporanea faccio partire un&#8217;analisi con <a href=\"https:\/\/www.webpagetest.org\" target=\"_blank\" rel=\"noopener noreferrer\">webpagetest.org<\/a> e la mia attenzione si concentra sulle metriche evidenziate nella seguente immagine:<\/p>\n<p><a href=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-prima.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1405 size-full\" title=\"metriche tempi di caricamento di un sito web\" src=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-prima.png\" alt=\"\" width=\"981\" height=\"208\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-prima.png 981w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-prima-300x64.png 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-prima-768x163.png 768w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-prima-640x136.png 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-prima-681x144.png 681w\" sizes=\"(max-width: 981px) 100vw, 981px\" \/><\/a><\/p>\n<p>Spiego meglio:<\/p>\n<h2><strong>Load time<\/strong>:<\/h2>\n<p>E&#8217; il <strong>tempo totale di caricamento di tutte le risorse presenti sulla pagina<\/strong>, a prescindere dal fatto che incidano o meno con componenti visive; sostanzialmente coincide con il <strong>tempo di fine caricamento<\/strong> della &#8220;rotellina&#8221; del browser o della &#8220;progress bar&#8221;.<\/p>\n<h2><strong>First Byte<\/strong>:<\/h2>\n<p>detto anche <strong>Time To First Byte<\/strong> (<strong>TTFB<\/strong>) indica il <strong>tempo trascorso dalla richiesta HTTP del browser alla ricezione del primo byte della pagina<\/strong>; \u00e8 un valore utilizzato per misurare la reattivit\u00e0 di un web server e l&#8217;impatto dell&#8217;elaborazione di un sito web dinamico.<\/p>\n<h2><strong>Start render<\/strong>:<\/h2>\n<p>\u00e8 il tempo in cui il browser finalmente inizia a <strong>stampare qualcosa di visibile<\/strong>; prima di questo momento la pagina \u00e8 totalmente vuota.<\/p>\n<h2><strong>RUM First Paint<\/strong>:<\/h2>\n<p>E&#8217; il tempo in cui il browser inizia il processo di visualizzazione dei dati, siano anche essi invisibili.<\/p>\n<h2><strong>Visually Complete<\/strong>:<\/h2>\n<p>Il tempo necessario per visualizzare <strong>tutti i contenuti visibili<\/strong> della pagina.<\/p>\n<p>Vuoi sapere cosa ho trovato sul tuo sito? \ud83d\ude42<\/p>\n<ol>\n<li><strong>Un alto valore di First Byte<\/strong>, che normalmente dovrebbe essere compreso da 100 e 300 millisecondi, quando invece qui \u00e8 di addirittura 1 secondo;<\/li>\n<li><strong>Un tempo di load time molto elevato<\/strong>, il che mi fa pensare subito che vengono caricate risorse che fanno capo anche a siti esterni e non necessarie immediatamente all&#8217;utente<br \/>\n<em>(es. widget Facebook, Twitter, Instagram, ecc..)\u00a0<\/em><\/li>\n<li><strong>Un tempo di inizio rendering sproporzionato<\/strong> che incide negativamente sulla UX e <strong>sulla percezione di velocit\u00e0<\/strong> del sito stesso<\/li>\n<\/ol>\n<p>Da mobile la situazione peggiora!<\/p>\n<p>Per fare un&#8217;analisi utilizzo il <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noopener\">tool Lighthouse<\/a>, ormai integrato in <strong>DevTool<\/strong> cliccando sul tab <strong>Audit<\/strong>.<\/p>\n<p><a href=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1406 size-full\" title=\"Audit DEV TOOL\" src=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima.jpg\" alt=\"\" width=\"729\" height=\"418\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima.jpg 729w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-300x172.jpg 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-640x367.jpg 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-681x390.jpg 681w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-crc.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1407 size-full\" title=\"diagnostica audit performance sito web\" src=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-crc.jpg\" alt=\"\" width=\"729\" height=\"418\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-crc.jpg 729w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-crc-300x172.jpg 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-crc-640x367.jpg 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-prima-crc-681x390.jpg 681w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/a><\/p>\n<p>In particolare noto una <strong>Critical Request Chains di 17 elementi<\/strong>.<\/p>\n<p>Ovvero <strong>le famose risorse critiche,<\/strong> senza le cui elaborazioni il browser non visualizzerebbe nulla.<\/p>\n<p>Noto che alcune di queste sono minifcate con il plugin <a href=\"https:\/\/it.wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" rel=\"noopener\">W3 Total Cache<\/a>, il quale applica anche altre ottimizzazioni come il <strong>lazy loading delle immagini<\/strong>.<\/p>\n<p>Ci\u00f2 a testimonianza che nonostante il plugin di cache, <strong>il percorso di rendering rimane sporco<\/strong> in quanto sono sicuro del fatto che il browser non necessita di 17 risorse per caricare un sito dall&#8217;aspetto e funzionalit\u00e0 come quelle del tuo sito.<\/p>\n<p>Quindi?<\/p>\n<p>Disattivo il plugin e la Critical Request Chains aumenta a 34 elementi.<\/p>\n<p>Dal report di webpagetest.org noto inoltre come da <strong>desktop<\/strong> sono ben 69 le risorse critiche.<\/p>\n<p>\u00c8 possibile notarlo scendendo su\u00a0<em>Request Details<\/em>, cos\u00ec da\u00a0 osservare <strong>tutte le risorse contrassegnate dal colore verde<\/strong>, le risorse caricate prima dell&#8217;inizio del processo di rendering.<\/p>\n<p>Una volta individuate le risorse critiche, inizio a fare una cernita per capire quali sono quelle vere e quali no e da qui inizia la seconda parte<\/p>\n<h1>Ottimizzazione Parte 2: <strong>Ottimizzazione delle risorse critiche<\/strong><\/h1>\n<p>Inizio con i CSS.<\/p>\n<p>Posso seguire diverse strade:<\/p>\n<ol>\n<li>Estrapolare il solo CSS usato dalla pagina, se piccolo caricarlo inline affinch\u00e9 sia gi\u00e0 subito disponibile con il download della pagina stessa, eliminando tutti i restanti CSS.<br \/>\n<em>Soluzione molto efficiente ma che poco si presta ad aggiornamenti del sito;<\/em><\/li>\n<li>Estrapolare il solo CSS necessario per caricare i contenuti immediatamente visibili (<strong>above the fold<\/strong>) e caricare i restanti CSS in un tempo successivo;<br \/>\nAnche questa \u00e8 una soluzione efficiente ma avrei dovuto seguire e &#8220;scrivere&#8221; una politica diversa per quelle pagine che hanno strutture grafiche differenti, e non \u00e8 il caso in siti che ne hanno parecchie;<\/li>\n<li>Individuare tra i CSS presenti quelli che contengono le regole di almeno il 95% del sito e caricare i restanti successivamente; <strong>questa \u00e8 la tecnica che ho deciso di applicare in questo contesto.<\/strong><\/li>\n<\/ol>\n<p>BINGO!<\/p>\n<p>Il CSS in questo caso \u00e8 quello nativo del <a href=\"https:\/\/themeforest.net\/item\/newsmag-news-magazine-newspaper\/9512331\" target=\"_blank\" rel=\"noopener\">tema WordPress <em>Newsmag<\/em><\/a>.<\/p>\n<p>Adesso viene il bello \ud83d\ude42<\/p>\n<p>Grazie ad un mio tool, di cui presto rilascer\u00f2 il download su <a href=\"https:\/\/www.speedywordpress.it\/\" target=\"_blank\" rel=\"noopener\">SpeedyWordpress.it<\/a>, ho modificato in runtime la pagina elaborata da <a href=\"https:\/\/marcosalvo.it\/wordpress\">WordPress<\/a> affinch\u00e9 questo CSS sia inserito in alto sul codice HTML in modo tale che il browser lo scarichi subito\u00a0 e grazie ad una <strong>tecnica di performance<\/strong> ne ho forzato il download e l&#8217;elaborazione dei restanti CSS <strong>solo dopo<\/strong> che il browser ha finito di scaricare tutte le altre risorse della pagina (<strong>evento\u00a0load<\/strong>).<\/p>\n<p>Subito dopo ho fatto un test ed ho noto subito un primo miglioramento dovuto al fatto che il browser non si trovava pi\u00f9 a scaricare CSS inutili cos\u00ec da elaborare il prima possibile solo il CSS necessario.<\/p>\n<p><strong>Primo obiettivo raggiunto.<\/strong><\/p>\n<p>Adesso non rimaneva che passare al Javascript, la risorsa critica pi\u00f9 complessa da trattare.<\/p>\n<p>Come prima cosa ho fatto uno stamp dell&#8217;ordine in cui i vari script si trovano all&#8217;interno della pagina che stavo ottimizzando, per identificarne sia gli script esterni, visibili gi\u00e0 sul report:<\/p>\n<ol>\n<li>Inline script.<\/li>\n<li>Inline script.<\/li>\n<li>https:\/\/marcosalvo.it\/wp-includes\/js\/jquery\/jquery.js?ver=1.12.4<\/li>\n<li>https:\/\/marcosalvo.it\/wp-includes\/js\/jquery\/jquery-migrate.min.js?ver=1.4.1<\/li>\n<li>https:\/\/platform.twitter.com\/widgets.js?ver=4.9.1<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/ig-shortcodes\/inc\/js\/shortcodes.js?ver=4.9.1<\/li>\n<li>Inline script. ID: facebooxpixel<\/li>\n<li>Inline script.<\/li>\n<li>Inline script. ID: googleanalytics<\/li>\n<li>\/\/www.marcosalvo.it\/cookiechoices.js<\/li>\n<li>Inline script. ID: cookiechoises<\/li>\n<li>Inline script. ID: facebookwidget<\/li>\n<li>Inline script.<\/li>\n<li>\/\/widget.spreaker.com\/widgets.js<\/li>\n<li>Inline script.<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/contact-form-7\/includes\/js\/scripts.js?ver=4.9.2<\/li>\n<li>Inline script.<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/custom-twitter-feeds\/js\/ctf-scripts.js?ver=1.2.7<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/table-of-contents-plus\/front.min.js?ver=1509<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/widget-styler\/\/assets\/front.js?ver=4.9.1<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/themes\/Newsmag\/js\/tagdiv_theme.js?ver=3.1<\/li>\n<li>Inline script.<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/thrive-visual-editor\/thrive-dashboard\/js\/dist\/frontend.min.js?ver=2.0.17<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/strong-testimonials\/public\/js\/lib\/actual\/jquery.actual.min.js?ver=1.0.16<\/li>\n<li>https:\/\/marcosalvo.it\/wp-includes\/js\/imagesloaded.min.js?ver=3.2.0<\/li>\n<li>https:\/\/marcosalvo.it\/wp-includes\/js\/underscore.min.js?ver=1.8.3<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/strong-testimonials\/public\/js\/lib\/verge\/verge.min.js?ver=1.10.2<\/li>\n<li>Inline script.<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/strong-testimonials\/public\/js\/lib\/strongslider\/jquery.strongslider.min.js?ver=2.28.4<\/li>\n<li>Inline script.<\/li>\n<li>https:\/\/marcosalvo.it\/wp-content\/plugins\/strong-testimonials\/public\/js\/controller.min.js?ver=2.28.4<\/li>\n<li>https:\/\/marcosalvo.it\/wp-includes\/js\/wp-embed.min.js?ver=4.9.1<\/li>\n<li>Inline script.<\/li>\n<\/ol>\n<p>Nella home page vi erano 33 script e fortunatamente in nessuno di questi era presente la direttiva\u00a0<strong>document.write<\/strong>.<\/p>\n<p>Con il tool, in pratica, ho spostato tutti i file Javascript in fondo al codice HTML, prima della chiusura del tag &lt;body&gt;.<\/p>\n<p>In questo modo ho evitato che il blocco dello script del normale parsing HTML del browser.<\/p>\n<p>Ciononostante non ho risolto completamente il problema in quanto il codice deve comunque essere eseguito e questo comportava del tempo.<\/p>\n<p>Come fare per risolvere?<\/p>\n<p>Ho caricato tutti gli script Javascript all&#8217;evento load del browser.<\/p>\n<p>Se funziona e non vi sono effetti sulle pagine del sito, sta a significare che nessun codice Javascript \u00e8 necessario prima del rendering della pagina e quindi pu\u00f2 essere caricato a posteriori, con un <strong>grande risparmio di tempo<\/strong>.<\/p>\n<p>Noto per\u00f2 alcuni errori Javascript nella console di Google Chrome ed individuo quelli che purtroppo sono dei codici che il tema WordPress richiede vengano eseguiti obbligatoriamente prima dell&#8217;evento load e sono 3 script:<\/p>\n<p>jQuery, uno script inline e\u00a0tagdiv_theme.js (per quest&#8217;ultimo posso anche applicare l&#8217;attributo <strong>defer<\/strong>).<\/p>\n<p>Beh meglio di niente mi sono detto, in fondo, su 33 script sono solo 3 quelli che non posso sovra-ottimizzare senza andare a modificare il codice, va bene cos\u00ec.<\/p>\n<p><em>In casi in cui si richiede una consulenza estrema, \u00e8 normale che lo sviluppatore vada a rivedere alcune strutture. <\/em><\/p>\n<p><em><strong>Non \u00e8 questo il caso.<\/strong><\/em><\/p>\n<p>Torniamo a noi \ud83d\ude09<\/p>\n<p>Subito dopo ho fatto un test notando che il tempo di rendering della pagina \u00e8 diminuito notevolmente, siamo intorno ai 2.3 secondi.<\/p>\n<p>Il tempo di loading completo \u00e8 rimasto abbastanza alto e noto che il problema risiede nel widget di Facebook che scarica una miriade di immagini.<\/p>\n<p>Questo widget \u00e8 nella sidebar e non \u00e8 visibile in prima impressione, decido dunque di caricarlo solo quando l&#8217;utente inizia a scrollare la pagina.<\/p>\n<p><strong><span style=\"color: #99cc00;\">BAM!<\/span><\/strong> Il tempo di caricamento generale scende repentinamente.<\/p>\n<p><strong>Secondo obiettivo raggiunto!<\/strong><\/p>\n<p>Ma non \u00e8 tutto \ud83d\ude42<\/p>\n<p>Infatti \u00e8 proprio a questo punto\u00a0 che il browser scarica tutte le immagini della pagina, comprese quelle che non sono immediatamente visibili.<\/p>\n<p>Tempo di elaborazione perso e <strong>download di dati inutili<\/strong> se l&#8217;utente decide di non scrollare la pagina e visualizzarle.<\/p>\n<p><strong>Applico dunque la tecnica del lazy loading<\/strong>, facendo scaricare al browser le immagini se e solo se l&#8217;utente si trova nelle loro vicinanze.<\/p>\n<p><strong>A questo punto il tempo di caricamento \u00e8 sceso a 1.8 secondi.<\/strong><\/p>\n<p>Con le ottimizzazioni cui sopra la Critical Request Chain per il mobile \u00e8 passata da 34 risorse a 3 e per il desktop da 69 a 8!<\/p>\n<p>WOOOOOW! \ud83d\ude42<\/p>\n<p><a href=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1410 size-full\" src=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo.jpg\" alt=\"\" width=\"729\" height=\"418\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo.jpg 729w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-300x172.jpg 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-640x367.jpg 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-681x390.jpg 681w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-crc.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1409 size-full\" src=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-crc.jpg\" alt=\"\" width=\"729\" height=\"418\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-crc.jpg 729w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-crc-300x172.jpg 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-crc-640x367.jpg 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/lighthouse-dopo-crc-681x390.jpg 681w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/risorse-critiche.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1411 size-full\" src=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/risorse-critiche.png\" alt=\"\" width=\"948\" height=\"368\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/risorse-critiche.png 948w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/risorse-critiche-300x116.png 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/risorse-critiche-768x298.png 768w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/risorse-critiche-640x248.png 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/risorse-critiche-681x264.png 681w\" sizes=\"(max-width: 948px) 100vw, 948px\" \/><\/a><\/p>\n<h1>Ottimizzazione Parte 3:<br \/>\n<strong>TTFB e politiche di browser caching<\/strong><\/h1>\n<p>Per ridurre il tempo di First Byte ho applicato una cache <strong>HTML lato server<\/strong> con <a href=\"https:\/\/it.wordpress.org\/plugins\/wp-super-cache\/\" target=\"_blank\" rel=\"noopener\">WP Super Cache<\/a>, evitando cos\u00ec che WordPress elabori in continuazione il codice della pagina e risparmiando centinaia di query SQL.<\/p>\n<p><em>L&#8217;ideale sarebbe stata una cache direttamente a livello di web server ma non essendo il sito ospitato presso un server dedicato, questa opzione non \u00e8 stata possibile applicarla.<\/em><\/p>\n<p>Nonostante il tempo si sia ridotto, continuava ad essere superiore ai 300 ms per i file statici.<\/p>\n<p>A questo punto ho applicato una CDN (Content Delivery Network) affinch\u00e9 questi fossero stati serviti da server geograficamente pi\u00f9 vicini al richiedente.<\/p>\n<p>Nel frattempo ho compresso il codice della pagina HTML con <a href=\"http:\/\/www.gzip.org\/\" target=\"_blank\" rel=\"noopener\">gzip<\/a>, minificato CSS e Javascript ed ottimizzato il peso delle immagini JPEG e PNG <strong>risparmiando ulteriori 700 millisecondi<\/strong>.<\/p>\n<p>Grazie a tutte queste ottimizzazioni<br \/>\nil\u00a0\u00a0<strong>tempo di rendering<\/strong> della home page, ma in generale delle pagine del sito di marcosalvo.it, \u00e8 sceso a 1 secondo,<br \/>\n<strong>il tempo di load<\/strong> a 1.1 secondi<br \/>\nil tempo di <strong>Visually Complete<\/strong> ad 1.9 secondi.<\/p>\n<p><a href=\"https:\/\/www.webpagetest.org\/result\/171223_ZS_46186082ed438044c7c4c0d18d053024\/3\/details\/#step1_request8\" target=\"_blank\" rel=\"noopener\">Vedi test Webpagetest.org<\/a><\/p>\n<p><a href=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-dopo.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1414 size-full\" src=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-dopo.png\" alt=\"\" width=\"976\" height=\"174\" srcset=\"https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-dopo.png 976w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-dopo-300x53.png 300w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-dopo-768x137.png 768w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-dopo-640x114.png 640w, https:\/\/marcosalvo.it\/wp-content\/uploads\/2017\/12\/webpagetest-metriche-dopo-681x121.png 681w\" sizes=\"(max-width: 976px) 100vw, 976px\" \/><\/a><\/p>\n<p>\u00c8 possibile ottimizzare ancora?<\/p>\n<p>Certo! Non c&#8217;\u00e8 limite all&#8217;ottimizzazione, tutto dipende dal core business del sito, dal livello di <a href=\"https:\/\/marcosalvo.it\/consulenza-seo\">consulenza <\/a>richiesto e dalle politiche di aggiornamento del sito stesso.<\/p>\n<p>Altre ottimizzazioni che \u00e8 possibile effettuare sul sito di marcosalvo.it comprendono la conversione in <a href=\"https:\/\/developers.google.com\/speed\/webp\/\" target=\"_blank\" rel=\"noopener\">webp<\/a> delle immagini nonch\u00e9 una politica di caching per le visite successive alla prima mediante delle <a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\" target=\"_blank\" rel=\"noopener\">Progressive Web Application<\/a> realizzate su misura, che consentono di ottenere <strong>tempi di caricamento estremi<\/strong>.<\/p>\n<p>Chiudo citando una delle frasi che racchiude tutto il significato di performance lato web:<\/p>\n<p><em>Remember the principles. Make things smaller, move them closer, cache them longer and load them more intelligently. Focus on the end objective and don\u2019t get too caught up in the rules.<\/em><\/p>\n<p>A proposito Marco, Per gli amanti di Gtmetrix ti lascio le estrapolazioni:<br \/>\nEcco il prima ed il dopo<\/p>\n<p>Marco:<br \/>\nSalvatore, credo tu abbia detto e dato veramente tanto, ecco perch\u00e9 questo post \u00e8 in perfetta linea con il mio piano editoriale \ud83d\ude42<\/p>\n<p>Ma adesso la palla la passo a chi sta leggendo questo articolo lasciando a lui 2 scelte \ud83d\ude42<\/p>\n<p>Scelta 1:<br \/>\nSe c&#8217;\u00e8 qualcosa di poco chiaro, non esitare a scrivere un commento, Salvatore sar\u00e0 felice di risponderti \ud83d\ude42<\/p>\n<p>Scelta 2:<br \/>\nSe hai bisogno di un servizio che possa portare le performance del tuo sito web alle stelle,<\/p>\n<h4 style=\"text-align: center;\">non esitare a contattarmi a questo numero: +39 3925179956<\/h4>\n<p>Qualsiasi sia la tua scelta, a questo punto non puoi per nessun motivo non condividere questo post sul tuo social preferito.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prima che tu legga una sola altra parola, ho necessit\u00e0 di mostrarti il risultato di ci\u00f2 che sto per regalarti. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1428,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[179,14],"tags":[],"modified_by":"Marco Salvo","_links":{"self":[{"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/posts\/1328"}],"collection":[{"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/comments?post=1328"}],"version-history":[{"count":0,"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/posts\/1328\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/media\/1428"}],"wp:attachment":[{"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/media?parent=1328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/categories?post=1328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosalvo.it\/wp-json\/wp\/v2\/tags?post=1328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}