Municipal

Municipal is a sports fashion brand that wanted to update its store to stay on the edge of technology by improving the site speed and providing a user experience that is flexible enough to resemble a mobile app while still on the website.

Optimizations

We have started by doing a full audit of the site to identify where the issues were located, and we noticed a few areas of improvement that did a great improvement on the overall website speed and experience

First of all, we noticed that their file weight was quite larger than what is recommended for a modern website, ~4mb for a javascript file, since this website came with the codebase and the bundling system it was built with we had the opportunity to work at the core of the building system and improve it to the point of reducing the weight of their javascript files down to ~1.6mb when minified.

This is still slightly larger than what is recommended for any modern website however, it still signifies a reduction of over 50% of the file weight, which is a huge improvement nonetheless.

Another important improvement made to the overall website weight was to optimize the overall website imagery by sticking to the latest web standard improvement regarding image optimizations, which is to use browser lazy loading together with browser source management which allows the browser to decide what image size (and weight) is the most optimal for the current session browser and device.

This optimization was possible due to Shopify's capability of providing different image sizes on the fly which works in two very important ways:

1. Shopify (re)optimizes the image to reduce the weight while trying to retain as much quality as possible
2. Shopify resizes the image to the size that is requested which reduces the weight even further after the previous optimization.

Another benefit of this combination of improvements is that the browser decides what the most suitable image is, it completely removes the situation where certain devices will have lower-quality images loaded if they are not managed properly or the opposite depending on what type of device was given as priority.

Improvements

As part of the layout updates that were requested, we have changed a couple of core pieces that were off our team's control.

One of them was the integration of the search results and collection templates. In the past, that was handled by a third-party provider and they have had multiple complications with performing small updates on these pieces of the website, which led them to realize that we needed to control those pieces in order to timely update them when needed.

So for this update, we have decided to keep the layout as it was while taking control of the codebase that was rendering the pieces. This reduced friction and the time investment required when customizing the affected pages, allowing us to implement the image quality update described above as well as a new integration with the newly created drawer system.

The drawer system was a bit of a challenge due to the nature of the issue, for a few weeks only Apple devices were affected by a random bug that forced the browsers on those devices to crash completely, after so much digging we have found that the reason for such crashes was present on the drawers structures.

See, the site was meant to be as close as possible to a phone app, and this made us start using several drawers for different types of content: Navigation, Cart, Shop the Look, and Size selection to name a few. This amount of drawers started to pile up very quickly to the point where the browsers were unable to handle them anymore and just crashed (if you have an iPhone or an iPad you can test this yourself here).

Once we figured out the reason behind the random crashing we went all hands in and decided to create a drawer system that allowed us to have as many drawers as we wanted but only render them one by one so in real-use scenarios there would be up to 3 drawers rendered at any given time.

Results

There was a significant improvement in the overall site experience, mainly traduced in lighter pages and reduced load times, while the code got updated so it was easy to pick and continue updating, keeping the maintainability of the site should always be the number one priority no matter the size of the updated performed.