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ù popolari.

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 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 fondamentali per la rete e la larghezza di banda oppure influire sulle metriche di Segnali web essenziali. 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 di incorporamenti di terze parti, le tecniche di caricamento efficienti e lo strumento Terminatore di spostamento del layout, che consente di ridurre le variazioni del layout per gli incorporamenti più utilizzati.

Che cos'è un incorporamento

Per incorporamento di terze parti si intende qualsiasi contenuto visualizzato sul tuo sito che sia: * Non creato da te * Pubblicazione da server di terze parti

Gli incorporamenti vengono spesso utilizzati: * I siti web correlati a sport, notizie, intrattenimento e moda utilizzano i video per arricchire i contenuti testuali. * Le organizzazioni con account Twitter o di social media attivi incorporano feed da questi account nelle loro pagine web per coinvolgere e raggiungere più persone. * Le pagine relative a ristoranti, parchi e luoghi di eventi spesso incorporano mappe.

Gli incorporamenti di terze parti vengono generalmente 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 estrarre altri contenuti. Ciò potrebbe ostacolare gli incorporamenti di terze parti e influire sulle prestazioni della pagina ritardando i contenuti proprietari.

Impatto sul rendimento degli incorporamenti di terze parti

Molti incorporamenti popolari includono più di 100 kB di JavaScript, a volte fino a 2 MB. Il caricamento richiede più tempo e il thread principale rimane occupato durante l'esecuzione. Gli strumenti di monitoraggio delle prestazioni come Lighthouse e Chrome DevTools sono utili per misurare l'impatto degli incorporamenti di terze parti sulle prestazioni.

Riduci l'impatto del codice di terze parti. Il controllo di 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 norma controllare periodicamente l'impatto sulle prestazioni dei tuoi incorporamenti e del codice di terze parti, in quanto il codice sorgente incorporato potrebbe cambiare. Puoi sfruttare questa opportunità per rimuovere qualsiasi codice ridondante.

Caricamento delle best practice in corso...

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 le linee guida riportate di seguito.

Ordine degli script

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

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

Le richieste per gli incorporamenti di terze parti possono ostacolare il caricamento di 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 viene messa in pausa durante l'esecuzione degli script. Inserisci i tag di 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é solitamente i contenuti di terze parti sono posizionati dopo i contenuti principali, potrebbero non essere visibili nell'area visibile durante il caricamento della pagina. In questo caso, il download delle risorse di terze parti potrebbe essere differito finché l'utente non scorre la pagina verso il basso. Ciò 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 del download dei contenuti fino a quando non è effettivamente necessario viene chiamato caricamento lento. A seconda dei requisiti e del tipo di incorporamento, puoi utilizzare diverse tecniche di caricamento lento spiegate di seguito.

Caricamento lento nativo per <iframe>

Per gli incorporamenti di terze parti caricati tramite gli elementi <iframe>, puoi utilizzare il caricamento lento a livello di browser per rimandare il caricamento degli iframe fuori schermo finché gli utenti non scorrono le pagine vicino agli elementi. L'attributo di caricamento per <iframe> è disponibile in Chrome 77 e versioni successive ed è stato introdotto anche in altri browser basati su Chromium.

<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 è una buona candidata per il caricamento lento.
• eager: l'iframe viene caricato immediatamente. Da utilizzare se l'iframe non è un buon candidato per il caricamento lento. Se l'attributo loading non è stato specificato, si tratta del 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 nativo come miglioramento progressivo. I browser che supportano l'attributo potrebbero avere implementazioni diverse per la soglia distance-from-viewport (la distanza alla quale inizia il caricamento dell'iframe).

Di seguito sono riportati alcuni metodi per eseguire il caricamento lento degli iframe per diversi tipi di incorporamenti.

• Video di YouTube: per eseguire il caricamento lento dell'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 consente di 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 per l'incorporamento dell'iframe 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 lazysizes

Poiché i browser utilizzano la distanza dall'area visibile dell'incorporamento, oltre a indicatori come il tipo di connessione effettivo e la modalità Lite, per decidere quando caricare un iframe, il caricamento lento nativo può non essere coerente. Se hai bisogno di un controllo migliore sulle soglie di distanza o vuoi offrire un'esperienza di caricamento lento coerente nei vari browser, puoi utilizzare la libreria lazysize.

lazysizes è un caricatore lento rapido e ottimizzato per la SEO, sia per immagini che per iframe. Una volta scaricato il componente, puoi utilizzarlo con un iframe per un incorporamento di YouTube, come indicato 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 lazysize con iframe per altri incorporamenti di terze parti.

Tieni presente che il componente lazysize utilizza l'API Intersection Observationr 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 i post, i commenti, i video e il pulsante più popolare Mi piace. Tutti i plug-in includono un'impostazione per data-lazy. Se il criterio viene impostato su true, il plug-in utilizzerà il meccanismo di caricamento lento del browser mediante l'impostazione dell'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 poiché l'incorporamento può superare i 100 kB in formato compresso con gzip. Molti plug-in di Instagram per i siti WordPress come WPZoom ed Elfsight offrono l'opzione di caricamento lento.

Sostituire gli incorporamenti con facciate

Anche se gli incorporamenti interattivi aggiungono valore alla pagina, molti utenti potrebbero non interagire con essi. Ad esempio, non tutti gli utenti che esplorano la pagina di un ristorante faranno clic, espanderanno, scorreranno e navigheranno nella mappa incorporata. Analogamente, non tutti gli utenti della pagina dei fornitori di servizi di telecomunicazione interagiscono con il chatbot. In questi casi, puoi evitare di caricare o di eseguire il caricamento lento dell'incorporamento completamente mostrando un'immagine al suo posto.

Una facade è un elemento statico che somiglia all'effettiva terza parte incorporata, ma non funziona e, di conseguenza, molto meno gravoso per il caricamento della pagina. Di seguito sono riportate alcune strategie per caricare questi incorporamenti in modo ottimale, pur continuando a offrire un valore aggiunto all'utente.

Usa immagini statiche come facciate

Puoi utilizzare immagini statiche al posto degli incorporamenti di mappe, nei casi in cui potresti non aver bisogno di rendere la mappa interattiva. Puoi aumentare lo zoom sull'area di interesse della 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, come mostrato di seguito.

DevTools acquisisce l'immagine come png, ma puoi anche convertirla in WebP format for better performance.

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 degli strumenti che ti consentono di generare versioni statiche degli incorporamenti nelle tue pagine.

• API Maps Static: il servizio 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 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.

  Lo snippet seguente mostra il codice di un'immagine con l'origine impostata su un URL dell'API Maps Static. È stata inclusa in un tag link che garantisce che l'utente possa 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: analogamente agli screenshot delle mappe, questo concetto consente di incorporare dinamicamente uno screenshot di Twitter anziché il feed dal vivo. 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 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 i facciate

Il concetto di click-to-load combina caricamento lento e facciata. Inizialmente la pagina viene caricata con l'interfaccia. Quando l'utente interagisce con il segnaposto statico facendo clic su di esso, viene caricato l'incorporamento di terze parti. Questo è anche noto come pattern di importazione sull'interazione e può essere implementato seguendo questa procedura.

1. Al caricamento della pagina: nella pagina è incluso un elemento di facciata o statico.
2. Al passaggio del mouse: Facade si precollega al provider di incorporamento di terze parti.
3. Al clic: l'aspetto viene sostituito dal prodotto di terze parti.

Le facciate potrebbero 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 troviamo spesso. Il video effettivo viene caricato solo quando fai clic sull'immagine.

Puoi creare un Fronte personalizzato click-to-load utilizzando il pattern di importazione su interazione oppure utilizzare una delle seguenti facciate open source disponibili per diversi tipi di incorporamenti.

• Facciata di YouTube

  Lite-youtube-embed è un'opzione consigliata per il player di YouTube. L'aspetto è simile al player reale, ma è 224 volte più veloce. Per utilizzarlo, scarica lo script e il foglio di stile e quindi utilizza il tag <lite-youtube> in HTML o JavaScript. È possibile includere i parametri del player personalizzato supportati da YouTube 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 che assomiglia a un incorporamento in una chat invece che nell'incorporamento. Può essere utilizzato con varie piattaforme di provider di chat, come Intercom, Help Scout, Messenger e così via. Il widget simile è molto più leggero del widget della chat e si carica più velocemente. Può essere sostituito dal widget della chat vero e proprio 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 in che modo l'azienda ha implementato i miglioramenti di reazione e delle prestazioni ottenuti tramite chat live.

  

Rimuovere o sostituire gli incorporamenti con link

Se noti che alcuni incorporamenti di terze parti comportano un caricamento scarso delle prestazioni e l'utilizzo di una delle tecniche illustrate sopra 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 all'elemento 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 uno spostamento imprevisto dei contenuti della pagina. Questa operazione è nota come variazione del layout.

Poiché la stabilità visiva è importante per garantire un'esperienza utente fluida, Cumulative Layout Shift (CLS) misura la frequenza con cui si verificano queste variazioni e quanto sono invasivi.

Puoi evitare le variazioni del layout 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. Puoi verificarlo 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, la larghezza e l'altezza di un iframe per un incorporamento di YouTube devono essere specificate come segue.

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

Gli incorporamenti popolari come YouTube, Google Maps e Facebook forniscono il codice di incorporamento con gli attributi relativi alle dimensioni 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 gli elementi inseriti iframedopo il rendering di questa pagina. Come indicato nel seguente snippet, 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 al caricamento del feed e non ci sia 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>

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 di una pagina. Questo problema può essere difficile da risolvere senza esaminare manualmente le dimensioni finali utilizzando DevTools con varie dimensioni dell'area visibile.

Ora c'è uno strumento automatico, Layout Shift Terminator, che può aiutarti a ridurre le variazioni del layout dagli incorporamenti popolari, come quelli provenienti da Twitter, Facebook e altri provider.

Terminatore cambio layout:

• Carica il lato client incorporato in un iframe.
• Ridimensiona l'iframe in base alle dimensioni più usate per l'area visibile.
• Per ogni area visibile popolare, acquisisce le dimensioni dell'incorporamento per generare in un secondo momento query supporti e query contenitore.
• Ridimensiona un wrapper min-height intorno al markup per l'incorporamento utilizzando query supporti (e query container) fino all'inizializzazione dell'incorporamento (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 invia il tuo 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 in una pagina, le prestazioni possono risentirne. Ecco perché è necessario misurare, valutare e utilizzare strategie di caricamento appropriate per gli incorporamenti in base alla loro posizione, alla loro pertinenza ed alle esigenze dei potenziali utenti.