Una panoramica delle tecniche per caricare in modo efficace incorporamenti di terze parti popolari.
Molti siti utilizzano i contenuti incorporati di terze parti per creare un'esperienza utente coinvolgente delegando alcune sezioni di una pagina web a un altro fornitore di contenuti. Gli esempi più comuni di contenuti di terze parti incorporati sono video player, feed di social media, mappe e pubblicità.
I contenuti di terze parti possono influire sul rendimento di una pagina in molti modi. Potrebbe bloccare la visualizzazione, competere con altre risorse critiche per la rete e la larghezza di banda oppure influire sulle metriche di Core Web Vitals. Anche gli incorporamenti di terze parti possono causare variazioni del layout durante il caricamento. Questo articolo illustra le best practice per le prestazioni che puoi utilizzare durante il caricamento di incorporamenti di terze parti, tecniche di caricamento efficienti e lo strumento Terminatore della variazione del layout, che aiuta a ridurre le variazioni del layout per gli incorporamenti più diffusi.
Che cos'è un incorporamento
Per incorporamento di terze parti si intende qualsiasi contenuto visualizzato sul tuo sito che:
- Non creati da te
- Pubblicate da server di terze parti
Gli elementi incorporati vengono utilizzati di frequente nei seguenti casi:
- I siti web correlati a sport, notizie, intrattenimento e moda utilizzano i video per arricchire i contenuti testuali.
- Le organizzazioni con account Twitter o social media attivi incorporano i feed di questi account nelle proprie pagine web per coinvolgere più persone e raggiungere più persone.
- Le pagine di ristoranti, parchi e sedi di eventi spesso incorporano mappe.
Gli incorporamenti di terze parti vengono in genere caricati negli elementi <iframe>
della pagina. I fornitori di terze parti offrono snippet HTML spesso costituiti da un <iframe>
che estrae una pagina composta da markup, script e fogli di stile. Alcuni provider utilizzano anche uno snippet di script che inserisce dinamicamente un valore <iframe>
per eseguire il pull di altri contenuti. Ciò può rendere pesanti gli elementi incorporati di terze parti e influire sul rendimento della pagina ritardandone i contenuti proprietari.
Impatto sulle prestazioni degli incorporamenti di terze parti
Molti elementi incorporati popolari includono oltre 100 KB di codice JavaScript, a volte anche fino a 2 MB. Richiedono più tempo per il caricamento e mantengono occupato il thread principale durante l'esecuzione. Gli strumenti di monitoraggio delle prestazioni come Lighthouse e Chrome DevTools consentono di misurare l'impatto degli elementi incorporati di terze parti sulle prestazioni.
Riduci l'impatto del codice di terze parti: il controllo Lighthouse mostra l'elenco dei fornitori di terze parti utilizzati da una pagina, con le dimensioni e il tempo di blocco del thread principale. Il controllo è disponibile tramite Chrome DevTools nella scheda Lighthouse.
È buona prassi controllare periodicamente l'impatto sul rendimento degli elementi incorporati e del codice di terze parti, in quanto il codice sorgente degli elementi incorporati potrebbe cambiare. Puoi sfruttare questa opportunità per rimuovere eventuali codici ridondanti.
Caricamento delle best practice
Gli elementi incorporati di terze parti possono influire negativamente sulle prestazioni, ma offrono anche funzionalità importanti. Per utilizzare in modo efficiente gli incorporamenti di terze parti e ridurne l'impatto sul rendimento, segui queste linee guida.
Ordinamento degli script
In una pagina ben progettata, i contenuti proprietari principali saranno l'elemento principale della pagina, mentre gli incorporamenti di terze parti occuperanno le barre laterali o verranno visualizzati dopo i contenuti proprietari.
Per una migliore esperienza utente, i contenuti principali devono essere caricati velocemente e prima di qualsiasi altro contenuto di supporto. Ad esempio, il testo della notizia in una pagina di notizie dovrebbe caricarsi prima dell'incorporamento in un feed di Twitter o in pubblicità.
Le richieste di incorporamenti di terze parti possono ostacolare il caricamento dei contenuti proprietari, pertanto la posizione di un tag script di terze parti è importante. Gli script possono influire sulla sequenza di caricamento perché la costruzione del DOM viene messa in pausa durante l'esecuzione degli script. Inserisci i tag script di terze parti dopo i tag proprietari principali e utilizza gli attributi async
o defer
per caricarli in modo asincrono.
<head>
<title>Order of Things</title>
<link rel="stylesheet" media="screen" href="/assets/application.css">
<script src="index.js"></script>
<script src="https://example.com/3p-library.js" async></script>
</head>
Caricamento lento
Poiché i contenuti di terze parti di solito vengono visualizzati dopo i contenuti principali, potrebbero non essere visibili nell'area visibile al caricamento della pagina. In questo caso, il download delle risorse di terze parti potrebbe essere posticipato fino a quando l'utente non scorre verso il basso fino a quella parte della pagina. Ciò non solo contribuisce a ottimizzare il caricamento iniziale della pagina, ma riduce anche i costi di download per gli utenti con piani dati fissi e connessioni di rete lente.
Il ritardo nel caricamento dei contenuti fino a quando non sono effettivamente necessari si chiama caricamento lento. A seconda dei requisiti e del tipo di incorporamento, puoi utilizzare diverse tecniche di caricamento lento.
Caricamento lento del browser per <iframe>
Per gli elementi incorporati di terze parti caricati tramite elementi <iframe>
, puoi utilizzare il caricamento differito a livello di browser per rimandare il caricamento degli iframe offscreen finché gli utenti non li scorrono. L'attributo di caricamento per <iframe>
è disponibile in tutti i browser moderni.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
L'attributo di caricamento supporta i seguenti valori:
lazy
: indica che il browser deve rimandare il caricamento dell'iframe. Il browser caricherà l'iframe quando si avvicina all'area visibile. Da utilizzare se l'iframe è idoneo per il caricamento lento.eager
: carica immediatamente l'iframe. Da utilizzare se l'iframe non è adatto per il caricamento lento. Se l'attributoloading
non è stato specificato, questo è il comportamento predefinito, tranne in modalità Lite.auto
: il browser determina se eseguire il caricamento differito di questo frame.
I browser che non supportano l'attributo loading
lo ignorano, quindi puoi applicare il caricamento differito a livello di browser come miglioramento progressivo. I browser che supportano l'attributo potrebbero avere implementazioni diverse per la soglia distance-from-viewport (la distanza da cui inizia il caricamento dell'iframe).
Di seguito sono riportati alcuni modi per eseguire il caricamento lento di iframe per diversi tipi di incorporamenti.
- Video di YouTube: per il caricamento differito di un iframe del video player di YouTube, includi l'attributo
loading
nel codice di incorporamento fornito da YouTube. Il caricamento differito dei video incorporati di YouTube può farti risparmiare circa 500 KB al caricamento iniziale della pagina.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
loading="lazy"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
- Google Maps: per eseguire il caricamento lento di un iframe di Google Maps, includi l'attributo
loading
nel codice per l'iframe incorporato generato dall'API Google Maps Embed. Di seguito è riportato un esempio di codice con un segnaposto per la chiave API Google Cloud.
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
width="600" height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
libreria di elementi lazysize
Poiché i browser utilizzano la distanza di un incorporamento dal viewport, oltre a indicatori come il tipo di connessione effettivo e la modalità Lite, per decidere quando caricare un iframe, il caricamento differito del browser può essere incoerente. Se hai bisogno di un maggiore controllo sulle soglie di distanza o vuoi offrire un'esperienza di caricamento lento coerente su tutti i browser, puoi utilizzare la libreria lazysizes.
lazysizes è un caricatore lento veloce e ottimizzato per la SEO sia per le immagini sia per gli iframe. Una volta scaricato, il componente può essere utilizzato con un iframe per un incorporamento di YouTube, come descritto di seguito.
<script src="lazysizes.min.js" async></script>
<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
class="lazyload"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Analogamente, lazysizes può essere utilizzato con gli iframe per altri elementi incorporati di terze parti.
Tieni presente che le dimensioni lazy utilizzano l'API Intersection Observer per rilevare quando un elemento diventa visibile.
Utilizzo di data-lazy in Facebook
Facebook fornisce diversi tipi di plug-in social che possono essere incorporati. tra cui post, commenti, video e il pulsante Mi piace più popolare. Tutti i plug-in includono un'impostazione per data-lazy
. Se viene impostato su true
, il plug-in utilizzerà il meccanismo di caricamento lento del browser impostando l'attributo iframe loading="lazy"
.
Caricamento lento dei feed di Instagram
Instagram fornisce un blocco di markup e uno script nell'ambito dell'embed. Lo script inserisce un <iframe>
nella pagina. Il caricamento lento di questo <iframe>
può migliorare le prestazioni, in quanto l'incorporamento può avere dimensioni superiori a 100 kB compressi. Molti plug-in di Instagram per siti WordPress, come WPZoom ed Elfsight, forniscono l'opzione di caricamento lento.
Sostituzione di incorporamenti con facciata
Anche se gli incorporamenti interattivi aggiungono valore alla pagina, molti utenti potrebbero non interagire con loro. Ad esempio, non tutti gli utenti che visitano la pagina di un ristorante faranno clic, espanderanno, scorreranno e navigheranno nella mappa incorporata. Analogamente, non tutti gli utenti di una pagina di fornitori di servizi di telecomunicazione interagiranno con il chatbot. In questi casi, è possibile evitare del tutto il caricamento o il caricamento lento dell'incorporamento visualizzando un'interfaccia al suo posto.
Una facade è un elemento statico che sembra simile a una piattaforma di terze parti incorporata, ma non è funzionale e, di conseguenza, influisce molto sul caricamento della pagina. Di seguito sono riportate alcune strategie per caricare questi incorporamenti in modo ottimale pur continuando a fornire un certo valore all'utente.
Usa immagini statiche come facciate
Puoi utilizzare immagini statiche al posto degli incorporamenti di mappe dove potresti non aver bisogno di rendere la mappa interattiva. Puoi aumentare lo zoom dell'area di interesse sulla mappa, acquisire un'immagine e utilizzare questa opzione al posto dell'incorporamento della mappa interattiva. Puoi anche utilizzare la funzionalità Acquisisci screenshot del nodo di DevTools per acquisire uno screenshot dell'elemento iframe
incorporato.
DevTools acquisisce l'immagine come png
, ma puoi anche valutare la possibilità di convertirla in formato WebP per migliorare le prestazioni.
Utilizzare le immagini dinamiche come facciate
Questa tecnica consente di generare immagini corrispondenti a un incorporamento interattivo in fase di esecuzione. Di seguito sono riportati alcuni strumenti che consentono di generare versioni statiche degli incorporamenti nelle tue pagine.
API Maps Static: il servizio API Maps Static di Google genera una mappa in base ai parametri URL inclusi in una richiesta HTTP standard e la restituisce come immagine che puoi visualizzare nella tua pagina web. L'URL deve includere la chiave API di Google Maps e deve essere inserito nel tag
<img>
della pagina come attributosrc
.Lo strumento Creazione di mappe statiche consente di configurare i parametri richiesti per l'URL e fornisce il codice per l'elemento immagine in tempo reale.
Il seguente snippet mostra il codice di un'immagine con l'origine impostata su un URL dell'API Maps Static. È stato incluso in un tag link che garantisce che sia possibile accedere alla mappa effettiva facendo clic sull'immagine. (Nota: l'attributo chiave API non è incluso nell'URL)
<a href="https://www.google.com/maps/place/Albany,+NY/"> <img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY"> </a>
Screenshot di Twitter: in modo analogo agli screenshot delle mappe, questa idea ti consente di incorporare dinamicamente uno screenshot di Twitter anziché il feed pubblicato. Tweetpik è uno degli strumenti che possono essere utilizzati per acquisire screenshot dei tweet. L'API Tweetpik accetta l'URL del tweet e restituisce un'immagine con i relativi contenuti. L'API accetta anche parametri per personalizzare lo sfondo, i colori, i bordi e le dimensioni dell'immagine.
Utilizza la funzionalità Apri con un clic per migliorare le facciate
Il concetto di click-to-load combina caricamento lento e facciate. La pagina viene caricata inizialmente con la facciata. Quando l'utente interagisce con il segnaposto statico facendovi clic sopra, l'incorporamento di terze parti viene caricato. Questo metodo è anche noto come pattern di importazione all'interazione e può essere implementato seguendo questa procedura.
- Al caricamento della pagina: l'elemento di facciata o statico è incluso nella pagina.
- Al passaggio del mouse: la facciata si connette in anteprima al provider di incorporamento di terze parti.
- Al clic: l'interfaccia viene sostituita con un prodotto di terze parti.
Le facciate possono essere utilizzate con incorporamenti di terze parti per video player, widget di chat, servizi di autenticazione e widget di social media. Gli embed dei video di YouTube che sono solo immagini con un pulsante di riproduzione sono una facciata che riscontriamo spesso. Il video effettivo viene caricato solo quando fai clic sull'immagine.
Puoi creare un'interfaccia click-to-load personalizzata utilizzando il pattern Importa all'interazione oppure utilizzare una delle seguenti facciate open source disponibili per diversi tipi di incorporamenti.
Facciata di YouTube
Lite-youtube-embed è una facciata consigliata per il player di YouTube, che ha lo stesso aspetto del player reale, ma è 224 volte più veloce. Per utilizzarlo, scarica lo script e lo stile e poi utilizza il tag
<lite-youtube>
in HTML o JavaScript. I parametri personalizzati del player supportati da YouTube possono essere inclusi tramite l'attributoparams
.<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
Di seguito è riportato un confronto tra lite-youtube-embed e l'incorporamento effettivo.
Altre facciate simili disponibili per i player di YouTube e Vimeo sono lite-youtube, lite-vimeo-embed e lite-vimeo.
Facciata del widget di Chat
Il caricamento della chat live di React carica un pulsante che sembra un'integrazione della chat anziché l'integrazione stessa. Può essere utilizzato con varie piattaforme di fornitori di chat come Intercom, Help Scout e Messenger. Il widget look-alike è molto più leggero del widget di chat e si carica più velocemente. Può essere sostituito dal widget della chat effettivo quando l'utente passa il mouse sopra il pulsante o fa clic sul pulsante oppure se la pagina è inattiva da molto tempo. Il case study di Postmark spiega come è stata implementata la funzionalità
react-live-chat-loader
e i miglioramenti delle prestazioni ottenuti.
Rimuovere o sostituire gli elementi incorporati con link
Se ti accorgi che alcuni incorporamenti di terze parti compromettono le prestazioni di caricamento e che l'utilizzo di una qualsiasi delle tecniche descritte in precedenza non è possibile, la cosa più semplice che puoi fare è rimuovere completamente l'incorporamento. Se vuoi che i tuoi utenti possano comunque accedere ai contenuti dell'incorporamento, puoi fornire un link al contenuto con target="_blank"
, in modo che l'utente possa fare clic e visualizzarlo in un'altra scheda.
Stabilità del layout
Sebbene il caricamento dinamico dei contenuti incorporati possa migliorare le prestazioni di caricamento di una pagina, a volte può causare movimenti imprevisti dei contenuti della pagina. Questo fenomeno è noto come variazione del layout.
Poiché la stabilità visiva è importante per un'esperienza utente fluida, la metrica Cumulative Layout Shift (CLS) misura la frequenza con cui si verificano queste variazioni e quanto sono fastidiose.
I cambiamenti di layout possono essere evitati riservando spazio durante il caricamento della pagina per gli elementi che verranno caricati dinamicamente in un secondo momento. Il browser può determinare lo spazio da prenotare se conosce la larghezza e l'altezza degli elementi. A tale scopo, specifica gli attributi width
e height
degli iframe o imposta una dimensione fissa per gli elementi statici in cui verrà caricato l'incorporamento di terze parti. Ad esempio, un iframe per un incorporamento di YouTube deve avere larghezza e altezza specificate come segue.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>
Incorporamenti popolari come YouTube, Google Maps e Facebook forniscono il codice di incorporamento con gli attributi di dimensione specificati. Tuttavia, alcuni provider potrebbero non includerlo. Ad esempio, questo snippet di codice non indica le dimensioni dell'embed risultante.
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Puoi utilizzare DevTools per esaminare l'elemento iframe
inserito dopo il rendering della pagina. Come mostrato nello snippet seguente, l'altezza dell'iframe inserito è fissa, mentre la larghezza è specificata in percentuale.
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>
Queste informazioni possono essere utilizzate per impostare le dimensioni dell'elemento contenitore per garantire che il contenitore non si espanda al caricamento del feed e che non vi sia alcuna variazione del layout. Il seguente snippet può essere utilizzato per correggere le dimensioni dell'embed incluso in precedenza.
<style>
.twitterfeed { display: table-cell; vertical-align: top; width: 100vw; }
.twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
Terminatore spostamento layout
Poiché gli incorporamenti di terze parti spesso omettono le dimensioni (larghezza, altezza) dei contenuti finali visualizzati, possono causare variazioni significative del layout in una pagina. Questo problema può essere complicato da risolvere senza esaminare manualmente le dimensioni finali con DevTools in diverse dimensioni dell'area visibile.
Ora esiste uno strumento automatico, Layout Shift Terminator, che può aiutarti a ridurre i cambiamenti di layout causati dagli embed più diffusi, come quelli di Twitter, Facebook e altri fornitori.
Terminator della variazione del layout:
- Carica il lato client incorporato in un iframe.
- Ridimensiona l'iframe a varie dimensioni di area visibile comunemente utilizzate.
- Per ogni area visibile popolare, acquisisce le dimensioni dell'incorporamento per generare in un secondo momento query multimediali e query contenitore.
- Misura un wrapper di altezza minima attorno al markup di incorporamento utilizzando le query supporti (e le query contenitore) fino a quando l'incorporamento non viene inizializzato (dopo di che gli stili di altezza minima vengono rimossi).
Genera uno snippet di incorporamento ottimizzato che può essere copiato e incollato dove altrimenti includeresti l'embed nella tua pagina.
Prova Layout Shift Terminator e lascia pure qualsiasi feedback su GitHub. Lo strumento è in versione beta e mira a migliorare nel tempo con ulteriori perfezionamenti.
Conclusione
Gli incorporamenti di terze parti possono offrire molto valore agli utenti, ma con l'aumento del numero e delle dimensioni degli incorporamenti su una pagina, il rendimento può risentirne. Ecco perché è necessario misurare, valutare e utilizzare strategie di caricamento appropriate per gli incorporamenti in base alla loro posizione, pertinenza e esigenze dei potenziali utenti.