Le risorse di terze parti sono spesso utilizzate per la visualizzazione di annunci o video e l'integrazione con i social media. L'approccio predefinito consiste nel caricare le risorse di terze parti non appena viene caricata la pagina, ma questo potrebbe rallentare inutilmente il caricamento della pagina. Se i contenuti di terze parti non sono critici, questo costo relativo alle prestazioni può essere ridotto tramite il caricamento lento.
Questo controllo evidenzia gli incorporamenti di terze parti che possono essere caricati lentamente al momento dell'interazione. In questo caso, al posto dei contenuti di terze parti viene utilizzata una facciata finché l'utente non interagisce con essi.
In che modo Lighthouse rileva gli incorporamenti di terze parti differibili
Lighthouse cerca prodotti di terze parti che possono essere differiti, come i widget di pulsanti social o gli incorporamenti di video (ad esempio il player incorporato di YouTube).
I dati sui prodotti differibili e sulle facciate disponibili vengono conservati sul Web di terze parti.
Se la pagina carica risorse appartenenti a uno di questi incorporamenti di terze parti, il controllo non andrà a buon fine.
Come rimandare terze parti con un array
Invece di aggiungere un incorporamento di terze parti direttamente nel codice HTML, carica la pagina con un elemento statico simile all'effettivo elemento di terze parti incorporato. Il pattern di interazione dovrebbe essere simile al seguente:
Al caricamento: aggiungi overlay alla pagina.
Al passaggio del mouse: il preconnesso di facciata alle risorse di terze parti è attivo.
Al clic: il quadrante si sostituisce con il prodotto di terze parti.
Facciate consigliate
In generale, gli incorporamenti video, i widget per i pulsanti di social network e i widget di chat possono tutti utilizzare il pattern di visualizzazione. L'elenco che segue offre i nostri suggerimenti per le facciate open source. Quando scegli un'immagine, prendi in considerazione l'equilibrio tra le dimensioni e l'insieme di elementi. Puoi anche utilizzare un caricatore iframe lento, ad esempio vb/lazyframe.
Player incorporato di YouTube
Player Vimeo incorporato
Chat dal vivo (Intercom, Drift, Help Scout, Facebook Messenger)
Scrivere la propria facciata
Puoi scegliere di creare una soluzione di facciata personalizzata che utilizzi il modello di interazione descritto sopra. La facciata deve essere notevolmente più piccola rispetto al prodotto di terze parti differito e includere solo codice sufficiente a imitare l'aspetto del prodotto.
Se vuoi che la tua soluzione sia inclusa nell'elenco precedente, consulta la procedura di invio.
Risorse
Codice sorgente per il controllo del caricamento lento di risorse di terze parti con facciate.