up

Zoompf's Web Performance Blog

Note: Archived Content

This is the archived version of the Zoompf blog. Since our acquisition by Rigor, all our new research and posts on web performance are being published on The Rigor Blog

How to Quickly Spot and Fix Those “Link Not Found” Errors

 Mark Isham on December 4, 2014. Category: Zoompf Alerts

If you’re using our free Zoompf Alerts product, you may have noticed there is a test for “Link Not Found” errors found on your page (also known as “404 Errors” or “Page Not Found”). As the name suggests, a Link Not Found error is returned from the webserver when the requested page does not actually exist on the server. For example, here’s a Page Not Found error on the Zoompf.com site.

LinkNotFound4

While Link Not Found errors can have a minor impact on the performance of your site (the browser still needs to spend time requesting those links), they can more importantly make for a poor user experience. Most likely some resource (often a background image) is not getting loaded properly, leading to an unintended user experience.

While our Zoompf Alerts product identifies Link Not Found errors, we’ve gotten a few questions about how to more easily find and fix those problems, so we thought it’d make sense to walk through an example. In this example I’ll be referencing our NewEgg Demo account. Since scan results expire over time, I’ll use screenshots rather then direct links to preserve the content for this article over the long term.

Link Not Found Example

To begin, look at your most recent Performance Snapshot for any Link Not Found errors. In this example, we have an error for this URL:

images10.newegg.com/WebResource/Themes/2005/Nest/icon-language.png

LinkNotFound1

If you click the “Details” link, you’ll see lots of information about this specific defect. Scroll immediately to the bottom and you’ll see “Referring Pages”:

LinkNotFound2

This table lists out all pages found in our performance scan that tried (but failed) to include the link images10.newegg.com/WebResource/Themes/2005/Nest/icon-language.png. You can also use the “Reference Source” column to determine HOW that URL was referenced: for example it may be a link from a CSS file, or it could be loaded via a javascript method.

Now here’s where it gets interesting! What if you don’t know how the referencing page is included? You may not realize it, but the referencing pages section is completely recursive. In other words, you can click the “View” icon next to a referencing page to see which page referenced THAT page, and repeat indefinitely until you hit the first page we scanned.

So for example here, we click View for this referring page: http://images10.newegg.com/WebResource/Themes/2005/CSS/USA/newegg.v1.w.11306.2.css

Scroll to the bottom and you now see this:

LinkNotFound3

So in other words, we’ve now observed the following dependency tree:

images10.newegg.com/WebResource/Themes/2005/Nest/icon-language.png

was included by:

http://images10.newegg.com/WebResource/Themes/2005/CSS/USA/newegg.v1.w.11306.2.css

which in turn was included by:

http://www.newegg.com

Voila! You can now track down the exact progression to your missing page. From there you can either choose to fix the link (either you had a typo in the URL or need to upload the actual file to the server), or remove it if that link was no longer needed. This in turn will yield a slight performance improvement, but more importantly a better user experience (and cleaner code!).

There’s a lot of power in walking through the dependency links in the Zoompf Alerts Defect Details.

If you want to fix all your Link Not Found errors on your website, as well as numerous other common performance problems, you can sign up for Zoompf Alerts for free.

Comments

Have some thoughts, a comment, or some feedback? Talk to us on Twitter @zoompf or use our contact us form.