How and Why to Optimize Page Speed for Better SEO and UX

John Davier
John Davier

Last updated on

May 7, 2024

There’s never been a better time to focus on improving the page speed of your Shopify store:

  • A major change to the way Google evaluates websites for search ranking is due in the new year. This change will make site speed and user experience more important to SEO ranking than ever before.
  • Ecommerce is booming, with customers switching to online retail every day. Providing them with the best experience in your store, including fast loading, will help to ensure their switch to eCommerce is a permanent one.
  • [caption id="attachment_3924" align="aligncenter" width="770"]
monthy shopping activity line graph
  • According to data from Bazaarvoice, online shopping activity has rocketed since March and remains considerably higher than it was in 2019. Image source: Bazaarvoice[/caption]
  • And the competition is intensifying. With eCommerce on the rise, you can expect competitors to up their game and shoppers to be more intelligent. Frustrate your customers with slow-loading pages and they'll be off to a rival in no time.
unbounce bar graph

(Image source: Unbounce)

These are three great reasons to optimize your page speed right this minute.

And we’re here to tell you how to do it. We'll also go into more detail on the benefits it will bring. In this article, we will look at 3 simple yet effective ways to improve your site’s load speed:

  1. Optimizing your images
  2. Lazy loading your images
  3. Minifying CSS / JS on your store.

Let's get right into it.

1. Optimizing your images for improved page speed

In a typical eCommerce store, image files account for roughly 50% of all the data. So, if you can reduce the size of these files, you can significantly improve your site's speed.

And this is true whether you're a small boutique store or you have a huge inventory with thousands of images on your site. A Shopify store specializing in environmentally-friendly fashion cut their overall load time from 4.7 seconds down to 1.1 seconds by optimizing 860 images on their site.

But how do you go about optimizing your images for page speed?

Let's take it step by step.

Image optimization step 1: Creating the image

While the end goal of image optimization is to make the files small, it's a good idea to start fairly big. In other words, create your images with enough pixels that it is possible to compress the image and still ensure quality.

  • Shopify recommends 2048 x 2048 px for square product photos.
  • The maximum size for uploading to Shopify is 4472 x 4472 px. If it is essential to have very high image quality, you can choose this size. Otherwise, it's best to stick with Shopify's recommendation.
  • The minimum size you should consider is 800 x 800 px. Any lower, and zoom functionality will no longer be possible for your images.

In summary, unless you have specific requirements for either high or low-quality images, create your images using 2048 x 2048 px as your benchmark.

Image optimization step 2: Choose the file type

Although Shopify allows you to upload JPG, PNG, and GIF files, you can rule out GIF immediately. The quality is simply too low.

Here are the main advantages and disadvantages of the other two file types:

  • JPG offers the best overall balance between quality and file size. However, JPG is not the best option if you need the best quality images.
  • PNG offers very high quality, but the files are larger. Plus, they lose more quality when excessively compressed.

A final option is progressive JPEG files. These load gradually, and can therefore help pages to load faster. Users initially see a low-quality image, which gradually transforms into a high-quality one, just like this:

progressive jpeg loading

(Image source: Liquidweb)

In summary, your default image file type should be JPG, as it offers the best balance between size and quality. If you expect to have fewer images and need them to be very high quality, choose PNG. And if you have a very high volume of images, consider Progressive JPEG files.

Image optimization step 3: Reduce file size

This is the third and final step, and it's also the most important one. Whatever pixel size or file type you choose, you will have to further reduce the size of your image files to get your site running quickly and smoothly.

We'll take a look at what Shopify does to reduce image file sizes. Then we'll see how an app can help you bring down image weight. Finally, we'll consider reducing images manually.

How Shopify reduces your file size

Shopify has a clever trick up its sleeve. It can automatically convert JPG and PNG files into WEBP files, a file type specially developed by Google that is up to 30% smaller than JPG or PNG but with equivalent quality.

But there's a catch. Two major web browsers, Safari and Internet Explorer, don't support WEBP files. So in these cases, Shopify maintains the original JPG or PNG file.

A word of caution. If you're tempted to convert all your image files to WEBP format before uploading them to Shopify, DON'T. If a shopper is using Safari or Internet Explorer to view your site, they won't see any images at all.

Reducing file size with an automatic image compression tool

Shopify's efforts are definitely helpful, but they're just a starting point. To really bring up the load speed of your site, you're going to need an image compression tool. The tool you choose should be:

- Built for Shopify. As we've seen, Shopify has its own practices when it comes to image optimization, so you want to be sure the app you're using takes these into account.

- Affordable and well-priced. Image optimization isn't expensive. Look for 12 or 24-month plans that offer lower than $0.125 per image.

- Smart enough to do SEO tasks too. The better apps out there will also be able to offer SEO services like automatically optimizing Alt attributes on your images. So you get faster loading pages and improved SEO.

- Always running in the background. Your app should automatically optimize any new images you add to your store.

- Customer service-oriented. Image compression should be a straightforward process, but depending on your store's size and setup, you might need additional help. So, choose an app that offers 24/7 support.

One Shopify app that offers all of these benefits is TinyIMG. It has a track record for helping Shopify stores drastically improve their site performance through image optimization, going as far as reducing the load time from 3.4 seconds to 0.9 seconds for a customer.

loading speed stats

(Image source: TinyIMG)

Other stores have seen load times drop from 4.7 seconds down to just 1.1 seconds, or have been able to save 550MB and get their product pages loading in just 0.7 seconds.

Reducing file size manually

You can also manually reduce image file sizes. But only consider this if you have a very small number of images and know how to use design tools like Photoshop. Or you’ll be losing a lot of time over this.

To do the job manually:

  1. Open the image in Photoshop, or a similar image editing tool.
  2. Reduce the number of pixels or the pixel dimensions using the Image Size dialog box.
  3. Refocus the image using one of Photoshop's tools for this purpose, so the image does not appear pixelated.

Lazy loading your images for faster page loading

Image optimization is all about making the file size smaller. In contrast, lazy loading is about how your images are loaded, and in what order.

What is lazy loading?

Lazy loading is a programming technique where the loading of an object is delayed until it is needed.

With images, it works like this:

  1. A low-resolution image is used initially for each image. This means the images load much faster.
  2. Then, as the user scrolls down, the images upgrade to high resolution when they appear before the user.

Here's how lazy loading images go from low to high resolution as the user scrolls down the page

lazy loading example

(Image source: Shopify)

So, imagine that a user arrives on your homepage. The images that they can see are loaded as usual. But all the images below the fold, which aren’t in the user’s vision, load at low resolution.

How to lazy load your images

This step-by-step Shopify tutorial on lazy loading your images will take you through all the coding steps you need to follow. Additionally, keep the following tips in mind when lazy loading your images:

  1. Be careful when selecting images to lazy load. Don’t lazy load images “above the fold" as they’re seen immediately by your customers.
  2. Avoid lazy-loading any images that are integral to the design and aesthetic of your page. Only use this technique for images like product pictures.
  3. Experiment with different design options for lazy loading to find the one that best fits with your brand. The options available include:
  • Showing the dominant color of an image before the high-resolution version is loaded.
  • Blurring the low-resolution version so it looks softer and less pixelated.
  • Having a gif of a loading sign (like a rotating wheel) instead of a low-resolution image.@

Minifying CSS for faster page loading

Our first two strategies for improving load speed (image optimization and lazy loading) have focused on images. That's because making image files smaller will have the biggest impact on page load times.

But there are other elements on your site that you can optimize too, such as CSS.

What is CSS?

CSS files are text files that work with your HTML code to make page design simpler. The Shopify theme you use will include CSS files.

What does it mean to minify CSS?

Minifying CSS means compressing CSS text files by removing any unnecessary characters, like spaces and comments. It also includes combining common styles, which reduces the amount of text needed.

Here is some standard CSS code:

standard css code

And here’s its minified version:

minified css code

How to minify your CSS

It's only advisable to minify your CSS code if you feel confident making changes to your code. While the changes are not difficult, it's important to be able to recognize what normal code looks like so you can tell if you have made any mistakes during the minification process.

To minify your code:

  1. Make a code backup before you make any changes by duplicating your theme. Go to Online Stores > Themes. Next to your theme, you’ll find an ‘Action Button’. Duplicate your theme from there. This way, if you make any mistakes (which could affect the structure of your site), you’ll have your old theme with you.
  2. Identify unminified files. Use a tool like GTMetrix to identify any unminified files. Files that are already minified will end with "liquid," for example, filename.scss.liquid. The unminified version of the same file would be named filename.css
  3. Rename the file you want to minify. Change css to scss and add liquid to the end of the file name.
  4. Edit the CSS file. As shown in the images above, you want to remove any spaces and any comments to make the text shorter.
  5. Preview the final version when you’ve finished editing. This will help you detect any errors. Go to Online Stores > Themes, and click on the Action Button next to Themes to see a preview.

Should I minify my CSS?

Because CSS files are smaller than image files, minifying CSS will have a less noticeable effect on page load times than image optimization or lazy loading. So you should prioritize those first.

Nevertheless, if you feel comfortable diving into code, minifying CSS is a straightforward process that you should be able to do fairly quickly once you get the hang of it. Research by Google shows that decreasing mobile site load times by just one-tenth of a second results in major performance gains. In Google's study, conversion rates went up by 8.4% for retail stores.

page speed improvement stats

(Image source: Google)

And increasing conversions is a really big deal. Too many Shopify stores focus their growth strategy purely on getting new traffic to their sites. That's why ad spend is the single biggest marketing expense for most Shopify stores.

But investing in improving conversion rates is the way to go because it helps you generate more sales from the traffic you already have so you can make actual money. Along with making your pages faster, there are a number of highly effective strategies Shopify stores can use to improve their conversions.

What are the benefits of faster page loading?

We've gone through three simple techniques for faster page loading. So, what benefits can you expect to see on your store once you have implemented them and your pages are loading faster?

Benefit 1: Better user experience

In the increasingly competitive world of online retail, user experience matters a lot. Here are some statistics on user experience that should get you thinking:

  • Kissmetrics’ analytics say that 47 percent of consumers expect a page to load in two seconds or less.
  • According to research led by Akamai, a two-second delay in web page load time increases bounce rates by 103%, while 53% percent of mobile site visitors will leave a page that takes longer than three seconds to load.
  • Unbounce’s 2019 Page Speed Report shows that a staggering 70% of consumers admit that page speed directly affects their buying decisions. Almost half of online visitors say they’re less likely to make a purchase if loading time is slower than expected. And a third are less likely to return in the future.
  • Every 1-second delay in page load decreases customer satisfaction by 16%, according to Kinsta.

Benefit 2: Improved SEO performance

Google cares a lot about page speed. Why? Because Google users care a lot about page speed as well.

In 2018, Google made page speed a key factor in mobile search criteria. In other words, Google started rewarding sites that loaded faster with better rankings on mobile search.

And next year, Google is going even further and putting page experience right at the heart of SEO. Google will launch a new page experience index in 2021 that will place higher importance on factors like:

  • Page load time
  • Page interactivity
  • Page stability

This means that if your page speed is poor, you might experience a big drop in your search rankings next year as Google makes the expected changes. It’s best to prepare for it now.

Page speed: key takeaways

We hope we have shown that improving your page speed is well worth your effort. Three simple, cost-effective techniques make this possible - image optimization, lazy loading images, and minifying CSS.

Let's leave it to Google to conclude this article. Google believes better page experiences accomplishes two business goals:

  1. Make customers happier;
  2. Make businesses more successful.

Optimizing for these factors makes the web more delightful for users across all web browsers and surfaces, and helps sites evolve towards user expectations on mobile. We believe this will contribute to business success on the web as users grow more engaged and can transact with less friction.

~ Google Developers

Author Bio

John Davier

Content marketing guru at Mailmunch. I’m passionate about writing content that resonates with people. Live simply, give generously, stay happy.

Tags:

No items found.
TABLE OF CONTENT
Don't forget to share this post!

Related articles