1566426 - The CSS on the Beta site uses base64 strings instead of image URLs

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: General, defect)

Description

[Peter Bengtsson [:peterbe]]

Attachment: Screen Shot 2019-07-16 at 9.05.17 AM.png

For example, on https://beta.developer.mozilla.org/en-US/docs/Learn we have;

• https://developer.mozilla.org/static/build/styles/react-mdn.5b7ff2245ae8.css - 209KB (69KB gzip)
• https://developer.mozilla.org/static/build/styles/locale-en-US.520ecdcaef8c.css - 1KB (524 B)

On https://developer.mozilla.org/en-US/docs/Learn we have;

• https://developer.mozilla.org/static/build/styles/mdn.0fe6d2a68b73.css - 67KB (14KB)
• https://developer.mozilla.org/static/build/styles/wiki.7361beee4864.css - 70KB (15KB)
• https://developer.mozilla.org/static/build/styles/locale-en-US.520ecdcaef8c.css - 1KB (524 B)

It's great that 3 requests become just 2 because you don't need any CSS related to CKeditor etc. But why is the new sum total 210KB (69.5KB) vs. 138KB (29.5KB). That's 2.3x larger amount of bytes that need to be transferred. (Browsers are fast to parse CSS so the (gzipped) network I/O is more important)

Comment 1

[Peter Bengtsson [:peterbe]]

Besides, the HTML document is much larger on the beta site due to all the inline <style> blocks that emotion yields in SSR.
The size difference is:

▶ ls -lh Learn*.html*
-rw-r--r--  1 peterbe  wheel   154K Jul 16 09:06 Learn.beta.html
-rw-r--r--  1 peterbe  wheel    36K Jul 16 09:06 Learn.beta.html.gz
-rw-r--r--  1 peterbe  wheel   109K Jul 16 09:06 Learn.original.html
-rw-r--r--  1 peterbe  wheel    28K Jul 16 09:06 Learn.original.html.gz

In other words, the Beta site is 8KB larger to download.

The beta site HTML uses 35 <style> blocks whose content (uncompressed) is 11KB (2.2KB). So, in total, you're downloading 69.5 + 2.2 KB of CSS on the beta site. (As opposed to 29.5 + 0 KB on the original)

Comment 2

[Peter Bengtsson [:peterbe]]

Attachment: bug1566426.diff

If you download the Beta CSS and the original CSS (combined into 1 file) and then pretty print them both equally. Then this diff is what you get.

Comment 3

[Peter Bengtsson [:peterbe]]

(In reply to Peter Bengtsson [:peterbe] from comment #2)

Created attachment 9078402 [details] [diff] [review]
bug1566426.diff

If you download the Beta CSS and the original CSS (combined into 1 file) and then pretty print them both equally. Then this diff is what you get.

This makes it easier to see: https://gist.github.com/peterbe/45dd5e0b2782fef71ebdbf512a72c3cc

And now I think I get it! base64 images!

Comment 4

[Peter Bengtsson [:peterbe]]

Actually, here's the difference of the selectors being used: https://gist.github.com/peterbe/2b2967f5591b08902b4af85db1b9d71e
Basically, it means there's a bunch of BCD related things. E.g.

.bc-head-icon-opera { ... }

is ONLY defined in the Beta site's CSS.

But it also means that the Beta site everything the old site had plus some more.

Comment 5

[Peter Bengtsson [:peterbe]]

By the way, now that we've established that the list of CSS selectors is pretty much the same on the wiki and beta site. If you compare its total CSS selectors compared to the selectors of the minimal CSS (aka. critical CSS) you get this:

https://gist.github.com/peterbe/a0f6d6167b461607de146cdf6dcd3e57

So if you want to make the CSS for the Beta site considerably smaller, manually, consider eye'ing through this list and start scutinizing. E.g. do we really need .wiki-promo-sauce-labs* ??

Comment 6

[Peter Bengtsson [:peterbe]]

Hmm. The total of all data URI strings, for a page like https://beta.developer.mozilla.org/en-US/, is only 53 KB. It's not a sneeze but it definitely is better to use image URLs.

Comment 7

[Peter Bengtsson [:peterbe]]

Hmm. There are some data URIs we're not easily going to get out of.
https://github.com/mozilla/kuma/blob/601ffa3987a808381d2636689e4b7fb951d7231c/kuma/static/styles/includes/_svg_data_uri_icons.scss
All of these ought to replaced with paths to .svg files and checked into git.

Comment 8

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5564

Comment 9

[Schalk Neethling [:espressive]]

(In reply to Peter Bengtsson [:peterbe] from comment #5)

By the way, now that we've established that the list of CSS selectors is pretty much the same on the wiki and beta site. If you compare its total CSS selectors compared to the selectors of the minimal CSS (aka. critical CSS) you get this:

https://gist.github.com/peterbe/a0f6d6167b461607de146cdf6dcd3e57

So if you want to make the CSS for the Beta site considerably smaller, manually, consider eye'ing through this list and start scutinizing. E.g. do we really need .wiki-promo-sauce-labs* ??

I have logged a tracker[https://bugzilla.mozilla.org/show_bug.cgi?id=1566695] and am starting down the road off finally improving this situation.

Comment 10

[Schalk Neethling [:espressive]]

(In reply to Peter Bengtsson [:peterbe] from comment #7)

Hmm. There are some data URIs we're not easily going to get out of.
https://github.com/mozilla/kuma/blob/601ffa3987a808381d2636689e4b7fb951d7231c/kuma/static/styles/includes/_svg_data_uri_icons.scss
All of these ought to replaced with paths to .svg files and checked into git.

I will take this on as part of https://bugzilla.mozilla.org/show_bug.cgi?id=1566695

Perhaps we need to file a bug and link it to the above?

Comment 11

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.