Perfect PageSpeed score with the help of mod_pagespeed - automation ftw!

[igrigorik]

Awesome work, love experiments like this! That said, I think you may have given up on mod_pagespeed too quickly :-)

Here's a slightly modified MPS config that gets you to 100 without any manual work:

ModPageSpeed on
ModPagespeedRewriteLevel CoreFilters
ModPagespeedEnableFilters prioritize_critical_css
ModPagespeedEnableFilters defer_javascript
ModPagespeedEnableFilters sprite_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments

Prioritize critical CSS and defer JavaScript are the two "workhorse" filters (just as you noted in your writeup), but they are disabled by default in MPS. After adding that and reloading the page a few times you should be looking at a perfect score! Here's my run:

For critical CSS the server beacons back the "above the fold" CSS, so keep in mind that you'll have to reload the page a few times before it begins to inline resources.

For more background on the different filters: https://developers.google.com/speed/pagespeed/module/config_filters

[danriti]

@igrigorik ahh, thanks for the feedback!

I experimented a bit with both prioritize_critical_css and defer_javascript, but they didn't seem to have any effect when I used them. So I gave up and went the manual route. Maybe I was using an older version of MPS?

I noticed that you add the ?d11 query parameter in your URL. Any reason why?

[igrigorik]

@danriti which version were you using? If you still have the site live somewhere I can take a look.

Ignore the "d11" query param, that was just me "cache busting" the PageSpeed Insights reports -- the results are cached by the web front end for a short time...

[danriti]

@igrigorik,

$ dpkg -s mod-pagespeed-stable 
Package: mod-pagespeed-stable
Status: install ok installed
Priority: optional
Section: httpd
Installed-Size: 12412
Maintainer: mod_pagespeed developers <mod-pagespeed-dev@googlegroups.com>
Architecture: amd64
Version: 1.4.26.5-r3533
Replaces: mod-pagespeed-beta
Depends: apache2.2-common, libc6 (>= 2.4), libgcc1 (>= 1:4.1.1-21), libstdc++6 (>= 4.2.1-4)
Pre-Depends: dpkg (>= 1.14.0)
Conflicts: mod-pagespeed-beta
Conffiles:
 /etc/apache2/mods-available/pagespeed.load 946b3a808325a06293333b19548feece
 /etc/apache2/mods-available/pagespeed.conf 61c7ae6084ca925450b7239d99c7e03e
 /etc/apache2/conf.d/pagespeed_libraries.conf bf71149333ac403e5d5d1b4cbbd263d5
 /etc/cron.daily/mod-pagespeed 26515b57b52e45d4b99e420cfe4d79ff
Description: Apache 2 module to optimize web content.
 mod_pagespeed is an Apache module that aims to speed up load time of pages by applying web performance best practices automatically.

Edit: Just brought my instance back up http://ec2-107-20-129-39.compute-1.amazonaws.com/

[igrigorik]

Ah, yeah, that would do it.. you need to upgrade: prioritize_critical_css was added in 1.5.27, and there have been a lot of work put into improving defer_javascript and other filters also.

In my own test I used the beta channel:

ubuntu@ip-10-202-152-39:~$ dpkg -s mod-pagespeed-beta
Package: mod-pagespeed-beta
Status: install ok installed
Priority: optional
Section: httpd
Installed-Size: 12716
Maintainer: mod_pagespeed developers <mod-pagespeed-dev@googlegroups.com>
Architecture: amd64
Version: 1.7.30.1-r3609

P.S. https://developers.google.com/speed/pagespeed/module/release_notes

[jmarantz]

+1 to using the beta channel (1.7) for this test. This also gives you access to accelerated font delivery for Google webfonts, which can be another speed-bump in the road to a PageSpeed score of 100.

One other point: the first time you view a web-site with a particular class of browsers, it won't be fully optimized by mod_pagespeed, which dynamically optimizes resources in the background the first time it sees them. In your initial blog post it seems like you didn't get even the basic minification benefits that MPS should do easily, so you had to resort to manually compressing files. So refresh a few times with Chrome after you install MPS or change its settings. In actively visited web-sites this is not usually an issue, as long as you get enough traffic to keep the caches fresh.

[danriti]

@igrigorik heh, looks like a classic case of PEBKAC! at least now I have a good excuse to write a follow up blog post...thanks again for the feedback! :+1:

@jmarantz yeah, i'm guessing I wasn't getting the CSS minification because of the old version i was running. so i'll definitely look into leveraging this on my second pass through! thanks for the heads up!

[igrigorik]

@danriti if you run into any issues after upgrade, let myself and @jmarantz know!

BTW, I left a comment referencing this bug on the perf calendar post, but it looks like you guys don't allow comments on appneta? Could you drop in a quick reference to this discussion there?

[danriti]

@igrigorik will do! I added an inline update in the blog post (after the introduction) that links here:

http://www.appneta.com/blog/bootstrap-pagespeed

I'll also update this repository to include your implementation :+1:

[igrigorik]

@danriti awesome, thanks!

[paulirish]

@danriti i agree with the top commenter here https://news.ycombinator.com/item?id=6928118 in that while the data in your post is SUPER valuable.. one of the big takeaways is that the short config change here gets to 100 very quickly too. So might be worth augmenting the update to just bring that back into the article to help the readers out.

also this post is incredible. :D

[danriti]

@paulirish thanks, i appreciate the feedback! i agree and updated both posts to move the inline update to the 2. Enable mod_pagespeed section of the article and included the updated mod_pagespeed configuration:

http://www.appneta.com/blog/bootstrap-pagespeed/ http://calendar.perfplanet.com/2013/breaking-the-pagespeed-barrier-with-bootstrap/

:+1:

[prhomhyse]

I honestly don't think that these: ModPagespeedEnableFilters prioritize_critical_css ModPagespeedEnableFilters defer_javascript ModPagespeedEnableFilters sprite_images ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp ModPagespeedEnableFilters collapse_whitespace,remove_comments

are necessary at all

[danriti]

hey @prhomhyse, this issue is almost 2 years old, so some of the information is most likely dated! i'd suggest checking out the latest mod_pagespeed documentation :+1:

[zbeekman]

Hey I’m pretty new to the scary (wonderful?) world of web programming, but not programming in general. I was wondering, can you use MPS with jekyll and github hosted github-pages? I’m trying to speed up http://izaakbeekman.com as I hack away.

Something tells me it might be wise to move away from letting github build the page, and set up grunt or gulp along with bower for package management…

[jmarantz]

Izaak -- I'm not sure what the best answer to your question is, but you should take the discussion to https://groups.google.com/forum/#!forum/mod-pagespeed-discuss , rather than this bug-report.

-Josh

On Tue, Aug 11, 2015 at 8:56 PM, Izaak Beekman notifications@github.com wrote:

Hey I’m pretty new to the scary (wonderful?) world of web programming, but not programming in general. I was wondering, can you use MPS with jekyll and github hosted github-pages? I’m trying to speed up http://izaakbeekman.com as I hack away.

Something tells me it might be wise to move away from letting github build the page, and set up grunt or gulp along with bower for package management…

— Reply to this email directly or view it on GitHub https://github.com/danriti/bootstrap-pagespeed/issues/4#issuecomment-130126137 .