Lifecycle of a Click – Improving Web Page Speed

This is a guest post by Brian Doll, Application Performance Engineer at New Relic
Six seconds can be an excruciatingly long time to wait for a single web page to load. Why does it take so long? Let’s take a look at each step of the timeline and see how we can make it faster.
Page load timeline.

1. Domain Name System (DNS)

It may be hard to believe, but there are still a few people out there who haven’t visited your website yet. When those early adopters hit your site for the first time they may not have the benefit of a cached Domain Name System (DNS) entry at their ISP. While easily forgotten as part of the basic fundamentals of how the web works, bad DNS response times can weigh heavily on a site’s performance.
Not all DNS providers are created equal. The three keys to ensuring good DNS providers are test, test and test. Namebench is an open-source DNS benchmarking utility that can help spot DNS performance issues. There are plenty of DNS providers these days, so there are no excuses for staying with a slow one.

2. Network time

Sometimes the speed of light just isn’t fast enough. Your servers may be hosted in Northern California, but you’ve got an increasing number of users in Sao Paulo. How long does your site take to respond to them? Flying all that and every from San Francisco to Sao Paulo adds up to a whole lot of wait time.
While we can’t improve the speed of light, we can shorten the distance your site’s content has to travel to get there. There are many Content Delivery Network (CDN) providers that help by delivering your site’s content from locations all around the globe. When selecting a provider, make sure to verify that they have edge servers close to your actual customers. The only real way to verify the benefits of a CDN is to use real user monitoring to see the impact from your actual customers.

3. Web Applications

Remember when web applications used to be simple? Today many applications rely on multiple data stores and integrate with several APIs. Applications are doing a lot of heavy lifting just to get recent and relevant content delivered for every user. Not only have our applications gotten more complex, we also now deliver new features faster than ever before. As applications change at breakneck speeds with increasing complexity, it’s no wonder the apps have gotten slower.
With all these moving parts, you need to be able to see inside your application in order to spot the bottlenecks and pain points. Real-Time web app performance monitoring allows developers to see exactly what’s happening inside their applications and quickly spot trouble. It also allows you to see which API services may be causing trouble, find slow SQL queries and spot page fragments that could be cached to speed things up. Without tools like these, performance improvements are just guesswork.

4. Document Object Model (DOM) processing

Large HTML pages not only take a long time to transfer over the wire, they can also take a really long time for a browser to process. HTML rendering engines are very forgiving by nature and need to make sense of every Document Object Model (DOM) node in the page. Some browsers are more efficient at this than others. A faster browser like Google’s Chrome may be four times faster in processing a given page than recent versions of Internet Explorer in real-world tests.
Obviously developing leaner web pages with less DOM nodes will lead to faster processing. This can be easier said than done, however. If you find yourself using extra markup tags in order to style elements to your liking, consider tools like CSS Lint to get tips not only on creating better CSS, but also how to style elements without an overwhelming amount of specificity. Lean DOMs are fast DOMs!

5. Asset loading and rendering

All this talk of page performance and we still haven’t seen anything appear in our browser yet! After the DOM is processed, the browser will begin displaying the page while downloading and rendering CSS files, images and JavaScript files. If we are hosting this content, a CDN provider can help quite a bit here too. Unfortunately, we’re often building pages that contain assets that are served elsewhere, like JavaScript tracking tools.
In 2007, almost 100 Internet years ago, Yahoo published the Best Practices for Speeding Up Your Web Site. These best practices are as relevant as ever, mostly easy to implement and can have a huge impact on overall site performance. Check out Web Page Test for an automated check of your website against these 35 tried and true best practices.
As we’ve seen, keeping web pages fast involves thinking through the entire page lifecycle and taking deliberate steps along the way to optimize for performance. Your customers will thank you!