As we know well by now, the speed of a web page is very important from an SEO and user experience perspective. Faster pages have higher search engine ranks, and users will visit more pages and convert higher on a fast performing website. In short, the smart SEO professional needs to also think about optimizing for performance as well as content.
As we discussed in our last article, WebPageTest is a great free tool you can use to optimize your website performance. One of the most useful outputs of the WebPageTest tool is a graphic known as the waterfall diagram. A waterfall diagram is a graphical view of all the resources loaded by a web browser to present your page to your users, showing both the order in which those resources were loaded and how long it took to load each resource. Analyzing how those resources are loaded can give you insight into what's slowing down your webpage, and what you can fix to make it faster.
Waterfall diagrams are a lot like Microsoft Excel: they are simple in concept and can be very powerful, yet most people aren't using them to their fullest potential. In this article, we will show how an SEO professional can use waterfall diagrams created by tools like WebPageTest to identify and improve their site's performance and user experience.
How to read a waterfall diagram
If you haven't done so already, go to WebPageTest and run a test of your site. When the results are finished, click into the first test result to see the waterfall. Below is a sample waterfall chart (click for a larger version).
As mentioned above, waterfall diagrams are cascading charts that show how a web browser loads and renders a web page. Every row of the diagram is a separate request made by the browser. The taller the diagram, the more requests that are made to load the web page. The width of each row represents how long it takes for the browser to request a resource and download the response.
For each row, the waterfall chart uses a multi-colored bar to show where the browser spent its time loading that resource, for example:
It's important to understand each phase of a request since you can improve the speed of your site by reducing the amount of time spent in each of these phases. Here is a brief overview:
- DNS Lookup [Dark Green] - Before the browser can talk to a server it must do a DNS lookup to convert the hostname to an IP Address. There isn't much you can do about this, and luckily it doesn't happen for all requests.
- Initial Connection [Orange] - Before the browser can send a request, it must create a TCP connection. This should only happen on the first few rows of the chart, otherwise there's a performance problem (more on this later).
- SSL/TLS Negotiation [Purple] - If your page is loading resources securely over SSL/TLS, this is the time the browser spends setting up that connection. With Google now using HTTPS as a search ranking factor, SSL/TLS negotiation is more and more common.
- Time To First Byte (TTFB) [Green] - The TTFB is the time it takes for the request to travel to the server, for the server to process it, and for the first byte of the response to make it make to the browser. We will use the measurement to determine if your web server is underpowered or you need to use a CDN.
- Downloading (Blue) - This is the time the browser spends downloading the response. The longer this phase is, the larger the resource is. Ideally you can control the length of this phase by optimizing the size of your content.
You will also notice a few other lines on the waterfall diagram. There is a green vertical line which shows when "Start Render" happens. As we discussed in our last article, until Start Render happens, the user is looking at a blank white screen. A large Start Render time will make the user feel like your site is slow and unresponsive. There are some additional data points in the waterfall, such as "Content Download", but these are more advanced topics beyond the scope of this article.
Optimizing performance with a waterfall diagram
So how do we make a webpage load more quickly and create a better user experience? A waterfall chart provides us with 3 great visual aids to assist with this goal:
- First, we can optimize our site to reduce the amount of time it takes to download all the resources. This reduces the width of our waterfall. The skinnier the waterfall, the faster your site.
- Second, we can reduce the number of requests the browser needs to make to load a page. This reduces the height of our waterfall. The shorter your waterfall, the better.
- Finally, we can optimize the ordering of resource requests to improve rendering time. This moves the green Start Render line to the left. The further left this line, the better.
Let's now dive into each of these in more detail.
Reducing the width of the waterfall
We can reduce the width of the waterfall by reducing how long it takes to download each resource. We know that each row of the waterfall uses color to denote the different phases of fetching a resource. How often you see different colors reveals different optimizations you can make to improve the overall speed.
-
Is there a lot of orange? Orange is for the initial TCP connection made to your site. Only the first 2-6 requests to a specific hostname should need to create a TCP connection, after that the existing connections get reused. If you see a lot of orange on the chart, it means your site isn't using persistent connections. Below you can see a waterfall diagram for a site that isn't using persistent connections and note the orange section at the start of every request row.
Once persistent connections is enabled, the width of every request row will be cut in half because the browser won't have to make new connections with every request.
-
Are there long, purple sections? Purple is the time spent performing an SSL/TLS negotiation. If you are seeing a lot of purple over and over again for the same site, it means you haven't optimized for TLS. In the snippet of diagram below, we see 2 HTTPS requests. One server has been properly optimized, whereas the other has a bad TLS configuration:
To optimize TLS performance, see our previous Moz article . -
Are there any long blue sections? Blue is the time spent downloading the response. If a row has a big blue section, it most likely means the response (the resource) is very large. A great way to speed up a site is to simply reduce the amount of data that has to be sent to the client. If you see a lot of blue, ask yourself "Why is that resource so large?" Chances are you can reduce the size of it through HTTP compression, minification, or image optimization. As an example, in the diagram below, we see a PNG image that is taking a long time to download. We can tell because the of the long blue section.
Further research revealed that this image is nearly 1.1 MB in size! Turns out the designer forgot to export it properly from Photoshop. Using image optimization techniques reduced this row and made the overall page load faster. - Is there a lot of green? Chances are there is a lot of green. Green is the browser just waiting to get content. Many times you'll see a row where the browser is waiting 80 or 90 ms, only to spend 1 ms downloading the resource! The best way to reduce the green section is to move your static content, like images, to a content delivery network (CDN) closer to your users. More on this later.
Reducing the height of the waterfall
If the waterfall diagram is tall, the browser is having to make a large number of requests to load the page. The best way to reduce the number of requests is to review all the content your page is including and determine if you really need all of it. For example:
- Do you see a lot of CSS or JavaScript files? Below is a snippet of a waterfall diagram from an AOL site which, I kid you not, requests 48 separate CSS files!
If you site is loading a large number of individual CSS or JavaScript files, you should try combining them as with a CMS plugin or as part of your build process. Combining files reduces the number of requests made, improving your overall page speed. - Do you see a lot of "small" (less than 2kb) JavaScript files or CSS files? Consider including the contents of those files directly in your HTML via inline <script>, <code>, or <style> tags.
- Do you see a lot of 302 redirects? Redirects appear as yellow highlighted rows and represent links on your page that are usually outdated or mistakenly made. This creates an unnecessary redirect which is just needlessly increasing the height of your waterfall. Replace those links with direct links to the new URLs.
Improving rendering time
Recall that the Start Render time represents when the user first sees something on the page other than a blank white page.
What is your Start Render time? If its longer than 1.5 seconds, you should try and improve it. To do so, first take a look at all the resources "above and to the left" of the Start Render line. This represents everything that should be considered for optimization to improve your render time.
Here are some tips:
- Do you see any calls to load JavaScript libraries? JavaScript includes can block page rendering, move these lower in your page if possible.
- Do you see a lot of requests for separate CSS items? Browsers wait until all the CSS is downloaded before they start rendering the page. Can you combine or inline any of those CSS files?
- Do you see external fonts? When using an external font, the browser won't draw anything until it downloads that font. If possible, try to avoid using externally loaded fonts. If that is not possible, make sure you are eliminating any unnecessary 302 redirects to load that font, or (even better) consider hosting a copy of that font locally on your own webserver.
As an example, here is the top of a waterfall diagram:
The green start render line is just over 1 second which is pretty good. However, if you look to the left of the line, you can see some optimizations. First, there are multiple JS files. With the exception of jQuery, these can probably be deferred until later. There are also multiple CSS files. These could be combined. These optimizations would improve the start render time.
You may need to coordinate with your designers and your developers to implement these optimizations. However the results are well worth it. No one likes looking at an empty white screen!
Other factors
Is my server fast enough?
We know that the time-to-first-byte from your server is a factor in search engine rankings. Luckily a waterfall tells you this metric. Simply look at the first row of the diagram. This should show you timing information for how the browser downloads the base HTML page. Look at the TTFB measurement. If it is longer than about 500 ms, your server may be underpowered or unoptimized. Talk with your hosting provider to improve your server capabilities. Below is an example of a waterfall diagram where the server was taking nearly 10 seconds to respond! That's a slow server!
Do I need a CDN?
Latency can be a big source of delay for a website, and it has to do with the geographic distance between your server and your website visitors. As we have discussed, latency is driven by distance and the speed of light; a high speed internet connection alone doesn't fix the problem. Content Delivery Networks (CDNs) speed up your website by storing copies of your static assets (images, CSS, JavaScript files, etc) all over the world, reducing the latency for your visitors.
Waterfalls reveal how latency is affecting the speed of your site, and whether you should use a CDN. We can do this by looking at the TTFB measurements for requests the browser makes to your server for static assets. The TTFB is composed of the time it takes for your request to travel to the server, for the server to process it, and for the first byte of the response to come back. For static assets, the server doesn't have to do any real processing of the request, so the TTFB measurement really just tells us how long a round-trip takes from a visitor to a user. If you are getting high round-trip numbers it means your content is too far away from your visitors.
To determine if you need a CDN, you first need to know the location of your server. Next, use WebPageTest and run a test from a location that is far away from your server. If your site is hosted in the US, run a test from Asia or Europe. Now, find the rows for requests for several images or CSS files on your server and look at the TTFB measurement. If you are getting a TTFB for static content that is more than 150 ms, you should consider a CDN. For commercial sites, you might want to look at the enterprise grade capabilities of Akamai. For a cheaper option, check out CloudFlare which offers free CDN services.
Summary
Believe it or not, we have only scratched the surface of the performance insights you can learn from a waterfall chart. However this should be more than enough to begin to understand how to read a chart and use it to detect the most basic and impactful performance issues that are slowing down your site.
You can reduce the width of the chart by optimizing your content and ensuring that each resource is received as quickly as possible. You can reduce the height of the waterfall by removing unneeded requests. Finally, you can speed up how quickly your users first see your page by optimizing all the content before the Start Render line.
If you're still not sure where to start, check out Zoompf's Free Performance Report to analyze your site and prioritize those fixes that will make the biggest impact on improving your page speed and waterfall chart metrics.
Great article and IMHO each web (dev, design, seo, webmaster) related technical person should read it.
If someone want to go deeper i can suggest read Designing for Performance. This is excellent book from Lara Hogan (an Etsy performance engineering manager) where she describe how even small changes can give huge performance boost. There is also free online version of book here. The book covers optimizing images, HTML, sprites, CSS, fonts and few RWD approaches.
For technical persons High Performance Browser Networking. Outstanding book from Ilya Grigorik (an Google engineer focused in fast web) where he explain TCP, UDP, TLS, HTTP/1.X and HTTP/2 fundamentals. Book also covering 3G/4G mobile networks and various real-world performance issues. Book can be read free online here.
And so far i can't find some good book about optimizing JavaScript. I was looking hard without results yet. If someone can suggest some book (not article!) please share it as comment here. I would love to read it. IMHO last years JavaScript and various libraries (jQuery, Moo, ZeptoJS, Angular, Backbone, etc, etc) was overused in web making most of sites slow, buggy and unreliable. Situation is even worse on mobile - browser indicate loading and user often can see pure white screen until browser didn't load and execute everything. Another story is that you can easy get "algorithmic filter" due JS code UI/UX. Can be tabbing content, "click to expand" or something other technique including "hidden content". But as i said before it's another story.
Today web is full with non optimized sites. I remember reading Verge (or ArsTechnica) article more than 10 (or 15?) years ago when they benchmark some Mac G4 at this time versus Pentium 3 (or 4?) on 300k animated GIF. Today sites loading 300k CSS where 90% of styles are old and not used - just designers are lazy and leave them just in case some can need them. Also most of sites loading over 300k Javascript - and this is very easy to archived just add some social sharing buttons with some embedded video. And we didn't cover tracking, beacons and ads networks.
Sorry but this isn't helping you getting blazing fast website. And you need lot of work to get rendering less than 1,5 secs.
These are some great resources Peter, thanks for sharing. While performance and its links to UX are not new topics, luckily it seems more and more people are aware of them now than in the past. We can't start fixing things until people understand them, so keep spreading the good word
I talk last night with Ilya and he write "there also may be an updated version coming.. ;-)" (about HPBN).
I totally agree with you. We're urgently need next generation of web devs, devops, designers with speed and SEO in their minds. Before site creation was designers, devs, deployment and SEO guys later. And it happen - changes, design, redesign, etc, etc. At the end all other groups blaming SEOs because they're requesting changes on already created and worked parts. This also create some conflicts inside teams.
I've seen this because now SEOs are working closer with all groups on all stages of project. Even on early phase where site is on whiteboard. And this is good news because later this minimize changes requested from SEOs. Bad news - this happen on some projects and it's very minimal to beat trends.
Recently I bought a WordPress theme that loaded a 4.3MB lib.js and a 1.3MB main.js. After the sitebuild was complete, the unused functions were removed and the files were minimised. They ended up being 600K and 100K, which (I think) are still too big.
True... 600k/100k is also too big. Because this need to be downloaded first, later parsed, compiled to byte code. In the end code must be executed. In end most of them messing DOM witch is worst case scenario for browser. Result - browser can't render page ASAP.
I working now on similar issue with mine site and removing (almost) completely JS. Only will remain GA, pure JS gallery (no jQuery) and some slider (again pure JS, no jQuery).
Peter,
I'm a big fan of either no-jquery or something like Zepto instead. I often see people uses 100, 200, 300 KB of JS framework only do support some little 2 or 3 KB of JavaScript they wrote that really doesn't need the entire framework
Gyorgy, This is a good point that people should remember. When you buy pre-made themes, there is often a large amount of functionality defined in not only the JavaScript but also the CSS that your site may not use. Buying a theme doesn't mean you can skip these issues. In fact, buying a theme often makes it harder, because you are probably not familiar with all the functionality since you didn't create it yourself
Billy, and Peter, excellent info here! I am wondering do either of you have an easy to follow guide for deferring js? I am finding that on many of the e-commerce sites I look after, the jquery call is often the largest offender for a render blocking bottleneck. In your SEO travels, have you found an easy to follow guide that will get a developer to take action?
Amazing article, page speed important factor in search engines optimization "seo", but i think we can slove this problem in:
1-strong server.
2-Design my own template.
3-compress css, js, and images.
thank you Billy
Initially it was really tough to understand it but i read it thrice and finally i got the importance of mentioned points. I always believe in being original and unique, either it is design, content or navigation. I follow the rule of being original always. Its a great article as its very much different from the other SEO Articles which we read on daily basis.
Thank u soo much Billy for your research..
Nazre,
Keep doing that! Writing good, original, compelling content is critical! Everything in this article is stuff you should do *after* creating awesome content.
I completely agree with you Billy. Sometime we want to write something fresh but we don't know how to start. In SEO, usually we read only those traditional topics, like On Page, OFF Page, Google Updates and Google Trends. But after reading your article, i was completely stunned and i realized the importance of research. One thing which i will keep in my mind before writing my next article, to do a deep research. Apart from being unique and original, Only a deep research can make your article unique and remarkable.
Thanks again Billy.. keep sharing your thoughts..
That's an incredibly honest comment, Nazre! Keep it up!
Fantastic article as usual. I've used waterfall charts to gauge resource loading, but I really never had the in-depth look into them that your article provides. Excellent explanation of the charts, as well as the provided solutions to rectify page loading issues. As always, thank you Moz!
Thank you Billy. This was extremely helpful.
Any suggestions on how people can test Wordpress themes before they purchase? Is using their demo version of the site sufficient so long as you understand you'll be hosting elsewhere and using different plugins?
Hello Billy ,
It's nice study on waterfall diagram with unique point.I learn many thing by this blog about waterfall diagram.
thank you
Thanks , Billy Hoffman this post cleared the dust for me in better understanding the page load issues as our web development teams at times forget to realize the importance of page load for our clients in the middle east. Previously, we had been using GTmetrix.com as an alternative.
Time to move to new server - 2 seconds for a response is definitely tooooo long, and finally sort out CDN. I've been thinking about it for some time, but... there was always but... Yo have kicked my lazy ass - thanks for that ;)
Carolus. This is where the TTFB can help you. The TTFB for the base dynamic HTML page gives you an idea if your server is powerful enough. The TTFB for static resources gives you an idea of whether a CDN makes sense
tanks
The most confusing Diagram for me which you make it easy in one post. Thanks i am going to keep your post in my SEO guide for later, in case if i need to refresh my learning. Thanks for sharing.
Keep up the good work! Great post bill. Thank you very much.
Just a note Billy.
Don't always blame the Server for slow TTFB...very very often is related to poorly designed software.
I understand that if a page is super optimized and reaches the score of 100%, that would be good apra google but for the user would be content that is not friendly and end away from the web
It's interesting to know about a distinct facet of the popular waterfal model. The article is filled with quality tips starting from understanding waterfall to utilizing it for website optimization. Thanks for sharing the wonderful perspective.
Amazing article. Very informative and useful. Thanks Billy for this beautiful piece of information :-)
Thanks for the article unfortunately we are located in Turkey and the test dose not support Turk GEO.
Thanks again anyway for your efforts
This is a great article. Should have read it sooner. Will add https://www.webpagetest.org/ to my list of tools.
Thanks.
Had no idea CloudFare had a free option, that's fantastic. Especially for people who are hesitant to move to https due to needing a CDN service as well.
nice blog very clearly said, The site will be download with in 2 second or less
This is great stuff
Great post Billy. I wanted to know, does Google page speed test has any link with webpagetest.org? I mean, the way google measure the page speed and show us a score, webpagetest.org follows the same pattern on back end?
Thanks,
I believe WebPageTest can show you Google Page Speed scores, but that's just because it is shelling out and using Google PageSpeed, or probably HarToPageSpeed
Great article. Most people hires a cheap hosting provider but don't think it may work in a bad way. For example, a hosting server at London won't work as well as a japanese one will do if your e-commerce works for Tokyo people.
Exactly! A CDN is also helpful, but if possible host your servers in a location close to the majority of your visitors or your target market
Thanks for the detailed insight Billy. I will be looking into a waterfall all evening! Hopefully I can fix a few speed issues I am having.
The truth is that in this seo took about two years and have never used this kind of diagrams. Are they really effective?
I'm not quite sure what you are asking Carlos. The links between a fast responsive site and good engaged users who visit more pages and spend more money have been researched and discussed for more the a decade. See here for a great collection. Waterfall diagrams themselves have been in use since the mid to late 2000's. They are very helpful if you know how to read them. However most SEO professionals weren't paying attention performance or waterfall charts until Google announced they were using speed as a factor in search rankings.
As a web developer, I have found that server speed is an important factor of water fall diagram for page load speed test.
I have tried cloudflare, which helped to gain almost 60% gain in reducing DNS lookup queries.
In the grand scheme of things, DNS lookup times has virtually no impact on total page load time. If you look at a waterfall, you'll see very little dark green.
That being said CloudFlare helps by applying many common optimizations, mainly around caching, automatically and can be a good thing for many people
Excellent! Really appreciate this thorough piece!
Great article Billy!
As you indicate in the article, the loading speed of our website is important to our positioning.
If our site takes to load, our client may get tired and look at other pages what you get. This implies the loss of customers.
Knowing how to interpret a diagram waterfall is not easy.
I appreciate your post where we can see how this graph is interpreted cascade to optimize the performance of our website.
Thanks Tino. If you are interested in this kind of thing, the Zoompf Blog is full of great articles about improving web performance.
Good write-up! I have to admit I haven't paid attention to the colors of the bars as much as I should have.
Have you noticed with WebPageTest that external resources are being loaded that aren't part of the web page you requested? Almost like the testing server has been hijacked by something that is injecting stuff (probably ads).
Marios,
I haven't seen that. WPT is pretty good at showing you exactly what is being loaded. Please note thought that JavaScript running on your page can pull in additional resources. A lot of people will go looking in the base HTML page or the CSS and search for a specific URL. If they don't find it, they think something is wrong with the waterfall or WPT. What is actually happening is JS is making additional requests or modifying the DOM to load additional resources. This is normal and only in rare cases the sign of a site that has been compromised
Thanks Bill. What made me suspicious was that I never saw the same results when using GTMetrix. I can't say conclusively that there's a problem with Webpagetest because each loading of the page triggers different ads and such, but the results seemed suspicious. Perhaps I should create a "clean" page with no external calls to see what happens.
Excellent Post! Thank you Billy
I love a good waterfall diagram.
I use a couple of free tools one by Pingdom but also WebPagetest too, to assess the load of all my items on a page. it helps me to see what load items are causing any rendering delays, or are just slow in general. I like to optimise all points from .JS files to images, a gain is a gain afterall and any speed increase I can get is beneficial not only to Google but more importantly the end user.
I read an article a while ago from KISSMetrics that stated for every second lost in speed and page load your conversions drop significantly, so getting your site to react as fast as possible is hugely beneficial all around, especially if you want conversions.
Great read and something all devs/designer/seo'ers should look into further.
website speed is a ranking signal I have 100% page speed of my website but i did this through .ht-access file. I want to know that is it a right way to increase website speed through htaccess file.
Nice post on Waterfall model thank you
Improving speed via the .htaccess file is a pretty big topic. If you are interested in that kind of thing, I suggest taking a look at the Zoompf performance blog.
Very informative.Thanks for the share.
thanks Bill
thank you