Case Study: WordPress PageSpeed with Laurence Norah of Finding The Universe

If you’ve attended Mediavine conferences, perused our blog, watched our Facebook Lives, or know anything about us at all, then you’re likely aware of our page speed obsession.

Increasing page speed not only boosts ad performance, but improves user experience and typically results in even more traffic, thanks to Google’s equal obsession with it.

There’s a reason page speed drives everything we do.

With innovations like Optimizing Ads for Mobile PageSpeed, Desktop PageSpeed and lazy loading, we have you covered on the ad side. But what about on your end? How do you improve your website itself?

We’d love to tell you about how we made The Hollywood Gossip the fastest celebrity gossip site on the Internet, but that won’t be much help; THG runs on a custom CMS (for now) and employs strategies unavailable to a majority of our publishers, who use WordPress.

That’s why we teamed up with someone who can offer a more useful perspective: Laurence Norah, a Mediavine publisher (Finding the Universe) who dramatically sped up his WordPress site.

Check out his page speed tips, tricks and takes in our Q&A below …

When did you first start focusing on page speed?

Page speed has been a focus of my blog since relatively soon after I started my travel blog in 2010. As my background is software development, tweaking the code so the site loaded more quickly was something I did for fun really. Since Google has been putting more and more focus on fast loading sites, I’ve tried to stay ahead of the curve when it comes to following best practice.

However, as you’ll know from our previous series of articles, I launched my site on Blogger. This had some benefits in terms of being free and being hosted by Google, which meant it was pretty fast. However, it did limit what I was able to do, and there was only so much I could achieve on the platform. Since moving to WordPress, I’ve been able to do a lot more in terms of optimizing my site for speed.

Why are you so passionate about page speed?

There are two main reasons. First, I hate slow loading websites, so I don’t want to give visitors to my site an experience I wouldn’t enjoy myself.

Second, and perhaps of more relevance, page speed is so important for SEO. Google has made it clear for some time now that site load speed is an important ranking factor, and keeping Google happy is definitely important for us.

What are you currently averaging in terms of page speed on your site Finding The Universe?

I use a number of tools to measure site speed. I think the most important one at the moment is Google’s Pagespeed Insights tool, which is a Google tool designed to show how fast your site loads in a real world scenario on both desktop and mobile. On that I score around 87-91 on mobile and 97-100 on desktop.

I also use webpagetest.org for site speed tests, and there’s the super simple “Test my site with Google” tool, which I get under 2 second load times with (https://testmysite.withgoogle.com/intl/en-gb).

Finally, I use the Google Analytics site load speed tool. Generally that reports my site as fully loading pages in 6 – 9 seconds. That tool isn’t that accurate out of the box as it only samples a small percentage of visitors, but you can adjust the sample rate to provide more accurate results.

Tell us about your journey with page speed. What issues have you run into and how did you solve them?

Ah, where to begin. I’ll skip over Blogger and move straight to WordPress as I think that’s going to be the most relevant platform for most people.

When I first moved to WordPress, I will admit to being a bit like a kid in a candy store, suddenly having all this functionality. A lot of that functionality was in the form of plugins, which are basically a way of delivering a lot of code that does something to a site, without the user needing any technical knowledge.

Unfortunately, I quickly found out how much of an overhead plugins can add to a site. The problem is that often you will only want the plugin to do one or two things, but they come with a whole raft of features you may never need. Loading all those features can ultimately slow your site down.

So the first thing I did upon realizing this was to really carefully evaluate the plugins I was using, and make sure that they were something I absolutely needed. (Check out our blog post on how to do a plugin self audit.) Then, I taught myself PHP, and coded some functionality myself on my site, so I could skip using some of the plugins that were useful, but too bloated for what I needed. So things like social share buttons, notifications for comment replies and my related posts functionality, I decided I could put some bare bones, fast plugins together that would do that.

I appreciate this is possibly a bit much for your average user, but it is also possible to find either a developer to do this for you, or to dig around in the plugins repository and find some really lightweight plugins that will do this for you. Or hope Mediavine decides to expand their plugin portfolio.

One plugin I found really useful for evaluating other plugins was the Query Monitor plugin. This shows a whole host of things, one of which being how many database calls are made to load each page of your site. Some of the related posts plugins were making 20 or 30 database queries each time a page loaded! That seemed excessive to me. I try to keep it to a maximum of 50 calls per page load, and that’s with the admin bar on the screen, which adds overhead your average user won’t see.

Laurence with Megan, Susannah and Stephie at TravelCon in 2018

So let me talk about plugins I do use that I find essential.

First, an image compression plugin. Images are one of the main reasons pages take a long time to load, and it’s something the Page Speed insights tool goes a bit crazy over. It’s imperative to do two things with images – compress them as much as possible so the file size is as small as it can be, and then only send the user an image that is as big as the screen they are viewing it on.

If you have a 1000px wide image, and your viewer is looking at it on a 320px wide phone screen, you are going to be wasting a lot of time sending them an image that is way too big.

When it comes to compression, a lot of folks make the mistake of thinking that tools like Adobe Lightroom or Photoshop will compress their images. This is true to a point, but you have to remember that Lightroom or Photoshop, even with their “save for web” export option, are still primarily photography tools. So they will also be super-conservative with image compression, because they are trying to create a high quality image that is likely destined for a portfolio website for sale.

So you absolutely need to compress your images using a tool that is designed with page load speeds in mind. There’s a host of plugins available, and I have a guide to image compression here which lists some. My favorite for WordPress though is resmush.it, which is an entirely free image compression plugin. It is configurable for different qualities (around 76 works well I find), creates a backup of your original image file, and did I mention it’s free?

Once your image is compressed, you need to set up your site to serve the right sized image to the viewer depending on the device and screen size they are using. This is more challenging than just installing a plugin, and is something that has to be implemented at a theme level. If your theme supports it (most themes should), you’ll have to chat with a developer about making sure it’s implemented correctly.

Another great option for improving site speed is to lazy load images. This wasn’t supported by Mediavine for a long time, but thankfully this policy changed at the end of 2018, and lazy loading images is a fantastic way to speed up a site. Basically lazy loading just means that the images that aren’t on the page won’t load until they are in view, saving a lot of data on that all important first load time.

There are lots of plugins available for this, I use a simple one called Lazy Loader which does everything I need.

So that’s images. The other components of a page that download when the user loads your site are CSS and Javascript. I use a plugin called Autoptimize which compresses and optimizes my sites CSS and Javascript files, so they download faster.

There are a few other speed things you can do, which will likely require you to chat with your host to implement them, as they may require them to set it up for you. These are things like a cache solution, which can render pages faster, or a CDN, which caches your content at servers around the world, reducing the time it takes to load. I have both of these set up on my site.

Were you hesitant to add videos to your posts and why?

I’m sorry to say this, but ads are definitely an issue when it comes to site load times. Anything that loads on your site obviously takes time to download, and ads include a lot of script, image and video files which can really slow your site load time down.

With 2018 being the year of video, I was definitely keen to capitalize on the high RPMs of video units. However, even the mobile video adhesion player caused my site load times to increase.

It’s important to point out at this point that Google is (as of early 2019 anyway!) primarily concerned with your initial site load time, and how quickly it becomes usable.

What this means is that they want a site that the user can start reading and interacting with quickly. In practice, this means you don’t actually need to have everything fully loaded at the start. To get a high pagespeed score, you need to focus on getting that critical above the fold content fully rendered, and then you can worry about the other stuff afterwards.

Unfortunately, in 2018, whilst the Mediavine scripts were generally lazy loading, the initial load still took up a lot of that initial page load time, and the desktop video player really killed my pagespeed scores. I couldn’t sacrifice good speeds for the higher RPM’s, as the long term results in terms of SEO would not be beneficial in my mind.

You recently began adding videos to your posts, why the change?

So two things happened in late 2018 / early 2019. The first thing was that Mediavine gave me the option to delay loading of the Mediavine code on mobile, meaning that even the mobile video player wasn’t impacting my pagespeed scores.

Additionally, Mediavine adjusted the desktop video code, so that any video that loaded below the fold was delayed, so it wouldn’t slow down the initial page load. This made a huge difference to page load times, and meant that I could add the sticky desktop player with the setting to load it further down the content.

So now I can have the higher RPM’s that video content offers, without the hit to initial page load times that Google hates. Win!

Ads are notoriously slow in terms of page speed, yet you have them on your site and keep stellar page speed scores. What makes this possible for you?

To put it simply, it’s because Mediavine really cares about page speed. The reality is that ads are always going to slow a page down – a site without ads is going to be a lot faster overall to load. However, the code that Mediavine provides, and the settings they make available to me, mean that I can optimize how ads load to provide the best experience, both to the user, and also for Google’s all important pagespeed tool.

Thanks so much for joining us, Laurence!

And don’t miss our Publisher Interview with Laurence we shared last year or our traffic case study with The Pumpkin Lady.