A Samurai Sword Is So Sharp It Can Slice Your Page Load Time In Half
What do you picture when you hear the word “katana”?
Katana is the most commonly known type of Japanese sword. Single-edged and usually curved, this longsword was traditionally worn by the samurai from the 15th century onwards. A sign of precision, strength and power these deadly weapons are crafted by sword smiths via a process hundreds of years in the making.
Optimizing Shopify stores for speed is no different—I hone my process every day, getting better and better results each time.
How Much Time Does A Shopify Speed Optimization Take?
The actual forging of a katana from selection of iron ore to preparing the various steels used through final heat treatment usually takes 2 weeks.
My first Shopify optimization took that long, too. Now, when clients ask me “When is it going to be ready?” I reply: “In five business days, give or take”.
Why can’t I give an exact time of completion?
Forging a sword and optimizing a Shopify store for speed are engineering projects. They do have requirements for technical time. They are as much a craft as they are a set of clearly defined tasks to be performed to achieve a certain result. The improvement of the process is discovered while performing the process itself.
What happens before a store is ready to load as fast as lightning?
As every good craftsman, designer, engineer or scientist, my process consists of stages, that ensure I’ll get to the desired result.
Stage One
Initial set up and on-boarding
At that stage I get access to the Shopify store. I create a staging theme to create a safe development environment that protects the live site. I then set up a private app that lets me access its files remotely. This is done for a number of reasons:
- My tools are better than the built-in editor Shopify provides for changing the code of the theme
- I want to track and save my changes in a version control system. This guarantees I’m able to go back and easily undo a change that breaks the store
Stage Two
Deep performance analysis
After the project environment is set up, it is time to get a closer look on the performance issues. At this stage I look at the code of the website and run more tests that clarify the exact location of the problematic code. Here I get to make note of everything that needs to be improved and how I intend to fix it.
Stage Three
Task prioritization
Now that we have the list of issues I sort them in two piles—the ones that have high performance impact on the store and require high effort to implement and the ones which have high impact, but require less effort. I start with the lowest hanging fruits, of course :) This way I can produce quick wins which I publish shortly after I fix them. That practice enables the store owner to benefit from the speed without having to wait for the project to be complete.
Stage Four
Working the list
During this stage I’m working on the code and design of the store towards the desired result. Working the list I’ve created for myself means measuring the speed of the page first, then implementing a fix, then measuring again to make sure that the change was indeed an improvement.
Stage Five
Hand-off
After the desired result is achieved it is time for handoff. At that stage I provide guidance on how to use and further customize the Shopify store it in a way that doesn’t kill my changes. A development guide is provided so that other developers working on the website know how not to break the optimization.
The Shopify speed optimization process is a perfect example of the 80/20 principle
Stage Four—the tactical step, usually takes up to 80% of the time and the rest take more like 20. In practice, how much will the implementation phase take depends largely on the store and its particular complications.
If you’ve read this far, I believe you’ll benefit from my “No Code Shopify Speed Optimization” guide! It is a quick read that’ll help you get the right mindset towards your Shopify store customizations.