How to Boost Your Google Lighthouse Speed Score With These Quick Tips

When it comes to optimizing your site’s page speed, it’s easy to get lost in all of the different strategies that are out there to supposedly help you make your website faster.

As a site owner there are considerations you need to take not only when you are first setting up your website, but also in nearly every decision you make after you are live and in the routine of regularly creating content.

There is a good baseline of actions you need to take, which I will list below in a moment, but the important idea you should always keep in mind when it comes to page speed is simply:

LESS is MORE.

That means, the fewer things you do the more likely it is you are doing things right with your website’s overall performance.

You will find as you learn more about page speed optimization that many techniques that seem reasonable to implement are actually just band-aids for underlying issues that your website software (or WordPress theme) cause from poor coding or loading too many resources.

That’s why it’s important to make the smartest decisions possible as early as possible in your website setup process so you have fewer things to optimize for later.

Common Performance Tips Checklist

There is a new tool for evaluating the health of your website’s performance called Google Lighthouse, and it can be run right from the Chrome browser’s Inspector tool.

This is a really nice tool because it checks many different aspects of your website’s overall health—page speed included—and gives you actionable results at the click of a button.

I bring this specific tool up to you because it helped me realize there were a couple of important optimizations I could make to the Marketers Delight website to drastically decrease load times and improve the site’s perceived performance.

Before I share with you those two things I learned, let’s go over a common checklist of tips you’ll want to base your performance decisions around.

Performance Starts At the Beginning (Choose a Good Web Host)

No matter how many trendy techniques you use to optimize your site they will never cover up a poor web host. Yes, I’m talking about those $3.95 a month hosting plans that literally give you what you pay for: cheap results.

It’s possible to run a successful website that’s slow, but why strain yourself and your readers? An application like WordPress will be especially slow on these cheap hosting plans—both on your actual website and especially in the admin panel.

Even if you think you will save money by purchasing a cheap hosting plan, you will only be costing yourself later if your website gains any traction and starts crashing. Plus, a slow website loses sales and will surely lose many of your reader’s attention over time.

I helped an MD customer recently figure out why his site loaded so slow initially even though did everything else right, and the culprit was of course his web host. The cheapest plans from the mega hosts like Bluehost and GoDaddy will get you these lousy results.

Instead, invest a little more money into their more powerful plans (~$20/mo should be a solid budget) or look into more WordPress oriented hosts like SiteGround (affiliate link) or Media Temple which do offer cheaper plans that are better suited for WordPress.

Again, no amount of optimizing later can save your site from a bad web host, so get this right initially or go through the daunting process of switching web hosts later.

When Choosing a Theme (and Plugins), Look For These Two Things…

If you’re reading this you probably use WordPress, and the next biggest culprit for poor performance is choosing a poorly designed WordPress theme.

Many themes entice you with trendy designs and are often free or cost next to nothing, but did you check to see how they perform?

Two important indicators you can use to help determine a quality theme are:

1. Load minimal HTTP requests
2. Use few database queries

You can install a free plugin like Query Monitor and keep it running on your site as you are building it out so you can watch to see how these two metrics add up.

In case you don’t know, an HTTP request is a file that needs to be loaded in order to display on your website. The easiest requests to find are stylesheets (CSS files) and scripts (JavaScript files) as they usually load right in your page’s source code.

Since WordPress is a dynamic content management system, it pulls your content and other custom settings from a database on your server on every page load.

If your theme’s settings are poorly coded, it may make inefficient requests to your site’s database which can be a disaster for your site’s performance.

Everything I’ve said here can be applied to the Plugins you install, and you will want to keep the Query Monitor plugin close so you can constantly check them out and ensure they aren’t causing errors or making many database requests.

Turn Your WordPress Site into a Static Site With a Cache Plugin

As I said above, one of the most expensive operations your WordPress website makes on page load is pulling ever-changing content from a database. This is a reason why WordPress is so popular and easy to use. But from a performance standpoint, can be wildly inefficient.

That’s where the idea of caching comes in—a cache plugin basically freezes your website and serves it as static and never-changing (or infrequently changing) HTML document.

This is immensely beneficial because it removes the need for your site to interact with your database on page load and makes your website load like it’s a static website–which are always faster than dynamic websites.

If you use a web host like SiteGround (affiliate link) that has caching built-in, you can skip the need for an extra plugin. Check with your web host before searching for a cache plugin, but if you do need a plugin I recommend WP Rocket (paid) or WP Fastest Cache (free).

Images Are The Biggest Killers of Page Speed: Always Optimize Your Images Before Upload

I will talk about this more below, but the images you include in your pages will most likely be the heaviest resources to download on your entire website.

Again, I’ve seen people do everything else right to optimize their site, but even one poorly optimized image can weigh more than the combined size of your styles, scripts, and HTML.

That’s why it’s so important to optimize your images properly, and I recommend you do it before you upload the image to your site. Yes, that means doing it yourself and not to rely on a WordPress Plugin to do it for you.

Why?

If you upload a photo as you found it on Google or Unsplash, it could weigh many multiple megabytes; let’s say 1-2MB.

To put that size into perspective, the average web page weighs around 1MB (and ideally should be much less), so leaving a photo of that size as it is can literally double your entire page size!

By uploading that huge photo, you carry it on your site forever. To make that burden worse, WordPress creates multiple copies of that image at different sizes for potential display in other parts of your themes and plugins.

While these copies may never show on your site, you will now have many more megabytes worth of images just sitting around in your site’s file directory.

If you’ve ever moved web hosts, you’ll know that the hardest items to move are images simply due to how large the folders they’re in can become. You can reduce this by simply taking the burden of optimization from your website and quickly doing it yourself.

I created a 20 minute video presentation that will tell you everything you need to know about image optimization and I recommend you watch if you’re new to the subject.

The key takeaways are as follows:

• ALWAYS save photos as .jpg files
• Reduce the quality of .jpg photos by 15-30% to cut down file size
• Restrict using .png to transparent images only
• Use a tool like ImageOptim to remove excess meta data

How I Saved My Google Lighthouse Page Speed Score With These Two Methods

Back to Lighthouse—when I ran the page speed test here on the Marketers Delight website I was disappointed with the low score. Despite the score I knew that the MD site is relatively well-optimized and loads fast, but the low score was still a cause for concern.

The most important page is the front page which acts as a longform sales page. With all of the text and images combined, the page weight comes out to around 1.2MB which I am fine with since it’s well-designed and has purposeful messaging.

In addition to that, I include scripts for my affiliate program and eCommerce system, Google Analytics, custom Typekit fonts, and a few other HTTP requests from my theme and plugins.

The biggest thing I can improve on is further reducing HTTP requests, but for my level of traffic and power of my server, I’m not too worried about that problem at this time.

But thanks to making two quick optimizations I was able to smooth out the performance problems brought up by Lighthouse and go from a low 73 score all the way up to a 94!

Here are the two changes I made and how you can implement them as well.

Performance Tip #1: Lazy Load Images

I used to be against the idea of lazy loading images since it clashed with my belief that less is more. I thought that by optimizing my images with the methods above would be enough, but it turns out I could make a huge impact by using a lazy loading script.

That also goes to show you how nuanced the issue of performance is and that blindly following blanket statements can make you miss some important optimizations.

If you’re not familiar with lazy loading, the concept is simple—instead of loading all of the images on your page all at once, a lazy load script only loads images when they are scrolled into view in your visitor’s browsers.

This drastically cuts down load times as your browser will skip downloading all unseen images and go straight loading to the important parts of your pages.

Luckily the script needed to enable this functionality on our site is super lightweight, and made extremely simply to implement by the wonderful Lazy Load by WP Rocket plugin (free).

This plugin is lightweight and does exactly as advertised in the click of a mouse. You can install this plugin for free and immediately go WP Admin > Settings > Lazy Load to enable the script.

If you are already using a cache plugin, first check to see if they have a lazy load option you can enable so you don’t need to install another plugin. I like how seamless the plugin by WP Rocket is and that it is smart enough to detect any image on your site and lazy load it effortlessly.

As a bonus you can even optimize video embeds by lazy loading them, or only loading the video content (even heavier than images) when the user scrolls to it in their browser.

Performance Tip #2: Load Custom Fonts With the Webfont Loader Script

This one I am still experimenting with, but am pleased with the results so far. If videos and images are the heaviest resources to load, fonts are by far the hardest to load properly.

In the web design world there are two kinds of fonts: system fonts and custom fonts.

System fonts come shipped with any computer/devices operating system and because of this take almost no effort to load. Custom fonts, however, must be loaded from a source—either your own server or a 3rd party service—and are a bigger performance hit because of this.

That’s no reason to be discouraged to use custom fonts as the right font from services like Google Fonts or Typekit can drastically improve your website’s reading experience.

The simplest way to use custom web fonts is to load them as early as possible in your site’s header and prefetching them to give the web browser a head start in downloading content from one of those font sources.

The problem is, it can sometimes take seconds for fonts to fully download, leaving the text on your site invisible until those fonts have fully downloaded. This can be a confusing experience for your readers and downright terrible on slow connections.

So, to avoid this “Flash of Invisible Text,” you can implement a technique known as a WebFont Loader (a script) that will make sure a system font loads first, then after your custom web font has downloaded, switch to your true custom web font.

Even with the WebFont load I haven’t escaped fully from the “Flash of Invisible Text” but with this script enabled I am rendering fonts on the page faster than before.

Lighthouse has a neat feature that traces each stage of your website as it loads down to the millisecond and shows it to us in the following screenshots.

Here’s the trace of the Marketers Delight front page without a WebFont loader:

…and here’s what the trace looks like with a WebFont loader:

Notice a difference? It’s subtle, but the very first panel in the first screenshot shows my website’s colors but with no text. These tests can sometimes vary, but since enabling the WebFont loader, I am seeing far less instances of invisible text.

So how do you enable a WebFont loader? If you use the newly released Marketers Delight 4.9 all you have to do is enable the setting from the “Site Performance” settings panel.

From there, re-run tests through Lighthouse and see if it helps your score and most importantly, if you see your website trace render fonts sooner than later.

Website Performance Can Get Complicated But Marketers Delight Makes it Easier

The reason myself and so many of my customers have fast websites is because we made smart decisions about our website software upfront and picked a highly optimized theme like Marketers Delight to power our businesses.

Even though MD offers a versatile design and typography system, tight email form integrations, a powerful popups builder, and other great features, it is an extremely lightweight theme overall and uses the most minimal resources possible to power its features.

When you run a plugin like Query Monitor you will barely see Marketers Delight make any queries outside of the standard WordPress Loops. That’s because all of your custom settings are pulled from a single optimized database query and pulls fast on any hosting environment.

Even better, Marketers Delight doesn’t require any libraries like jQuery to load these features on your website, and each new update not only brings new enhancements, but more optimization tools like the WebFont loader, reducing default WordPress scripts, and the print critical CSS feature.

The tips I shared with you in this guide can benefit any site, but because Marketers Delight is built as a single unit, you can get the benefit of its power features with many performance optimizations right out of the box.

Now I have a question for you:

Was there an issue on your site causing a slowdown? How did you fix it? Share your best tips in the comments below!