Why Do Websites Load Slowly? Top 15 Reasons and Solutions

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?

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.

Solutions

• If on WordPress, consider using image optimization plugins like Smush
• Ask your developer to build a website using a static site generators – such as Gatsbyjs
  • Technologies like this create your website with incredibly fast assets with no external HTTP requests.
• Compress your images using free tools such as image resizer
  • 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
• If on WordPress consider using plugins such as Super Cache.
• Get a developer to use HTTP Caching header in a website’s HTTP requests

4. Too Many Ads

Displaying advertisements is a huge channel for generating revenue for many websites, particularly for websites with high traffic.

Most ad networks require a website to use a snippet of JavaScript in the header of the website in order to externally retrieve the desired block of adverts.

If too many of these ads are used, not only can this make a website look spammy and unappealing to the user but it can also compromise its performance.

This especially true of rich media ads. With so many different variants such as banners, interstitials, pop overs and auto downloads.

This can create extra HTTP requests that will make your website significantly slower.

Solutions

• Less is more, one of the most effective remedies for combating some latency ad issues is to use ads in a more minimal manner.
  • More strategically placed ads that are blended into the site more can actually lead to more clicks
  • This results in less amount of ads used overall and the performance of a site is less hindered
  • Ads that use the colour scheme of your website can result in a more natural presentation – which can also reduce the amount of ads requested to remaining consistent with a website’s theme.

5. Inadequate web hosts

With the many different options available to host a website – some will inevitably provide a better service than others.

Cheap hosting services tend to cut corners when trying to optimise the communication speed between a client and server.

If you find yourself in these situations, there is only so much that can be done to change a hosting platforms server speed.

But perhaps consider the following:

• Check the varying tiers of hosting – some might offer an improved bandwith rate
• Consider switching hosts.
  • There are many hosting options available and competitive and faster alternatives are found very easily.
• Ask a developer to host your instance on free tier hosting site with a good reputation.
  • A personal favourite of mine is Netlify – they provide an excellent free tier service with speedy performances.
  • They are also great for hosting static sites generated from technologies such as Gatsbyjs (Yes, I’m a huge fan)
• Most server hosts have a 24/7 customer chat support – while some of them can be frustrating to deal with they might be able adjust settings for your hosted instance

6. Inefficient Code

Behind the scene of a website,  code can quickly become messy if its created in an unstructured manner.

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

9. Not Minimizing time to first byte

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

Google defines TTFB as a period of “waiting”:

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

There are 3 main factors that are taken into consideration for TTFB

1. Time taken to send the HTTP request

TTFB starts upon the initial request.

The time taken for a server to receive the request depends on:

• Time taken to perform DNS lookup
• The speed of the user’s home network
• Distance to hosted server
• The region of hosted server

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

• On most web host instances, Gzip compression is enabled via the hosts configuration panel
• 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

• 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