Measuring User Experience in the Browser

Feb 15, 20126 likes1,119 views

The document discusses user experience management and outlines various web performance metrics that can be captured from browsers such as time-to-first-byte, onload time, bandwidth, rendering time, and resource download times. It describes the W3C Navigation Timing and Resource Timing APIs that browsers expose to capture this performance data non-intrusively. Examples are provided of how this data could be used for real-world applications like identifying geo hotspots, page error monitoring, and performance profiling.

User Experience Management
Alois Reitbauer

We miss about 80%

Your visibility ends here

Web Application Delivery Chain

Content
Internet

Server

Browser

Processing
3rd Party

Robots are not humans
(even if they come close)

Challenges Today

Lack of standards

In Browser Measurement Complex

Most tools for development/troubleshooting

Measuring User Experience in the Browser

Request Start Time
Business Event Time
Time-to-First-Byte

OnLoad Time DNS/Network Time

Bandwidth Rendering Time
Latency (Geo)Location
JS Execution Time
Browser Info
Resource Download Time
Rendering Time

… we want to get all this
information non intrusively
(aka hacking)

OnLoad Time Measurement
<html>
<head>
<script type="text/javascript">
var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start; alert("page loading time: " + latency);
}
</script>
</head>
<body onload="onLoad()">
……

Resource Time Measurement

……
<script type="text/javascript">
downloadStart(“myimg”);
</script>
<img src=“./myimg.jpg” onload=“downloadEnd(„myimg‟)” />
…..

… browsers have all this
information, so why not
expose it

Web Performance Specs
Navigation Timing
Basic page navigation information

Resource Timing
Information about page resources (own & third party)

User Timing
Custom actions and high-res timer

Timeline
Unified Access to Performance Data

Navigation Timing
window.performance.timing.

Resource Timing
window.performance.getEntriesByType(window.performance.PERF_RESOURCE)[].

Marks
mark (markName)
add a new mark with the current timestamp

getMarks (markName)
Retrieve all marks with the specified name. If none is
specified all marks will be returned
Result Structure:
{
<markName> : [<val1>, <val2>, …]
…..
}

Measures
measure ()
fetchStart -> now

measure (startTime)
startTime -> now

measure(startTime, endTime)
startTime -> endTime

Open Issues
How to send the data back to the server

Rendering and JS Execution

Implementing the backend services

Full browser support

More efficient bandwidth measurement

Blocking data transfer

if(isBrowserCloseEnabled)
{
var startTime = new Date().getTime();
while(((new Date().getTime()) - startTime) < 750)
{
};
}

Real world examples
what‟s possible today

Performance Bookmarklet

http://blog.dynatrace.com/samples/bookmark.html

Alois Reitbauer
alois.reitbauer@dynaTrace.com
@AloisReitbauer
http://blog.dynatrace.com

This document discusses measuring user experience by capturing performance metrics from web applications. It outlines challenges in measurement due to lack of standards and introduces W3C specifications for Navigation Timing, Resource Timing, and User Timing that expose timing data from browsers. Examples are given for measuring page load, resource download, and custom timing events. Open issues remain around sending performance data to servers, full browser support, and efficiently measuring bandwidth.

Measuring Performance in the BrowserAlois Reitbauer

The document discusses measuring end user performance in the browser, which is complex due to a lack of standardization. It proposes exposing detailed timing data that browsers already collect, such as resource download times and rendering times, in a non-intrusive way according to W3C specifications. This includes Navigation Timing, Resource Timing, User Timing, and the Performance Timeline. Open issues include how to send the performance data back to servers and implementing the necessary backend services. Exposing this level of browser performance data could be a game changer for monitoring, mobile optimization, and the web performance field overall.

Introduction about-ajax-frameworkSakthi Bro

Inner core of Ajax Muhammad Junaid Ansari

Ajax allows for asynchronous JavaScript and XML HTTP requests to be performed in the background to update parts of a web page without reloading the entire page. It uses the XMLHttpRequest object to send and receive data from a web server in the background. This allows for faster and more interactive web applications. Popular websites like Gmail, Facebook, and Google Maps use Ajax to asynchronously update parts of the page for a more seamless user experience.

Alexey Kupriyanenko "The State of Modern JavaScript and Web in 2020 - Real us...Fwdays

Web technologies are on a constant rise, and as time goes by, they’re just getting better, quicker and making our lives much easier. In this talk, we will review some of them, including those still in experimental stages. We’ll kickoff with “Web Standards” and “Browser Features”, that you can start using right away. Following that, we will tackle some of the interesting ideas flying around out there, and explore them via real use cases most of us probably deal with on a daily basis. And the cheery on top of all of this - Upcoming APIs. Although still in early stages, we’ll examine them and even challenge them with different use cases and problems that they are solving.

TechDays 2017 - Creating real life serverless solutions with azure functionsJan de Vries

Reliably Measuring ResponsivenessNicholas Jansma

Responsiveness to user interaction is crucial for users of web apps, and businesses need to be able to measure responsiveness so they can be confident that their users are happy. Unfortunately, users are regularly bogged down by frustrations such as a delayed "time to interactive” during page load, high or variable input latency on critical interaction events (tap, click, scroll, etc.), and janky animations or scrolling. These negative experiences turn away visitors, affecting the bottom line. Sites that include third-party content (ads, social plugins, etc.) are frequently the worst offenders. The culprit behind all these responsiveness issues are “long tasks," which monopolize the UI thread for extended periods and block other critical tasks from executing. Developers lack the necessary APIs and tools to measure and gain insight into such problems in the wild and are essentially flying blind trying to figure out what the main offenders are. While developers are able to measure some aspects of responsiveness, it’s often not in a reliable, performant, or “good citizen” way, and it’s near impossible to correctly identify the perpetrators. Shubhie Panicker and Nic Jansma share new web performance APIs that enable developers to reliably measure responsiveness and correctly identify first- and third-party culprits for bad experiences. Shubhie and Nic dive into real-user measurement (RUM) web performance APIs they have developed: standardized web platform APIs such as Long Tasks as well as JavaScript APIs that build atop platform APIs, such as Time To Interactive. Shubhie and Nic then compare these measurements to business metrics using real-world data and demonstrate how web developers can detect issues and reliably measure responsiveness in the wild—both at page load and postload—and thwart the culprits, showing you how to gather the data you need to hold your third-party scripts accountable.

AJAX for ScalabilityTuenti

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes, allowing parts of a page to change without reloading the entire page. Tuenti uses AJAX extensively to update parts of their single-page application, caching content on both client and server sides for scalability. They route requests to different server farms based on client location and cache content to improve performance. Tuenti serves billions of images per day using multiple CDNs and pre-fetches content to minimize load times.

The High Performance Web Application LifecycleAlois Reitbauer

This document discusses high performance web application lifecycles. It covers trends in continuous integration, automated web performance testing, and continuous monitoring in production. Metrics like page load time, resource timing, and third party content load time are discussed. The document also covers browser APIs like Navigation Timing and Performance Timeline that provide performance metrics, and how these can be used to analyze performance across builds and detect common problems. Limitations include lack of support in older browsers and inability to provide insight into JavaScript.

Velocity NYC: Metrics, metrics everywhere (but where the heck do you start?)Cliff Crocker

This document discusses various metrics for measuring website performance. It begins by noting that there are many metrics to consider and no single metric tells the whole story. It then discusses several key metrics for measuring different aspects of performance, including: - Front-end metrics like start render, DOM loading/ready, and page load that can isolate front-end from back-end performance. - Network metrics like DNS and TCP timings that provide insight into connectivity issues. - Resource timing metrics that measure individual assets to understand impacts of third parties and CDNs. - User timing metrics like measuring above-the-fold content that capture user experience. It emphasizes the importance of considering real user monitoring data alongside

Metrics, metrics everywhere (but where the heck do you start?)Tammy Everts

Metrics, metrics everywhere (but where the heck do you start?) SOASTA

This document discusses various metrics for measuring website performance and user experience. It outlines different types of metrics including: - Network metrics like DNS resolution, TCP connection times, and time to first byte. - Browser metrics like start render time, DOM loading/ready times, and page load times. - Resource-level metrics obtained from the Resource Timing API like individual asset load times and response sizes. - User-centric metrics like Speed Index, time to visible content, and metrics for single-page applications without traditional page loads. It emphasizes the importance of measuring real user monitoring data alongside synthetic tests, and looking at higher percentiles rather than just averages due to variability in user environments and network conditions

Using Modern Browser APIs to Improve the Performance of Your Web ApplicationsNicholas Jansma

This document discusses modern browser APIs that can improve web application performance. It covers Navigation Timing, Resource Timing, and User Timing which provide standardized ways to measure page load times, resource load times, and custom events. Other APIs discussed include the Performance Timeline, Page Visibility, requestAnimationFrame for script animations, High Resolution Time for more precise timestamps, and setImmediate for more efficient script yielding than setTimeout. These browser APIs give developers tools to assess and optimize the performance of their applications.

Make It Fast - Using Modern Browser Performance APIs to Monitor and Improve t...Nicholas Jansma

Make It Fast Using Modern Browser Performance APIs to Monitor and Improve the Performance of your Web Apps. Presented at CodeMash 2015. Performance matters. How fast your site loads — not just on your development machine, but from your actual customers, across the globe — has a direct impact on your visitors’ happiness and conversion rate. Today’s browsers provide several new cutting-edge performance APIs that can give you Real User Metrics (RUM) of your live site’s performance. Whether you run a small blog or a top-1K site, monitoring and understanding your performance is the key to giving your visitors a better experience. We will be discussing the NavigationTiming, ResourceTiming and UserTiming performance APIs, which are available in the majority of modern browsers. You’ll walk away with a better understanding of what problem these APIs solve and how to start using them today. We’ll also go through both D.I.Y. and commercial options that utilize these APIs to help you better monitor and improve the performance of your websites.

Understanding Web Applications and Web Testing Tools - QAConfnarayanraman

W3C Web Performance - A detailed overviewAlois Reitbauer

The document discusses web performance optimization techniques. It introduces tools in the Navigation Timing and Resource Timing APIs to measure page load times and resource loading speeds. It presents methods to instrument pages to measure parts of the loading process. The document also discusses upcoming web performance APIs like Beacon, Navigation Timing 2, and ways to prioritize visible resources. Polyfilling techniques are mentioned to bring these capabilities to older browsers. Real-world uses are discussed, like CDN monitoring and integrating performance data with analytics.

QSpiders - Installation and Brief Dose of Load RunnerQspiders - Software Testing Training Institute

The document provides information on performance testing processes and tools. It outlines 8 key steps: 1) create scripts, 2) create test scenarios, 3) execute load testing, 4) analyze results, 5) test reporting, 6) performance tuning, 7) communication planning, and 8) troubleshooting. It also discusses tools like LoadRunner, Controller, and Analysis for executing and analyzing tests. The document emphasizes having a thorough test process and communication plan to ensure performance testing is done correctly.

Do we need a bigger dev data cultureSimon Dittlmann

In front-end software development it's still rare that data is collected on the client side besides some analytics data where developers usually don't have access to. Imagine what you can do when you have front-end log data, you see how many ajax calls hitting your servers and you finally know whether the single page application is used like you expected or not. I will briefly talk about projects I was part of where we used these kind of data to improve our product and surprisingly reduced AWS costs by changing front-end code. https://docs.google.com/presentation/d/1kGK8P7Ll2H4Z_1UUdBneAbNzUEDmpj8g2Mxj_Z-F5u8/pub?start=false&loop=false&delayms=3000

Grails and AjaxTO THE NEW | Technology

This tutorial is about Grails and Ajax. The tutorial includes an introduction to Ajax, Grails inbuilt support for Ajax, Ajax enabled Form fields, a note on Ajax and Performance. The tutorial begins with an introduction to Ajax. This section gives a detailed introduction of Ajax as a technology, and also presents the flow of Ajax. The introduction section is followed by Grails support section. This section explains Grails inbuilt support for Ajax by providing a prototype library. It also includes form remote, remote function, executing before and after a call, handling events as a part of Grails support. The next section is about Ajax enabled Form fields. This section informs about Ajax codes enabling Form Fields. The last section of this tutorial is a note on Ajax. This section includes Ajax and its performance as a technology like serving as a mechanism, debugging is tough, caching is an important technique, Ajax call is a remote network call.

Meetup PerformanceJustin Cataldo

1. Meetup discussed optimizing the performance of their event details page by externalizing scripts, moving scripts to the bottom of the page, reducing requests, lazy loading scripts, and using event delegation. 2. These changes reduced the page load time by 27% from 6.321 seconds to 4.643 seconds and reduced javascript requests by 50%. 3. Meetup also optimized static content serving by versioning, compressing, caching resources and using a CDN to improve performance further.

Meetup PerformanceGreg Whalin

Monitoring web application response times^lj a hybrid approach for windowsMark Friedman

This document discusses web application performance monitoring and summarization. It covers tools like YSlow for analyzing page load times, and introduces an approach using Event Tracing for Windows (ETW) to capture performance data from web applications. This includes intercepting Yahoo Boomerang beacon requests to generate ETW events with page load time measurements and other data for analysis. A Web Application Trace Explorer is demonstrated to filter and report on these events to help explore server-side event streams and web application performance.

State of the resource timing apiAaron Peters

Js Saturday 2013 your jQuery could perform betterIvo Andreev

Doing it, then doing right and finally improving. Have you ever had the feeling that your jQuery could run faster? And isn’t that the natural evolution of a developer? From new browser features and well known techniques to script breakup, sizzling, chaining and selector comparison... Tuning of any technology requires deep understanding of its core principles. In order not to just guess we need to learn how browsers execute JavaScript and how jQuery is built. If these issues have been bothering you recently – join us to see how or share your experience.

Architecture in Ajax ApplicationsAlois Reitbauer

This document summarizes best practices for architecting and optimizing Ajax applications. It discusses how application architectures have evolved from traditional MVC to a more dynamic model with code running in both the server and browser. It provides guidance on improving performance through proper markup, understanding browser specifics, optimizing network usage, caching strategies, and reducing DOM manipulation. The document emphasizes that performance must be a primary consideration in Ajax application design.

HTML5 on MobileAdam Lu

This document discusses HTML5 on mobile devices. It begins by explaining why mobile web is growing and why HTML5 is well-suited for mobile. It then provides an overview of what HTML5 is and examples of features like forms, multimedia, geolocation that can be used on mobile. It also discusses considerations for mobile web development like responsive design and frameworks. The document recommends tools for mobile debugging and testing performance.

Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...IT Event

Over the years developers were used to thing that web is not user-friendly, performance efficient and powerful as native apps. But things have been changed so far; now you can build offline applications with notifications, Bluetooth and camera access and so on. Web development is great again. - Quick startup - I will show how to prioritize content loading in the application to show users meaningful pixels as soon as possible - Progressive enhancement - I will encourage you to use maximum of the platform but still support earlier browsers - Offline application - here I will explain how you can easily make your web application working offline - Push Notifications - one of the best way to increase conversion of your application and now it's possible on the web. I am going to show how to do it right with few steps. - Experimental APIs - I will show how to sign in once on all your devices with Credential API, use native share menu and make payments in few clicks

Andrii Dembitskyi "Events in our applications Event bus and distributed systems"Fwdays

События являются довольно сильным инструментом для приложений: коммуникация между компонентами системы; история действий над данными; триггеры для операций; интеграция с посторонними системами. Во время доклада я расскажу о применениях событий. На какие грабли можно наступить спеша в выборе инструмента и какое место они имеют в нашей архитектуре.

Monitoring large scale Docker production environmentsAlois Reitbauer

This document discusses the challenges of monitoring large scale Docker production environments. It notes that monitoring is critical for Docker in production according to 46% of respondents. When using microservices and Docker, environments can be 20 times larger, requiring techniques like network monitoring, machine-assisted problem resolution, and monitoring from the infrastructure to the application level. Effective monitoring also requires monitoring the orchestration layer, container dynamics, components like those from Netflix OSS, and the network. It should provide capabilities like visualizing the impact of automation, automated problem analysis, massive scalability, and acting as a platform feature through auto-injection and self-configuration.

Can a monitoring tool pass the turing testAlois Reitbauer

The document discusses whether a monitoring tool could pass the Turing test, which tests a machine's ability to exhibit human-like intelligence through natural language conversations. It introduces the concept of ChatOps, which uses conversation-driven operations to provide proactive, knowledge-based and guided interactions that are more than just simple commands. It concludes that while a monitoring tool does not need full human-level intelligence, it aims to provide a system that is intelligent, helpful and informative through natural language interactions.

More Related Content

Similar to Measuring User Experience in the Browser (20)