PageSpeed: How Can You Fix a Slow Store? - Part 3

5 Tips For Getting A Faster E-commerce Site

This is the final installment in a series on Google PageSpeed.
  1. Does Page Speed Matter? 
  2. What Causes Slow Speed?
  3. How Do You Make Site Faster? (this article)

If you are just catching up with us, I would recommend reading the prior article on the four main causes of slow PageSpeeds, and the first part talks about if PageSpeed event matters. This article is a high level overview of what you can do to fix issues causing slow speeds. We can't go in to painstaking detail on each of these tips or exactly how to apply them, but they should point you in the right direction!

Checklist for Common Speed Problems
  1. Fix any obvious server configuration problems
  2. Reduce any weight of images
  3. Reduce any weight of CSS, JavaScript
  4. Remove any plugins, Apps, or libraries that you don't need
  5. Delay loading of anything that you can

#1 - Fix any obvious server configuration problems
If you have access to your server configurations, fix the problems. They are usually setting that can be changed with an update to a configuration with UI or a text file.

#2 - Reduce any weight of images
This one is pretty easy that anyone has tools to fix. Download your images, or edit your images to a reasonable size.

The general rule of thumb is to resize the image based on width of where it is displayed on the site. Ideally, you want the image to be 2x the width of the image where it is displayed. So if the image is 600px (pixels) wide then upload a 1200px wide image. The height will be determined by the aspect ratio you need. The reason for the 2x width, is to support "retina" type displays (on Apple devices), or High DPI displays. The minimum you would want would be 1x the display width of the image on the site.

You can do all of the is with a Web Inspector in your browser and a basic image editor that you probably already have on your computer!

#3 - Reduce any weight of CSS, JavaScript
This procedure requires knowing the code base and how to read it. There are some "tree shaking" tools to find this code. Google Lighthouse will surface some of this for you as well. You may need the help of a qualified developer to do this in many cases. If you have a development team, this isn't a big deal.

Usually the biggest source of weight on these items are either front end frameworks (i.e. Bootstrap, Foundation, etc.) or the assets provided by your platform or your theme. JS tools, like React, also add weight to your code but can be the foundational tool your site is based on! They are big because they need to work in a lot of situations. This is the positive and negative of these choices -- convenience versus size or speed! There is not a clear answer here. You, your team, and your collective capabilities plus time will need to guide you on this.

#4 - Remove any plugins, Apps, or libraries that you don't need
This one may have some low hanging fruit. It also may surface some business decisions of speed versus features.... This is the biggest sword you have, and the reason it is a sword is because you may have to cut off some appendages to get the speed you are looking for. Generally the fewer Apps you have on your site, the faster it will be. When you add an App you immediately add JS, CSS, and possibly images. Additionally, these have second and third order affects. Often times there are extra communications that take place between your browser and one or more servers or server to server. These communications take time and often may have to traverse large geographic distances. The JS and CSS also have to load and process which also affect your PageSpeed score.

#5 - Delay loading of anything that you can
Once you have eliminated all that you can, the next best thing to do is to delay loading of these items. Unlike procrastination, this is a good thing if done properly! Basically anything that isn't visible or used on the initial page load above the page fold can be differed. There are many tools to help you with this. HTML provides attributes like async and defer. Or you can use a tool like Webpack, or another bundling tool, to either split up your code until it is needed.

After all this technical talk, what should I think?
Remember all of this is working towards a good experience for your customer. Experience is important, and speed is part of that equation! Search results are part of your success as well. Many technologies readily increase the speed of the site after the initial page load - click/page to page (but you still have the initial load to contend with).

In the end, you want to provide a superb experience for your customers, so you have too look at this holistically. Do you want to kill your Wishlist that makes you money hand over fist in order to get a faster PageSpeed? The answer is probably no. And that is OK! (BTW - Flex doesn't foist this decision on you.) As e-commerce businesses we need to balance our processes and tools with speed. At minimum, you want the site to be fast enough for the customers that are in your demographic and their expectations. At best, you want a fast site with the all the features you want. The best is possible, but it takes the right balance of technology.

Just your home page?
Remember you need your product detail pages to load fast too! People end up on all pages of your website from links and search engine results. If your home page is fast, but your product pages are slow that doesn't provide a good experience either!

Convenience versus Optimal
From a business owner's perspective, these items are a convenience versus prowess issue. Our opinion is that as you prove your business, you should start to move towards a more sophisticated and technically advanced solution that can provide all of the bells and whistles you need, desire, and want to test.

If you have exhausted these 5 tips, perhaps you are on the wrong platform. We would love to have you on Flex! We build Flex to handle many of these concerns with out having to cut major features out of your ecosystem with minimal impact.

The state of e-commerce in 2021

Online shopping is up 18.62%. And rising.

The big boxes keep raising the bar. Small businesses must keep up.

The government imposed shutdowns are impacting those that can't do business seamlessly online.

This is the new normal. Shoppers buying patterns have changed. Do you have what it takes to stay ahead?

Start

What is Flex?

  • Is Flex a custom store?

    No, but it can be modified to be what you need.

    You don't need custom, unless you are in 0.1% of our customers. (Trust us... We have been building custom, one-offs for the past decade.)

    While it isn't custom, it can be customized in any aspect, at any level - from colors to workflows, to dashboards, to loyalty programs. Have questions - just ask.

  • Can I customize the checkout?

    Yes.

  • Is this a headless e-commerce solution?

    It can be.

    We think that is the right solution for some, but not all businesses. But we can open the Flex API on your store and act as one without restrictions.

  • What are the long-term costs?

    Infrastructure and maintenance.

    Both combined are less than platform costs, in most cases.

  • How is it priced?

    At numbers that make sense to leave platforms.

    Fixed base package. Fixed add-on features. Project based design, customizations, and imports.

  • Do I have to run my store on your platform?

    Flex isn't a platform. You can run it anywhere.

    For the nerds, we are an e-commerce framework to build stores quickly that can be customized infinitely.

  • Is this a platform?

    No.

    We find platforms restrictive for customers desiring this tier of store. If you are coming to us you don't want artificial rules holding you back.

  • Do I have to pay for it all up front?

    No.

    But it is more cost effective. We offer pay over time options. You do have to pay for all custom design and development up front. You can get the source code after your payment plan is complete.

  • Can this store be shut down?

    We make resilient stores that can be live anywhere. We can set you up with a site that fails over to another cloud (infrastucture) so we can make it difficult for those that wish to cancel you.

    You won't get shut down buy us because you own it. If you do get taken down, we can get you back up quick!

  • Do you offer discounts?

    Yes, for non-profits. And for our development cohorts.

    We do these cohorts on occasion to improve sections of our codebase. You get a store with a discount and we get to improve our code! Contact us to find out more.

Other recent resources