Menu

Why Do Websites Load Slowly? Top 15 Reasons and Solutions

13 June 2019

Let’s face it, we’ve all experienced the dreaded elongated experience of staring at a loading spinner. It’s far from ideal having to wait countless precious seconds before getting too frustrated and navigating away from a web page.

As websites and web applications get larger, with more heavy content, long waiting times are becoming more commonplace.

This can be incredibly cumbersome when trying to consume a small amount of content, especially on a mobile.

So, why does your website load slowly?

There are a wide range of different explanations for why your website is not loading fast enough.

Lets examine the most likely contenders.

1. Unoptimized Images

Having a large amount of heavy images on your site is a recipe for disaster. It’s a huge culprit when it comes to significantly slowing down a website.

Any unoptimized image on a website will cause an unnecessary long amount of time for the browser to try and retrieve the image from the websites hosted server.

Most importantly, this is one of the most common factors when it comes Google penalising a websites performance in its search results.

High resolution images will consume a significant amount of bandwith when loading, especially on a mobile device. If a large sized image is used for a desktop version of a site and then scaled down – this can severely increase latency for mobile users.

The format of images should also be considered, JPG images tend to be much more manageable in size when compared to format like PNG or GIF.

Ideally, your image should optimized to be between 50kb – 200kb – this is the range where it will be most efficient to be loaded

Use JPEG instead PNG

Use SVG instead of JPEG or PNG – SVGs tends to be scalable across all devices

2. Excessive HTTP Requests

Multiple HTTP requests are a common issue when trying to cut down a site’s loading time.

A hosted server contains multiple assets of which a browser needs to request in order to show a website in it entirety.

When a user visits the web page – a website can be making multiple requests for JavaScript, CSS and image files – as well as any other assets it requires. If there are too many unnecessary requests, the page loading speed can be severely affected.

While sometimes a necessity, multiple techniques exist that allow HTTP requests to be optimized correctly.

Here are a few of the most effective ones:

Solutions

If using Google fonts, consider using the local asset of the font in the web page rather than requesting it from the Google fonts page via a HTTP request.

Ask a developer to use the below the fold technique

This a loading technique that will dynamically load assets as the user scrolls down the page – this is very effective to only load assets that are required for what the user is seeing.

Consider bundling some of your CSS and JavaScript files into one or two files

This is a very common technique for web applications where all JS, CSS files are compiled into one or two files for efficiency.

Use a static site generator

Asking your developer to build with technologies such as Gatsbyjs will create a website that will not have any external HTTP requests whatsoever as all files will be generated as local assets.

3. Poor Caching Techniques

Caching is a massively beneficial way to improve your site performance for returning users.

Ideally, a returning user should not have to load all the data that he/she has previously consumed in their web browser.

If you are looking to see how your website performs, you can use Google’s page speed insights.

Two types of caching exist – server caching and browser caching. The main reason to use these two types are:

To reduce overall latency — Due to the request being satisfied from the cache, instead of the origin server, it takes less time for it to get the website structure and display it. This makes the website seem much more responsive.

To reduce overall network traffic — As a result of website’s assets being reused, it reduces the amount of bandwidth used by a client. This inevitably reduce expenses if the client is paying for traffic.

These points are important because a returning user’s satisfaction with their site’s experience can be a make or break factor for determining how successful a websites conversion rate, sales or any other key metric that relies on a user’s call to action.

Caching provides a technique of storing data as cached memory in the user’s browser.

Any subsequent requests for content that has previously been loaded will get served from the users cached memory – this leads to a reduction in unnecessarily loaded assets.

Providing caching can equate to some very easy performance gains.

Solutions

One of the most effective ways to utilise caching is to use a Progressive Web App

Essentially, these are websites that behave like mobile applications with incredibly effective caching techniques

Solutions

Ensure that a developer is using modern optimization techniques including:

Bundling

Use modern web technologies such as Webpack, this involves bundling the JavaScript code with all its dependencies into a single JavaScript file

This file can then be served and referenced from a HTML page.

All the code for user interactivity is now in one file

Using a pre processor for CSS

SASS

LESS

This allows for a developer to compile all the CSS of the website into one optimised file.

Minify the code yourself

If you are editing code on WordPress or another hosting instance you can copy and paste the code into an online minifier such as this minifier

A plugin that provides full minification for all your files called Fast Velocity Minifier also exists.

7. Bad Server Location

A big factor that can play into the speed of your website is the location of the server thats its hosted on.

The further away from the users location, the longer the data has to travel to get there. Data is transmitted via cables, data servers and satellites so the geographic location of these data methods plays an important role in how the long it takes for a user to receive this data.

So, when a visitor clicks into your website, depending on the server location, the information may have to travel across a global network to ping the host for information.

Once this information is received, the server then has to send the requested information back. Visually, this process might only last a short space of time, however, the geographical location will dictate if its lasts only a few seconds or if it lasts for a longer 20+ seconds.

Solutions

Some hosting configurations allow you to specify the hosted region of your site

If you are targeting users from a certain region you can choose the appropriate server with a more relevant locality

Minimising the size of your website’s assets with some of the aforementioned methods will improve you user’s experiences – no matter where they are browsing from.

8. Excess Traffic

While having significant amounts of traffic is rarely considered a bad thing, it can cause a website to perform poorly.

Depending on your hosting plan a web server can only serve so many visitors at once.

If the capacity of your hosting plan is limited and there are multiple user’s requesting resources from your site a digital queue will be formed.

Solutions

Basic hosting plans tend to not come with scalable bandwidth features

Consider upgrading to tier that has

Some hosts offer pay as you go packages that will scale out for as many users that are trying to connect simultaneously.

9. Not Minimizing time to first byte

A big performance consideration for a website is the time taken to load its first byte (TTFB).

Time spent waiting for the initial response, also known as the Time To First Byte. This time captures the latency of a round trip to the server in addition to the time spent waiting for the server to deliver the response

2. Time taken to process request

Upon receiving the request, the server has to process it and create a response.

This processing can involve:

Manipulating the data

Storing it in a database

Setting response headers

Checking authentication

Running scripts

3. Time taken for the server to send back the first byte of data to the browser

When the server is finally ready to send back the data, it will reopen the HTTP connection. The network speed will dictate how quickly this will be done.

The time taken to get to this point is the measurement of TTFB

Solutions

Investing in high quality backend service or web host will benefit TTFB

Specifically, paying attention to the locality of the server

Ensuring that all plugins and external packages are up to date

If your site receives a lot of traffic, ensure that your host is able to scale efficiently

Enquire to see if a host has the option to use a premium DNS

This will ensure that DNS queries are answered with low latency by utilising a global network of external DNS servers.

Not Enabling File Compression

As we’ve already covered the importance of compressing images, I wanted to also highlight how beneficial it can be for general assets on your website.

The smaller an asset is, the faster the page loading it will be. You can net some easy performance wins by compressing your websites assets.

Enabling Gzip on a website has fast become an industry standard for effective file compression.

GZip is a form of data compression. Essentially, it takes a chunk of data and makes it smaller.

When you want to access the original chunk of data it can be restored by unzipping the compressed file

The communication channel between a browser and server is able to enact gzip on data that is being sent across the network.

As a result, bandwidth costs for serving the site are reduced, as visitors to the site will be downloading smaller files overall.

Most web servers have the ability to send files in Gzip format using third-party module or using built in server functionality. According to Yahoo, this can lower the download time of a user by about 70% ,which is a huge performance gain

Solutions

Compression can be enabled by adding some code to a file called .htaccess

The .htaccess file controls many important settings on your site

This can be accessed from within your webhosts file manager

10. Not using external hosting platforms

While a lot of this article’s tips revolve around making the a website’s assets as small as possible.

Sometimes you don’t have to host the asset on your server at all. This is particularly applicable when implementing video files.

The process of editing, uploading and hosting a video is quite cumbersome and can take too much time for multiple uploads.

But the most glaring issue here is the space these videos take up on your server. Imagine someone on a mobile connection trying to watch this video on your hosted server – it most likely will lead to a very poor user experience.

Plenty of 3rd party sites will host videos for you on their meticulously optimised servers.

Solutions

Using sites like Youtube, Vimeo, DailyMotion will take the sting out of trying to upload your own videos

Once hosted, simply embed the video link on your website and avoid the hassle and performance hits from self hosting

11. Not Deferring JavaScript for Page Loads

JavaScript provides the layer on interactivity to make your website functional for its users.

When a user loads your webpage for the first time – the files are loaded in sequence. This sequence is called the critical render path.

The browser sees what files it has to retrieve from the server and starts the process one by one.

When it sees that it has to retrieve a JavaScript file, it has to pause and attempt to execute this particular file.

This will delay the rest of the loading path and until that JavaScript file has been processed, everything else will be delayed.

Solutions

Use asynchronous loading so that JavaScript an be loaded separately from the page

Have your developer use Nodejs and Webpack to better synchronous scripts and other packages

Using the JavaScript defer attribute in your script tags – this is usually the recommended method as it will defer the loading of JavaScript until the rest of the page is visible to the user

12. Lack of Dependency Management

Many modern web applications rely on 3rd party utilities or packages

If a web application does rely on multiple packages to carry out it’s functionality, then it is very important for these external packages to be as optimised as possible.

Much of this is dependent on the packages own creator or maintainer, however, its also possible for a web developer to use someone else’s package and make small adjustments to get it running optimally for a website.

For example, a package that allows a web application to use a dropdown menu enables a user to select a big selection of items.

While this is very handy utility to have, the web developer must be careful to not populate it with too much data or the application may experience latency issues accompanied by visual slowdown.

Solutions

Many user created packages are frequently updated with significant improvements, for optimal performance of a particular library e.g a country picker – its important to investigate if any upgradeable installations are available.

If on a WordPress instance – plugins are also updated very regularly with a wide range of improvements.

Ensure that package used in your web application are from a reputable source

For example, this react date picker has a reassuring amount of weekly downloads – this usually a good indicator a reputable utility package

13. Unnecessary redirects

Redirects provide a very handy way to guide users from an outdated URL to a new updated one.

This method is frequently used for when a web page that was once providing useful information has been scraped in favour of a more comprehensive resource.

They are also used to repair broken links for pages that no longer exist.

But sometimes redirects are used accidentally or without providing proper value. This is when its effect on a pages loading time becomes more noticeable and without benefit.

Having too many redirects can create additional HTP requests, this can negatively impact your sites speed and overall score.

Google can penalise your SEO rating for a site that redirects without valid a reason.

Solutions

Edit your .htaccess file to point all redirected pages directly the most recent version.

Use ScreamingFrog to pinpoint what pages are being redirected and for what reason

If trying to redirect from one page to another because the second page is the better resource make sure to use a canonical tag

This will help Google know that the original content is the URL specifed inside this tag

14. Too many JavaScript Scripts

As it stands, there are many different JavaScript libraries available to monitor a site.

This includes analytics scripts that help to measure important metrics of a site’s behaviour. By the time this JavaScript is loaded, interrupted and executed, the user’s experience may have suffered.

By any third party utility that you need for your site will more than likely require a new script to be used on your site.

This again, opens up the possibilities for too many HTTP requests which your site can detract from your site’s loading capabilities.

Solutions

Audit the JavaScript scripts to see what is actually needed to provide value and what isn’t’.

For multiple JavaScript libraries, consider using Google Tag Manager. Its compiles all your scripts into a single file.

15. Not Using a CDN Service

While storing assets on your web host can be effective for small files, are multitude of other networks of servers can be used to decrease your websites load time.

Why not share the load between multiple server by using CDN’s?

CDN services provide a distributed network of server that are deployed around different regions. They are well optimized for receiving many requests and can help to serve assets to your users with high performance.

Due to users potentially visiting from all over the word, the process of using a CDN minimizes the round-trip-time (RTT) of serving assets.

CDN’s also come with impressive caching capabilities for data that is accessed frequently.

Solutions

Consider moving heavy assets or assets that will be accessed frequently to one of these external servers.

Conclusion

Slow website performance can be deeply frustrating. It can lead to a whole host of issues including losses in revenue and user retention.

A website’s performance and response time are closely related to its success, so taking every available opportunity to improve it is very important.

Tracking down the exact reason why a website is lagging behind is worth the time and money invested.

Hopefully some of these steps give you an opportunity to achieve some easy performance gains. Regardless of how web technologies change, performance will remain the most important factor for a user visiting your website.

If you have a site that is not performing as desired, don’t hesitate to get in touch.