Why does my website take long to load?

Does your website take long to load or do some sections take longer to load than others? In this post I will be discussing what you can do to identify and fix some of these problems.  

If you own a website, chances are that you’ve encounter a problem or two along the way. Don’t panic, you are not alone.

Unfortunately, the contributors to a slow loading website can be many. The first thing I would recommend is to identify the problem(s).

Regardless of how beautiful your web page is and all of the functions and moving parts it has, if it loads slow, nine times out of ten, your visitors won’t stick around to see it. The last thing anyone wants to see when they go to your website, is a loading bar with a wait time on it.

Most visitors will leave a website after waiting a few seconds if it doesn’t load. I will provide statistics about this below, but I think common sense goes a long way. 

One of the tools I use and recommend in testing a website’s speed and functionality is GTmetrix. This site allows you to test your website’s URL for free without asking you to provide any contact information. Here, you can test your website’s speed by location, identify client-side and server-side errors, and find out what images can be reduced in size, etc.

The following is a list of common problems that can cause websites to load slowly and suggestions on how to fix them.

Problems with large (non-optimized) images

While most people would want the highest resolution possible for printing, the same is not true for websites. The standard resolution or DPI (dots per inch) recommendation for any website image is 72DPI. The higher that number is, the larger in load-size your image will be. The general rule is that an image must not be larger than 200 KB in size.

Another factor often not taken into consideration is the amount of time it takes for a browser to load a large image into a small space.

Example: When you place a 1500px wide image into a 34px wide space on your site.

Images must be properly sized in order to reduce the load time it takes a browser to search for the image and adjust the images to the desired size. This can be a bit tricky because you have to take under consideration multiple screen sizes. As a general rule the largest image on your web page should fall between 1200 and 2500 pixels wide. This does not mean that all of your images now need to be that size. On the contrary, they should be cropped and optimized for the maximum amount of space they will take on your site.

Example: Sometimes background images are used behind the website content to fill the entire screen. These are sometimes the largest images on your website. Vs. an icon image which will likely display no bigger than 30 to 100px.

Problems with website plugins

If you’re using a WordPress template, chances are that your website’s plugins can be contributing to your loading problem(s). All website plugins make file requests and are attached to external files that can drastically increase your site’s loading time.

Example: Plugins that have possible large CSS style sheets or JavaScript files attached.

WordPress is considered a Content Management System (a CMS), as well as other web building platforms like Drupal, Wix, Square Space, etc. These types of CMS websites are template based and require regular template and plugin updates (meaning weekly and/or monthly updates). If a website is using WordPress for example, and it is left without updating, that website will begin to experience plugin vulnerabilities, display and functionality issues and more; all of which contribute to page load delays. I have also seen many cases in where a website template stops receiving developer support; these generally begin by displaying error messages on the website, then later if not fixed, will keep the web page from loading all together.

I always advise for my clients to opt for WordPress websites if you run an e-commerce site or need to constantly change the content of your web pages. In some of these cases, learning how to operate and manage a CMS platform may be a better website solution. It is important to note that these types of websites require a lot of regular updates and if you don’t have the knowledge or time to perform these updates or the funding to support hiring a professional to make them, that you don’t opt for this type of website.

However, if you update your website content every few months or yearly and/or have less than 5 pages on your website, I recommend an HTML website platform instead. They are less vulnerable to hackers, load faster, and don’t require frequent website and/or plugins updates to operate.

I design both HTML and CMS based websites; however, I do often recommend HTML or WordPress sites based on need and client feedback. Often, I hear my clients say that they want the ability to perform updates on their own, but don’t realistically have the time or knowledge to do so or the funding to support it.

It is like buying a plane that you don’t know how to operate with the intention of flying. You will most likely 1. Hire someone to fly it for you, or 2. Not fly it because you don’t know how. The same holds true for websites.

Make sure your designer or developer is willing to walk you through basic maintenance requirements if you are going to do it on your own.

Problems with Adobe Flash content

If you have flash content on your website, get rid of it soon. Re-create the file(s) as .gif files or use HTML5 or WebGL instead. If your entire website is Flash based, I recommend updating your entire website to a more updated website platform. The majority of browsers stopped supporting flash years ago and as of December of 2020, Adobe stopped developing and supporting flash.  

Don’t panic, it is very possible to have movement and animation on your website without the use of flash files. I recommend speaking to a website designer or developer about your website options for possible solutions. If you don’t have one, feel free to reach out and contact me and I will gladly walk you through it.

Problems with missing files

If your run a website test and it displays errors like “can’t find page or can’t find image”, it may be contributing to your website’s load time.

Example: If I were to ask you to look for a beach in the desert, chances are that you will go out looking for it and not return or you’d probably give up and stop trying to look for it. The same thing happens when your website pages are linked to old content that the browser can’t find. This problem can be due to an error in the link code or the file or page is missing (meaning it failed to upload properly when the website was created or at some point was removed).

Solution: Check the link independently on a separate browser tab. If nothing loads or you get an error page, review the link for accidental spaces or invalid characters. If the link is fine, then your problem may be the file’s location. If this is the case, go into where the file is located on your hosting server (or website control panel provided by your hosting company) and make sure that the file is uploaded properly. If on WordPress, locate the files destination page and re-link the file if needed. Also, make sure that you are not uploading or linking large files or invalid file types (Such as: . PSD or .ai files that a browser can’t read), as these can also display page errors.

Problems with excessive HTTP requests

HTTP is just another way of describing a web browser sending a request for a file. The number and the size of the files being requested can slow down your website’s load time.

Example: If your website has a banner on the front page that displays 20 rotating images, each one of those images represents a file request. The higher the number of requests on your page, the longer the page will take to load.

Consider reducing the number of images on a webpage banner to 5 or less and ensuring that your images are optimized properly so they load fast.  

Problems with unclean code

Every Developer has 100 different techniques for writing code and no two website designers or developers will ever write it exactly the same way. It is vital for a web designer and/or developer such as myself, to design your web pages using clean code (meaning simple, easy to recognize and understand by other developers). Unclean code can cause delays in loading times and make a web page difficult to read and/or navigate through.

If you are a website designer or developer, try to follow some basic rules for your website development.

If you are a business or individual website owner looking for website advice… 

I recommend hiring a professional website designer or developer with an educational background and experience in the field, from the start.

Most web designers and developers will charge a high hourly rate to update or fix website problems created by amateur website designers or developers. If your website code is difficult for a developer to navigate through, he/she may in all fairness charge more to fix the problem. Sometimes paying a little more upfront to have your website built the right way, can prove to be more financially beneficial down the line.

Problems with too many ads

Many of my clients allow ads on their websites from 3rd party affiliations as a secondary source of income. This is always acceptable as long as the ads are kept to a limited amount and you have some form of control over what is being placed on your website. If a third-party affiliate provides you a link to an image or an ad that has not been optimized properly, that ad or image can slow down your web page’s loading time. I recommend only placing relevant ads on your website and monitoring closely the size and load time of each ad or image. A good way to avoid potential problems is to test the link out prior to uploading it on your site.

Problems viewing your website through a mobile or tablet

Designing a website that is optimized for a computer screen is not the same as designing a website that is optimized for a mobile or tablet. Images are generally larger in size for desktop websites and smaller for mobile devices. As a common rule, mobile site images should not exceed 600px in width. Desktop websites can be scaled up to 2500px wide, while tablets start at about 900px and scale up to 1900px or more as seen in some of the newer tablet screen models. Not taking this under consideration when building a website can cause serious page load delays on mobile or tablet devices.

I recommend building or having someone build you a responsive and optimized website to accommodate for different screen sizes, browsers and tablet and mobile platforms. Also, know the difference between mobile compatible vs. mobile optimized so that you don’t have misconceptions about what you’re getting.

Problems with your hosting company

Just a heads up, this problem may be costly to some depending on who your hosting company is.

If your website’s bandwidth or data is close to exceeding the allowable amount given by your hosting provider, it may cause delays in loading your website pages. You may be required to upgrade your current hosting package with your service provider or change service providers altogether.

I promised you statistics

Sweor reports that 88% of online consumers are less likely to return to a website after having a bad experience. They also report that 39% of people will stop engaging with a website if images don’t load or take too long to load.

Slow-loading websites have cost retailers $2.6 billion in lost sales each year.
You don’t have to be a genius to figure out what that means for your website or business, if it’s running slow.