Se negli ultimi anni avete seguito i consigli sulle prestazioni, probabilmente vi è stato suggerito di utilizzare il lazy loading per le immagini. In generale, si tratta di un ottimo consiglio. Tuttavia, c’è un’immagine che non dovrebbe quasi mai essere caricata in modo differito: l’immagine hero nella parte superiore della pagina.
In questo tutorial vedremo perché l’immagine hero è così importante per l’LCP, perché il comportamento predefinito di Joomla può giocare a nostro sfavore e come creare una semplice modifica al template per migliorare le prestazioni.
Capire il Largest Contentful Paint (LCP)
Il Largest Contentful Paint misura il tempo necessario affinché il contenuto visibile più grande di una pagina appaia nel browser.
Su molti siti web Joomla, l’elemento LCP è spesso l’immagine completa dell’articolo, specialmente quando viene utilizzata come immagine hero nella parte superiore della pagina.
Google considera un punteggio LCP:
-
Meno di 2,5 secondi: Buono
-
Tra 2,5 e 4 secondi: Da migliorare
-
Oltre 4 secondi: Scadente
Poiché l’immagine hero è spesso l’elemento LCP, qualsiasi cosa ne ritardi il download avrà un impatto negativo sul vostro punteggio Core Web Vitals.
Perché il caricamento differito danneggia le immagini hero
Il caricamento differito è progettato per posticipare il download delle immagini fino a quando non sono necessarie.
Questo è l’ideale per:
-
Immagini più in basso nella pagina
-
Immagini della galleria
-
Miniature di articoli correlati
-
Immagini del piè di pagina
Tuttavia, è una strategia completamente sbagliata per un’immagine che è immediatamente visibile al caricamento della pagina.
Quando un'immagine hero viene contrassegnata come caricata in modo differito (Lazy), il browser riceve istruzioni che in pratica dicono:
Non considerare ancora di questa immagine.
Il browser quindi ritarda il recupero dell'immagine fino a quando non ha completato altre operazioni. Il risultato è che l'immagine appare più tardi di quanto dovrebbe, aumentando il punteggio LCP.
Per l’immagine più importante della tua pagina, vogliamo esattamente il comportamento opposto. Vogliamo che il browser individui l’immagine immediatamente e inizi a scaricarla il più rapidamente possibile.
Comportamento predefinito di Joomla
Joomla utilizza i layout per generare molte parti dell’output della pagina.
Quando un articolo contiene un’immagine a tutto schermo, Joomla la rende utilizzando il layout:
layouts/joomla/content/full_image.phplayouts/joomla/content/full_image.phpPer impostazione predefinita, Joomla aggiunge automaticamente:
loading=“lazy”all’immagine generata.
Per le immagini più in basso nella pagina ciò è vantaggioso, ma per un’immagine hero o l’immagine di un articolo in primo piano che appare immediatamente al caricamento della pagina, può influire negativamente sull’LCP.
Una nota sui layout del blog
Per impostazione predefinita, Joomla utilizza solo il layout full_image quando visualizza una pagina di articolo completa. Tuttavia, se avete seguito il mio articolo precedente, Ottimizzare i layout del blog di Joomla: l’uso delle immagini a schermo intero per gli articoli in primo piano, potreste già utilizzare l’immagine dell’articolo completo come immagine hero per l’articolo in primo piano su una pagina del blog di categoria.
In tale configurazione, Joomla utilizza lo stesso layout full_image durante il rendering dell’articolo in primo piano, il che significa che questa sostituzione si applicherà anche alle pagine del blog di categoria. Ciò è particolarmente utile poiché l’immagine dell’articolo in primo piano è spesso l’elemento visibile più grande sulla pagina e quindi un forte candidato per l’elemento Largest Contentful Paint (LCP).
Di conseguenza, un unico override può migliorare il comportamento di caricamento della tua immagine principale sia nelle pagine degli articoli singoli che nelle pagine del blog di categoria.
Fortunatamente, Joomla semplifica l’override dei layout all’interno del tuo template.
Passo 1. Creazione di una sostituzione (Override) del layout
Anziché modificare i file di base di Joomla, creeremo una sostituzione del template. Se il vostro template dispone già di sostituzioni per
layouts/joomla/content, potete saltare questo passaggio.Dall’amministrazione di Joomla:
- Vai su Sistema → Modelli del sito
- Seleziona il tuo template attivo
- Apri Crea sostituzioni
- Espandi Layout → Joomla
- Fai clic su Contenuto
Joomla creerà i file necessari in:
/templates/your_template/html/layouts/joomla/content/ 
Passo 2: Aggiorna full_image.php
Naviga nell’albero dei file a sinistra per trovare e aprire il file denominato full_image.php
Trova la sezione simile a:
$layoutAttr = [ ‘src’ => $images->image_fulltext, 'alt' => empty($images->image_fulltext_alt) && empty($images->image_fulltext_alt_empty) ? false : $images->image_fulltext_alt,];Aggiungi una nuova riga:
‘fetchpriority’ => 'high',Questo indica ai browser moderni che questa immagine è una risorsa importante e che deve avere la priorità durante il caricamento della pagina.
Aggiungi un’altra nuova riga:
‘loading’ => ‘eager’,Il tuo codice dovrebbe ora apparire così:
$layoutAttr = [ ‘src’ => $images->image_fulltext, ‘alt’ => empty($images->image_fulltext_alt) && empty($images->image_fulltext_alt_empty)? false : $images->image_fulltext_alt, ‘fetchpriority’ => ‘high’, ‘loading’ => ‘eager’,];Salva il file.
Perché utilizzare loading="eager"?
A rigor di termini, non è necessario.
Il comportamento predefinito del browser è già il caricamento “eager”, quindi quanto segue funzionerebbe perfettamente:
‘fetchpriority’ => ‘high’,Tuttavia, il layout di Joomla applica già il caricamento “lazy”.
Aggiungendo:
‘loading’ => ‘eager’,si ottiene il modo più semplice per sovrascrivere tale comportamento senza apportare modifiche più estese al layout.
Consideratelo come un modo per dire esplicitamente al browser:
Questa immagine è importante. Caricala immediatamente.
Verifica dei risultati
Dopo aver apportato la modifica, verifica il tuo sito utilizzando strumenti quali:
-
Google PageSpeed Insights
-
Lighthouse in Chrome DevTools
-
WebPageTest
Dovreste notare che l’immagine hero viene richiesta prima durante il caricamento della pagina e, in molti casi, un miglioramento del vostro punteggio Largest Contentful Paint.
Il miglioramento esatto dipenderà dalle dimensioni dell’immagine, dalle prestazioni del server e dalla struttura complessiva della pagina, ma garantire che il browser dia priorità all’immagine hero è una delle ottimizzazioni LCP più semplici ed efficaci che puoi apportare.
Conclusione
Il caricamento differito (lazy loading) è una fantastica funzionalità per migliorare le prestazioni, se utilizzata correttamente. L’errore che molti siti commettono è applicarlo a ogni immagine senza considerare quale immagine sia effettivamente responsabile della prima impressione dell’utente.
Se l’immagine del tuo articolo o l’immagine hero è visibile non appena la pagina viene caricata, dovrebbe essere trattata come una risorsa ad alta priorità, non rimandata a più tardi.
Creando una semplice override del layout di Joomla e modificando due attributi, puoi aiutare il browser a individuare, dare priorità e visualizzare prima la tua immagine più importante, migliorando così i Core Web Vitals e offrendo un'esperienza più veloce ai tuoi visitatori.
