134 reads

How To Speed Up Your Website and Reduce Loading Times

by John DemianJanuary 29th, 2021

Too Long; Didn't Read

Website speed testing is important. There’s no one-size-fits-all solution when it comes to website speed, but here are some common issues people face.

Company Mentioned

featured image - How To Speed Up Your Website and Reduce Loading Times

While it might not be on the top of your to-do list, speed testing is an important part of your development process. Most people do understand this but at the same time don’t have a clear grasp of what it actually involves, what to look for, and how to fix these issues.

One of the most common and obvious issues with a website is the resources that take too long to load. These can be anything from fonts and Images to different plugins and javascript files that slow down the loading of your website. But, there are several ways to measure these load times and I’m going to get to these.

First, I’d like to cover some of the “lingo” that you might already be aware of.

Time to first byte (TTB) and first meaningful paint (FMP). Time to first byte and first meaningful paint are two very important metrics that you need to pay attention to. They will show you when your website starts loading and the second your website starts displaying information.

Load times. One of the most important aspects of optimization is the speed at which your website loads. There are lots of reasons why your website is loading slowly and one of them is your server. Measuring your TTB will let you know if you have an issue with the response time of your server.

Render-blocking code. Another reason why your website loads slowly is that you have code that blocks the rendering of your website. This could be Javascript, CSS, or any other type of code that might block the rendering of the current webpage. This is one place you can’t afford to cut corners as it will directly impact the experience your users have on your website.

HTTP Requests. The next thing to look for is your requests. Every time you load a website, there are a series of requests being made to the servers. Every request will have a response and each server will have a set number of concurrent requests it can handle. The more requests you have, the more requests your server will have to deal with, and the longer it will take to respond. These requests can be hard to track and most often than not the number of requests fluctuates up and down especially if you are working with any third-party services. To measure and keep track of these requests you’ll want to use a synthetic monitoring service like Sematext Synthetics (shameless plug).

Getting rid of the issues

Here’s where things really get complicated. There’s no one-size-fits-all solution when it comes to website speed. Every example will have its own particularities that will make them very different from one another.

Usually, this is where I shamelessly plug the awesome tools that Sematext.com - the company I work for - offers but I’m going to try to talk about a few general ways that can help you decrease those long load time and increase your website speed.

Lower the load times

Big long times are the most popular issues that you’ll run into. Sometimes something as easy as using a CDN might help you out. Other times, you’ll have to start compression images and minify large CSS and JS files.

Of course, there are going to be times when even if you did this, your site loads slowly regardless. In this case, you’ll have to dig a little deeper, benchmark your DNS response time, and monitor your server resources.

Get rid of the render-blocking code

There are a number of ways to defer render-blocking code and I’m going to cover the top two scenarios: Javascript and CSS.

For Javascript, we can run a little script that will defer the scripts that would otherwise block the rendering of our pages. Here’s a little example:

<script> function deferLoadingTheCode() { var element = document.createElement("script"); element.src = "delayTheCode.js"; document.body.appendChild(element); } window.addEventListener("load", deferLoadingTheCode, false); </script>

All you need to do is drop this somewhere in your <head> tag of your HTML and you should be good to go.

Excessive HTTP Request

While this may not be as popular as the other issues, this too can cause a lot of head akes. Having loads of JavaScript, CSS, and image files can lead to too many HTTP requests. When a user visits your web page, the browser performs several requests to load each of these files – which can significantly reduce the page load speed.

To fix this issue you can merge the files that are going to be used on a specific page like CSS or JS files. For images, there’s a simple way to optimize this using Sprites. With tools like CSSspritetool and Sprintegen, you can combine multiple images into one and display them based on CSS variables.

Identifying these issues is usually more difficult than it seems. While your website might be loading fine on your end, people that have different machines, connections, are from different countries might have a different experience.

The best way to go about fixing these is by using a monitoring tool that will keep an eye out for you. There are lots of different ones available from open source to SaaS, from the expensive to the more affordable ones, and features usually vary quite a bit. I’d recommend you take the time to shop around before you commit to any one tool. Here’s a little list I’ve made of the top tools for testing your website’s speed I’ve tried and how they stack up to each other.