Take a look at the changes we've made to our privacy policy effective May 25, 2018. By continuing on this site you agree to the terms stated in this policy

Read More Close
Menu
Close

The Current

E-commerce

Page Speed and You Clear and Straightforward Insights on a Complicated and Moving Target

Page speed & you | Clear and straightforward insights on a complicated and moving target

When it comes to page speed, time is money. This telling KPI matters more than you may think, directly impacting your brand’s conversion rates. So how do you determine your page speed score, and more importantly, how can you improve it? Read on for all of these details and more!

Note – the following sentence may be the first time in recorded history these exact words have been arranged in this order in the English language:

Remember the good ol’ days of dial-up?

Websites were simple and there weren’t many of ‘em. Yeah, they were slow, but they were ALL slow. Everything was slow! Downloading an mp3 (100% legally, of course) could take a whole afternoon – even longer if someone in the same house had the audacity to make a phone call. Ah, the good ol’ days. Let’s pop in that AOL “free trial” CD-ROM everyone seemed to have and surf the frickin’ web.

Scholastic Book Cover of Kid Surfing the Internet

If you’ll now remove your nostalgia goggles to arrive in 2022, you’ll find that times have changed – websites literally live or die based on how fast and cleanly they load. These gazelles gallop gracefully across a colorful web savanna, hoping to arrive safely at the bountiful Google front page watering hole, while avoiding the dreaded cheetahs that will certainly drag them down to the dreaded “page 2” pit of irrelevancy.

It’s a tough ecosystem out there. Even if your product or service is best-in-class, a slow site will add considerable friction to your place in search engine results. And every second counts… make that milliseconds. A study conducted by Portent, a digital marketing agency, found that “the first 5 seconds of page load time have the highest impact on conversion rates” and that each second of load time between 0-5 seconds resulted in a 4.42% drop (on average) in conversion rates. Time is actually money on the world wide web of today.

If your website is feeling a little more hippopotamus than gazelle, fret not. We’ve pulled together some solid suggestions to drop those page load times.

1. Understand how Google ranks page speed (and why it’s important)

The first step in dropping your page speed is finding your page speed score. But first we need to understand how search engines reward fast and clean-loading sites. In this post, we’re focusing on Google’s search engine and their own proprietary tool called PageSpeed Insights. It’s a free and robust tool through which any URL may be entered and run through their page speed benchmarks. After the test concludes, users are taken to a results page with tons of scores and metrics, all culminating in a page speed score, a number ranked from 0 to 100.

Here’s an industry secret: no one fully understands how this works. There are dozens, if not hundreds of metrics Google uses in determining your page speed score, some of which aren’t publicly available. Google does, however, explain a decent amount on how they run their tests.

How it works: At a high level, the PageSpeed Insights tool will load the site being tested on Chrome browsers on both desktop and mobile using “slow 3G mobile network speeds” to determine its scores. If you tilted your head at “3G,” you’re right, it basically doesn’t exist in the U.S. anymore. However, it’s the lowest possible common denominator for network speeds and a great baseline to test against. Again, there are tons of metrics being measured, but some of the big ones are First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). Here’s how Google defines each of these metrics:

  • First Contentful Paint: FCP measures how long it takes the browser to render the first piece of DOM (Document Object Model) content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an <iframe> isn’t included.
  • Largest Contentful Paint: LCP represents how quickly the main content of a web page is loaded. Specifically, LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport.
  • First Input Delay: FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.
  • Cumulative Layout Shift: CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift (when content on the page moves around due to loading) that occurs during the entire lifespan of a page.

Simple as that. If you run your site through the PSI tool and earn a terrible score, don’t panic! It’s completely normal for our clients to start around 10-15. In fact, some of the biggest names out there don’t rank very high. At the time of this writing, Amazon came in at 36 and YouTube scored a 45. You’ll begin to get a sense of scale the more time you spend with the PSI tool.

Page Speed & You Info Graphic Amazon YouTube WordPress Apple Twitter

While this may feel akin to an ancient civilization doing a choreographed song and dance to please a mystical deity, that’s kinda true… however, much can be done to increase your page speed score.

2. Benchmark and find your place in the pack

Now that you’ve documented your own page speed score, it’s time to see how you stack up against your competitors. Make a list of your top 3-5 competitors and head back to PageSpeed Insights – it’s time to throw down the gauntlet.

Run the page speed tool on each of the competitors on your list, writing down the main performance scores for each. How’d you squeeze out? Top scores? Great, take a screenshot, send it to your boss, and go take a nap. You’ve earned it.

Not so good? That’s okay – now that you know what you’re dealing with, we’re going to help pump those numbers up (keep reading). Also, as you run more tests, you may start to notice a few things, like media-heavy sites tending to have lower scores (the YouTubes of the world) versus simpler and text-heavy sites, like Wikipedia, which scored a blazingly high score of 83 at the time of this writing… which brings us to our next point:

3. Optimize your assets (reduce file size)

Now that you’ve run a competitive analysis, it’s time to optimize – starting with the assets stored on your site. File size can have a significant effect on your page speed score. When a user accesses your site, images and video files are loaded on their devices. Even if your photo assets have been reduced to a few megabytes, when multiple images are being loaded on a page at once alongside every other element, they can seriously bog down the page’s loading speed.

In practice, this means going through your site’s CMS and checking the file size for each image or asset used on the site. If you find culprits, cut them down to size and replace each with a reduced version. There’s an art to reducing file size without impacting the quality of your photos, and the great news is it’s easy to do. We like running our assets through tinypng.com (.jpegs and other file types accepted), which is free and works beautifully. It certainly depends on the dimensions and use of your image, but aiming for a few hundred kilobytes or less will net you the best results. Generally speaking, there’s no need for an image to have a width greater than 2000px, but more importantly, images should be trimmed down to their purpose. Hero or background images can be 1920x1280px, but thumbnails and smaller images should be heavily reduced.

Pro tip: Depending on your CMS, there are plugins that will reduce your file size automatically when images are uploaded. (We like Smush.)

4. Get under the hood (optimize your site)

Now that your files are optimized, it’s time to get under the hood of your site. Think of it this way: The more cars (code) you have driving around the city, the more congested the streets (load time) become. Scripts, plugins, overlapping/redundant plugins, analytics, server response times – the more you can condense and simplify, the faster your site is going to be.

Here’s what our Senior Developer, Dave Barker, has to say about getting under the hood and improving your page speed score:

“Spending time in the code optimizing your site is the most effective way to increase your page speed score, hands down. It’s a tricky topic however, as there is no one-size-fits-all solution. Plugins and 3rd party services are powerful and easy enough to use, but rarely come perfectly tailored to your site and your needs. Ultimately, there is no substitute for simply diving into the code – when all else fails, hire a developer. Anyone can install plugins and 3rd party services, but a fully-customized and optimized site is quite often the difference between making a first-page listing and first-place listing.”

Dave gained these insights from turbo-charging dozens of websites over the years for various VOLTAGE clients. If you’re interested in the nitty-gritty and where he’d recommend you start your page speed journey, stay tuned for a deep dive from Dave coming to the VTG blog soon.

5. Stay sharp (these metrics are a moving target)

Now that you’ve completed the steps above and your site is humming along, you may now send your boss a screenshot of that glorious in-the-green page speed score and go take a nap. But sleep with one eye open, because these metrics change from time to time.

Staying on top of your page speed is manageable with a few techniques:

  • Run monthly or quarterly audits to benchmark your score over time
  • Be mindful each time you make an update to your site or add fresh assets
  • Keep plugins up to date, or better yet, remove ones you don’t need

A last thought here: remember why you started your journey in the first place. Achieving a higher page speed score is cool and all, but remember, the goal is to increase your conversion rate. By improving your site, you’re making it a better user experience for your visitors, which directly correlates to a higher conversion rate (…which equals more sales).

Wrapping it up:

With all these tips in your backpack, you’re ready to compete and thrive in the search engine savanna. Good luck out there – may your legs (website foundation) be springy like the gazelle’s and help you outpace the cheetahs (competition). It wouldn’t hurt to do a ceremonial dance on your way out the door just in case it helps you stay in the online ecosystem’s good graces – some updates will tip the scales toward you, while others will bamboozle your progress. It’s the way of nature… er… the internet.

If all this page speed talk has your head spinning, we can help. Get plugged in to a dev and strategy team that can make your page speed numbers industry-leading.

Want to grab more VOLTAGE Pro Tips and supercharge your strategy? Dive into this post on 5 ways to build a strategic brand.

Be a FORCE FOR GOOD

VOLTAGE is a digital agency specializing in eCommerce, digital brand experiences, and web apps. Get emails and insights from our team:

Like What You Read?

Share it. Your followers will thank you.

About Will Kuecker

Will Kuecker

Turning overthinking into brand value and killer copy. Renaissance caveman. Jack of all trades (and master of some). Innovator and problem solver. Never clicked a spam link.

View More Articles by Will

Read More The Current

  • Design apparel for Gen Z

    How to design apparel for Gen Z that will advance your brand

    Here at VOLTAGE, we love ourselves some sweet apparel. We often get requests to concept or design apparel from brands looking to connect with Gen Z’ers (who can effortlessly make even bucket hats look cool, teach us your ways!). So we launched into some deep research – which means we turned to our resident Gen Z’er and designer, Zach, for the inside scoop on this mysterious generation. Enjoy his take!