New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
igrigorik opened this Issue Dec 17, 2013 · 15 comments

Comments

Projects
None yet
6 participants
@igrigorik

igrigorik commented Dec 17, 2013

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:

screen shot 2013-12-17 at 11 17 35 am

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

This comment has been minimized.

Show comment
Hide comment
@danriti

danriti Dec 17, 2013

Owner

@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?

Owner

danriti commented Dec 17, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@igrigorik

igrigorik Dec 17, 2013

@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...

igrigorik commented Dec 17, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@danriti

danriti Dec 17, 2013

Owner

@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/

Owner

danriti commented Dec 17, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@igrigorik

igrigorik Dec 17, 2013

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

igrigorik commented Dec 17, 2013

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

This comment has been minimized.

Show comment
Hide comment
@jmarantz

jmarantz Dec 17, 2013

+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.

jmarantz commented Dec 17, 2013

+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

This comment has been minimized.

Show comment
Hide comment
@danriti

danriti Dec 18, 2013

Owner

@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! 👍

@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!

Owner

danriti commented Dec 18, 2013

@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! 👍

@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

This comment has been minimized.

Show comment
Hide comment
@igrigorik

igrigorik Dec 18, 2013

@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?

igrigorik commented Dec 18, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@danriti

danriti Dec 18, 2013

Owner

@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 👍

Owner

danriti commented Dec 18, 2013

@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 👍

@igrigorik

This comment has been minimized.

Show comment
Hide comment
@igrigorik

igrigorik Dec 18, 2013

@danriti awesome, thanks!

igrigorik commented Dec 18, 2013

@danriti awesome, thanks!

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 18, 2013

@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

paulirish commented Dec 18, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@danriti

danriti Dec 18, 2013

Owner

@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/

👍

Owner

danriti commented Dec 18, 2013

@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/

👍

@igrigorik igrigorik closed this Oct 8, 2014

@prhomhyse

This comment has been minimized.

Show comment
Hide comment
@prhomhyse

prhomhyse Aug 8, 2015

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

prhomhyse commented Aug 8, 2015

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

This comment has been minimized.

Show comment
Hide comment
@danriti

danriti Aug 8, 2015

Owner

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 👍

Owner

danriti commented Aug 8, 2015

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 👍

@zbeekman

This comment has been minimized.

Show comment
Hide comment
@zbeekman

zbeekman Aug 12, 2015

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…

zbeekman commented Aug 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jmarantz

jmarantz Aug 12, 2015

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
#4 (comment)
.

jmarantz commented Aug 12, 2015

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
#4 (comment)
.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment