Questa pagina è stata tradotta dall'API Cloud Translation.

Best practice per l'utilizzo di incorporamenti di terze parti

Una panoramica delle tecniche per caricare in modo efficace incorporamenti di terze parti popolari.

Addy Osmani

Katie Hempenius

Leena Sohoni

Molti siti usano incorporamenti 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 incorporamenti di contenuti di terze parti sono i video player, i feed di social media, le mappe e le 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 autore
Pubblicati da server di terze parti

Vengono mostrati più incorporamenti fuori schermo, che potrebbero essere caricati con il caricamento lento

Gli incorporamenti vengono utilizzati spesso in:

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 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. Questo può rendere pesanti gli incorporamenti di terze parti e influire sulle prestazioni della pagina ritardando i contenuti proprietari.

Impatto sulle prestazioni degli incorporamenti di terze parti

Molti incorporamenti popolari includono oltre 100 kB di JavaScript, a volte anche 2 MB. Richiedono più tempo per essere caricati e tengono occupato il thread principale durante l'esecuzione. Gli strumenti di monitoraggio delle prestazioni come Lighthouse e Chrome DevTools consentono di misurare l'impatto degli incorporamenti di terze parti sulle prestazioni.

Riduci l'impatto del codice di terze parti Il controllo Lighthouse mostra l'elenco dei provider di terze parti utilizzati da una pagina, con dimensioni e tempo di blocco del thread principale. Il controllo è disponibile tramite Chrome DevTools nella scheda Lighthouse.

È buona prassi controllare periodicamente l'impatto sulle prestazioni degli incorporamenti e del codice di terze parti perché il codice sorgente da incorporare potrebbe cambiare. Puoi sfruttare questa opportunità per rimuovere eventuale codice ridondante.

Riduci l'impatto del codice di terze parti

Caricamento delle best practice

Gli incorporamenti di terze parti possono influire negativamente sul rendimento, 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 creazione DOM viene messa in pausa durante l'esecuzione degli script. Inserisci i tag di script di terze parti dopo i tag principali proprietari 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

Dal momento che in genere i contenuti di terze parti seguono i contenuti principali, potrebbero non essere visibili nell'area visibile durante il caricamento della pagina. In questo caso, il download di risorse di terze parti può essere rinviato fino a quando l'utente non scorre la pagina verso il basso. Questo non solo consente di 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 incorporamenti di terze parti caricati tramite elementi <iframe>, puoi utilizzare il caricamento lento a livello di browser per rinviare il caricamento di iframe fuori schermo finché gli utenti non scorrono accanto a questi elementi. 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'attributo loading non è stato specificato, questo è il comportamento predefinito, tranne che in modalità Lite.
auto: il browser determina se eseguire il caricamento lento di questo frame.

I browser che non supportano l'attributo loading lo ignorano, quindi puoi applicare il caricamento lento 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 eseguire il caricamento lento di un iframe di un video player di YouTube, includi l'attributo loading nel codice di incorporamento fornito da YouTube. Il caricamento lento dell'incorporamento di YouTube può far risparmiare circa 500 kB sul 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 dell'incorporamento dell'iframe generato dall'API Embed di Google Maps. 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 dall'area visibile, oltre a indicatori come il tipo di connessione efficace e la modalità Lite, per decidere quando caricare un iframe, il caricamento lento del browser può non essere coerente. 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, è possibile utilizzare dimensioni lazy con iframe per altri incorporamenti di terze parti.

Tieni presente che le dimensioni lazy utilizzano l'API Intersection Observer per rilevare quando un elemento diventa visibile.

Utilizzo del 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 come parte dell'incorporamento. 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 i siti WordPress, come WPZoom ed Elfsight, offrono 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 consultano la pagina di un ristorante fanno clic, espandono, scorrono e navigano sulla 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.

Un incorporamento di una mappa con una funzionalità di zoom avanti e indietro.

La facciata di una mappa — Una facciata della mappa che è un'immagine.

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.

Acquisisci screenshot del nodo

DevTools acquisisce l'immagine come png, ma puoi anche valutare la possibilità di convertirla in formato WebP per migliorare le prestazioni.

Usa 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 basata sui parametri URL inclusi in una richiesta HTTP standard e restituisce la mappa come un'immagine che puoi visualizzare sulla tua pagina web. L'URL deve includere la chiave API di Google Maps e deve essere inserito nel tag <img> della pagina come attributo src.

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.

Lo snippet seguente mostra il codice di un'immagine la cui sorgente è 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 consentono di acquisire screenshot dei tweet. L'API Tweetpik accetta l'URL del tweet e restituisce un'immagine con i suoi contenuti. L'API accetta anche parametri per personalizzare lo sfondo, i colori, i bordi e le dimensioni dell'immagine.

Usa la funzionalità click-to-load per migliorare le facciate

Il concetto di click-to-load combina caricamento lento e facciate. Inizialmente, la pagina viene caricata con l'interfaccia. 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: Facade si precollega 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 incorporamenti di video di YouTube che sono solo immagini con un pulsante di riproduzione sono facciate che incontriamo di frequente. 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 è un componente consigliato per il player di YouTube, che ha l'aspetto del player reale ma è 224 volte più veloce. Per l'utilizzo, scarica lo script e il foglio di 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'attributo params.
```
<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.

. Un incorporamento Lite-YouTube

. Un incorporamento di YouTube

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

L'opzione React live chat loader carica un pulsante che sembra un incorporamento in una chat anziché l'incorporamento stesso. Può essere utilizzato con varie piattaforme provider di chat come Intercom, Help Scout, Messenger. Il widget simile è 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 è rimasta inattiva per molto tempo. Il case study di Postmark spiega come l'azienda ha implementato react-live-chat-loader e i miglioramenti delle prestazioni ottenuti.

Rimuovi o sostituisci gli incorporamenti 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

Il caricamento dinamico dei contenuti incorporati può migliorare le prestazioni di caricamento di una pagina, ma a volte può causare uno spostamento imprevisto dei contenuti della pagina. Questa operazione è nota 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.

Le variazioni del layout possono essere evitate riservando spazio durante il caricamento della pagina agli 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, potrebbero esserci fornitori che non lo includono. Ad esempio, questo snippet di codice non indica le dimensioni dell'incorporamento 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 indicato nello snippet che segue, 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 e garantire che il contenitore non si espanda al caricamento del feed e che non vi sia alcuna variazione del layout. È possibile utilizzare il seguente snippet per correggere le dimensioni dell'incorporamento 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 è disponibile uno strumento automatico, Layout Shift Terminator, che può aiutarti a ridurre le variazioni del layout degli incorporamenti più diffusi, come Twitter, Facebook e altri provider.

Terminatore spostamento 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'incorporamento nella pagina.

Prova Layout Shift Terminator e non esitare a lasciare un feedback su GitHub. Lo strumento è in stato 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, giudicare e usare strategie di caricamento appropriate per gli incorporamenti in base alla loro posizione, pertinenza e posizione degli utenti potenziali. e alle esigenze aziendali.