5 ways to improve your site speed

Thee design of your site, as well as how fast it loads, are major factors in online conversion rates. In our previous blog post, we looked at ways to improve the design and functionality specific to a mobile site, which you can check it out here. Today, we’ll look into the best ways to start making impactful changes to your website so you can get it loading faster. To begin, here are some current stats:

Most users expect a full page-load within 3 seconds
If a page takes longer than 5 seconds to load, 75% of users abandon ship – that’s a loss of 75% potential conversions (sad face).

Your page speed index should be below 3000ms
Your page speed index is a score based on the average time at which visible parts of page are displayed.

Each page on your site should ‘weigh’ no more than 1MB
The heavier a page is, the more data it needs to request, the longer it takes to load. The average mobile page is usually almost 2MB in size.

It turns out the majority of websites don’t meet these three simple rules, which means their online conversion rates are getting penalised by simple consumer behaviour. By reducing your load speed by just 1 second, you can see an increase of up to 27% in your conversion rate, so imagine what could happen when you start increasing by 3, 4 or even 5 seconds!

Step 1: Audit your page speed

The first step in improving your page load speed is figuring out what’s slowing it down. Webpagetest.org is a great tool to get you started; it’s easy to use and transcribes your website data into a visual graph which is easy to comprehend. You’ll get trustworthy insights into your page speed index and overall page load time using unbiased external servers, avoiding skewed data that can result from browser caching, cookies and the like. Simply paste in your URL, select the most relevant server location and away you go!

Step 2: Understand the data

You can compare your results to the three golden rules:

• Does your page load in 3-5 seconds?
• Is your page speed index below 3000ms?
• Is your page weight less than 1MB (1000KB)?

Read more into the data by clicking the ‘details’ tab. The ‘waterfall’ cascading structure of your results provides insight as to what resources load and when, which resources are blocking the render of others and how long each resource takes to load individually. You also receive data such as overall page load time, page speed index, and time to first byte (the time it takes for your server to respond and spit back some data like an image, or some text).

Combine this step with reviewing the number or resource requests on your page using https://varvy.com/tools/requests/. ‘Resource’ is a term that encompasses all data types such as html, css and javascript but also includes images, videos and even fonts as well. For an optimal site speed, your page resources should not exceed:

• 20 javascript files
• 5 css files
• 30 images (per page)
• 3 fonts
• The total request for each page should not exceed 100.

If your page has passed the golden rule test, as well as the resource test – well done! Sounds like you’ve got an optimised website! If you’re still looking to improve your conversion rate, head to part one of our blog series, where we look at best practice for mobile site content, design and functionality with the ultimate goal of boosting your conversion rate and driving sales or sign ups.

Step 3: Improve your site speed using these 5 tips

Unless you’re a seasoned web developer, we strongly recommend partnering up with one for this step. Besides avoiding issues such as breaking your website/the internet/the world, working with a developer for the following recommendations will save heart-ache, time and money. A good developer will have a backlog of invaluable knowledge and their expertise should hasten, not hinder your progress.

Depending on your page speed results, you might priorities these recommendations in a different order, however, they are all generally essential items in actioning change.

1. Optimise your images

Images are often the largest resources on websites, so reducing their size is crucial to reducing your page weight. Tools such as jpeg-optimizer.com or jpeg-mini are useful for this step, or you can ask your developer to download of your images in bulk so they can be optimised collectively, then bulk uploaded again.

2. Minify your code & compress with Gzip

Both of these terms refer to making your html, css and javascript files as compact as possible, thus reducing their size and the time it takes to load them. Gzipping reduces a file’s size around 5 times as much as minifying does, but using a combined approach makes for maximised effect. Tools such as minifycode.com/javascript-minifier/ and minifycode.com/css-minifier/ are free online resources to minify your code.

3. Measure and minimise server response time

Your mobile page speed is determined by two things: your website code and your server. The longer your server takes to respond to a request from a browser, the longer your page will take to load. A maximum of 200 milliseconds is the recommended time your server should take to start transmitting the first byte of data – check your results from earlier to see how your server levels up.

a) Reduce the number of resources required by your web pages. The term ‘resource’ encompasses all data required to load your page i.e. images, text, fonts, html, css and js files etc. The less resources each page has to load, the faster your server will complete transferring data. https://varvy.com/tools/requests/ is a great tool to get an overview of your web page requests and resources.

b) Upgrade your hosting and hardware: if you’ve outgrown your hosting service, it may be time to upgrade; the higher the cost, the faster the server response time. Look into whether your hosting plan provides adequate CPU and memory resources to get the job done efficiently.

4. Leverage Browser Caching

Browser caching stores webpage resource files on a local computer when a user visits a webpage. Leveraging browser caching means telling a browser to ‘remember’ the resources it has previously loaded. These resources will be stored in a browser cache and won’t need the server to send them again.

5. Load ‘above the fold’ content first

‘Above the fold’ refers to content displayed on your web page before you need to scroll further – it’s the first impression consumers will get of your website. If your first impression takes too long to load, you’ve missed a crucial opportunity to impress a potential customer.

By instructing your site to only request resources that are required above the fold first, the initial view (critical view) of your site can load first and begin engaging your audience sooner. Users can spend valuable seconds reading and viewing this initial content before scrolling, giving the rest of your page time to load. If you’re on the hunt for a more in-depth explanation, look into critical path rendering and render blocking css/javascript.

Still need a little help with your mobile site? Talk to us today, we’d love to get our hands on your project!