582862 - Improve our YSlow! score (currently D, 67)

Status: VERIFIED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, defect)

Description

[Stephen Donner [:stephend] Not actively reading bugmail]

http://mdn.staging.mozilla.com/en-US/ gets a YSlow! score of "D" (67, ruleset 2).

YSlow! and Minify miss you, Ryan!

Quick, big takeaways:

* This page has 10 external Javascript [sic] scripts. Try combining them into one.
* This page has 13 external background images. Try combining them with CSS sprites.

Comment 1

[Stephen Donner [:stephend] Not actively reading bugmail]

Oh, and:

* compress assets using gzip
* add expires headers

(Only added you, Ryan, in case someone picks this up and needs help; not expecting you to fix it.)

Comment 2

[Ryan Doherty (:rdoherty)]

Yes, *please* work on performance before launch. 

You can use the Minify library to easily concatenate, minify and gzip css & js: http://code.google.com/p/minify/

Spriting all the icons would be very helpful.

Some of the larger images that are jpgs could be compressed more.

Webpagetest.org results: http://www.webpagetest.org/result/100729_21K5/

There's a lot of pretty simple and easy stuff that can be done (gzip, contact, expires) that will make the site really fast.

Comment 3

[Jay Patel [:jay]]

Making blocker.  Let's make sure to do everything we can to make the new site snappy.

Comment 4

[Ryan Doherty (:rdoherty)]

(In reply to comment #3)
> Making blocker.  Let's make sure to do everything we can to make the new site
> snappy.

Yay, thanks!

Comment 5

[Fred Wenzel [:wenzel]]

We are using the minify library (in its django incarnation) already. Staging is just set to TEMPLATE_DEBUG at the moment, so it doesn't use the minified assets. We could have IT change that and run ``./manage.py compress_assets`` on update.

CCing Craig, who'll probably help out with the spritification.

Comment 6

[Jay Patel [:jay]]

Fred:  Is this something you can own so we get it done before launch?

Comment 7

[Craig Cook (:craigcook)]

(In reply to comment #5)
> CCing Craig, who'll probably help out with the spritification.

I'll sprite everything that's sensibly spritable (especially the icons) and I can crunch the JPEGs down a bit more without sacrificing quality.

Comment 8

[Fred Wenzel [:wenzel]]

(In reply to comment #7)
> (In reply to comment #5)
> > CCing Craig, who'll probably help out with the spritification.
> 
> I'll sprite everything that's sensibly spritable (especially the icons) and I
> can crunch the JPEGs down a bit more without sacrificing quality.

Yes, thanks in advance for doing that. Feel free to just commit that to the main repository.

I'll file an IT bug to have them minify assets on staging already, so staging gets closer to what prod will be like.

Comment 9

[Fred Wenzel [:wenzel]]

All right, minification is enabled on staging. Over to Craig for the sprites, and then we are probably good for now.

Comment 10

[Craig Cook (:craigcook)]

Sprited what was readily spritable and compressed some other images a bit more. The total byte savings is pretty good but the sprites will definitely cut down on the HTTP hits.

Comment 11

[Fred Wenzel [:wenzel]]

We have a C grade now, 76. We're not going to use a CDN for now, but expires headers and gzip make sense.

CCing Shyam: Do you guys usually set that up as part of a production server config? I don't think it's something for us to fix code-side? Also, do we need to make sure this happens when we push to production, or do you usually use a config boilterplate that already applies gzip to certain MIME types and perhaps far-future expires headers?

Comment 12

[Jay Patel [:jay]]

bumping to 0.9.1 since this was supposed to be fixed in 0.9.0

Comment 13

[Austin King [:ozten]]

We're up to a B grade now!

We should track this and make incremental improvement.
Future release - Bug#607658

Comment 14

[Stephen Donner [:stephend] Not actively reading bugmail]

Attachment: Post-fix screenshot

Comment 15

[Stephen Donner [:stephend] Not actively reading bugmail]

qa-verified-staging

Comment 16

[raymond [:retornam] (inactive)]

qa-verified-staging 
http://gtmetrix.com/reports/developer-stage9.mozilla.org/99JFFyVu
YSlow Grade C 79%
PageSpeed Grade B 89%

Comment 17

[raymond [:retornam] (inactive)]

verified fixed on production 
http://gtmetrix.com/reports/developer.mozilla.org/yi8gwbE0
Yslow Grade B 81%

PageSpeed  Grade B 85%