7 Reasons Why Websites Load Slowly

This post originally appeared on tBL member Joshua Lyon’s blog Joshua Lyons Marketing Blog and is republished with permission. Find out how to syndicate your content with theBrokerList.

There are five focal points to consider when creating a superb website: user-visibility, user-navigability, user-experience, scalability, and credibility. The impactfulness of these factors are ineffectual if your user cannot access your webpages. In fact, when websites load slowly, it’s the leading element contributing to high bounce rates.

Research shows you can expect more than half of your prospects to leave if your website takes more than three seconds to load. What’s more—if it takes greater than four seconds to load, users will likely never return to your site and will likely relay their negative perceptions of your company, brand, and website to their family and friends. 

If you’ve ever seen a slow website or wondered why your own website is running slow, it’s most likely because your website fell into at least one of the following 10 traps, which can make websites load slowly.

1. Excessive Use of Flash Content

You have an obvious problem on your hands if your website still uses Adobe Flash. In the past, Flash was an incredibly helpful tool that added interactivity to your website. The problem with using Adobe Flash today is that it is antiquated technology.

In 2017, Adobe announced its plans to end-of-life Flash by the end of 2020. The company warned Flash users of their intentions to discontinue all advancements, updates, and support services 2021. To discourage Flash users from continuing using the now inane technology, Adobe began blocking Flash content from running in Flash Player on January 12, 2021. 

If you currently have Adobe Flash on your website, you should uninstall it immediately. In addition to creating loading errors on your website, Flash also presents a huge security liability. Downloading and using outdated software is highly susceptible to malware and viruses.

Fortunately, HTML5 has everything you need to render interactive 2D and 3D graphics on your website. HTML5 will improve the page-load speed of your website with its improved graphic interactions, storage, and cross-browser support. Not to mention it loads fantastically well on mobile pages. It has been built specifically for modern websites.

You can also integrate WebGL or WebAssembly onto your website. Both are standardized web instruction formats that allow you to easily incorporate interactive graphics onto your website. They are open-source and easy to get started with.

2. No Caching Techniques

Your web pages comprise of many files—most of which are likely static. A user’s navigation and interaction within your website sends HTTP requests to your servers. Your servers respond to these requests by returning the pertinent files.

It takes time to process a user’s requests and send back the right data. There is no need to load each individual file from your servers each time a user visits your site, especially if the user is requesting static (or relatively static) data like an about page, an image, or your CSS styling.

To avoid unnecessary data loading via HTTP requests, you implement caching on your website. Caching improves the performance of your website by keeping local copies of static assets. You can implement browser caching or server-side caching. Either way, you will likely experience a noticeable improvement in your website’s performance.

Caching Best Practices

To optimally cache your website, Google developers recommend integrating the Cache-Control, ETag, and Last-Modified HTTP cache APIs into your site’s request and response headers. In addition to adding these APIs to your headers, they recommend setting long max-age values to your browser cache, as well as using fingerprinting for cache-busting. This allows you to cache resources that change occasionally until they change on the server. When the version changes on the server, the server relays the new information to the browser which begins a new cache for the resource., at which point the server tells the browser that a new version is available. 

3. Images Are Unoptimized

Beautiful media—like videos, images, and logos—grabs the attention of your site visitors and engages them with your website. But when it comes to media and page-load speed, media is notorious. 

Unoptimized media is one of the most common reasons why websites load slowly. Media like videos, images, and logos are stored in huge files. And with any webpage, the bigger the file, the longer the time it takes to render. High-resolution media can take a great deal of time to load, and as a result, take much longer to fully load the website. Fortunately, all media can be optimized in one way or another to improve the speed of your website.

Are you enjoying this post? If so, be sure to subscribe for occasional email updates from our team!

Using the Right File Type: Raster Vs Vector Files

When it comes to media, you want to optimize file loads without compromising visual quality. To optimize an image means to reduce its file size using either a plugin or a script. You can do this by saving these files in memory-friendly formats or by compressing them.

Regarding file types, you have a choice between saving your images as raster or vector files. Raster media is saved as JPEG, GIF, or PNG files. Vector media is saved as SVG, APS, AI, or PDF files. Higher quality images can make websites load slowly.

With raster files, image media is stored in pixels. Every pixel has a defined color, position, and proportion based on resolution. These images do not resize or beautifully; they are often blurry or distorted when you alter their original size. Raster files are best suited for photographic images.

On the other hand, vector files are much more flexible when it comes to resizing. Vector media files are much smaller compared to raster media files. They are also very easy to scale because image proportions are calculated using the position and percentage of an image’s total area, not pixels. Vector files are best used for large graphics, logos, prints, and illustrations.

As you can see, there are several file types among raster and vector graphics. Make sure you select the file type appropriate for your website speed and media quality needs using this helpful guide.

Compressing Media Files

Compression can lower your website’s response time by decreasing the size of data being transferred between your server and the visitors’ browser. If you’re interested in compressing your media files, you can compress them using lossy or lossless compression. While lossy compression will guarantee your site the fastest page loads, both are excellent options for improving speed performance.

With lossy compression, you reduce your media’s overall file size by deleting some data. The result is a drastically smaller media file with a noticeable reduction in image quality. Once you compress a file using this technique, you cannot revert back to its original quality. So if you have to need to pare a large media file and preserving media quality is not your top priority, a lossy compression is a great option.

With lossless compression, you reduce the file size (albeit not as substantially as with lossy compression) and maintain your image quality. Lossless compresses media data. With lossless compression, your media must be uncompressed before it can be rendered on your webpage. 

A popular form of lossless compression is gZip compression. If you enable gZIP Compression, it will command the server to cover all of the web objects (like media and JavaScript files) in a single container before they get sent over to a requesting browser.

Some tools you can use to optimize your images include Adobe Photoshop, FileOptimizer, Gimp, JPEGmini, and ImageResizer. For videos, your best option is to embed them onto your site and while hosting them externally on an enterprise video platform like Youtube or Vimeo. However, if you want to host them on your website, we recommend you use a lossless compression technique.

Media Optimization Takeaways

We can’t stress the importance of media optimization and web page speed. With smaller files, your visitors won’t be forced to wait for loading videos and images, nor will they be subject to frozen or crashing webpages. 

In addition to significantly improving your user-experience, optimized media allows for faster site backups, less overall storage and bandwidth on your local network, and improved SEO according to Google’s Webmaster Guidelines.

4. Network Issues

Sometimes, the elements on your website have nothing to do with your page load speed. Sometimes when websites load slowly, it’s a result of underlying network issues.

When it comes to your network, there are several issues that can slow your website. A few major causes of slowdowns include troubles and limitations with your internet service provider, content delivery networks, and host servers.

Issues with your internet service provider, such as high traffic, limited bandwidth, and data restrictions will plague your site visitors with slow page speeds.

When it comes to CDNs and servers, they only handle a certain number of people. If you’re getting a lot of traffic, then it will eventually cause your website to slow down. Issues with your content delivery networks and host servers can slow your website with data and memory caps, as well as bandwidth throttling.

You can do the following to remedy the slowness caused by your network:

1. Run a traceroute from your computer to your server. This will show you the connection speed to see how long it took for your network to jump from your site to your server. To try this out, you can search on the internet for the traceroute code that’s needed for your computer and then add the code to the computer’s command prompt. Contact your ISP to resolve any problems with your service if your connection is weak. 

Check your traffic with Google Analytics.  If you experience high volumes of traffic, upgrade your ISP, CDN, or host server package. You can alleviate slowness caused by traffic by increasing your data and bandwidth allocations. Conversely, if you aren’t getting enough traffic, you consider using search engine optimization to get more traffic from sites like Google, Bing and Yahoo.

5. Bloated and Render-Blocking JavaScript

JavaScript is convenient to enable, but if you enable it incorrectly, the JavaScript can increase the amount of time needed to load your website. JavaScript can slow the speed of your website through code bloat or render-blocking.

Script bloat is any easily identifiable issue, so audit your JavaScript scripts to see what you need and what you can remove. Using many API calls to render JavaScript will hinder your webpage loading speed dramatically. 

As for render-blocking, Google developers recommend these three solutions: 

1. Replace external JavaScript files with inline JavaScript. Keep in mind, inline JavaScript only improves speed when used moderately.
2. Use asynchronous loading. This way your JavaScript will load separately from your webpage.
3. Defer JavaScript loading until the rest of your webpage is visible to the user.

Consider also using Segment or Google Tag Manager because it can be a single script for all of your tools. These can prevent your website from loading slowly.

6. Bloated HTML and CSS

Unclean code can be a common cause for website slowness. In some ways, writing code for a website is similar to writing a letter. Someone might be very wordy and write a very long letter. Someone else could take that letter and refine it so it becomes significantly smaller. In the same way, a website can be coded with tons of extraneous text. Or, it can be cleaned up so the coding is much easier for a website browser to read.

If you compress the code and reduce the file size, then you can expect a quicker page load time. Attention to detail matters, so make sure you use inline CSS and while you’re using inline CSS, don’t add multiple CSS stylesheets when you can use only one.

7. An Excessive Number of Ads

Monetizing your website helps you as a business owner. However, an abundance of advertisements can make your websites load slowly. Compromising your user-experience for ad monetization will maim any long-term revenue you intend to make from your website. There’s no need to weaken user-experience and site performance for ads.

Having too many advertisements creates hundreds of HTTP requests alone. And if you’ve made it this far reading the article, you already know what too many HTTP requests can do to your website.

The simplest way to solve this problem is to limit the number of display advertisements on your website. This ensures your website is responsive, has excellent performance, and still generates ad revenue.