Technology

7 ways to improve your website speed (and increase traffic!)

Here at Pixel Palace we care a lot about website speed – it’s right up there with good design, mobile responsiveness and accessibility. 

Pietari Keurulainen
Head of Design & Technology

Why should a website be optimised?

There are many reasons for this, the most obvious of which is that fast page load times directly improve the way people experience a site. However, a lesser-known benefit of improving website speed is the impact it can have on search engine rankings. Speed optimisation is an important part of SEO, as page load speed affects search engine site rankings. For instance, sites that don’t satisfy Google’s mobile user experience requirements might not even appear in mobile search results.

Furthermore, slow page speed has a negative effect on user experience, leading to increased bounce rate. This signals to search engines that people can’t find what they are looking for on your site, and your search engine rankings will decrease.

As page load time goes from one second to five seconds, the probability of bounce increases by 90%.

Google/SOASTA Research, 2017.

These are the most crucial parts of optimising your website.

1. Serve scaled and optimised images

Having proper image optimisations in place is important for search engines, as images usually have the most impact on page load speeds. Furthermore, you get penalised for each unoptimised image, so image-heavy pages without optimisations will likely have a bad page speed score.

WordPress automatically generates additional sizes of uploaded images. By default it has three extra sizes; thumbnail, medium and large. Depending on your site design, it’s important to set additional custom image sizes that are being used across the site. The goal with using optimal sizes is to prevent massively scaling images on varying screen sizes.

Images should also be compressed, which means making the file size of an image smaller without reducing the quality of the image to an unacceptable level. This way we lose some of the detail of the image, but often it’s really hard to spot the difference between compressed and uncompressed images as long as the amount of compression is set up correctly.

unoptimised dog image
Unoptimised dog image, resolution 800 x 534px, size 183kb

optimised dog image
Optimised dog image, resolution 800 x 534px, size 44.5kb

It’s really hard to spot a loss of detail in the images above. The compressed image is 75% smaller than the original, resulting in a much faster load time.

2. Eliminate render-blocking Javascript & optimise CSS delivery

Loading resources (such as Javascript and CSS files) before above the fold content (ATF) slows down the page load as the user needs to wait for the script files before seeing the page content. This can be prevented by instead loading the script files at the end of the document, or using defer or asynchronously load, depending on how the scripts are utilised on the page.

Most CSS styles can be loaded asynchronously with the rest of the document. Only above the fold content needs to load before the page render to prevent the flash of unstyled content (FOUC).

3. Enable compression

As the goal is to load pages as fast as possible, an easy win is to enable compression. When site is compressed using GZIP, pages and script files get sent to user in a compressed format which will be uncompressed for viewing at the users end. As the compressed size is often ~70% smaller, it makes the load times faster.

We use GZIP compression which makes the page size ~80% smaller.

4. Enable page caching

Caching pages speeds up the server by creating static versions of dynamic pages. This way, instead of creating the page on each user request, which often has some resource heavy queries, the server sends a static version of the page. Each time the content of a page updates it creates a new static file with the updated content. It doesn’t just make the page loading speed faster, but it reduces the resources used by the server which allows more concurrent users on the site.

5. Prioritise visible content

It is important to prioritise loading visible content, which can be done by loading the visible assets (above the fold content first) and after that focus on loading the rest of the page. With long and image-heavy pages, it’s good practice to load image assets only when they’re needed. Instead of loading everything all at once on page load, these assets can be loaded dynamically as the users browses through the content. Loading assets on demand (Lazy Loading) can be effectively used in videos, galleries and content / image sliders.

6. Minify scripts and style assets

Minifying scripts and style assets means trimming them to their smallest form removing unnecessary markup such as white space and line-breaks. Minifying makes the file size smaller, which again impacts the page load time.

7. Use a Content Delivery Network

Utilising a CDN (Content Delivery Network) is a good way to speed up page load times, especially if your audience is around the globe. A CDN is a hub of servers around the world that all store the assets of your website. With CDN activated, all the static files such as heavy image assets will be delivered from the closest node to the user. For instance, if your server is located in Sydney, and a customer from the United States is browsing your site, this user has a faster site experience as all static assets (such as images) are loaded from a data-center in the US instead of loading all the way from the server in Australia.

 

Final thoughts

After your site has been optimised for the parts outlined above, you should be looking at good optimisation levels on your site. If you have any questions regarding SEO, don’t hesitate to contact us to help you optimise your website for better SEO. We just recently refreshed our own site and with our optimisations we are sitting close to 100 score on both; mobile and desktop on Google PageSpeed Insights.

We build optimised websites.

With over 10 years of experience in web design and development, we know how to build sites that kick goals for our clients.

  • Digital Strategy
  • WordPress
  • eCommerce
  • User Experience Design
  • SEO & CRN
Check us out now!