DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • Create a JavaScript Scrolling and Sweeping Heatmap
  • Unboxing the Black Box
  • Implementing Dynamic Heat Maps In Angular Applications

Trending

  • DevOps in the Cloud - How to Streamline Your CI/CD Pipeline for Multinational Teams
  • Zero-Latency Architecture: Database Triggers + Serverless Functions for Modern Reactive Architectures
  • Operationalizing Data Quality in Cloud ETL Workflows: Automated Validation and Anomaly Detection
  • Guide to Repairing Damaged Apache Doris Tablets

Taking Your Web Performance's Temperature Using a Heat Map

By 
Mehdi Daoudi user avatar
Mehdi Daoudi
·
Jul. 16, 12 · Interview
Likes (0)
Comment
Save
Tweet
Share
13.7K Views

Join the DZone community and get the full member experience.

Join For Free

in this heat map example, web site’s performance data is overlay with color, where red means “slowest” and green means “fastest” (with various color grades in between). i added this heat map example because the chart data was difficult to “crunch”, to analyze for patterns; adding color made this easier. download the excel sheet here . otherwise, see the below “before” and “after”.

before: raw chart data:

after: heat map:

side by side:

the chart data is the arithmetic mean average of six weeks’ worth of web site response time measurements (in milliseconds), broken down by day of week and by hour of day. i then used excel’s built-in /conditional formatting/color scales/red – yellow – green color scale/.

document complete / onload:

_the following is optional reading material._

here are some potential fact statements we get from looking at this heat map:

01. the weekends are the “fastest”.

02. the weekdays are the “slowest”.

03. response time slows starting at around 07:00 am pt and response time speeds starting at around 07:00 pm pt.

04. the “slowest” (i.e. the most red) “day of week”/”hour of day” combination is wednesday at 05:00 pm pt.

05. the “fastest” (i.e. the most green) “day of week”/”hour of day” combination is wednesday at 02:00 am pt.

06. interestingly enough, the “fastest” and “slowest” “day of week”/”hour of day” combination was on a wednesday.

07. friday afternoons were “faster” when compared to other weekday afternoons (insert comment here re: folks getting ready for the weekend!).

download the excel file here: https://docs.google.com/open?id=0b9n5sarv4oonmedtotlvohnib0e

********************************************************************************

i used his model to chart the performance heat map of google search (search for a keyword) and decided to compare the wait time (1st byte) and their search query time:

google’s wait time vs. google search query time

here is the same for etsy’s home page, wait time and the etsy server time:

etsy’s wait time vs. etsy’s server time

(data from june 1 2012 to july 13 2012, time in est)

i used these 2 examples mainly because not only we are plotting a catchpoint metric but also overlaying customer telemetry coming from google (how long it takes for google to spit the results) or etsy (how long it takes for their server to build the html). what would be cool is to get traffic volume during those days and hours to correlate the performance metrics and usage pattern. but what these chart show is clearly a performance degradation during certain days and hours of day that are driven by volume, users, usage…

enjoy the summer and try to keep your web performance cool!
thank you leo for sharing this!

Heat map HEAT (software)

Published at DZone with permission of Mehdi Daoudi, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Create a JavaScript Scrolling and Sweeping Heatmap
  • Unboxing the Black Box
  • Implementing Dynamic Heat Maps In Angular Applications

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: