Disclaimer: Living the Dream uses demographic data, email opt-ins, display advertising, and affiliate links to operate this site. Please review our Terms and Conditions for more information.
If you're like me, you're probably obsessive about your site speed. It doesn't matter the service, I want to do whatever I can to get the best possible scores, load times, and ratings- even if some don't really matter in the grand scheme of things.
Out of all of the services that are out there, one that is the holy grail is Google's Page Speed Insights (PSI) as it is one of the few tools provided by the search giant that gives clues on how website owners can improve. (Plus non-Google tools like WebpageTest at GTMetrix to round out further analyses.)
Naturally, we latched on to it and made it our quest to top out in the highest category on our sites.
Unfortunately, our site on our old theme ( Elegant Themes) only took us so far, and we knew it was time to upgrade. We switched to GeneratePress, made some customizations, and both our desktop and mobile scores jumped (with mobile scores in the high 80s and desktop flirting with 100 most days).
Today, I wanted to share the techniques I used to make this happen as it won't come out of the box.
Note: Before we begin it is worth pointing out that at the end of the day site speed is king. Google PSI scores are mainly a suggestion. Although we're in the weeds with it you can have a fast site without a high score, and no one is really certain if a high score provides an SEO benefit like a fast site. Our interest in this is purely because we can optimize it over a more practical reason. This could change in the future and we'll update accordingly.Why GeneratePress?
First off, it is important to talk about theme choice and why I went with GeneratePress. The theme company brands itself as one of the most lightweight out there, and after seeing a few colleagues install it on their sites with the results I was looking for, I was convinced.
Out of all of the themes I've worked with, GeneratePress is by far the most customizable in order to provide a unique design that is not as cookie-cutter as the rest. (It is worth noting that most of the custom options are only available in the premium version which runs about $50 per year- a worthy investment in my mind.)
This means that there is a fair bit of work out of the box, and admittedly a somewhat steep learning curve, but those who are willing to put in the effort (and the fairly small fee) will be rewarded with beautiful design options.
As I am fairly proficient in design and CSS coding, I was able to put together my site's design in just about 24 hours. But even here I would be lying if I did not say that I relied heavily on the tutorials and previously asked questions in the forum.
Suffice it to say, it isn't the best theme for a first-time blogger, but I'd still recommend it all the same because even out of the box with no customization it is quite fast, and, well, you'll have to learn sometime!
Lazy Load, AdInserter Pro, and Autoptimize are Key
Now, simply installing a custom theme will only get you so far. A lightweight theme will get bogged down with plug-ins, unoptimized images, and heavy javascript just as much as a more resource intensive theme.
So you're going to need to do a bit of work.
My ability to hit high Google PSI scores revolved around completing a few tasks, namely the following.
Reduce Your Plug-Ins
This is an easy one. Consolidate and remove plugins that aren't completely essential. Jetpack will slow you down. Many related post plugins can slow you down. Anything that calls multiple scripts will slow you down. Turning these off can cause a drastic improvement.
Sometimes you have a large plug-in and are only using one function when a more streamlined approach will do. Other times you may have several smaller plug-ins operating when a larger, global one may make more sense. Doing an analysis of what is absolutely critical and what better options are can result in huge gains.
See our full list of WordPress plug-ins we currently use at the previous link if you need a starting point. We use more-or-less all of these on each of our sites with only minor variations. The article also outlines all plug-ins we have since removed from our site and our reasons for doing so.
Optimize Images
For most bloggers, the biggest resource hog on your site is likely going to be your images. If you've been uploading original file sizes and displaying them on your site, you're really shooting yourself in the foot in getting good load times and speed scores.
Read Our Latest Posts
(Right click to open in a new window. Scroll to keep reading.)
There are a few ways to go about this.
To optimize existing images, you'll likely want to pay for a month of WP Smush Pro in order to reduce your existing images down to compressed formats (generally required for images >1MB in file size). Now, you could keep paying for this after the first batch run (expensive- the plug-in runs about $50/month), move to a different plug-in (we use Kraken as part of our server package), or revert to the free version for future uploads.
The free version will compress new images as long as they are low file size, so you'll need to edit photos to resize them prior to upload. We do this with Lightroom and a preset to our desired file size, but online tools exist for this as well.
Optimizing images before uploading is also important because most server packages have a maximum disk space allotment for your pricing tier. No sense wasting it with high-res images when you'll be showing optimized ones, so reduce the file size before you upload!
Lazy Load Settings
For those who do not know what a lazy load is, it is essentially a technique that defers loading of all images/scripts/programs that are below a given screen view. Rather than load all 20 images in your post at the start (and slow your site down), lazy load plug-ins can defer loading the images until a user's screen is within a set pixel distance from the content itself.
For this site, we use Lazy Load by WP Rocket, a free plug-in that lets you select lazy load for images, scripts, and other features (the free version of WP Smush should also have a lazy load feature as well for those looking to reduce plug-ins). We only check the image box at the recommendation of our ad network, which left us with the issue of scripts that we'll tackle a bit later in this post.
You could pay for a premium version of this plug-in to get more functionality as you're at the mercy of the default settings in the free version, but we've never seen the use for it.
In any case, coupling this with image resizing caused a huge jump in our Page Speed Insight score on its own.
Defer Ads
Next, we come to ads- another resource hog for most sites.
Unfortunately, it is hard to say what the settings are like for most networks, as we are exclusive members of Mediavine. Thankfully, this service unveiled a defer script which only calls up ads after the first engagement on the site (a click, scroll, what have you).
This lets the background site load on its own before ads get called up, thus improving your load times considerably.
It is worth noting that when enabling this any ads you have above the fold (first screen view before scrolling) may not get loaded and may reduce your earnings. Thankfully, we did not have any of these and our RPM changes were almost non-existent.
If your ad network does not have this feature, request it now. (Or move to Mediavine if you can.)
AdInserter Pro for the Rest
For everything else, we come to our favorite plug-in, AdInserter Pro.
This plugin was designed, as its name suggests, as an ad insertion tool to place display and affiliate graphics anywhere on your site. It is incredibly light-weight, has an immense logic database to fine tune placement locations (including tag/category logic), and is overall incredibly powerful for site features- ads or not. (Although, this one has a considerable learning curve to it.)
The plug-in offers several insertion slots in the free version, and a small fee will unlock the first tier of Pro which offers numerous additional features- one of which is Lazy Loading of the inserted boxes themselves!
Now, earlier in this guide we said that our ad network does not allow us to lazy load scripts, as it interferes with their ads which are already lazy loaded to a degree. How do we get around this? AdInserter Pro!
We found that we had many javascript files on our sites, like our Mailerlite subscription box and Google embedded maps on our Pittsburgh blog, that were resource intensive and did not accommodate the defer or async attributes that most scripts offer.
So, what can you do if you can't defer or lazy load these files? Lazy load the box they're in, of course!
We ended up doing most all of our site design via AdInserter. Anywhere you look that a script is showing, be it on our sidebar or footer, odds are good it is inserted via AdInserter Pro with lazy load checked (although some required the lazy load to be shown in an iframe- an additional box to check if lazy load alone doesn't work).
This is by far one of the biggest things that caused our load times to decrease and PSI scores to shoot up (< 3 seconds and ~80 on mobile and > 90 on desktop respectively).
So now we operate under a rule of thumb: defer and lazy load everything we can that isn't in the first screen view.
Autoptimize Got Me the Rest of the Way
At this point, our Page Speed Insights results only had one major recommendation, and that was to minimize CSS and javascript.
We talked to our host, Performance Foundry, and they recommended we use Autoptimize for this but cautioned that it also has a steep learning curve and has a tendency to break site settings. We installed it on our old theme, and yep, it broke our CSS and did not recognize our customizations no matter what we tried. (Thankfully you can just turn the plugin off and it'll revert back in most cases. When in doubt, talk to your host about backup options before making changes to your site- with this plugin or others.)
But on another site of ours with GeneratePress it worked perfectly. This was one of the reasons we switched over this site to the theme as soon as possible and recommend it in this guide.
Now, Autoptimize requires a number of additional settings to protect javascript files, especially ads, so you may want to check with 3rd parties you use (like Mediavine- who have a handy Autoptimize guide) in order to see if they have any settings that are required in the program. My settings my not work for you, and your design/plug-ins/CDN/ad setup may not be capable of working with Autoptimize- it is sadly the nature of the beast.
But if you can get it to work and you actually do compress your java and CSS files, a jump in Page Speed Insight scores will be your reward.
Getting Autoptimize to work on this site got my mobile scores to be in the upper 80s on mobile, and 99/100 on desktop for most pages at a first pass.
Win!
If you can manage to do all (or even just a fraction) of the above, I suspect you'll notice a drastic improvement in both your load times and Google Page Speed Insight scores for your site.
Wait, What About Your Server - Isn't That Important?
To finish this guide, I want to take a slight detour and talk about back-end servers with regard to site speeds and Google PSI scores.
We use a high-end server with Performance Foundry on this site, which includes optimized resources, security settings, and more that are quite fast and certainly improve our performance.
But to us, servers like these perform two functions:
- They reduce bottlenecks in load times (better server response time).
- They can accommodate high traffic (basic Bluehost servers got bogged down at >10k UMV for us).
The truth of the matter is that a fast server only gets you part of the way, and really does the best for higher traffic sites. On the newer site we designed that we mentioned above, we did the same procedure in this article and actually have slightly better PSI mobile scores despite hosting on Bluehost (articles are 95 mobile and 97-99 desktop respectively).
The main difference is that the load time on that site is about one second slower overall (due to server response time from the basic host package) and the fact that the site gets zero traffic right now.
Suffice it to say, if you're on WordPress fast load times and good Google PSI scores are attainable regardless of your host. But at the end of the day, as your site gets more traffic and more people on page at any given time, premium servers will become a necessity.
Do sites that have low traffic numbers need to pay as much for a premium host in a month as they do for a year with a service like Bluehost? I don't think a second or so of load time may matter if the above gets you to < 4 or 5 seconds.
Do sites that have high traffic, strong search rankings, and want to be competitive need a premium host? Absolutely. But if you fall into this category, you're likely already making enough money to justify that jump in costs, and this should be a non-issue.
There should be no middle ground here.Overall, the above process is what I used to supercharge this blog's Google Page Speed Insight scores as well as sight speed. While I'm certain that the above will provide significant value to anyone looking to improve, the final results you'll see will ultimately be influenced by your site theme, server (to a degree), plug-ins, and design.
Switching to GeneratePress alone will only solve some problems. It takes a combination of a lot (or all) of the above to really see an improvement). Likewise, you can also apply many of the above tips on other themes; however, we created this post only because the above worked for us with GeneratePress- and its a pretty awesome theme on its own.
Working on site speed and PSI scores is an optimization game, which means the rules frequently change (it is Google, after all) and no site is ever truly perfect. As we improve our own site if we find out any new techniques to improve our performance we'll feature them here!
Did you do any of the above tasks and see a change on your site? Comment below to share!