Getting to Green: Google’s PageSpeed Insights

Site speed has been all the Once Coupled team has heard about recently, specifically focused on getting the elusive “85,” or the first score that gives you the green light (literally) in terms of site speed. Here are a few lessons we’ve learned auditing and improving dozens of sites in the past few weeks.

1. Google PageSpeed Insights isn’t actually measuring your load time.

This is something we clarify a lot, and it’s arguably the most important item to recognize upfront. GPSI is focused on measuring best practices for site speed, not load time. The goal, of course, is that by following these practices, you inevitably speed up your site (or at least make it look faster)!

2. The fastest way to improve your score is to remove resources.

When you run your site through Google’s PageSpeed Insights tool, anything that’s listed and doesn’t start with your domain should be removed, if possible. The more you remove, the easier it will be to get your score up.

The ad myth

It’s easy for us tech folk to point to your ads and say, “that’s why your site is slow.” Truly, ads come with a lot of baggage. That said, it is possible to get 85+ when running ads. We’ve only confirmed this with sites running ads through Mediavine, however.

Social sharing is typically ridiculously slow

Let me jump straight to the point with this one: the only plugin we’ve found to be totally GPSI-compliant is Social Warfare. ShareThis, AddThis, Po.st, and even Simple Share Buttons Plus all call at least one external script in order to run their plugin – normally more. Social Warfare is quick and lightweight despite being feature-rich. If you’ve switched permalinks or gone secure, Social Warfare has you covered there, too. It’s not that we’re trying to fangirl here, we just like how they do their job.

Note: share counts may be incorrectly cached when combined with Autoptimize. (Alternative solution: load jQuery asynchronously.)

Your outdated recipe plugin is bringing you down

This has been one of the few reasons I can get clients to finally switch recipe plugins. Right now, anything based on Ziplist’s old code isn’t properly enqueuing their CSS/JS files, which means those are going to be render blocking. Long story short, it’s going to hurt your GPSI score. Consider WP Recipe Maker or Tasty.

Other caveats

These are a couple items that we frequently recommend removing. (For some of these, emailing their developers may help express the need for improvement!)

• Clever Girls Collective
• Ahalogy
• Collective Bias
• CommentLuv
• BlogLovin’ follow button
• Any social follow widget (e.g. Facebook, Pinterest)
• Gravatar (can be disabled in “Settings > Discussion”)

3. Autoptimize and ShortPixel do most of the job for you.

I know that I led with a bunch of bad news about how you have to strip your site of all the functionality you spent so much time integrating…  but the good news is that other than removal, the bulk of the fixes will come from two plugins!

Autoptimize will optimize your files

Mediavine publishers can use their guide to set Autoptimize up. Basically, you’re aiming to pass the following rules in one, fell swoop:

• Eliminate render-blocking JavaScript and CSS in above-the-fold content
• Minify CSS
• Minify HTML
• Minify JavaScript

ShortPixel will optimize your images

We’re pretty big fans of ShortPixel, because their support team has been really good to us. They’ve helped our clients troubleshoot issues, given them bonus credits to make sure everything is working, and had a lot of patience with our continual requests to increase the level of compression so all images pass Google’s rules.

Side note: we did some testing between Imagify’s “Ultra” and ShortPixel’s “lossy” settings. While both will pass Google’s rules, we found Short Pixel had a little better quality with images containing text (although you’ll notice a visual difference with either plugin). At the time of writing this article, ShortPixel’s one-time prices are the same as Imagify’s, but their monthly subscriptions may be more expensive, depending on the size of your images (each service measures usage differently).

4. A good host is important

You should have no items at your domain for these warnings:

• Enable compression
• Leverage browser caching

If you have just a few, you probably need to have caching and compression enabled for SVG files. On the other hand, if there are a bunch of items (and they start with your domain), talk with your host about getting this set up.

The “Reduce server response time” warning can be improved by your host, too. Speak with them about increasing resources, caching more aggressively, or using a CDN where appropriate.

5. The rest is in the details – and it requires regular maintenance.

You’re likely to notice the largest jumps in score right at the end. One minute you had a 70 and thought you’d never get there, then suddenly you’re at 87 and probably pouring yourself a glass of congratulatory wine (you deserve it)! That’s because the biggest gains come from completely eliminating a line item, and that can be a challenge. This is really where your developer should come in.

For instance, you can’t totally pass “Eliminate render-blocking JavaScript and CSS in above-the-fold content” unless you defer your CSS, which is a surprisingly large monster to tackle:

1. To defer this CSS, you need to enable “Inline and Defer CSS” in Autoptimize. Depending on your site, you likely also need to enable “Disable Google Fonts.”
2. Now you don’t have CSS loading initially, which causes an ugly flash of unstyled content (or FOUC, also known as FOUT).
3. To combat this, you’ll want to inline what’s known as your “critical CSS.” The difficulty with your critical CSS is that it changes from page to page, changes every time you modify the appearance of your site, and it’s tricky to generate. To make matters worse, critical CSS is still an evolving field and relevant services aren’t fully fleshed out yet.
4. We’ve used a variety of tools over the past few months alone, our current set-up comprising of CriticalCSS.com, WP Critical CSS, Web Font Loader, and Above the Fold Optimization. These aren’t for the faint of heart, and how we set them up will vary based on the site we’re working on.

The recommendations we make are constantly evolving, as are best practices. If site speed is a priority, you need to be (a) ready to eliminate unnecessary features and (b) open to continual change and revision.

Once COupled does Google PageSpeed Insights audits

Honestly, you can do a lot of work with this article and no audit. If you need help, however, our audits explain each section and specifically outline what changes need to be made. We’ll list out what resources should be removed and options for replacing them.

This in-depth look at your site also allows us to verify what fixes need to be made and give you price estimates on those. The best option, however, is to go with our subscription service for ongoing fixes. This is intended to keep you set up with the latest technologies in site speed, and we highly recommend it because technologies continually evolve. If you regularly make changes to your site’s plugins, widgets, or appearance, this is a must for you.

If you have questions, feel free to ask them here!