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?

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

unoptimised 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 bannersinterstitials, 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.
 
While a few code structuring mishaps won’t have a huge impact on your sites loading speeds. This can quickly accumulate and before you know it, performance is noticeably hindered.
 
These structuring issues can vary, unclean code can contain unnecessary issue such as line breaks, spaces, duplications etc.
 

Solutions

  • Get insight into your websites code efficiency.
  • 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

Data Visualisation Sketch graphs
 
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).

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

Async + Await

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

ES6 Destructuring

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’.
  • Asynchronous loading should be prioritised by the website owners or developer 
  • 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

  • Use external CDNs such as CloudFlare or Fastly
    • 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. 

 

OTher Resources

  • Why are web applications popular?

 

Gareth Dunne

Full Stack Developer and creator of JSdiaries. Passionate about the latest in web technologies and how it can provide value for my clients.