A few months back I published an article that outlined the top three reasons for a slow Bigcommerce store. Since then, I have received more questions on how to get a store to load faster and not just on the Bigcommerce platform but on other platforms as well. So, to answer these questions I will pour out my knowledge on how to get your store optimized and loading faster no matter what ecommerce platform you are using.
It would be easy for me to just give you a list of things to do without explaining why it works.
Instead I will focus on how your browser interacts with the server that hosts your store. Once you know that process you will understand that there are really only two ways of making a site load faster.
It is all about the Request-Response cycle
Each individual web page has a bunch of visible elements on it: images, text, videos, audio etc. It also has invisible elements: scripts, CSS styles and so forth. Each element on that page is requested by your browser from a server based on the code in the page.
Here's how that works:
- You load a web page in your browser
- Browser reads the HTML code and assembles an HTTP request for every element
- Browser sends that HTTP request to the appropriate server
- The server interprets the HTTP request, prepares the requested data and sends a response to the browser
- Start over
Each browser request contains headers that describe the request. For example, a request for an image might contain an Accept header that tells the server what kind of image the browser will accept as a response. If you use cookies, then the cookies will be sent along with the headers. Likewise an HTTP response from a server contains headers that describe the response. Some common response headers are: Content-Length which tells the browser the size of the response and Content-Type which describes the media type of the response (such as image or text).
You can think of the request/response cycle as a conversation taking place between the client (the browser) and the server in order to figure out how to get and display the various elements on a web page.
This dialogue takes place for every resource on your page such as images, videos, Javascript and CSS files. The more resources you have the slower your page will load because this dialogue is pretty long-winded. Now that you know how this process works, you are ready to know that there are only two ways to make your site load faster:
- Secret #1: reduce the number of request/response cycles
- Secret #2: compress the response data
That's it. Nothing magical about it.
All optimization techniques rely on these two secrets to make your site load faster.
Let's look at how you can limit the number of requests for images.
Reducing Requests
CSS Sprites
One way to reduce the number of images is to collect separate images into a single image. You can then use CSS to display or hide certain parts of that larger image. This reduces bandwith and it cuts down on the number of requests.
For example, if your website has three separate images that means the browser has to make three separate requests (one per image). With a CSS sprite it only has to make one request to grab the larger image and then you can use CSS to create the perception of three different images using the background property.
Drawbacks and Advantages
This optimization works best for UI elements (buttons, icons) and not product images.
File Merging
The same principle can be applied for Javascript and CSS files. Instead of linking to individual files you can simply merge them into a master file that is requested once.
Drawbacks and Advantages
The biggest issue with merging files is that it complicates the update process. You need to have special tooling in place such as grunt or gulp to create the file bundle each time a change is made to the individual files.
Once the tooling is in place then file merging is a no brainer.
SVG Files, Font Icons
Another way to limit requests is to use inline SVG (Scalable Vector Graphics) instead of regular images. An alternative to SVG is font icons. One popular choice is Font Awesome which has hundreds of icons to choose from.
Drawbacks and Advantages
The clear advantage to using inline graphics is that you will eliminate a lot of small requests where the headers can actually be larger than the requested content. The major problem is that most stores only use about 4-5 icons, but include the entire font set. If possible, only include the icons that you need in your font. If that is not possible consider using inline SVGs, or using the CSS sprites.
Inline Scripts
Javascript/CSS files can be inlined to prevent additional requests to the server.
Drawbacks and Advantages
Inline Javascript makes sense for smaller scripts where you have to add a live chat button to your store, or to install an analytics package. Other than that it is better to combine the inline scripts into a single file and include that resource on the page. Same goes for CSS styles.
Compressing Responses
The techniques above focused on reducing the number of requests from the browser to the server. This section will focus on compressing the response coming from the server.
Javascript and CSS files
You can use special tools to compress Javascript and CSS files. These minification tools remove extra whitespace and comments from your code, and use other clever tricks to reduce the file size. You can use this in combination with merging to create a single file that contains the minified contents of multiple files.
Drawbacks and Advantages
Just like merging, minification complicates your update process. A minified file is very different from the source file and you will not be able to modify it by hand. This means you will need make changes to the original file and then run it through a minification tool to create the compressed content.
Gzip
Another option is to simply zip the contents. That way you can compress the response automatically. Unfortunately this is a server side option and cannot be changed from the browser. You will need to talk to your ecommerce provider to see if this option can be enabled for your store. If your provider cannot enable compression then you can use tools to manually compress your resources and then include them directly on the page.
Drawbacks and Advantages
HTML code is verbose. It has beginning and end tags, and a lot of quotes. This makes it an ideal candidate for compression. For an added performance boost you can minify, bundle and then zip your Javascript and CSS files.
Conclusion
When it comes to speeding up your site you have two main options: reduce the number of requests or compress the response.
Every time a change is made to your site you have to ask yourself: is this going to increase the number of requests to the server? If it will then you know the load time will increase. The easiest way to reduce requests is to bundle individual Javascript or CSS files into one master file. You can do the same for images by using CSS sprites.
For compression you are limited to whatever your ecommerce platform provides. If the platform does not offer automatic compression then you can fallback on minifying Javascript files and including them directly in the HTML page.
We've only scratched the surface on the techniques that can be used to load your store faster, but no matter the technique it will still have to rely on either reducing requests or compressing the response. Now that you have discovered these secrets you can go out there and optimize your store with a new found confidence.
Happy selling!