Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to e from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as unused JS in the report?

Iframe API:

Large file that gets flagged on PageSpeedInsights as unused JS: .vflset/en_US/base.js

Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to e from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as unused JS in the report?

Iframe API: https://developers.google./youtube/iframe_api_reference

Large file that gets flagged on PageSpeedInsights as unused JS: https://www.youtube./s/player/c88a8657/player_ias.vflset/en_US/base.js

• javascript
• youtube
• youtube-iframe-api
• pagespeed-insights

3 Answers 3

If you want to fix it with just HTML you can setup the embed to load when the video clicked using the srcdoc attribute.

You basically write an HTML link inside the attribute and the video won't load until the link inside srcdoc is clicked.

Here's an example:

<!-- Reference: https://vumbnail./examples/srcdoc-iframe-for-lighthouse -->
<iframe
    srcdoc="
        <style>
            body, .full {
                width: 100%;
                height: 100%;
                margin: 0;
                position: absolute;
                display: flex;
                justify-content: center;
                object-fit: cover;
            }
        </style>
        <a
            href='https://www.youtube./embed/Q-X_ED4LHrQ?autoplay=1'
            class='full'
        >
            <img
                src='https://vumbnail./Q-X_ED4LHrQ.jpg'
                class='full'
            />
            <svg
                version='1.1'
                viewBox='0 0 68 48'
                width='68px'
                style='position: relative;'
            >
                <path d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z' fill='#f00'></path>
                <path d='M 45,24 27,14 27,34' fill='#fff'></path>
            </svg>
        </a>
    "
    style="max-width: 640px; width: 100%; aspect-ratio: 16/9;"
    frameborder="0"
></iframe>

It can be a bit clunky to write HTML inside an attribute but it gets the job done.

If you don't want to have to go in and replace all the YouTube IDs I wrote a simple builder here: https://vumbnail./embed-builder

If a script is listed under the "Remove Unused Javascript" tab, it doesn't mean the entire script is unused, it means a certain amount of the script's code isn't doing anything on the page.

The algorithm for finding unused code isn't perfect either, I often see scripts that aren't used at all on a page having some sort amount of used code according to google.

The "Remove Unused Javascript" should really be taken with a pinch of salt, and in cases of plugins, like youtube's API, it should be ignored since you can't edit a external API to be more efficient.

In your case, the file is very much needed if your using an embedded Youtube video. If you want to optmize how you load your Youtube video, consider lazyloading it.

I have been looking for 2 days to find a way to download YouTube videos, and I found out that this file is really important, because it loads all video/audio files: