1. Technology

Broken Links Slow Your Website

Don't Forget to Check JavaScript, CSS, and Image URLs


Fixing broken links is a tedious part of your website maintenance. We all know that fixing broken links is important. While a link within the text of your web page won't affect how fast the page itself loads, there are some links on your web pages that will affect the speed of your pages.

HTTP Requests are Slow

While the most common places you can have broken links on your website is in the content, there are other places that many web designers forget to check. In fact, I have been guilty of not checking these links myself, with sometimes disasstrous results. These links include:

  • Image source files
  • CSS links
  • Javascript source files

Images are the most easily found broken links because most browsers show them as a broken image when the URL is wrong. But even broken images can be missed, especially images that are used for site design, spacers and so on. If the image size is defined (in CSS or the image itself) as extremely small, the broken image can be missed.

But when you have a 404 for an image, that causes a useless response from an HTTP request. And as I mention above, HTTP requests are slow. So if your page has to spend extra time requesting images that are not available, the time it takes to download is increased.

Another place to check for broken links is your CSS LINK tags in the HEAD of your document. Like images, if the CSS file is not where you've linked to, this sends a useless HTTP request to the server and returns a 404 code. It is especially common for sites that use a lot of external CSS files to have a typo in one of the URLs or have the file be moved causing the 404. On one site I worked on, one designer thought the styles she needed were not created yet, so she added them to her CSS file, when they were included in one of the other linked style sheets—with a typo in the URL that she never checked. We only found it by going through our 404 error reports.

The worst place to have a bad link is in a JavaScript source URL. This introduces all the same speed issues as images and CSS, but also adds the danger that JavaScript is intended to be executed. If the 404 page that the server sends includes JavaScript, the browser may try to interpret it, adding both extra download time and potentially bad script interactions.

Plus, web pages are downloaded in multiple threads, but JavaScript cannot be loaded in parallel. Loading a 404 page instead of the JavaScript stops all other downloads until the browser is done loading that 404 page. This is why it is recommended you place all your JavaScript at the bottom of your HTML documents if at all possible, but is especially important if the source link is broken.

Remember to Check Scripts, Images, and CSS When Verifying Broken Links

These types of broken links are especially annoying as they aren't usually caught by most link checkers. You have to remember to check them manually. One way you can watch for these types of errors is by looking at your server logs. Periodically look the URLs that are getting 404 errors and what pages are calling them. When you notice things like images, CSS, or JavaScript getting 404 errors you can fix the pages with those broken links.

©2014 About.com. All rights reserved.