1272635 - Manifesto page load makes over 100 HTTP requests

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Alex Gibson [:agibson]]

https://www.mozilla.org/en-US/about/manifesto/

The manifesto page feels quite slow to load at times, mainly due to all the image requests. Each background 'face' is an individual image, and requires it's own HTTP request. We could probably improve performance here quite a bit, and swap out the image loading plugin for a simple image sprite.

I don't think many users would notice if the faces don't change over time, as it's pretty subtle anyway. We could still randomize the order on page load pretty easily (like we do on the home page).

Comment 1

[Kohei Yoshino [:kohei]]

Because we have switched to HTTP/2, the number of requests doesn't matter maybe. I guess changing the initial state background colour from black to transparent will improve the UX. I thought it was specified in the jQuery plug-in.

Comment 2

[Alex Gibson [:agibson]]

(In reply to Kohei Yoshino [:kohei] from comment #1)
> Because we have switched to HTTP/2, the number of requests doesn't matter
> maybe. I guess changing the initial state background colour from black to
> transparent will improve the UX. I thought it was specified in the jQuery
> plug-in.

Yeah, but HTTP/2 support isn't that broad quite yet - especially on mobile. Loading all the images via JS is probably a good cause for the slowness too, which we can probably mitigate.

Comment 3

[Kohei Yoshino [:kohei]]

The mosaic on https://www.mozilla.org/en-US/about/ and https://www.mozilla.org/en-US/mission/ has the same issue. Let's find a better jQuery plugin or create a new one for image sprite :)

Comment 4

[Alex Gibson [:agibson]]

Yeah, we could tackle those as separate bugs, but I'd be happy to remove the plugin from mozorg entirely since it's quite old and not very performant.

Comment 5

[Alex Gibson [:agibson]]

For the manifesto page I'd like to think we can find something that works that's not JS dependent. For the other pages that might be slightly more tricky since it's variable width.

Comment 6

[Craig Cook (:craigcook)]

I expect the /about and /mission pages will be among the first ones redesigned in the near future. I'm all in favor of just removing the whole mosaic for a quick and easy performance gain, possibly replacing it with a static image or nothing at all. We should run this by jbertsch and mham and file a separate bug for those pages.

Comment 7

[Jennifer Bertsch [:jbertsch]]

(In reply to Craig Cook (:craigcook) from comment #6)
> I expect the /about and /mission pages will be among the first ones
> redesigned in the near future. I'm all in favor of just removing the whole
> mosaic for a quick and easy performance gain, possibly replacing it with a
> static image or nothing at all. We should run this by jbertsch and mham and
> file a separate bug for those pages.

+1 to a static image for the next few months to solve for the performance problem

Comment 8

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/8e05a211091cb7ebb43e32c06bc9154e73112b6a
[bug 1272635] Update header on /about and /mission pages

* Replace the mosaic with a single image
* Update newsletter form on /mission
* Some format cleanup and minor fixes

https://github.com/mozilla/bedrock/commit/ae008c29d6f6d9ae47cda44a70b2c4a48757e85e
Merge pull request #4298 from craigcook/bug-1272635-about-header

[bug 1272635] Update header on /about and /mission pages

Comment 9

[Craig Cook (:craigcook)]

Attachment: Github pull request https://github.com/mozilla/bedrock/pull/4325

Comment 10

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/107320c4e1c6df368592b9ed26cd564f243cc785
[fix bug 1272635] replace manifesto mosaic with static images

and delete mosaic assets

https://github.com/mozilla/bedrock/commit/03318058f4709cc788de55d076744ebc9bbb903d
Merge pull request #4325 from craigcook/bug-1272635-manifesto-mosaic

[fix bug 1272635] replace manifesto mosaic with static images