question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Google Pagespeed Insights downloading both webm/mp4 formats (Avoid enormous network payloads)

See original GitHub issue

Provide the steps to reproduce

Use the tool at https://developers.google.com/speed/pagespeed/insights/ to measure an html page, where a similar code exists:

<video width="1800" height="700"  preload="auto" loop autoplay muted>
<source src="https://domain.com/home.webm" type="video/webm">
<source src="https://domain.com/home.mp4"  type="video/mp4">
</video>

What is the current behavior?

It downloads both the mp4 and webm formats (Google Chrome doesn’t do this, so it’s just an issue with the pagespeed insights tool). It triggers the “Avoid enormous network payloads” recommendation. http://prntscr.com/nk8hx3

What is the expected behavior?

It should only download the webm format and skip the mp4. There should be no “Avoid enormous network payloads” message, unless needed.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
geeworthingtoncommented, Feb 11, 2020

This issue/bug is still apparent.

I have a video running in the background / banner of my website homepage and I have two versions. A webm and an mp4. Google insights is detecting and penalizing my score (triggering the “Avoid enormous network payloads” warning) as it is downloading both?!

Has this bug resurfaced? Or am I doing something wrong that is blindingly obvious?!

I have almost idential markup as @peixotorms

<video loop="" autoplay="" muted="" playsinline="">
<source src="https://mysite.co.uk/myvideo.webm" type="video/webm">
<source src="https://mysite.co.uk/myvideo4.mp4" type="video/mp4">
</video>

Thanks in advance for any replies

1reaction
connorjclarkcommented, Sep 11, 2020

If you are still seeing this: please open a new issue and fill out the bug template. Most importantly, pleases provide a URL.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To “Avoid Enormous Network Payloads” In WordPress ...
In This Easy To Follow Guide We Show You How To Fix The “Avoid Enormous Network Payloads” On WordPress In Google PageSpeed Insights...
Read more >
How to Avoid Enormous Network Payloads - WP Rocket
Use Lighthouse (PageSpeed Insights or GTMetrix) to identify files causing enormous network payloads. PSI flags which file type (image, CSS, JS) needs your ......
Read more >
15 Ways to Avoid Enormous Network Payloads in WordPress
1. Enormous payloads means you need to reduce page size. Learn which individual files cause large network payloads in your PageSpeed report and...
Read more >
How to Avoid Enormous Network Payloads in WordPress
If you have just done a PageSpeed insights test and got the message to Avoid Enormous Network Payloads, this video will help you...
Read more >
8 Easy Ways to Avoid Enormous Network Payload in WordPress
When testing your website via Google page speed insights, it shows whether your size of the web page is good or not. A...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found