Best practice per l'utilizzo di incorporamenti di terze parti

Una panoramica delle tecniche per caricare in modo efficiente gli incorporamenti di terze parti più diffusi.

Addy Osmani

Katie Hempenius

Leena Sohoni

Molti siti utilizzano 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 dei social media, le mappe e gli annunci.

I contenuti di terze parti possono influire sul rendimento di una pagina in molti modi. Possono bloccare il rendering, competere con altre risorse critiche per la rete e la larghezza di banda o influire sulle metriche dei Core Web Vitals. Gli incorporamenti di terze parti possono anche causare variazioni del layout durante il caricamento. Questo articolo illustra le best practice per il rendimento che puoi utilizzare durante il caricamento degli incorporamenti di terze parti, le tecniche di caricamento efficienti e lo strumento Layout Shift Terminator che aiuta a ridurre le variazioni del layout per gli incorporamenti più diffusi.

Che cos'è un incorporamento

Un incorporamento di terze parti è qualsiasi contenuto visualizzato sul tuo sito che:

• Non è stato creato da te
• Viene pubblicato da server di terze parti

Gli incorporamenti vengono utilizzati di frequente nei seguenti casi:

• I siti web relativi a sport, notizie, intrattenimento e moda utilizzano i video per aumentare i contenuti testuali.
• Le organizzazioni con account Twitter o di social media attivi incorporano i feed di questi account nelle loro pagine web per coinvolgere e raggiungere un maggior numero di persone.
• Le pagine di ristoranti, parchi e sedi di eventi spesso incorporano le 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 recupera una pagina composta da markup, script e fogli di stile. Alcuni fornitori utilizzano anche uno snippet di script che inserisce dinamicamente un <iframe> per recuperare altri contenuti. In questo modo, gli incorporamenti di terze parti possono diventare pesanti e influire sul rendimento della pagina ritardando i contenuti proprietari.

Impatto sul rendimento degli incorporamenti di terze parti

Molti incorporamenti diffusi includono oltre 100 KB di JavaScript, a volte anche fino a 2 MB. Richiedono più tempo per il caricamento e mantengono il thread principale occupato durante l'esecuzione. Gli strumenti di monitoraggio del rendimento come Lighthouse e Chrome DevTools aiutano a misurare l'impatto degli incorporamenti di terze parti sul rendimento.

L'audit Lighthouse "Riduci l'impatto del codice di terze parti" mostra l'elenco dei fornitori di terze parti utilizzati da una pagina, con le dimensioni e il tempo di blocco del thread principale. L'audit è disponibile tramite Chrome DevTools nella scheda Lighthouse.

È una buona pratica controllare periodicamente l'impatto sul rendimento degli incorporamenti e del codice di terze parti, perché il codice sorgente dell'incorporamento potrebbe cambiare. Puoi utilizzare questa opportunità per rimuovere qualsiasi codice ridondante.

Best practice per il caricamento

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 ridurre il loro impatto sul rendimento, segui queste linee guida.

Ordine degli script

In una pagina ben progettata, i contenuti proprietari principali saranno il fulcro della pagina, mentre gli incorporamenti di terze parti occuperanno le barre laterali o verranno visualizzati dopo i contenuti proprietari.

Per un'esperienza utente ottimale, i contenuti principali devono essere caricati rapidamente e prima di qualsiasi altro contenuto di supporto. Ad esempio, il testo delle notizie in una pagina di notizie deve essere caricato prima degli incorporamenti di un feed di Twitter o degli annunci.

Le richieste di incorporamenti di terze parti possono ostacolare il caricamento dei contenuti proprietari, quindi la posizione di un tag di script di terze parti è importante. Gli script possono influire sulla sequenza di caricamento perché la costruzione del DOM si interrompe durante l'esecuzione degli script. Inserisci i tag script di terze parti dopo i tag proprietari principali e utilizza async o defer attributi 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 in genere 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 può essere posticipato finché l'utente non scorre verso il basso fino a quella parte della pagina. In questo modo, non solo si ottimizza il caricamento iniziale della pagina, ma si riducono anche i costi di download per gli utenti con piani dati fissi e connessioni di rete lente.

Il ritardo del caricamento dei contenuti fino a quando non sono effettivamente necessari è chiamato caricamento lento. A seconda dei requisiti e del tipo di incorporamento, puoi utilizzare tecniche di caricamento lento diverse.

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 posticipare il caricamento degli iframe fuori schermo finché gli utenti non scorrono nelle loro vicinanze. 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 posticipare il caricamento dell'iframe. Il browser caricherà l'iframe quando si avvicina all'area visibile. Utilizza questo attributo se l'iframe è un buon candidato per il caricamento lento.
• eager: carica immediatamente l'iframe. Utilizza questo attributo se l'iframe non è un buon candidato per il caricamento lento. Se l'attributo loading non è stato specificato, questo è il comportamento predefinito, tranne in modalità Lite.
• auto: il browser determina se caricare lentamente questo frame.

I browser che non supportano l'attributo loading lo ignorano, quindi puoi applicare il caricamento lento a livello di browser come potenziamento progressivo. I browser che supportano l'attributo potrebbero avere implementazioni diverse per la soglia di distanza dall'area visibile (la distanza alla quale l'iframe inizia a caricarsi).

Di seguito sono riportati alcuni modi in cui puoi caricare lentamente gli iframe per diversi tipi di incorporamenti.

• Video di YouTube: per caricare lentamente un iframe del video player di YouTube, includi l'attributo loading nel codice di incorporamento fornito da YouTube. Il caricamento lento dell'incorporamento di YouTube può consentire di risparmiare circa 500 KB durante il 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 caricare lentamente un iframe di Google Maps, includi l'attributo loading nel codice per l'incorporamento dell'iframe generato dall'API 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 lazysizes

Poiché i browser utilizzano la distanza di un incorporamento dall'area visibile, oltre a indicatori come tipo di connessione efficace e modalità Lite, per decidere quando caricare un iframe, il caricamento lento del browser può essere incoerente. Se hai bisogno di un maggiore controllo sulle soglie di distanza o vuoi fornire un'esperienza di caricamento lento coerente tra 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. Dopo aver scaricato il componente, puoi utilizzarlo con un iframe per un incorporamento di YouTube come segue.

<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>

Allo stesso modo, lazysizes può essere utilizzato con gli iframe per altri incorporamenti di terze parti.

Tieni presente che lazysizes utilizza 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. Sono inclusi post, commenti, video e il pulsante Mi piace più diffuso. Tutti i plug-in includono un'impostazione per data-lazy. Se lo imposti 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 il rendimento, poiché l'incorporamento può avere una dimensione compressa di oltre 100 KB. Molti plug-in di Instagram per i siti WordPress, come WPZoom ed Elfsight, forniscono l'opzione di caricamento lento.

Sostituzione degli incorporamenti con facciate

Sebbene gli incorporamenti interattivi aggiungano valore alla pagina, molti utenti potrebbero non interagire con essi. Ad esempio, non tutti gli utenti che navigano in una pagina di un ristorante fanno clic, espandono, scorrono e navigano nell'incorporamento della mappa. Allo stesso modo, non tutti gli utenti che visitano la pagina di un fornitore di servizi di telecomunicazioni interagiscono con il chatbot. In questi casi, puoi evitare di caricare o caricare lentamente l'incorporamento visualizzando una facciata al suo posto.

Una facciata è un elemento statico simile all'incorporamento di terze parti effettivo, ma non è funzionale e, pertanto, è molto meno impegnativo per il caricamento della pagina. Di seguito sono riportate alcune strategie per caricare questi incorporamenti in modo ottimale, fornendo al contempo un certo valore all'utente.

Utilizzo di immagini statiche come facciate

Le immagini statiche possono essere utilizzate al posto degli incorporamenti delle mappe quando non è necessario rendere interattiva la mappa. Puoi ingrandire l'area di interesse sulla mappa, acquisire un'immagine e utilizzarla 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 convertirla in formato WebP per un rendimento migliore.

Utilizzo di immagini dinamiche come facciate

Questa tecnica consente di generare immagini corrispondenti a un incorporamento interattivo in fase di runtime. Di seguito sono riportati alcuni degli strumenti che consentono di generare versioni statiche degli incorporamenti nelle tue pagine.

• API Maps Static: il servizio Google API Maps Static genera una mappa in base ai parametri URL inclusi in una richiesta HTTP standard e restituisce la mappa 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 attributo src.

  Lo strumento Static map maker 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 per un'immagine con l'origine impostata su un URL dell'API Maps Static. È stato incluso in un tag link che garantisce che la mappa effettiva sia accessibile facendo clic sull'immagine. (Nota: l'attributo della 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: simile agli screenshot delle mappe, questo concetto 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.

Utilizzo di click-to-load per migliorare le facciate

Il concetto di click-to-load combina il caricamento lento e le facciate. La pagina viene caricata inizialmente con la facciata. Quando l'utente interagisce con il segnaposto statico facendo clic su di esso, viene caricato l'incorporamento di terze parti. Questa operazione è nota anche come pattern di importazione in base all'interazione e può essere implementata seguendo questi passaggi.

1. Al caricamento pagina: la facade o l'elemento statico è incluso nella pagina.
2. Al passaggio del mouse: la facciata si connette in anticipo al fornitore dell'incorporamento di terze parti.
3. Al clic: la facciata viene sostituita dal prodotto di terze parti.

Le facciate possono essere utilizzate con gli incorporamenti di terze parti per i video player, i widget di chat, i servizi di autenticazione e i widget dei 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 una facciata click-to-load personalizzata utilizzando il pattern importa in base all'interazione o 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 sembra il player reale ma è 224 volte più veloce. Può essere utilizzato scaricando lo script e il foglio di stile e poi utilizzando il <lite-youtube> tag in HTML o JavaScript. I parametri del player personalizzati 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.

  

  

  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

  React live chat loader carica un pulsante simile a un incorporamento di chat anziché l'incorporamento stesso. Può essere utilizzato con varie piattaforme di fornitori 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 di chat effettivo quando l'utente passa il mouse sopra o fa clic sul pulsante o se la pagina è inattiva da molto tempo. Il case study di Postmark spiega come hanno implementato react-live-chat-loader e i miglioramenti del rendimento ottenuti.

  

Rimuovere o sostituire gli incorporamenti con i link

Se noti che alcuni incorporamenti di terze parti comportano un rendimento di caricamento scadente e l'utilizzo di una delle tecniche descritte in precedenza non è un'opzione, la cosa più semplice che puoi fare è rimuovere completamente l'incorporamento. Se vuoi comunque che i tuoi utenti possano accedere ai contenuti dell'incorporamento, puoi fornire un link 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 il rendimento di caricamento di una pagina, a volte può causare spostamenti imprevisti dei contenuti della pagina. Questo fenomeno è noto come variazione del layout.

Poiché la stabilità visiva è importante per un'esperienza utente fluida, Cumulative Layout Shift (CLS) misura la frequenza e l'impatto di queste variazioni.

Le variazioni del layout possono essere evitate 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 riservare se conosce la larghezza e l'altezza degli elementi. Puoi assicurarti che ciò avvenga specificando gli attributi width e height degli iframe o impostando 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 la larghezza e l'altezza specificate come segue.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

Gli incorporamenti più diffusi come YouTube, Google Maps e Facebook forniscono il codice di incorporamento con gli attributi di dimensione specificati. Tuttavia, alcuni fornitori potrebbero non includerli. 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 ispezionare l'iframe inserito dopo il rendering di questa 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 in modo che il contenitore non si espanda durante il caricamento del feed e non si verifichi alcuna variazione del layout. Il seguente snippet può essere utilizzato 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>

Layout Shift Terminator

Poiché gli incorporamenti di terze parti spesso omettono le dimensioni (larghezza, altezza) dei contenuti finali di cui eseguono il rendering, possono causare variazioni significative del layout di una pagina. Questo problema può essere difficile da risolvere senza ispezionare manualmente le dimensioni finali utilizzando DevTools in una varietà di dimensioni dell'area visibile diverse.

Ora è disponibile uno strumento automatizzato, Layout Shift Terminator, che può aiutarti a ridurre le variazioni del layout degli incorporamenti più diffusi, ad esempio di Twitter, Facebook e altri fornitori.

Layout Shift Terminator:

• Carica l'incorporamento lato client in un iframe.
• Ridimensiona l'iframe a varie dimensioni dell'area visibile più diffuse.
• Per ogni area visibile più diffusa, acquisisce le dimensioni dell'incorporamento per generare in un secondo momento query supporti e query container.
• Dimensiona un wrapper min-height attorno al markup dell'incorporamento utilizzando query supporti (e query container) finché l'incorporamento non viene inizializzato (dopo di che gli stili min-height 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 feedback su il progetto GitHub di Layout Shift Terminator. Lo strumento è in versione beta e mira a migliorare nel tempo con ulteriori perfezionamenti.

Conclusione

Gli incorporamenti di terze parti possono fornire molto valore agli utenti, ma man mano che il numero e le dimensioni degli incorporamenti in una pagina aumentano, il rendimento può risentirne. Per questo motivo, è necessario misurare, valutare e utilizzare strategie di caricamento appropriate per gli incorporamenti in base alla loro posizione, pertinenza e alle potenziali esigenze degli utenti.