There are dozens, if not hundreds of requests and assets that can affect your page load times. We used a free Chrome extension to monitor and identify all of these factors and in the end, we were able to slash our load times in half.

DNS and web performance

How does DNS affect web performance? Most modern websites are dependent on dozens of requests just to load the homepage. Each one of these requests uses the Domain Name System to reach the desired domain where the information or content is hosted. If one of these requests is unable to load, you could be looking at seconds added to your load times. Or worse, if the request blocks other assets from loading, your page won't load at all.

For example, the Constellix homepage needs 68 different requests to load.

Misconceptions about DNS

When you think DNS, you typically think backend, right? Wrong. DNS affects both the front and backend of website and applications. The frontend part of DNS usually gets overlooked... until something goes wrong. You probably remember that fateful morning in late October when "half the Internet" was down thanks to a DDoS attack on a major DNS provider. Unfortunately, it took a massive outage for the world to realize the importance of DNS and how it can impact their day to day interactions with the web.As we saw in October, DNS is a major player in ensuring the availability of domains. But this only affected the businesses that used the downed provider. What about the "rest of the Internet"?Many of you reading this will claim that you weren't affected by the outage. Wrong. Have you taken a look at the plugins you use on your website, the upstream providers you use for your payment processing, your analytics, your CDN, and so much more. I bet one of them used the downed provider. Our sister company, DNS Made Easy did, and they experienced their lowest sales day in history. Most modern websites require dozens of requests just to load the homepage. If one of these requests is unable to load, you could be looking at seconds added to your load times. Or worse, if the request blocks other assets from loading, your page won't load at all.

The Solution

To help our clients identify the different elements affecting website load times and network connectivity issues we developed a free Chrome extension called Sonar Lite.

We are going to show you how you can use Sonar Lite to solve your own web performance issues by showing you some of the good, the bad and the ugly of websites. For starters, let's look at our own website. Our current website takes 3.84 seconds to load and uses 68 requests.

The Good

We are currently in the process of rebuilding our website, and Sonar Lite proved a crucial tool for identifying the source of our long load times. First, the carousel at the top of our homepage was hogging up most of the load time, so we changed it to a static image. Second, we cut down on the number of third party resources and requests needed to load our site. We also took a new approach to the interactive elements of our site, which slashed the DOM Interactive load times significantly. For an accurate comparison, we kept the new website on a separate subdomain and used the same CDN, web host, DNS service, etc. We were able to cut our load time nearly in half (2.15 seconds) for our homepage. We also took a new approach to the interactive elements of our site, which slashed the DOM Interactive load times significantly. For an accurate comparison, we kept the new website on a separate subdomain and used the same CDN, web host, DNS service, etc.We were able to cut our load time nearly in half down to 2.15 seconds for our homepage. We also limited the number of requests to 38 (that's 30 less than before).But we knew that there was more work we could do. We minified our images, CSS, and Javascript, which brought our load time down to 1.68 seconds... That's only half a second faster than our first build, but over 2 seconds faster than our original site!

While two seconds may not seem like a whole lot, studies have shown that a single second can deter clients from converting. Homepages and checkout pages are the most important when it comes to load times, as they decide whether a client stays or goes to a competitor.

A 2-second delay in load time during a transaction results in abandonment rates of up to 87%. (Source)

The Bad

So that was a happy ending. But what about the mistakes... the crummy side of the Internet that makes you want to pull your hair our when you just wanted to check the snow forecast to see if you could miss a day of work?

Unfortunately, you're going to have to wait 6.62 seconds because a full page ad demands your attention first. Interstitials and ads from third party services can take up a good chunk of your page load time. Not to mention, they turn away clients who don't want to wait the extra 5 seconds for your advertisement to load.Another big culprit of load times is DNS. Many website owners will register their domain and stick with their registrar's DNS services. The problem is these are usually stone age services that can't keep up with the demands of the modern Internet.

50% of your 1-second page load time budget on mobile is taken up by network latency overhead (a portion of which is running a DNS lookup). [Source]

For example, this site which sells to an international market has only one name server operating our of Taiwan. This causes the DNS request to be very long for anyone not in the immediate area.

The Ugly

Here's another gem that is suffering on the network side of things. This one-page article took 13.49 seconds to load. The rest of the page was covered in ads. So covered, it takes over five seconds just to scroll through all of the ads that break up the article and then another 5 to get through the one after it. Ads are hosted on third party networks, so every single ad on your page is adding milliseconds to your load times. As you can see these add up pretty quickly when the majority of your real estate is devoted to ads.

Best Practices

Now that we have seen the full spectrum of website performance, what can we learn from their mistakes?

1. Limit the number of requests. Host your images, CSS, and scripts on your own website rather than linking to an external site.
2. Take it easy with the advertisements. Each ad uses additional requests from third party resources, which can significantly increase load times.
3. Try to avoid using redirects. This can be tricky because sometimes they are absolutely necessary. Just keep in mind that redirects can add entire seconds to your page load times, and should only be used as a last resort.

1. Use an Anycast network for your DNS and CDN services. These networks use the cloud to host your website and DNS information from dozens of locations around the world. That means your clients as far as Singapore will connect to your site and experience similar load times as if they were in your backyard.
2. Size does matter! Compress your CSS, Javascript, images, etc. As you saw from our example, this can cut your load times in half.
3. Interactive elements should be kept to a minimum. While adding a script or animation may make your UI better, make sure it is absolutely necessary. Interactive elements not only weigh a site down but can block other elements from loading.

Stay tuned for our next article where we will show you how this free extension can help you troubleshoot common network issues.