Pagespeed Insights – 96/100 Desktop 89/100 Mobile – Secrets of how I did it!

A Simple Guide to Pagespeed Insights

Step 1: Go head over to Pagespeed Insights and punch in the URL of your website. If you don’t have a website you’re affiliated with, punch in a website you frequent. You may want to run it twice, just to ensure Google is using cached versions of resources (to get the best possible score). You also may ask, why is this score important? Google announced back in 2010 that page speed performance would affect search engine rankings, and the more optimized (aka loads faster) your website is — the higher you’ll be ranked.

https://developers.google.com/speed/pagespeed/insights/

Step 2: Look in horror as the results are likely “Poor” or if you’re lucky “Needs Improvement”. In that one in a million chance if you have someone like me building your website it may even say “Good” — now’s the time to feel proud if you got a “Good”.

Step 3: If you made it this far, you probably didn’t get a “Good” so please admire the screenshots below and ask yourself “How could I have let this happen!? Whatever can I do!?”

Step 4: Take a deep breath and know that I’m here to help. Luckily if you’re using Apache or Nginx web servers you can simply (kind of simply) install mod_pagespeed.

What is mod_pagespeed and why do I need it?

To put it simply, it’s a web server module that modifies the data the webserver delivers to potential users and yes, it was built by Google. It basically acts as a middle man between the webserver and the user. It looks at the user’s device and the information the web server is delivering and makes several optimizations to enhance the user experience.

What is it doing under the hood passively?

• Optimizing images
  • This is a huge savings in bandwidth and load time for the user. Delivering overly large images ends up bogging down the site and the user doesn’t really get any benefit considering the images are typically scaled down in the browser anyway.
  • Using the best compression algorithms to date to deliver the best images at the lowest disk size and not overcompensating the pixel size.
• Minify, combine and stamp resources
  • It not only removes all the unnecessary space from a file on the server before it delivers it to but attempts to combine similar resource files like JS and CSS to reduce the overall number of HTTP or in my case HTTPS requests. This is important because it not only saves space but reduces the number of times the client has to reach out to the server (yes it has to for each HTTP/HTTPS request).
  • Stamps the files, this way it controls your client’s website cache. What this means is that each time a change on the website is made to a resource file, mod_pagespeed gives it a new name, then when users visit the page they’ll need to download a fresh copy of the resource to get the latest changes!
• Compression
  • Automatically enables mod_deflate (gzip compression).
  • This means resource files will also be compressed before sent to the client, this reduces the bandwidth by up to 99% for some resources (like text files).
• Caching
  • Google likes to see static resources with a implicit cache set against them. What this means is that the browser is allowed to use the same files they have cached as long as the server tries to re-deliver that same file when a page loads again on the same domain.
  • What’s interesting is that Google whines about a 5 min cache and mod_pagespeed sets the cache to 5 mins if none is specified in the pagespeed.conf (config file on your server — for Apache) and in my case the Apache /  directives file for mod_pagespeed. To remedy this I you can increased the implicit cache to whatever you like, I have mine set for around a month (I think) — it’s long enough so pagespeed insights doesn’t whine about it. Please see the latest documentation on how to remedy this for your webserver.
• Rewriting and Inline modifications
  • It uses some really complex math to rewrite most of the content that’s being delivered and help prevent render blocking to eek out more optimization. Yes, it’s more complicated than a^2 + b^2 = c^2.
• Filters
  • Each of these passive “Actions” to your data and content are modified by ‘filters’, I have the default set of filters enabled, but there’s several more ‘optional’ filters that are potentially more risky depending on what types of content you’re delivering in your site. So with further intervention and configuration, I could potentially get higher scores and a large business getting thousands of views would want to do this.
• Even more
  • mod_pagespeed has the ability to do a lot more, but for our purposes here, we’re just trying to get your website in the green.

Step 5: At this point you’ve either installed and configured mod_pagespeed and hopefully see great results, or you aren’t on a platform that supports it and are wondering how to manually do the things above, if so proceed to step 6.

Step 6: Go grab a beer, a glass fine wine, or a tumbler of your favorite spirits (may just want to grab the bottle) because you have a long and difficult road ahead. It is very difficult to hit the milestones Google has set for “Good” standing on Pagespeed Insights. Even squeezing out a few points here and there really adds up, so don’t give up!

• Optimizing Images
  • https://developers.google.com/speed/docs/insights/OptimizeImages
  • You’ll want to first analyze which backed stack you’re working and what plugins or libraries are available to help compress, crop and size images appropriately to meet the requirements for better scores on Pagespeed Insights. Even if you find a plugin it may require configuration regarding compression quality, image pixel size, color bitrate and Chroma sampling to get it just right.
• Use a Task Runner
  • Grunt and Gulp are two “Task runners” that help optimize resources and web assets for delivery to the users.
  • These tools can help minify and combine resources to reduce bandwidth and the number of server requests.
• Implement Caching
  • Depending on your backend you may be able to download a plugin to aid with caching, but you can pass cache directives in the HTTP(s) headers manually. An example of this would be modifying your .htaccess file (in Apache) to force caching against specific file types.

But Dave I added mod_pagespeed or manually configured my server and still see “Possible optimizations” EVEN YOUR SCREENSHOTS HAVE THEM!

Ok, you got me! It says “Possible optimizations” because it’s just that… possible. Some things are not really feasible to optimize with the way your website is built and you’ll just have to accept some things may still linger in the report.

Eliminate render blocking JavaScript and CSS in above the fold content. OK, what’s the deal with this guy? What this means is that Google doesn’t want to load resources that may block the loading of the HTML in content that sits above the fold (things you see when the page loads without scrolling). This is challenging because often JavaScript is sitting above the fold and is tucked away in a library you have included. Unless this library is loaded using AJAX (Asynchronous JavaScript and XML) — meaning it doesn’t tell the page to wait, then the page is going to wait for it to load. BUT, sometimes you want it to wait because what if something you need to load above the fold depends on that JavaScript being fully loaded to function. So at the end of the day do your best, but please keep in mind unless you have ONLY HTML, no JS, no CSS, nothing else — then you’re likely not going to hit 100.

Step 7: Once your optimizations are complete, celebrate in the fact that you just made the biggest asset you have (your website) that much better!