Synthetic Monitoring

Simulate visitor interaction with your site to monitor the end user experience.

View Product Info

FEATURES

Simulate visitor interaction

Identify bottlenecks and speed up your website.

Learn More

Real User Monitoring

Enhance your site performance with data from actual site visitors

View Product Info

FEATURES

Real user insights in real time

Know how your site or web app is performing with real user insights

Learn More

Infrastructure Monitoring Powered by SolarWinds AppOptics

Instant visibility into servers, virtual hosts, and containerized environments

View Infrastructure Monitoring Info
Comprehensive set of turnkey infrastructure integrations

Including dozens of AWS and Azure services, container orchestrations like Docker and Kubernetes, and more 

Learn More

Application Performance Monitoring Powered by SolarWinds AppOptics

Comprehensive, full-stack visibility, and troubleshooting

View Application Performance Monitoring Info
Complete visibility into application issues

Pinpoint the root cause down to a poor-performing line of code

Learn More

Log Management and Analytics Powered by SolarWinds Loggly

Integrated, cost-effective, hosted, and scalable full-stack, multi-source log management

 View Log Management and Analytics Info
Collect, search, and analyze log data

Quickly jump into the relevant logs to accelerate troubleshooting

Learn More

Troubleshoot Slow Website Performance with the Waterfall Chart

Instead of your website loading as expected, you only see a 404 Not Found Error. Or, you’re unable to view images and live content on the site is taking way too much time to render.

Sound familiar?

A website, just like any application we use every day is bound to go through some amount of downtime. The causes are due to inappropriate web page elements, issues when loading a third party site content, corrupt cache or cookies causing images to load slowly, or network or hardware issues.

When your site experiences downtime or is slow to load, manually digging in and troubleshooting is only going to make matters worse. Instead, you should consider starting with the analysis of the waterfall chart in order to find the root cause of any website issues.

The Waterfall Chart

The waterfall chart or the waterfall graph, as the name suggests, resembles a waterfall that shows you greater insights into the performance and availability of your websites and web based applications. This visual and data rich chart provides everything you need to know about what’s causing your sites to load slowly. For example, see all your web elements such as CSS, HTML, images, third party content, plugins, JavaScript, and everything else that makes up your web page and the order in which they are rendered in the browser.

waterfall1

 

 

The great thing about the waterfall graph is, you don’t need to be an expert to read or understand it. The waterfall graph slices and dices your entire website data and its elements. See every CSS or image element individually in the form of horizontal histograms and monitor their overall load times (normally measured in seconds or milliseconds). In addition to this, you also get tremendous visibility for every element from the time your browser is looking up the DNS information until the time the browser receives data from the server, and everything in between (SSL handshake, server connections, sending/receiving/waiting for data, etc.).

waterfall2

The other great thing about working with waterfall charts is that they visually show you where your web page elements are stuck. For example, if images are not loading, just go to the image element in the graph and visually see the issue. It is possible that the web browser is waiting on data from the server, or it could be a connection issue where the browser is unable to connect to the server where the image is hosted.

If you want to diagnose further, you can expand the image element to look at header settings. The response and request headers provides various HTTP information about the server and client where you can see data related to the OS, server, browser, connection status, cache control, host details, etc. Incorrectly configuring header settings can prevent web page elements to load slowly or may not even load.

waterfall3

The waterfall chart will then show you, based on the server response, whether the image was successfully read by the browser or whether a client or a server error occurred causing a 404 or a 500 internal error. Once you know it’s a server issue, you can check if there were any resource contention problems or network problems. If it’s a client issue, you can troubleshoot whether the end-user has access to the site, permission to upload, and so on.

You can not only view and analyze the waterfall graph but also examine websites, trace performance history, see how pages and sites perform in different locations, and get tips to improve the health of your sites and web pages.

Analyze your website and experience the waterfall chart with Pingdom’s website speed test.

 

About the Author:

Karthik Ramchandran is a Sr. Product Marketing Specialist at SolarWinds working with systems management product portfolio. Outside of work you can find Karthik tinkering around with his road bike and looking at every opportunity to go on a long distance bike ride or is engrossed watching cooking shows or sports on TV.

Introduction to Observability

These days, systems and applications evolve at a rapid pace. This makes analyzi [...]

Webpages Are Getting Larger Every Year, and Here’s Why it Matters

Last updated: February 29, 2024 Average size of a webpage matters because it [...]

A Beginner’s Guide to Using CDNs

Last updated: February 28, 2024 Websites have become larger and more complex [...]

The Five Most Common HTTP Errors According to Google

Last updated: February 28, 2024 Sometimes when you try to visit a web page, [...]

Page Load Time vs. Response Time – What Is the Difference?

Last updated: February 28, 2024 Page load time and response time are key met [...]

Monitor your website’s uptime and performance

With Pingdom's website monitoring you are always the first to know when your site is in trouble, and as a result you are making the Internet faster and more reliable. Nice, huh?

START YOUR FREE 30-DAY TRIAL

MONITOR YOUR WEB APPLICATION PERFORMANCE

Gain availability and performance insights with Pingdom – a comprehensive web application performance and digital experience monitoring tool.

START YOUR FREE 30-DAY TRIAL
Start monitoring for free