June 20, 2019

How We Approach Website Speed

Marketing & Content

Tech Talk

Planning this article was an interesting experience.  My goal was to publicize what Valet’s opinion and approach is to website speed.  At the same time, I needed to express that opinion in a way that’s different from your typical blog post about website speed.   I think the best way to do that is to speak from the day-in and day-out of our business model and the clients we talk to every day.

So, here’s what that looks like.  Our clients aren’t huge companies and they rely on their website for either income or a solid brand presence.  They’re all on WordPress, we didn’t build their site, and they typically have one or two people responsible for wrangling the entire list of marketing and web responsibilities.  In other words, we engage daily with the largest segment of businesses with an online presence. This has become the norm.

Before moving on to anything else, we want to mention that website speed is an incredibly broad, complex, and overwhelming topic.  Because there are so many variables, it’s very easy to get lost in a rabbit hole of research on any individual topic within the conversation of speed.  We’ll stay with the big picture and what we think your mindset should be. You won’t find any rabbit holes here.

WordPress, 3rd Party Themes & Plugins

Have you ever searched for how to debug speed issues using Chrome Developer Tools? The typical result is a video from the Chrome Dev Tools team with a simple, practical example.  Man, I wish my debugs were that simple! One simple, easily visible issue, please!

Anytime I’m debugging, the network panel feels like the stampede scene from Jumanji except the animals are jQuery libraries and lists and lists of images from your DSLR camera.  It feels that way because of how easy it is to create a visually compelling and revenue generating website on WordPress without coding it yourself. That’s a beautiful thing and is the biggest reason many of us decided to earn a living from it.  But building a WordPress website with off-the-shelf products, if you’re not experienced, will cost you in the form of speed and other issues. In all fairness, it’s a typical business growing pain, one that we see and remedy often.

To have reliable speed, you need to have full control.  

Very large companies typically have an in-house development team that can tweak every corner of their codebase and make it fly.  However, many companies don’t have that luxury. Here’s a typical scenario for most businesses out there:

  1. You know for sure that a certain feature on your site is your bottleneck.
  2. That feature is ran by a 3rd party plugin.
  3. It’s mission-critical to your websites purpose and/or business.

Without the resources of a development team, you’re a bit stuck.  There are two options. You can either find a different plugin that’ll kind of give you what you want or incur the costs of editing and maintaining the plugin yourself and/or paying someone to do that.  Most will stick with what they have and make speed improvements elsewhere while giving feedback to the author of the plugin.

The Valet WordPress Healthcare Hierarchy. Speed is the second tier on the pyramid. The only thing more important is Security.

The Technical Foundation & Fundamentals

Any blog post written by a knowledgeable author will mention what we’ll point out in this section. Notice how all of these topics are aspects you can control in the context of a WordPress site.  They are incredibly important and foundational to your website’s speed.

Hosting

You need a fast host.  Ideally, a managed non-shared host that is opinionated about page caching (temporary storage of a pages HTML) and has that feature built-in.  A great example is Pantheon.  They actually take a cached version of your page and push out to their Global CDN so that any visitor gets a cached version of a page from a server that’s geographically closest to them, cutting the time it takes for the page to load regardless of the viewer’s location.  That’s wild to me. And it's the first time I’ve ever seen that.

Caching

Page Caching is a must for all pages that don’t change based on the user type (e.g. a logged in user vs logged out user).  If your host doesn’t have it built-in and you can’t migrate to another platform, consider hosting your DNS through CloudFlare.  They’ll give you page caching for free.  If you can’t do CloudFlare, then using page caching from a plugin will do.

There’s also the topic of Object Caching, but we won’t hit that here.

CDN Use

A CDN will place all your images, JavaScript files, CSS, fonts, and more on globally distributed servers so that your visitor's browsers can download those from a server that’s close to you.  If I live in Florida, there might be server in Atlanta where my browser will download those things instead of perhaps, California. Much faster.

Image Optimization

Images always need to be optimized.  Ideally, image editing and optimizing happen before you upload it to WordPress.  Otherwise, use an image optimization service.  We really like Imagify.io.  They have their own WordPress plugin that will automatically compress your images for you and even make your JPEG’s progressive.  These services are cheap and worth twice as much for what they contribute to your website speed, pay for them!

General

The User’s Perception of Speed

Person sitting with the definition of perception on their shirt. User perception of speed is important.

Once you know you have the technical foundation to deliver on speed, your next stop is the user's perception of speed. This is where all things speed are headed.

If you run a website speed test with Google Pagespeed, you’ll find metrics in your results such as “First Meaningful Paint” and “First Contentful Paint” that all try to answer the question of “How quickly will a user consume content on your site?”  This is an incredibly important question. It’s common to hear that a user will leave your site within a couple of seconds if you don’t give them anything meaningful, right? We have to be able to measure that.  Google lays out their entire opinion of how they observe User-centric Performance Metrics.

In our earliest Site Speed Assessments, I initially struggled with the best method for improving the user-centric metrics for our clients. I found that in order to improve these, you have to sacrifice important features, modify 3rd party plugins and risk future-updates, remove tracking scripts that support marketing purposes, and more.  Most of these things are either not doable or are costly to budgets and other business efforts.

Eventually, I concluded the best place to start is by picking the most important pages to evaluate their speed.  These could be landing pages, a shop category page, whatever converts business care of all of the fundamentals. My suggestion is to start a journey with a strategy of identifying your biggest bottlenecks and tackling them one at a time.

Everyone Forgets About Mobile

Including me, sometimes. Google will place any new site in the search engine results based on the mobile version of the site. This is called mobile-first indexing. This will place your site in search engine results based on the quality of the mobile version of your site.  Any new websites launched are subject to this immediately. All existing sites are being evaluated on an on-going basis as candidates to be switched to mobile-first indexing.  You don’t get to turn this off or opt out, they get to make the decision. You’ll know that your site has been switched if you get a notification in Google Search console.

All of the major speed diagnostic tools have the ability to give you results based on a mobile device. There’s actually not a ton of difference in your optimization strategy for mobile versus desktop. Unless you have visually captivating content.  Every millisecond and kilobyte is so much more important on mobile. Focusing on success in achieving the mobile-first search results you want will naturally yield success for your desktop results.

Pro Tip: Focus on mobile first.

Aiming For A Score From A Speed Tool

Tying a score to speed result makes sense.  It helps you answer the question “Am I better than I was yesterday?”  We’ve found that people will fight for a score regardless of whatever the underlying components of that score are.  Additionally, when Google announces that page speed will play a role in your search engine placement, you’ll likely fight harder for that score.  I won’t dive into this topic at length. I think this article points out clearly how chasing a score can be dangerous.  But there are a few points we’d like to concisely make:

  • There is no one tool.  Consider the suggestions across a few.  We’ve chosen WebPageTest.org, Pingdom, and Google Pagespeed.  Here’s a great way to think about speed tools.
  • A speed tools score should not be the final goal.  The rules governing those calculations change at the will of the creators.
  • Use the specific findings and suggestions from speed tools as a way to improve website speed for your users.

Never Stop Watching

WordPress core, plugins, and themes are constantly updated.  Consequently, any one of those updates could potentially impact your website speed. And, it’s important to keep on top of those updates for security reasons! Monitoring your speed on a daily basis can help you identify what went wrong if things do indeed go wrong.  

Putting It All Together

  • Get the fundamentals in place.
  • On your most important pages, use your mobile speed results and suggestions across a few speed tools to assemble your strategy.
  • Get an assessment done (by anyone) to understand your biggest bottlenecks and what your options are for tackling those.
  • Monitor your results.

If you'd like to ask Valet for help in getting a comprehensive look at your website speed we would love to hear from you. You can also check out our Website Speed Assessments to see what options are right for you.