As a technical agency we get a lot of speed optimisation work come our way. Whilst we’re big fans of Shopify and a committed Shopify Partner that works with a lot of high end Shopify stores. A common pattern we find with Shopify stores is around it’s performance, which is typically isolated to three main areas.
- Image handling
- Coding practices
Let’s drive into this a bit deeper.
You might ask what’s wrong with that? Two main things:
- They may be hosted on an external server, causing large network payloads and increased DNS requests.
Shopify has a great feature that automatically converts your images to WebP format which has a huge benefit in image file size. However, the caveat to this is that certain browsers including Safari on MacOS and it’s iOS counterpart don’t currently support it. You need to make sure that your image filesizes are small and compressed before uploading them, ideally to ensure you haven’t got a massive file still being served on Apple devices. You might find a hidden conversion killer on these devices otherwise, so don’t be fooled.
Use the correct image format for the right use. Photos should typically be JPG, graphics PNG and icons or outlined content SVGs. Have a documented process in place for uploading new product images to the store to ensure you’re not uploading big PNG files.
Lastly, be sure to also be lazy loading your images.
Most of this stuff will be a bit more technical and behind the scenes, so I wont go into great detail.
- Avoid hosting fonts and resources remotely.
- Image dimensions and formats not specified (large images provided in an icon’s space for example).
- Defer non-essential scripts if possible.
- Use conditions to only load what you need and where you need it. E.g. Don’t load every bit of code on every page.
Tip: Get familiar with what core devices and browsers your website is most commonly loaded on via Google Analytics, because if you do have heavyweight images being loaded on Safari as mentioned above you’ll be able to quantify the impact it’s having on your site.
Google Analytics Reports
- Navigate to Audience > Technology > Browser & OS to identify the most common browsers used to view your website.
- Navigate to Behaviour > Site Speed > Page Timings to get a breakdown of speed per page. You can also layer in a Secondary dimension of Browser to this report for further analysis.
Most stores will have an item in one of these areas holding it back. Just remember it’s the little hinges that swing big doors that make the difference.
Get in touch to find out which of the three areas is holding back your store’s performance!