Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avoid enormous network payloads WordPress description #5

Open
chrisblakley opened this issue Jan 31, 2019 · 5 comments
Open

Avoid enormous network payloads WordPress description #5

chrisblakley opened this issue Jan 31, 2019 · 5 comments

Comments

@chrisblakley
Copy link
Contributor

I made a comment in the spreadsheet, but I felt like it might be worth more of a discussion–

Typically when I run into the Avoid enormous network payloads detection in Lighthouse it's usually due to the content manager using overly large images or embedded videos.

The WordPress Description currently recommends reducing the number of posts and using excerpts which certainly wouldn't be a bad suggestion, but I think that would have more of an affect on TTFB unless there were many images within each post being queried.

Perhaps we could mention something about avoiding large images and large videos– possibly even recommending videos be hosted on services like Youtube to reduce their footprint on initial load? In my pull request I did add a note to avoid Full Size images in the WYSIWYG unless they are adequately sized. This could be relevant here too.

@housseindjirdeh
Copy link
Contributor

This sounds good to me. Reducing payload sizes is a pretty broad statement to begin with, but if large images/videos is a common culprit within WordPress - I think we can change the text up a bit to focus on that instead.

CC @westonruter

@webtrainingwheels
Copy link
Contributor

webtrainingwheels commented Feb 4, 2019

According to : https://developers.google.com/web/tools/lighthouse/audits/network-payloads
The trigger size for this warning is 1600KB. Would be helpful for the message to state that.

Something like:
Your total page size exceeds 1600KB. Reduce the number of images and videos on this page. Consider displaying fewer posts/products per page if they each have an associated image, and minimize the use of sliders. Compress images and videos to reduce individual file sizes.

possibly even recommending videos be hosted on services like Youtube to reduce their footprint on initial load?

This could have different downsides. Maybe it's safer to focus on reducing the page size?

@westonruter
Copy link

The culprit could be identified by Lighthouse, could it not? Lighthouse could have different messages for huge HTML documents vs documents that have huge images/videos, or both.

@housseindjirdeh
Copy link
Contributor

So the current LH audit already provides a list of network payloads in descending order of size:

screen shot 2019-02-04 at 1 52 23 pm

And the Learn More link already directs readers to a reference article that covers different ways they can fix this (defer, compress, cache, etc...)

I'm assuming this was the reason why the current audit description is pretty broad to begin with. So on second thought, should we just omit the WordPress description entirely unless there's something pretty WordPress-specific to add?

What do you all think?

@webtrainingwheels
Copy link
Contributor

webtrainingwheels commented Feb 4, 2019

It's really important that WordPress-specific messaging takes into account the fact that many WordPress site owners using Google PageSpeed are NOT developers. So the wording has to be user-friendly in addition to being WordPress-specific.

By and large, the average WordPress user will not understand the terminology "network payload".

It's a good point that the specific files are listed in order of size. Would suggest the following tweak to my original proposal:

Your total page size exceeds 1600KB. Reduce the number of images and videos on this page. Consider displaying fewer posts/products per page if they each have an associated image, and minimize the use of sliders. Compress images and videos to reduce individual file sizes, starting with the largest files listed below.

And the Learn More link already directs readers to a reference article that covers different ways they can fix this (defer, compress, cache, etc...)

The PageSpeed/lighthouse docs are not WordPress-specific and not really that user-friendly in many cases :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants