Le risorse di terze parti vengono spesso utilizzate per mostrare annunci o video e per l'integrazione con i social media. L'approccio predefinito è 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 critici, il costo delle 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 essa.
In che modo Lighthouse rileva gli elementi incorporati di terze parti differibili
Lighthouse cerca i prodotti di terze parti che possono essere differiti, ad esempio i widget dei pulsanti social o gli incorporamenti di video (ad esempio il player incorporato di YouTube).
I dati relativi ai prodotti posticipabili e alle facciate disponibili sono gestisci in third-party-web.
Il controllo non va a buon fine se la pagina carica risorse appartenenti a uno di questi elementi incorporati 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 che assomiglia a quello della terza parte incorporata effettivamente. Il pattern di interazione dovrebbe avere il seguente aspetto:
- Al caricamento: aggiungi la facciata alla pagina.
- Al passaggio del mouse: l'interfaccia si precollega a risorse di terze parti.
- Al clic: l'interfaccia si sostituisce con il prodotto di terze parti.
Facciate consigliate
In generale, gli elementi incorporati dei video, i widget dei pulsanti social e i widget di chat possono tutti utilizzare il pattern di facciata. Quando scegli un'interfaccia, considera l'equilibrio tra le dimensioni e l'insieme di caratteristiche.
Il seguente elenco offre i nostri consigli sulle facciate open source. Puoi anche utilizzare un caricatore iframe lento, ad esempio vb/lazyframe.
Player incorporato di YouTube
Player incorporato Vimeo
Chat dal vivo (Intercom, Drift, Help Scout, Facebook Messenger)
Scrivi la tua facciata
Puoi scegliere di creare una soluzione di facciata personalizzata che utilizzi il pattern di interazione descritto in precedenza. La facciata deve essere molto più piccola rispetto al prodotto di terze parti differito e includere solo codice sufficiente per 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.