Why Site Speed Matters 

Why does site speed matter? In the digital era, speed is of the essence for internet users. Top of the list for your eCommerce website goals should be making your website as fast as possible. It’s great having good content and products that people want to purchase but if visitors to your site experience delays accessing this then you’re not going to convert. The key reasons for developing your website’s speed:

What affects site speed?  

Anything over 3 seconds, that’s all it takes for a visitor to lose interest in your site. With a high probability of losing custom, every second counts when it comes to keeping visitors on your site and even more important; converting them. So what affects site speed? Numerous factors hinder your site’s performance including taking into account other sites in your industry.

Page load

Page load refers to how long it takes for the elements on a page to be downloaded and to display the content of a page in the browser to allow the user to interact with these elements. Various factors affect this from the site server to website design. 

Imagery 

Imagery can considerably increase your page weight and your page loading times if not in the right file format or size. 

Unused CSS/Javascript files 

CSS & Javascript files are needed for the site to function properly, however, over time this is common to find legacy files that aren’t needed anymore but are still there and impact site speed as they load.

How to measure site speed 

You now probably want to dive straight in and begin making improvements but before you do anything, you need to measure your site’s current performance. There are a few tools around that can help you do this with one of the easiest being Google’s Page Speed Insights. This tool gives you an instant snapshot of your site’s real-time performance on both mobile and desktop. It also shows suggestions for improvement with a traffic light-style system with green, orange, and red ratings. It will also pick up on Core Web Vital (CWV) and the following factors:

If you’re looking for a more detailed delve into your site’s performance there is GT Metrix which also tests how your site works in global test locations. 

Kanuka Digital and site speed

When it comes to making your website faster, a multitude of elements will improve the user experience to convert your website visitors into paying customers and that’s where we come in; 

How we’ve optimised our site 

Off-the-shelf WordPress themes have a reputation for being bloated. The need to cater to everyone means their developers throw in the kitchen sink. Developing a fast website means building from a clean starting point. That’s why we build bespoke WordPress themes. Working from a clean slate, we carefully built our theme including just the essentials with performance in mind.

We chose to work with the lightweight CodyFrame front-end framework. CodyFrame provides a small collection of utility classes that cover common front-end needs. When we build a website, rather than write specific CSS styling for every element, we use CodyFrame’s single-purpose utility classes such as font size, colour, etc. Using these classes can speed up development and improve website performance by reducing the overall amount of CSS that is written for a project.

Over time as a project is built upon, unlike traditional CSS, the amount of custom CSS remains fairly static as we’re able to reuse the same utility classes over and over.

CodyFrame has a library of front-end components that can be taken and extended upon. As these are selectively included per project, there is very little overhead. They inherit the global project styling (fonts, colours, and spacing) and are built upon the same utility classes, resulting in a minimal impact on overall performance. These components were a useful starting point for building out sections of our website. 

Script 

With regards to JavaScript (JS), we used “vanilla” JS. With no dependencies on third-party frameworks such as jQuery, we were able to keep the overall amount of JS to a minimum.  Front-end theme assets are compiled, concatenated, and minified. During development, we write our styling in Sass, running a Gulp task to build our final optimised CSS & JS assets.

Outside of the JS used across our site, we carefully considered the usage of third-party JS widgets (such as tracking scripts, analytics, Facebook Pixel, Bing Pixel, Twitter Universal Website Tag, LinkedIn Insight Tag, etc). All the third-party code adds up and on established sites can snowball over time as services are tested out. It’s always worth continually reviewing and disabling unused widgets that aren’t indispensable. 

Imagery 

As we mentioned earlier, imagery is key to speedy sites. We resized ours to avoid loading in larger images than necessary and served them through a CDN (content delivery network) in the form of Jetpack’s Site Accelerator which serves optimised images, using compression and modern image formats where supported (webp).

TOP TIP

Pick the right image format where appropriate. JPEG/PNG/SVG. SVG’s for logos where possible. PNGs where the image contains text or illustrations, or when a transparent background is required. JPEG is most suitable for photos where compression artefacts are less noticeable.

Another option is lazy loading images which mean only the images in view are loaded, the rest are loaded when the user scrolls and they come into view which reduces the initial page load. Personally, we add the eager loading attribute to images to ensure featured images are loaded straight away.

Fonts

Our designer crafted the typography for our site by carefully selecting typefaces. Limiting the number of unique web fonts and font weights helps to reduce the impact of fonts on web performance. We used Google Web Fonts Helper which allowed us to download and self-host web compatible font files that only contained the character sets that are being loaded on the site, drastically cutting down on the size of the files that were needed.

TOP TIP

To avoid loading any web fonts, if possible, use system fonts. These are pre-installed fonts which result in no impact on performance. It’s possible to build font stacks that ensure some consistency across OSs and devices.

Plugins

Surge

Although we did mention removing unnecessary plugins, there is actually a handful that are very useful when it comes to optimising your site for speed. We have been experimenting with a new full-page caching plugin called Surge which requires no configuration. It generates and serves static copies of each page, resulting in faster loading times.

Quicklink

Written by Google, now available as a WordPress plugin, Quicklink is a small JS file that can be added to any website. It automatically looks for links within the user’s viewport and fires a prefetch request. In our case, this both warms the cache server-side and while the user’s browser is idle, in the background pulls the pages down for super quick retrieval when requested. Quicklink makes flicking between pages feel seamless.

Overall, we’ve developed our site to optimum speed with it reaching a perfect speed score on desktop and within the optimal range for mobile. 

How can we help?

Need a new fast website building or a current website optimising? Whether it’s running slowly or you’re just not happy with how it’s performing, we can help by starting with a technical website audit or a complete rebuild

Get in touch

Fill in our contact form to make your eCommerce business flourish online.

✓ 10+ team of marketers, designers & developers with a passion for eCommerce

✓ Proven experience growing eCommerce companies from startups through to FTSE 100s

✓ Backed by iWeb, an award-winning eCommerce agency, with 20+ years of experience

Drop us a line on 01785 279985

Send us an email hello@kanukadigital.com

Quick Enquiry

Your information will be handled in line with our Privacy Policy.