{"id":323,"date":"2024-08-19T15:27:29","date_gmt":"2024-08-19T15:27:29","guid":{"rendered":"https:\/\/blog.devlancer.it\/?p=323"},"modified":"2024-08-23T10:11:46","modified_gmt":"2024-08-23T10:11:46","slug":"seo-come-servire-i-contenuti-in-modo-lazy","status":"publish","type":"post","link":"https:\/\/blog.devlancer.it\/en\/seo-come-servire-i-contenuti-in-modo-lazy\/","title":{"rendered":"SEO: Come servire i contenuti in modo lazy"},"content":{"rendered":"<p>Come abbiamo visto, \u00e8 importante avere un sito veloce per ottenere un buon punteggio nei <a href=\"https:\/\/blog.devlancer.it\/seo-core-web-vitals-come-migliorarli\/\">Core Web Vitals<\/a>.<\/p>\n\n<h2>Lazy loading: cos&#8217;\u00e8 e come funziona<\/h2>\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<h2>WordPress e immagini lazy<\/h2>\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<h2>Come migliorare il caricamento di Javascript, CSS e Font<\/h2>\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>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-hardware-e-hosting-consigliati-per-un-sito-web-veloce\/\">SEO: Hardware e hosting consigliati per un sito web veloce<\/a><\/li>\n<li><a href=\"https:\/\/blog.devlancer.it\/seo-come-ottimizzare-video-audio\/\">SEO: Come ottimizzare i video e i file audio<\/a><\/li>\n<li><a href=\"https:\/\/blog.devlancer.it\/seo-come-ottimizzare-le-immagini\/\">SEO: Come ottimizzare le immagini<\/a><\/li>\n<li><a href=\"https:\/\/blog.devlancer.it\/seo-on-page\/\">SEO On page: Che cos&amp;#8217;\u00e8 e come farla bene<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Come abbiamo visto, \u00e8 importante avere un sito veloce per ottenere un buon punteggio nei Core Web Vitals. Lazy loading: cos&#8217;\u00e8 e come funziona Il lazy loading ci permette di dire al browser che un contenuto deve essere caricato \u201cin modo pigro\u201d, cio\u00e8 che pu\u00f2 venire scaricato successivamente perch\u00e9 \u00e8 di secondaria importanza. Qui dovremmo [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":372,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10,9],"tags":[11],"class_list":["post-323","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\/323","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=323"}],"version-history":[{"count":2,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/posts\/323\/revisions"}],"predecessor-version":[{"id":325,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/posts\/323\/revisions\/325"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/media\/372"}],"wp:attachment":[{"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/media?parent=323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/categories?post=323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.devlancer.it\/en\/wp-json\/wp\/v2\/tags?post=323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}