{"id":57560,"date":"2022-06-13T14:18:37","date_gmt":"2022-06-13T13:18:37","guid":{"rendered":"https:\/\/sos-wp.it\/?p=57560"},"modified":"2025-01-30T16:40:48","modified_gmt":"2025-01-30T15:40:48","slug":"lazy-loading","status":"publish","type":"post","link":"https:\/\/sos-wp.it\/tutorial\/lazy-loading\/","title":{"rendered":"Cos’\u00e8 il lazy loading e come usarlo sul tuo sito web"},"content":{"rendered":"\n

In questo articolo scoprirai che cos\u2019\u00e8 il lazy loading<\/strong><\/strong> e come aggiungere questa funzionalit\u00e0 al tuo sito web.<\/p>\n\n\n\n

Con il lazy loading<\/strong> le pagine del tuo sito web caricheranno velocemente, l\u2019esperienza dei visitatori migliorer\u00e0 e otterrai qualche posizione in pi\u00f9 nei risultati di ricerca.<\/p>\n\n\n\n

Abbiamo parlato gi\u00e0 tante volte di velocit\u00e0 delle pagine e di come ottimizzare il peso delle immagini<\/a>. Se hai gi\u00e0 seguito i miei consigli fin qui, allora adesso completa l\u2019opera aggiungendo il lazy loading<\/strong> al tuo sito web. <\/p>\n\n\n\n

Vedrai che cos\u00ec potrai veramente ottenere un sito web pi\u00f9 veloce della luce! <\/em><\/p>\n\n\n\n

A proposito, se sei alle prime armi in termini di performance, ti consiglio di leggere la mia guida su come velocizzare un sito web.<\/a><\/p>\n\n\n\n

Ma vediamo adesso cosa significa lazy loading.<\/strong><\/p>\n\n\n\n

Cosa significa lazy loading e come funziona<\/h2>\n\n\n\n

Lazy loading<\/strong> significa letteralmente \u201ccaricamento pigro\u201d ed \u00e8 una tecnica utilizzata non solo per le immagini, ma anche per il caricamento degli script esterni. <\/p>\n\n\n\n

Quando parliamo di file immagine, il lazy loading<\/strong> permette che le immagini presenti in una pagina web vengano caricate solamente quando sono necessarie, ossia solo quando l\u2019utente scorre la pagina fino al punto in cui si trova l\u2019immagine.<\/p>\n\n\n\n

Si tratta, perci\u00f2, di una sorta di risparmio energetico. Se nessuno pu\u00f2 vedere l\u2019immagine, dato che si trova al di fuori dell\u2019area visibile dello schermo, a cosa server utilizzare risorse per caricarla?<\/p>\n\n\n\n

E allora, ecco che si sfrutta il lazy loading<\/strong>! <\/p>\n\n\n\n

Le immagini che vengono caricate all\u2019apertura della pagina sono solo quelle \u201cabove the fold<\/em>\u201d, ossia quelle che si trovano al di sopra del bordo inferiore dello schermo, perci\u00f2 solo quelle visibili immediatamente.<\/p>\n\n\n\n

Se l\u2019utente inizia a scrollare verso il basso, al momento in cui raggiunge il punto in cui si trova un\u2019immagine, essa verr\u00e0 caricata e diventer\u00e0 quindi visibile.<\/p>\n\n\n\n

Come implementare il lazy loading su WordPress<\/h2>\n\n\n\n

Per implementare il lazy loading<\/strong> delle immagini e ottenere ottimi risultati nelle prestazioni delle tue pagine web, ti suggerisco due plugin molto validi e semplici da usare.<\/p>\n\n\n\n

Prima di installarli, per\u00f2, controlla il plugin di cache che gi\u00e0 usi sul tuo sito. Molto spesso, infatti, questi plugin hanno gi\u00e0 una funzione integrata per il lazy loading. Attivare sia questa funzione, sia il plugin apposito, potrebbe rallentare in modo drastico il tuo sito e anche causare degli errori.<\/p>\n\n\n\n

Valuta, quindi, se il tuo plugin gi\u00e0 ti soddisfa, altrimenti disattiva quella funzione prima di utilizzare uno dei due plugin che ti suggerisco.<\/p>\n\n\n\n

Questi hanno entrambi delle ottime recensioni e sono gratuiti. Inoltre, vengono aggiornati abbastanza spesso e questo significa che difficilmente verranno abbandonati dagli sviluppatori.<\/p>\n\n\n\n

1) a3 Lazy Load<\/h3>\n\n\n\n
\"Lazy<\/figure>\n\n\n\n

A3 Lazy Load<\/a> \u00e8 il plugin pi\u00f9 popolare per il lazy loading delle immagini<\/strong>. Se vuoi avere un\u2019anteprima dei risultati, visualizza il test su una pagina con ben 1000 immagini<\/a>. Abbiamo provato anche a fare un test della velocit\u00e0 di questa pagina e i risultati sono davvero sorprendenti.<\/p>\n\n\n\n

Il plugin \u00e8 molto semplice da utilizzare e configurare. Puoi facilmente scegliere quali elementi devono essere caricati con questo sistema e quando devono essere visualizzati sul browser.<\/p>\n\n\n\n

Quando attivi il lazy loading delle immagini<\/strong>, puoi anche scegliere se sfruttarlo solo su articoli, pagine, widget<\/a>, thumbnails<\/em> e gravatar<\/a>. Inoltre, puoi disattivarlo per determinate immagini.<\/p>\n\n\n\n

Con questo plugin, puoi sfruttare il lazy loading<\/strong> anche per il caricamento di altri elementi, come video, iframe<\/em>.<\/p>\n\n\n\n

2) Lazy Load by WP Rocket<\/h3>\n\n\n\n
\"Lazy<\/figure>\n\n\n\n

Il plugin Lazy Load di WP Rocket<\/a> (sono gli stessi del noto plugin WP Rocket<\/a> per velocizzare un sito WordPress) agisce su tutte le immagini nel contenuto di un post, sui thumbnails<\/em>, widget, gravatar<\/em> e iframe<\/em>. Il plugin \u00e8 molto leggero perch\u00e9 non usa librerie JavaScript, ma solamente uno script jQuery.<\/p>\n\n\n\n

Puoi impostare anche un thumbnail<\/em> per sfruttare il lazy loading<\/strong> anche dei video YouTube inseriti con un iframe<\/em>.<\/p>\n\n\n\n

Per disattivare la funzione da determinate pagine, potrai aggiungere alcune righe di codice al file functions.php<\/em>. Se invece vorrai disattivarlo solo per determinate immagini, potrai aggiungere un attributo specifico al tag<\/em> <img> dell\u2019immagine da caricare normalmente.<\/p>\n\n\n\n

Conclusione<\/p>\n\n\n\n

Non ti resta che scegliere quale plugin utilizzare per il lazy loading delle immagini<\/strong> sul tuo sito. In questo modo, otterrai degli ottimi risultati sui tempi di caricamento e sulle prestazioni del tuo sito web.<\/p>\n\n\n\n

Conoscevi il lazy loading?<\/strong><\/em><\/p>\n\n\n\n

Credi che lo utilizzerai nelle tue pagine?<\/strong><\/em><\/p>\n\n\n\n

Lasciaci un commento per farci sapere cosa ne pensi.<\/p>\n","protected":false},"excerpt":{"rendered":"

In questo articolo scoprirai che cos\u2019\u00e8 il lazy loading e come aggiungere questa funzionalit\u00e0 al tuo sito web. Con il lazy loading le pagine del tuo sito web caricheranno velocemente, l\u2019esperienza dei visitatori migliorer\u00e0 e otterrai qualche posizione in pi\u00f9 nei risultati di ricerca. Abbiamo parlato gi\u00e0 tante volte di velocit\u00e0 delle pagine e di […]<\/p>\n","protected":false},"author":1,"featured_media":113869,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[78,96],"class_list":["post-57560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-immagini","tag-velocita"],"acf":[],"_links":{"self":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/posts\/57560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/comments?post=57560"}],"version-history":[{"count":0,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/posts\/57560\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/media\/113869"}],"wp:attachment":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/media?parent=57560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/categories?post=57560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/tags?post=57560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}