Le risorse di terze parti vengono 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 può rallentare inutilmente il caricamento della pagina. Se i contenuti di terze parti non sono fondamentali, questo costo in termini di prestazioni può essere ridotto caricandoli in modalità differita.
Questo controllo evidenzia gli incorporamenti di terze parti che possono essere caricati in modo differito in base all'interazione. In questo caso, al posto dei contenuti di terze parti viene utilizzata una facciata finché l'utente non interagisce con questi contenuti.
Come Lighthouse rileva gli incorporamenti di terze parti differibili
Lighthouse cerca prodotti di terze parti che possono essere posticipati, come widget di pulsanti social o incorporamenti di video (ad esempio, il player incorporato di YouTube).
I dati sui prodotti differibili e sulle facciate disponibili sono gestiti in third-party-web.
Il controllo non riesce se la pagina carica risorse appartenenti a uno di questi incorporamenti di terze parti.
Rimandare terze parti con un facade
Anziché aggiungere un incorporamento di terze parti direttamente al codice HTML, carica la pagina con un elemento statico simile all'incorporamento di terze parti effettivo. Il pattern di interazione dovrebbe essere simile al seguente:
- Al caricamento: aggiungi la facciata alla pagina.
- Al passaggio del mouse: il facade si connette in anticipo alle risorse di terze parti.
- Al clic: la facciata viene sostituita dal prodotto di terze parti.
Facciate consigliate
In generale, gli incorporamenti video, i widget dei pulsanti dei social e i widget di chat possono utilizzare il pattern facciata. Quando scegli una facciata, tieni conto dell'equilibrio tra le dimensioni e il set di funzionalità.
L'elenco seguente offre i nostri consigli sulle facciate open source. Puoi anche utilizzare un caricatore di iframe pigro, ad esempio vb/lazyframe.
Player incorporato di YouTube
Player incorporato di Vimeo
Chat live (Intercom, Drift, Help Scout, Facebook Messenger)
Scrivere la propria facciata
Puoi scegliere di creare una soluzione di facciata personalizzata che utilizza il pattern di interazione descritto in precedenza. La facciata deve essere molto più piccola rispetto al prodotto di terze parti posticipato e deve includere solo il codice sufficiente a imitare l'aspetto del prodotto.
Se vuoi che la tua soluzione venga inclusa nell'elenco, consulta la procedura di invio.
Risorse
Codice sorgente per l'audit Carica risorse di terze parti tramite caricamento lento con i facade.