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

This is the final installment in a series on Google PageSpeed.

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
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.