How to Solve Issues Flagged in Google PageSpeed Insights and Other Tips to Improve Site Speed

“Alexa, what’s the weather outside?”

“Hello Google, where’s the closest Italian restaurant?”

“Hey Siri! How long will it take me to drive to the nearest airport?”

There’s no denying it now: we live in a world of instant gratification. But this need for a speedy response comes at a heavy price.

A real price.

It’s no secret site speed affects conversion rates - a 1-second delay in page speed time can cut conversions by 7 per cent. But it goes so much deeper than sales alone: customer experience, SEO and shopping behaviour are all affected by site speed.  

Time is the new currency, and speed equals revenue. A fast website not only encourages customers to stick around, but it influences a visitor’s perception of your brand.

So... how fast is “fast”?

In terms of page speed, fast equals less than three seconds.

John Mueller, Senior Webmaster Trends Analyst at Google, admitted that sites should aim to load between 2 to 3 seconds. Users attest to this: more than half expect a page to be loaded within that time frame, and visitors start to drastically drop beyond that.

Merchants are hearing this loud and clear: between Black Friday 2017 and January 3, leading retail websites in the Western world and China were ready to use in 2.5 seconds for consumers doing online shopping.

The Trickling Effect

Not only does a fast website effect conversions, but speed also influences how visitors can find you: both organically and with paid traffic.

Since 2010, Google has used site speed as a ranking factor (one of many), and they recently expanded their criteria to cover mobile. Starting in July, Google will use mobile page speed as a ranking factor in their mobile search results.

This will put more pressure on businesses who, as Google found, don’t live up to customers expectations: 70 per cent of the mobile landing pages they recently analyzed took more than five seconds for the visual content above-the-fold to display.

This means lost revenue - 53% of mobile site visitors leave a page that takes longer than three seconds to load.

This trickles down to paid traffic as well. Slow landing pages lower your Google Quality Score. The lower your Google Quality Score, the higher cost-per-click.

So, site speed does have a trickling effect on all of your efforts.

How do you maximize page speed?

First, start with a test.

This process helps reveal the elements on your site that need some help. When testing your site, it’s important to do so for both desktop and mobile, as well as the homepage and product pages.  

One of the more popular tools merchants lean on for testing site speed is Google Pagespeed Insights.

When you run your website through the tool, you’ll notice two scores:

1. The speed of your website: rated Good, Average or Low
2. Optimization: rated Good, Average or Low, along with a score out of 100.

The speed score is a relatively new update, and measures your site in relation to other Chrome users across the web. If your website doesn’t receive enough traffic, you won’t be scored:

Below this, you will see a list of recommendations Google suggests to increase loading time.

The Truth about Google PageSpeed Insights

Before you go implementing Google’s advice, you should remember there are a couple factors at play here:

1. Your ecommerce store may need certain functionalities that require third-party apps or large file sizes, rendering Google’s suggestions less relevant and/or…
   
   
2. You might not have control over the recommendations they make (which can definitely happen if your website is on a hosted platform, such as Shopify).

While these recommendations provide a good reference point for optimization, aiming for a perfect score isn’t necessarily the goal.

Google PageSpeed Insights is based off a set of standardized rules - Google’s rules. There is a perceived performance at play here, versus your site’s actual performance. There are many aspects to a site that may appear slow in automated tests but aren’t impacting user experience (such as background events that users don’t see).  

In other words, Google PageSpeed Insights doesn’t account for user experience as it relates to a website’s loading time.

Either way, you might be a bit overwhelmed on the issues it does flag. Words such as, “Eliminate render blocking” or “leverage browser caching” may sound like another language, and you’re not alone.

So let’s translate, shall we?

Note: some recommendations require advanced coding, and the end result can be minimal. It might not be worth the cost to change them.

“Eliminate render-blocking JavaScript and CSS in above-the-fold content”

Basically, this means you should restructure your code so that critical assets & content are loaded first. By prioritizing assets that provide necessary styling and functionality for above-the-fold content, you can ensure your users are able to access the most important part of the page as quickly as possible.

While everything on a website needs to be downloaded at some point or another, JavaScript and CSS files present their own unique bottleneck as they must also be executed. Because the browser stops rendering to ensure the files are executed in the most efficient way possible, these files can momentarily prevent content from being accessed. You should consider setting up your code so that the user’s browser downloads these assets last (or with parsing deferred), which can go a long way to improve page speed.

This can be tricky to implement though, and it should be done by someone with advanced CSS and JavaScript skills, especially if your store lives on Shopify.

“Leverage Browser Caching”

Whenever you visit a website, you’re downloading a lot of different assets into your browsers local cache - HTML, CSS, Javascript and images. This is done so a website doesn’t need to retrieve these assets on every page load.

When you see this message on Google Pagespeed Insights, it typically means the server doesn’t accept cache-control headers (these headers are what allow the browser/ server to know whether to serve a locally cached file or to download a new file). Or, it means that assets are specified to be cached for a short amount of time.

If your shop exists on Shopify, this issue can’t be resolved. Since it’s a hosted platform, you don’t have any control over the server, so unfortunately you can’t make this type of change.

“Minify Assets”

This one is also tricky, and should only be done by an experienced developer. This happens when Google detects the size of a resource can be reduced through minification.

Minification is the process of removing or fixing unnecessary data from resources such as JavaScript and CSS without impacting how a browser will process the HTML. It can remove duplicate code and make code shorter by stripping comments and white space characters and making variable and function names shorter, saving a few kilobytes here and there.

If you’re on Shopify, the platform doesn’t minify any assets, but it does minify SCSS files it processes. So if you want to ensure all of your assets are minified, you’ll need a developer’s help.

To get the most out of minification, you can take away SCSS processing duties from Shopify and roll out your JavaScript and CSS build processes with things like Webpack, PostCSS, cssnano and Purgecss.

In addition, many ecommerce merchants rely upon third-party apps, which are common culprits to this issue. You’ll most likely have to contact the app developer to manage these files.

“Optimize Images”

Images typically make up a huge chunk of weight on websites (around 65 per cent!), and you’ll see some big wins by compressing your images.

There will be times when Google points to an image that we can’t control (we feel your pain with this one), but all other images should run through a photo compression website, such as tinypng.com.

Another option is to crunch the images and serve them via a CDN (content delivery network), using websites such as Kraken.io or Imigix. This approach optimizes, delivers and caches your entire image library, so you don’t need to re-upload your compressed images.

Beyond PageSpeed Insights

Once you have tested your site with Google and understand what’s been flagged, it’s good to run your site through a few other site speed tools.

You’ll notice some slight differences between them all, which will be reflected in the score and page load times. There are a few reasons for this, but a common one is the server location; the network routing to get to your specific server will vary depending on where you are.

• GTMetrix: This tool merges Pagespeed Insights and Yslow for one cumulative grade - A to F. It also provides a thorough performance report that dials in on key issues.

• Webpagetest: Our favorite! With a whole set of advanced features, this tool can offer some great insight into your site speed. It’s got a handy “waterfall” analysis that thoroughly breaks it all down.
  
  
  
  
• Pingdom: This is another advanced test we recommend. With Pingdom, you can choose the server location you want to test from, which as mentioned above, does affect test results.

You should notice some similarities on the suggestions these tools make. It’s best to keep track of the repeat offenders, and address those first. Be sure to test your site once you’ve made changes to see how they perform.

It’s also good idea to test your competitors to see what’s wrong with their site performance as well. As Harry Shum, a computer scientist at Microsoft put it: two hundred and fifty milliseconds, either faster or slower, is close to the magic number for a competitive advantage on the web.

[slider]

[slide]

[/slide]

[slide]

[/slide]

[slide]

[/slide]

[/slider]

DIY Techniques to Improve Site Speed

There are a few tweaks you can make to your own site that don’t require any coding.

• Compress your images: Photography is the number one culprit in the world of page speed. You should always run your images through a photo compression program site before uploading them, or use a CDN (as mentioned above).
  
  
• Maximize the value of your photos: Each image that’s added to your site is another one that needs to be downloaded. Identify the images you need, and remove the ones you don’t.
  
  
• Delete the carousels: Not only do rotating image sliders carry a lot of weight (which take a long time to load), they are often conversion killers.  
  

• Eliminate unnecessary third-party apps: Since many ecommerce sites rely on third-party apps, it’s best to remove the ones that aren’t absolutely necessary.
  
  Try running a pagespeed test before the app is installed, and then after to see how much of a difference it makes in site performance.
  
  
• Check your fonts: Fonts take up a large amount of space on your website, so if you’ve got multiple fonts on your website, keep it simple and choose one.  
  
  Since it’s common for websites to use icon fonts for cart and account pages, we recommend replacing those icon fonts with SVGs (scalable vector graphics). SVGs come with a few improvements: they are not limited to single-color, are lighter in weight, and can be better for accessibility and SEO.
  
  
• Remove Social Feeds: Consider removing social media feeds and widgets. While they offer some value for customers, they increase load time significantly.

Other Factors at Play

There are also some additional elements you should keep in mind when trying to increase site speed:

• Use Reliable Hosting: Web hosting services play a critical role in the performance of your site. One of the reasons we recommend Shopify is that is has some key advantages in this realm. Since it’s a hosted platform, the server is scalable and is optimized to handle the needs of an ecommerce store. This means that load times are often quicker than they would be if you use your own server. 
  
  Shopify has proven this in action: at the peak of Black Friday, Cyber Monday 2017, Shopify processed $1.1 million sales per minute.
  
  
• Leverage Content Delivery Networks: CDN’s are a group of optimized high-quality servers that are dispersed around the world. It means that copies of your site content - images, Javascript and CSS files - are cached and stored in the server. So when a visitor enters your site, these assets are downloaded from the server closest geographically - which speeds up download time.
  
  Since the nature of ecommerce means you can sell internationally, you should strongly consider a CDN. 

Side note: Shopify provides a CDN for all static assets (images, CSS and Javascript).

• Try not to rely on quick shop pop-up windows: Many Shopify themes include a quick view pop-up window which provides an overview of the product from the homepage or collection page. This does so without loading an entirely new page. Many times, users can even add the product to their cart from this pop-up.
  
  
  
  As nifty as they are, these pop-ups often preload all of the information from a product page even if someone doesn’t click on the “Quick View” button. On a page full of thumbnail product images, this adds up to a hefty amount of data.
  
  If it’s not necessary, we recommend removing them.

As you can see, there are a lot of elements to consider that have an influence on site speed. It’s not an easy task to improve your speed, and some of these suggestions can be difficult to implement for an unknown return.

But remember… every second counts. Customer confidence will grow as a result of a speedy site, and so will their trust with your brand.

You just have to put the time in.