PageSpeed: Causes of Slow Stores - Part 2
4 Reason an E-commerce Store is Slow
In the previous article, we talked about if Google Page speed actually matters (it does), what people say about it, and what is the best position to take on the matter. This article focuses on the why of slow stores and sites. If you are just joining us now, you can probably start here if you are looking for answers, but if you want the backstory check out: Does Page Speed Matter?
Common Causes of Slow Stores
- Plugins, Apps, 3rd Party Libraries
- CSS, Javascript bloat
- Images
- Servers
Let’s look at each of these, but start from the bottom up to understand the problem.
#4 - [Slow] servers can sometimes be an issue
This is a common stereotype in the e-commerce “open source” world. Open source is a great resource, used properly. Stereotyping for a moment.... people select one of the myriads of largely PHP based projects for 1 of 2 reasons: 1) customization, or 2) cheap price tag. Because of this and the fact that PHP replicates like rabbits on the internet, you see a vast spectrum of hosting quality, plus a wide variety of talent configuring those sites, that may not understand the settings “up and down the stack.” These sites can perform fast, if configured properly and served from a good machine. There are many configuration options on servers, of any type, test your site with Lighthouse in the Chrome-family of browsers and eliminate any issues you may find.
Those on the SaaS platforms, this shouldn’t be an issue for the most part except for some of the smaller platforms. Unfortunately, these settings are also out of your reach.
#3 - Images: incorrect size, eager loading, and more
When you upload images, if they aren't the correct size, can really slow down your site. Images are heavy in terms of bandwidth, and Google favors mobile scores that are really affected by a small pipe of bandwidth to your customers phones! Images should be just big enough for the width of the site you are displaying them on. 80 percent of this can be fixed with one image, properly sized for desktop to phone. But if you want to optimize/fix it more you need to use srcset on img tags, so the browser can selectively pick the best sized image.
Eager loading can become a problem. Eager loading is the default for images - they load when they are encountered by the browser. This is a good thing when in the initial viewport (helps your score), but any other image either off canvas (not visible) or further down the page are not needed immediately. When
#2 - Bloated CSS (styles) and JavaScript
CSS stands for Cascading Style Sheets are what the web uses to control what the look and feel of the site is. CSS transforms the code (HTML) to look a certain way. Basically, just like images we want this as light as possible, at least on initial page load. CSS largely must be evaluated prior to displaying your store to your customer. The browser blocks (basically pauses) until this is complete.
JS, or JavaScript, is code that runs in your browser and is relied on heavily on the Web today. It is part of any site, and again too much slows things down. Not only does JavaScript have to be transferred to the browser, but it also has to be evaluated which takes time for it to start working. This becomes an issue because it can slow down the time until your site is interactive, which can annoy customers (and lower your PageSpeed score.)
#1 - Plugins, Apps, 3rd Party Libraries
This is the easiest to solve but often put you in a business dilemma. Lots of Plugins, Apps, or Libraries tend to slow things down. You don't have a lot of control on how they do things so you have to accept them hook line and sinker. This is unfortunate because these items are either foundational to your store, but also are a major hurdle to getting fast site speeds, or higher Google PageSpeed scores.
The next part is on improving your store's speed! We look forward to seeing you there: How Do You Make Site Faster?