3rd party code affecting score

[derekoakley]

Hi, we have iframes above the fold that load YouTube videos and such like and it affects our score. Currently they fire at DOMContentLoaded tho wonder if there is a better way or a method for dealing with 3rd party content that is outside of our control?

[midzer]

If your iframes don't block initial render and are lazy loaded correctly, they definitely should not affect your performance score.

You can implement lazy loading via IntersectionObserver API for yourself or use existing libraries like https://github.com/ApoorvSaxena/lozad.js for example.

[derekoakley]

For sure tho if it's in the viewport (above the fold) it will render anyway? In our score it shows YouTube as being the largest network payload w/ base.js at 423Kb.

[derekoakley]

Or does lighthouse account for intersection observer entries differently?

[midzer]

Yes, your iframe will render above the fold in any case. But you can reduce time for First meaningful paint by lazy loading it and thus not blocking any initial render resulting in higher score.

You don't need to use IntersectionObserver for this task to fullfill. But this modern API comes quite handy in this case, as you don't want to use a costly onscroll handler for your elements to detect when they enter viewport.

[derekoakley]

Absolutely intersection observer FTW; I use it a lot already including our own viewport analytics

[derekoakley]

I guess my question should be does the Performance, Diagnostics section: enormous network payloads affect the performance score?

[midzer]

This issue goes into account for sure as well.

[patrickhulce]

Thanks for filing @derekoakley! Few things...

I guess my question should be does the Performance, Diagnostics section: enormous network payloads affect the performance score?

Only the metrics affect your performance score, so if you can do well on those then you're 💯. The opportunities/diagnostics are just there to help you diagnose what's going on and find easy room for improvement.

Currently they fire at DOMContentLoaded tho wonder if there is a better way or a method for dealing with 3rd party content that is outside of our control?

As @midzer has said, if the content isn't critical then you can defer their load until a later time when the user has interacted with the page. Time To Interactive waits until there has been 5s of network and CPU quiet, so whatever lazy load mechanism you use would need to wait until after that point to not affect TTI.

If they're a critical part of your page though and you cannot defer their loading, there's not much you can do to avoid them impacting the metrics. We've gotten this feedback a lot and are exploring ways to better surface the impact of 3rd parties on the ecosystem.

[derekoakley]

It's interesting that you specify 5s of network and CPU quiet as using load and DOMContentLoaded events to defer loading still result w/ YouTube code appearing in the performance network payload. It's also funny that the general drive at the moment is that we ship less js and YouTube appears to send over 420kb when embedded in a iframe 😄

[midzer]

@derekoakley If it's your content anyway, why not self-host and include it as HTML5 <video> with preload="metadata". This way only necessary bits like preview image for video are transfered.

[derekoakley]

@midzer sadly it's not and we have to support various platforms that our customers use

[paulirish]

duping into #4516