Page MenuHomePhabricator

wikimediafoundation.org main page requires first world bandwidth and data plan
Closed, ResolvedPublic

Description

The main page directly goes against the WMF alleged strategical priorities by requiring users to download a whopping 10 MB:
https://www.webpagetest.org/result/180802_D9_eb62a50486388d20e6fa2d77cbae87d5/

Event Timeline

Seems like there's a lot of room to optimize the images. Even in the US outside big cities one is likely to have too slow/expensive a connection for 10mb page loads.

I'm not sure the title of this is accurate, while initially I thought that perhaps it was a lot of resources, I ran a Lighthouse Audit and even when throttled to a "Fast 3G Connection" (which, tbf, is probably faster than most people have, I don't have any data though) the homepage receives a top score (on desktop and mobile). The audit does however give opportunities for improvements without changing the design (i.e. using next-generation image formats, making the site offline-first, increasing the cache length, etc.)

I suppose it would be helpful to better define the problem... is it the amount of data or the performance that is the problem? Those two problems might have different solutions (although there is some overlap).

I'm also not sure how these numbers are being calculated, the most I can get up to (on desktop, no cache) is 3.49 MB on Firefox and 3.2 MB on Chrome. For context, this article https://en.wikipedia.org/wiki/Universe transfers 7.88 MB on Firefox and 7.8 MB on Chrome.

@dbarratt It does look like the biggest images have now been compressed reducing the page load from 10mb to just over 3mb. Thanks!

For context, this article https://en.wikipedia.org/wiki/Universe transfers 7.88 MB [..]

For the record, 81% of that 7.8 MB is actually from a single image created with a fairly odd syntax. Without that image (but leaving the 43 other images), the desktop version size totals at 1.5 MB only. (Chrome)

capture.png (1×1 px, 284 KB)

Looking at the mobile version (as-is, including the above non-standard image) size totals at 350 KB only, and reaches 2.5 MB after slowly scrolling from top to bottom for additional images, js, and html. (Chrome)

@dbarratt It does look like the biggest images have now been compressed reducing the page load from 10mb to just over 3mb. Thanks!

Indeed, or 3,570 KB for 47 requests: https://www.webpagetest.org/result/180808_13_2b42628ab0cafa14c5c0a40cdda7b514/1/details/

There's still room for some painless improvement with a little effort, for instance I see a PNG image which goes from 1500 to 150 KB when converted to JPEG at standard quality.

Note that Wordpress plugins exist to simplify such tasks, for instance https://wordpress.org/plugins/ewww-image-optimizer/ (GPLv3).

The new main page seems better, with "only" 2 MiB or so:
https://www.webpagetest.org/result/190710_6Q_70cdc76c717df9005fb6e07c38244118/

It still doesn't refrain from squandering most of its bandwidth on a single image which is over 1.3 MB compressed (3 uncompressed):
https://wikimediafoundation.org/wp-content/themes/shiro/assets/src/svg/header.svg

If you were in Zimbabwe, would you be happy to spend 5 % of your data allowance, whose cost is comparable to the average daily income, on a single visit to the WMF main page?

With https://jakearchibald.github.io/svgomg/ and zero precision in units (since it’s a whooping 14,000×1,400-wide image, they probably won’t make much difference) it’s possible to cut down the SVG file to 400 Kb, but I’d suggest throwing the image out entirely at least on mobile and for people preferring reduced motion.

We have made some adjustments and reduced the load to for the homepage to 1,227 KB and 723 KB to 178 KB for subpages.

We will continue to look at ways to trim things further.

For comparison sake (for observers less familiar with these numbers), here are some other sites within the movement:

hashar subscribed.

The website has been overhauled since that task got filled. running the webpagetest again against https://wikimediafoundation.org/ shows it has shrink notably https://www.webpagetest.org/result/190923_MH_b0eb7a98786a6b5fb4febe28cc041ae0/

The biggest objects unsurprisingly being images. Notably:

  • The few 64x64 thumbnails for the photo credits at the bottom are actually 250x250, I guess for high density displays. They are 40kB - 130kB which sounds reasonable.

To me the original concern has been addressed: the site has been overhauled and we no more serve the huge raw images that took mega bytes and mega bytes.

Indeed it's much better now, thank you. (And yes, the www.wikimedia.it home page is often terrible too, with outrageously big images.)