Site performance is paramount to success in the digital age. If you have a slow site there’s a good chance that people are leaving quicker than they should.
The good thing about living in this day and age is that you have access to many great (and free) tools to test your site's performance.
When we work with a new client a first typical step is to run the site through two performance testing tools, Google Page Speed and GTMetrix. This will provide two references points on what to go by and also a benchmark to show the client.
While some companies will only use one, we always use both to get a clearer understanding of all areas (GTMetrix does better in some areas, while Google Page Speed is better in others).
Once you’ve run your site through both platforms the results you should be focusing on the following metrics. NOT ALL.
- Image sizing and best practices
- Largest content paint and load times
- Reducing JS and CSS sizing
Sites with huge images (15MB) are going to take way longer to load than those with web efficient images. If you have several huge images the load time is going to be impacted greatly. Before uploading any images you need to make sure that they’re the correct size, crop and compression – you shouldn’t be uploading 4k images for mobile devices! If you're working with a graphic designer let them know how your images should be delivered, otherwise here's a link to best practies to serve responsive images.
Image sizing is key. Pages with images that don’t have set sizing will need to be re-rendered after they’ve loaded. You should be specifying the sizing of images so that the page doesn’t need to re-load. For example your Mobile Hero image sizing may need to be 300x 600 on mobile devices, while on desktop a different size 1920x1080. Make it easy for the browser to understand what should be where the first time. If you don’t do this the screen will jump around – which isn’t a great user experience. How to properly size images from Google
Pre-loading images that are critical for above the fold/2 screenfulls. Hero banner images should be loaded ahead of time so there’s no jumping around, while all other images that aren’t directly involved in the initial load should be lazy loaded (with the correct sizing listed) How to preload images from Google.
In the past, server speed was an issue but because most of our clients are on Shopify or BigCommerce this really isn’t an issue these-days (bless).
Reducing the sizing of your Javascript (JS) and Cascading Style Sheets (CSS) can shave time off your page load speeds. While this might look like gobbledygook to most, and you may not really have an option (if you have a pre-built theme you might need a developer to get this solved). It can help a lot to remove unused JS and CSS Libraries/asset packs. Furthermore some JS libraries can dramatically slow down load times or reduce responsiveness on a site – again this may not be an option without talking to a developer to fix.
Lastly a metric that may not pop-up directly is related to plugins/extensions. While many people believe that plugins/extensions are king, not all are created equally. Ideally you want to USE AS MUCH NATIVE FUNCTIONALITY as you can before installing another plugin/extension; as most will load a JS library which can slow down the loading of your site. I would suggest going through the list of your plugins frequently and removing those that aren’t adding value, or if there’s a small plugin that you need it might be worth chatting with a developer to see if they can implement the feature on your site without all the additional load. How to remove unused JavaScript
I hope you got some value out of the above. While this list isn’t exhausting and comes with a lot of nuance, unless you have a developer as a part of your team, you’re going to need a partner that can help you to identify gaps in your site's performance and create a plan to implement, that’s where we come into it.
Please don’t hesitate to reach out to me if you’d like to find out how to increase your sites performance and or if you have any questions regarding the above. Click here to book in a time to discuss
