Bluelounge is an International design studio and recognized for its clever and unique products to solve everyday problems. Their products range from cable management, chargers, device stands, bags, to desk. I had worked with them from 2007 to 2013. When I started to go freelancing full-time, they were also one of my first clients. I consulted for their e-commerce requirements at the time and advised to switch their platform to Shopify. They took the suggestion and so the development began.
The new site was built completely from the ground up. We developed the custom theme with primary goal to have the fastest load time while keeping all of required functionality and ability to display unique page layout for each of Bluelounge’s 30+ products. I invited Rizqi Nizamil Putra into the team to help with the front-end development as time was of the essence as well. We completed the project on time and boy, the results were better than our expectations. Thanks for Shopify’s solid infrastructure, most of the web pages loaded in less than 2 seconds. A critical factor when you are building an e-commerce site.
You always want to make it better and faster…
Move forward to June 2016, Bluelounge came with a very specific but interested request. In order to improve the site’s SEO even further, they asked whether it was possible to get the PageSpeed score above 90 for both Desktop and Mobile from Google’s PageSpeed Insights and an A from GTMetrix website performance tool.
To be honest, I initially considered the request quite difficult considering one of Shopify’s major limitations was that we did not have full control of the server and apps. After a bit of research on Shopify’s forums, this was a very common issue as found here, here, and here. There are many suggestions there which you could take to improve the site’s performance bit by bit, mostly were already applied on Bluelounge website, but probably not enough to make it get >90 PageSpeed score.
I took on the job nevertheless, the challenge intrigued me.
When trying to improve a website’s performance, whether for SEO, load speed, or conversion rates, the first thing to do is to breakdown what have been done correctly and what’s still missing. That was exactly what I did.
Theme related items done:
- Avoid CSS @import; except for the web fonts which are loaded from MyFonts
- Valid HTML structure; no console errors
Content based items done:
- Optimize images
- Specify image dimensions
- Serve scaled images
Important items done by Shopify by default:
- Leverage browser caching
- Enable gzip compression
- Enable Keep-Alive
Critical items to improve:
- Minify CSS
Even with the fast load time, PageSpeed still considered the site’s performance below standard and only rated it 83/100 for Desktop and 66/100 for Mobile.
The first two items were relatively easy to do, with the right tools.
Minifying and combining CSS files
The website’s stylesheet had been built using SCSS with Bootstrap for the framework, so minifying the output file alone was not enough to make PageSpeed happy with the file sizes. I had to improvise. Using Bootstrap for Sass, I rebuilt the CSS by hand-picking Bootstrap components that were actually used and eliminated the rest. I also carefully merged individual CSS files into a single master stylesheet for most of the pages.
After minified, the final bluelounge.v42.css is about 123KB in size.
Luckily PageSpeed is more forgiving when it comes to JS files and I did not have to merge everything into a single file as I had done for the CSS. I still managed to combine 7 JS files into one to reduce the number of requests.
You could use these tools to combine and minify CSS and JS files:
Tip: always do thorough tests after merging and/or minifying CSS or JS files. At the very minimal, make sure you could still add items to cart, view shopping cart, and proceed to checkout.
Eliminating render-blocking elements above the fold
Above the fold means the initial area of your browser’s viewport before scrolling further.
The concept is simple: to get the browser to render above the fold content as quickly as possible by reducing as many unnecessary elements as possible. Unfortunately, it’s really easier to be said than done.
Eliminating render-blocking CSS
For quick and lazy approach, you could always move all your CSS calls to the bottom, before the closing </body> tag. The problem with this is, and you probably have seen it on some sites, you would see the page shown with plain content first before it quickly shifted to the stylized version a second later. For Bluelounge, this was not an ideal solution. They did not want to sacrifice form over function, which was understandable.
The solution was to use inline CSS for essential above the fold styles within the <head> and call the rest of the stylesheet from external CSS file at the bottom of the page. I needed to create a mini version of the CSS and only include classes used to render above the fold content.
Why not inlining the entire CSS file and save the trouble from having to rebuild an entire CSS block? Because you want to keep the HTML code light. Inline CSS is not cacheable. If I put the entire CSS inline, I would add 74KB on every web page and PageSpeed would not like it either.
At the end my inline CSS was around 21KB, mostly from Bootstrap’s grid classes.
After setting the right order of the scripts to be called, my work was done.
The numbers speak for themselves.
Of course PageSpeed score is different from page to page and you should not just measure the Homepage. In this case, most of the pages have the score of >85. Mission accomplished.
These steps may not be applicable to all Shopify powered sites, but hopefully you will be able to pick up a point or two. Also keep in mind that if your site uses many third party apps that add calls to external assets, it is almost impossible to control those.
Interested to optimize your Shopify website? Please do not hesitate to drop me a line.