Measuring web performance

Apr 30, 2012Download as PPTX, PDF8 likes5,340 views

Things to be aware of when you are measuring the performance of your web sites (both synthetic testing and Real User Monitoring).

Measuring Web Performance

Patrick Meenan
pmeenan@webpagetest.org
@patmeenan

Types of Measurement

velocityconf.com/velocity2011/public/schedule/detail/18039

Measuring Web Performance

SYNTHETIC TESTING

Active Testing
• Consistent results
– Good for detecting and diagnosing issues that are 100% repeatable
and on pages you are monitoring
• Lots of detail
• Availability monitoring
• Not representative of actual end-user
performance
– Usually tested from data centers
– Sometimes co-located with CDN provider
equipment

Bandwidth/Latency Impact

(Fixed 60ms RTT) (Fixed 5Mbps Bandwidth)

5

www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

US Broadband Latency

WebPagetest DSL

WebPagetest Cable

WebPagetest FIOS Backbone

6

www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

DSL – Back-End: 17%

Backbone – Back-End: 52%

8

Mac Traffic Shaping
OS X Lion + Xcode 4.1

Cable, DSL, 3G, Edge, WiFi and Custom

GUI for dummynet (which has been available for a while)

osxdaily.com/2011/08/10/simulate-internet-connectivity-bandwidth-speeds-network-link-conditioner/

Synthetic Browsers
• Know HOW your active testing is done
– Some only test the base page
– Synthetic browsers usually not reflective of real
browser
– Real browser testing
– Connectivity (backbone, last-mile)

• www.engadget.com
– Synthetic Browser: 447 requests
– IE 8: 241 requests

Measuring Web Performance

REAL USER MONITORING (RUM)

Real User Monitoring (RUM)
• Full coverage on all pages visited by users
• Real performance information for end-user
experience
• No availability monitoring
• No competitive reference
• Limited detail
– … but getting better

Navigation Timing
window.performance.timing
IE 9+
Chrome
Firefox 9+
Android 4+

Front-End

Back-End

13

dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

Resource Timing (draft)
Timing for every network-loaded resource

w3c-test.org/webperf/specs/ResourceTiming/

Access Logs
• Overall Response Times - %D (Apache)
• Custom variables (app-specific timings)
• Logster + graphite = graphs
• Lots of data-mining opportunities
– Broken links/content (404’s with useful referer information)

• Mike Brittain (Etsy) Presentation
– http://www.slideshare.net/mikebrittain/web-performance-culture-
and-tools-at-etsy-11159635

When is “Done”?

Easy answer is onLoad
But…

When is “Done”?
Twitter onLoad (2.4s) Twitter end of activity (8.2s)

http://youtu.be/Ipk1k_IobYg

The Speed Index

The user experience of A was 7.4 times faster than B

sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Amazon vs. Twitter

Amazon Twitter
Speed Index 1501 6014 (+300%)
onload 2.4 2.4
Fully Loaded 6.4 8.2 (+28%)

www.webpagetest.org/video/view.php?id=120414_22f2206da973b41621c499e2be01d555cdac6ab0&bare=1

Measuring Web Performance

WHAT’S NEW IN WEBPAGETEST

New Waterfall UI
Nav Timing – domContentLoaded
(Firefox/Chrome)

Nav Timing – load event
(Firefox/Chrome)

Pop-up request details

Dependencies (Chrome)

Line of code that
Triggered request

Creating Videos (cont)

Customize:
- End Point/Times
- Specific Run
- First/Repeat View
- Labels

www.webpagetest.org/video/compare.php?tests=120416_QX_3ZKFP%2C120416_DR_3ZKFJ&bare=1

SPOF Demonstrating

www.webpagetest.org/video/view.php?id=120416_d635d742a17d7eecf57df6282bcea87f5de2322c&bare=1

EC2 AMIs
IE 7
m1.small or
IE 8
c1.medium
IE 9, Chrome, Firefox (single image)

News/Updates
• Twitter:
@patmeenan

• Google+
PatMeenan@gmail.com
WebPagetest

• WebPagetest Forums
http://www.webpagetest.org/forums/

The document discusses strategies for loading third-party scripts asynchronously to improve page load performance. It notes that the frontend accounts for 80-90% of end user response time and recommends loading scripts asynchronously using techniques like async, defer, and loading scripts at the bottom of the page. It also discusses tools for monitoring performance when third-party scripts are blocked.

Front-End Single Point of Failure - Velocity 2016 TrainingPatrick Meenan

This document summarizes a presentation on debugging front-end performance issues. It discusses identifying single points of failure from third-party scripts and social widgets that can block loading. It recommends monitoring for failures, loading scripts asynchronously, and using a "black hole" to simulate outages for testing. Detection and mitigation of blocking third-party code is important to ensure fast page loads.

WebPagetest Power Users - Velocity 2014Patrick Meenan

Making the web fasterPatrick Meenan

Velocity 2014 nyc WebPagetest private instancesPatrick Meenan

Service Workers for PerformancePatrick Meenan

This document provides an overview of service workers and how they can be used. It begins with registering a service worker script and discussing the install and activate lifecycle events. It then covers using service workers to handle fetch events to provide offline functionality by precaching resources and serving cached responses when offline. Finally, it discusses several other potential uses of service workers like custom error pages, CDN failover, prefetching, and metrics collection.

Measuring the visual experience of website performancePatrick Meenan

Selecting and deploying automated optimization solutionsPatrick Meenan

This document discusses various methods for automating front-end optimization. It describes how HTML rewriting solutions can optimize HTML through proxies or in-app plugins. It also discusses when certain optimizations are best done by machines versus humans. The document outlines different architectures for front-end optimization solutions, including cloud-based and on-premises options, and considers when each is most appropriate. It emphasizes the importance of testing solutions before deploying and of monitoring performance after deployment.

Hands on performance testing and analysis with web pagetestPatrick Meenan

WebPagetest is a tool that tests the performance of web pages from multiple locations worldwide with configurable connectivity settings. It provides metrics like page speed scores, timings, bytes transferred, and screenshots. Key features include blocking content to test impact on performance, and scripting to automate testing of rich applications. The tool has a REST API for automating tests and integrating with other tools.

Tracking Performance - Velocity NYC 2013Patrick Meenan

The document discusses performance testing plans for a website. It proposes using synthetic testing from 14 global locations on representative pages every 5 minutes. A new plan tests from last-mile locations on desktop and mobile with 20 daily samples. Custom timing marks will measure user experience, sent to analytics. Synthetic testing will also run in continuous integration to catch performance regressions early.

WebPagetest - Good, Bad & UglyAaron Peters

Web Performance OptimizationPatrick Meenan

Mobile web performance - MoDev EastPatrick Meenan

This document summarizes a presentation on high performance mobile web. The presentation covers: - Delivering fast mobile experiences by making fewer HTTP requests, using CDNs, browser prefetching, and other techniques. - Measuring web performance using Navigation Timing, Resource Timing, custom timing marks, and tools like WebPagetest and Google Analytics. - Typical mobile network performance statistics like average latency, download speeds, and how these numbers impact page load times.

Automated Testing with Google Chrome - WebDriver- ChromeDriverManoj Kumar Kumar

Getting the most out of WebPageTestPatrick Meenan

This document discusses how to get the most out of the webpagetest.org tool for testing website performance. It provides an overview of the metrics webpagetest measures like load times, bandwidth usage, and script execution. The document also shares links to examples of using scripting commands to test service workers and customizing domain names. Additionally, it promotes Patrick Meenan's GitHub projects for Cloudflare Workers that can optimize sites and mentions the bulk testing feature on webpagetest.org.

A web perf dashboard up & running in 90 minutes presentationJustin Dorfman

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.

Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma

Boomerang is a JavaScript library that gathers performance metrics of page loads. When a customer saw periods where nothing progressed on their site, forensic tools were used to investigate. WebPageTest reproduced the issue, and tcpdump, Wireshark, and Chrome Tracing helped dive deeper. Tests showed the problem was not related to Boomerang. Other scenarios involved issues with ready state changes and prematurely expiring CSRF tokens. Various tools like the browser dev tools, Fiddler, and Node.js were used to reproduce problems and validate fixes.

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

BDD / cucumber /CapybaraShraddhaSF

Behavior Driven Development (BDD) focuses on defining expected application behaviors through user stories. Cucumber and Capybara are tools that support BDD. Cucumber allows writing tests in plain language and organizing them into feature files. Capybara is a framework that simulates user interactions and uses a domain-specific language to write tests. It supports drivers like Selenium to test web applications with JavaScript.

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.

Pagespeed what, why, and how it worksIlya Grigorik

This document discusses PageSpeed, a tool for just-in-time performance optimization of web pages. It provides automatic image compression and resizing, CSS and JavaScript minification, inline small files, caching, and deferring JavaScript among other optimizations. While most performance issues are well understood, not all websites are fast due to the tradeoff between speed and ease of maintenance. PageSpeed tools like mod_pagespeed can automate optimizations to improve performance without extra work from developers.

Browser Wars Episode 1: The Phantom MenaceNicholas Zakas

This document summarizes the history and evolution of web browsers and internet technologies from the early 1990s to the late 1990s. It traces the development of key browsers like Netscape Navigator and Internet Explorer. It also outlines the introduction of important web standards like HTML, CSS, JavaScript and XML. Major events included the commercialization of the web in the mid-1990s, the browser wars between Netscape and Microsoft in the late 90s, and the consolidation of online services providers toward the end of the decade.

Web performance testing with web driverMichael Klepikov

This document discusses integrating web performance testing into WebDriver by leveraging the WebDriver API. It proposes adding logging capabilities to WebDriver to collect performance metrics during tests without needing to integrate separate testing systems. This would allow performance data to be collected as a natural part of functional tests, improving the developer experience. The document includes examples of how to enable logging in WebDriver and access the performance log data after a test.

Testing Any Site With Cucumber and SeleniumChris Johnson

Do you have a website? Do you have any tests for that site? Even if you have unit tests integration tests can help you target workflows such as a checkout process. In this presentation I will talk about testing any site with Cucumber and Selenium. I will show what the tests look like, and explain the different ways to run these tests, from running them locally, building your own selenium grid to using Sauce labs as your testing infrastructure.

Scaling Front-End Performance - Velocity 2016Patrick Meenan

The document discusses strategies for improving front-end performance, especially for users on slow connections or mobile devices. It recommends dynamically adjusting content like images, scripts, and ads based on connection speed. Both client-side techniques using JavaScript and service workers as well as server-side methods like analyzing request headers and response times can help optimize the experience. Browsers are also intervening more aggressively to prioritize resources and content loading. The goal is to make websites faster and more usable for all users regardless of their network conditions.

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users. This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!

Bringing the JAMstack to the EnterpriseJamund Ferguson

Measuring Web Performance Dave Olsen

Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.” This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.

Web Performance Culture and Tools at EtsyMike Brittain

Etsy's performance culture is led by a team of two that focuses on measuring performance data, building tools to analyze logs and servers, training engineers, and motivating teams. They use tools like Logster to aggregate Apache logs into Graphite for generating graphs of metrics like response times. Profiling tools help identify slow database queries, services, and third party calls. The goal is to prove that improved speed leads to more usage and make all engineers consider performance in their work.

More Related Content

What's hot (20)

Hands on performance testing and analysis with web pagetestPatrick Meenan

Tracking Performance - Velocity NYC 2013Patrick Meenan

WebPagetest - Good, Bad & UglyAaron Peters

Web Performance OptimizationPatrick Meenan

Mobile web performance - MoDev EastPatrick Meenan

Automated Testing with Google Chrome - WebDriver- ChromeDriverManoj Kumar Kumar

Getting the most out of WebPageTestPatrick Meenan

A web perf dashboard up & running in 90 minutes presentationJustin Dorfman

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

Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma

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

BDD / cucumber /CapybaraShraddhaSF

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

Pagespeed what, why, and how it worksIlya Grigorik

Browser Wars Episode 1: The Phantom MenaceNicholas Zakas

Web performance testing with web driverMichael Klepikov

Testing Any Site With Cucumber and SeleniumChris Johnson

Scaling Front-End Performance - Velocity 2016Patrick Meenan

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

Bringing the JAMstack to the EnterpriseJamund Ferguson

Hands on performance testing and analysis with web pagetestPatrick Meenan

Tracking Performance - Velocity NYC 2013Patrick Meenan

WebPagetest - Good, Bad & UglyAaron Peters

Web Performance OptimizationPatrick Meenan

Mobile web performance - MoDev EastPatrick Meenan

Automated Testing with Google Chrome - WebDriver- ChromeDriverManoj Kumar Kumar

Getting the most out of WebPageTestPatrick Meenan

A web perf dashboard up & running in 90 minutes presentationJustin Dorfman

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

Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma

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

BDD / cucumber /CapybaraShraddhaSF

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

Pagespeed what, why, and how it worksIlya Grigorik

Browser Wars Episode 1: The Phantom MenaceNicholas Zakas

Web performance testing with web driverMichael Klepikov

Testing Any Site With Cucumber and SeleniumChris Johnson

Scaling Front-End Performance - Velocity 2016Patrick Meenan

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

Bringing the JAMstack to the EnterpriseJamund Ferguson

Viewers also liked (20)

Measuring Web Performance Dave Olsen

Web Performance Culture and Tools at EtsyMike Brittain

Speed matters - measuring front-end web performanceMark Zeman

Why speed matters, examples of the impact saving a few seconds of load time has had on revenue and engagement. The network constraints and what makes the web slow? Bandwidth, latency and it's fundamental impact on the speed of the web. An overview of tools for measuring performance, uptime monitoring, real user monitoring and performance benchmarking. How to make your website faster. Optimization tools and techniques. Muti-device challenges. Responsive vs Adaptive and delivering to mobile within a second. Drop that donut superman! Learn more on the SpeedCurve blog http://speedcurve.com/blog/

Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -Koji Ishimoto

世の中にはさまざまなパフォーマンスTipsがあり対応したものの、本当にこれって効果でているの？とは思ったことはないでしょうか。たぶん速くなっただろう……で終わってないでしょうか。本セッションでは、まずブラウザにページが表示されるまでの仕組みを学びつつ、どこにコストをかければいいのか理解します。各段階別のツールでちゃんと効果測定すれば自己満足で終わらない仕事が可能です！

Measuring web performance. Velocity EU 2011Stephen Thair

SEO, conversione e web analytics nell'automotiveWilliam Sbarzaglia

The Real Cost of Slow Time vs DowntimeRadware

Eventually, every website fails. If it's a household-name site like Amazon, then news of that failure gets around faster than a rocket full of monkeys. That's because downtime hurts. As a for-instance, in 2013 Amazon suffered a 40-minute outage that allegedly cost the company $5 million in lost sales. That's a big number, and everybody loves big numbers. But when it comes to performance-related losses, is it the biggest number? In this presentation from the CMG Performance and Capacity 2014 conference, Radware Web Performance Expert Tammy Everts reviews real-world examples that compare the cost of site slowdowns versus outages. We also talk about how to overcome the challenges of creating as much urgency around the topic of slow time as there is around the topic of downtime.

IAB FORUM 2008 - Web Analytics Workshop : Actionable KPIAlessio Semoli

La lista completa degli strumenti gratuiti seoMelchiorre Schifano

HCI Project Sable Presentation.Agha Dostain

This document presents a project proposal for an app called Sable that aims to improve the customer experience at restaurants. It discusses ideas like allowing customers to customize their food order and share their dining experience on social media. The document outlines the project scope, findings from customer interviews, proposed technology features like order tracking and feedback, and mockups of the app's user interface. It also includes an evaluation of the mockups based on usability heuristics principles and proposes solutions to identified usability problems.

Talis Platform OverviewRichard Wallis

Hci projectJames Rose

The document outlines the steps taken in an HCI project from analysis to design, design to implementation, and interface design. It discusses creating personas, user stories, and hierarchical task analysis. Storyboards were created for each page along with an entity relationship diagram and visual prototype. Collaboration tools included Facebook, Skype, Dia for storyboarding, Paint, Visual Basic, Access for databases, and Word. Reflections touched on Gestalt theory, color schemes, and eye tracking for object placement.

HCI: Design Patterns for Social Web InteractionSabin Buraga

HCI - Human.Computer.Interaction Project - CS 489 / CS 449 - University of Wa...Talha Khalid

Lead a team project - at the University of Waterloo - to design a software prototype for a group of PhD students, based on the HCI Contextual Design philosophies of Hugh Beyer and Karen Holtzblatt; worked within a group of 5 software engineering and/or computer science students as part of the CS 489 (CS 449) course, taught by Michael Terry at the University of Waterloo. - The Opus Magnum of my UWaterloo Experience | Final Course Grade: 87% • Lead a team to design a software prototype for PhD chemists; vigorously extracted tangible, data-driven user needs through Contextual Design • Contextual Inquiry: Interviewed users, gathered requirements, vigorously extracted user needs • Design: Managed the project; lead brainstorming, design and debriefing sessions • Prototyping: Applied user-centered design techniques, quick prototyping, and evaluation methods

Web analytics & KPIDML Srl

Website Comparisonlauraeichhorn

This presentation compares three websites that advocate for the MAD (mental health liberation) movement: PsychRights, NARPA, and MAD in America. PsychRights focuses on providing legal counsel to those diagnosed with mental illness. NARPA aims to promote patient choice in treatment and end forced treatment. MAD in America serves as a forum for rethinking psychiatry and building a community around alternative perspectives. Both NARPA and MAD in America are run largely by former psychiatric patients and aim to empower patient voices. While the sites provide useful information and serve important roles, opportunities exist to improve areas like design, accessibility, and community engagement.

Measuring Web Performance - HighEdWeb EditionDave Olsen

Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

Web Analytics - WHR 2012 - Guida pratica Google AnalyticsEnrico Ferretti

Illusio presentation 061916Rising Media, Inc.

This document introduces ILLUSIO, an augmented reality solution that allows women considering breast augmentation to visualize what they will look like with implants. Nearly 3 million breast augmentations are performed worldwide each year to increase self-esteem and body image. Existing 3D imaging tools are limited as they show static images and lack realism. ILLUSIO uses marker-based AR tracking and computer animation integrated with surgeon and patient feedback to create a mirror that shows women their potential results. It aims to improve communication between surgeons and patients by allowing patients to clearly communicate their goals and for surgeons to ensure they understand each patient's desired outcome.

Design practice Project - MSc HCIGustavo Soto Miño

This document outlines the design process undertaken for a portfolio project. It includes sections on observation and persona creation, idea elaboration and validation, wireframing, visual design, storyboarding, and creating a video fly-through. The process followed a waterfall approach due to constraints of the course, but the author notes it would have been better to take a more iterative Lean UX approach to allow for faster idea validation and testing at each stage of design.

Measuring Web Performance Dave Olsen

Web Performance Culture and Tools at EtsyMike Brittain

Speed matters - measuring front-end web performanceMark Zeman

Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -Koji Ishimoto

Measuring web performance. Velocity EU 2011Stephen Thair

SEO, conversione e web analytics nell'automotiveWilliam Sbarzaglia

The Real Cost of Slow Time vs DowntimeRadware

IAB FORUM 2008 - Web Analytics Workshop : Actionable KPIAlessio Semoli

La lista completa degli strumenti gratuiti seoMelchiorre Schifano

HCI Project Sable Presentation.Agha Dostain

Talis Platform OverviewRichard Wallis

Hci projectJames Rose

HCI: Design Patterns for Social Web InteractionSabin Buraga

HCI - Human.Computer.Interaction Project - CS 489 / CS 449 - University of Wa...Talha Khalid

Web analytics & KPIDML Srl

Website Comparisonlauraeichhorn

Measuring Web Performance - HighEdWeb EditionDave Olsen

Web Analytics - WHR 2012 - Guida pratica Google AnalyticsEnrico Ferretti

Illusio presentation 061916Rising Media, Inc.

Design practice Project - MSc HCIGustavo Soto Miño

Similar to Measuring web performance (20)

Measuring performance - Velocity 2016 TrainingPatrick Meenan

This document discusses various methods for measuring front-end performance, including synthetic testing, active testing, real user measurement, and measuring the visual experience. Synthetic testing provides consistent results but may not reflect actual user performance, while real user measurement captures real user experiences but with limited detail. The document also covers specific tools like Navigation Timing, Resource Timing, User Timing, SpeedIndex, and services from companies like Soasta, New Relic, and WebPageTest that can help with performance measurement.

Website Testing Practicesdeseomar

Client-Side Performance Monitoring (MobileTea, Rome)Andrew Rota

The document discusses effective strategies for monitoring client-side web performance. It recommends collecting both real user monitoring metrics from actual users as well as synthetic metrics from automated tests. It describes tools like Navigation Timing API, paint metrics, custom metrics, and open-source libraries that can capture metrics. It also discusses storing and visualizing metrics with tools like Graphite and Grafana and how to reduce noise and account for environment differences when analyzing performance data. The overall goal is to utilize performance metrics to inform decisions that improve the user experience.

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman

This document summarizes key points about optimizing performance for mobile web: 1. Mobile platforms are dominated by iOS and Android, with different browsers on each (Safari, Chrome). Understanding the ecosystem is important for testing and optimization. 2. Perception of speed is critical - aim for responses within 1 second. Mobile hardware is less powerful so optimization is needed. Tools like emulators, remote inspectors, and APIs help measure performance. 3. For initial loading, focus on getting above-the-fold content within 1 second using techniques like avoiding redirects, gzipping files, separating critical CSS, and deferring non-essential assets.

Browserscope oscon 2011lsimon

This document discusses Browserscope, an open-source project that crowdsources browser testing to profile browser capabilities and performance. It collects data from over 10,000 browsers to track functionality over time, uncover regressions, and provide a historical resource for web developers. Tests are run on real users' browsers to aggregate unbiased results without dedicated testing resources.

Performance on a budgetDimitry Ushakov

This document summarizes a presentation on performance optimization on a budget. It discusses measuring and improving performance at the front-end through asset optimization, latency reduction, and client-side rendering. It also discusses measuring and optimizing performance at the backend through caching, databases, and server-side architecture. The document lists several free and paid tools for profiling, testing, and analyzing performance. It concludes with best practices for performance including establishing goals, architecture, testing, and an SDLC approach.

Rum first london web perf meetupCliff Crocker

This document discusses real user monitoring (RUM) which involves collecting performance metrics directly from end user browsers through JavaScript instrumentation. It provides a brief history of RUM including key contributors. The challenges with RUM including data volume are presented, as well as how RUM compares to synthetic monitoring. The importance of understanding business metrics and mapping performance data to key performance indicators is emphasized.

CTU June 2011 - Things that Every ASP.NET Developer Should KnowSpiffy

This document provides an overview of important topics for ASP.NET developers. It covers HTTP and web server fundamentals, debugging and analysis tools, development techniques, and patterns and practices. The agenda includes sections on IIS architecture, configuration files, tools like Fiddler and Network Monitor, reducing page size and requests, caching, and common design patterns for web applications. The goal is to discuss essential knowledge for building high-performance, secure ASP.NET applications.

Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman

This document discusses optimizing web performance for mobile devices. It covers the current mobile web ecosystem, importance of performance, tools for measuring performance, optimizing initial loading and perception, and responsiveness. The key points discussed are understanding the diversity of mobile browsers and platforms, keeping content above the fold loading within 1 second, using tools like navigation timing API to measure performance, avoiding redirects and unnecessary resources, and ensuring smooth scrolling and responsiveness.

Web Performance 101Uri Lavi

The document discusses various tools and techniques for measuring and improving web performance. It covers topics like understanding how performance affects user experience and business metrics, tools for measuring performance like YSlow and PageSpeed, waterfall charts, browser behaviors, optimization techniques like minification and compression, and monitoring solutions like WebPageTest and dynaTrace. Key tools mentioned include YSlow, PageSpeed, WebPageTest, dynaTrace, Fiddler and HttpWatch. Optimization areas discussed are page size, number of requests, caching, rendering structure, and asynchronous loading.

Codestrong 2012 breakout session introduction to mobile web and best practicesAxway Appcelerator

This document discusses optimizing apps for the mobile web platform. It provides an overview of the Titanium Mobile target, architecture, user interface controls and file system access. It also covers splash screens, icons, modules, debugging, instrumentation and deploying mobile web apps. Limitations discussed include local storage limits, cross-domain HTTP requests, unsupported APIs and browser compatibility. Best practices for security, layout, images and pre-caching resources are presented to optimize performance for the mobile web.

Zagat.com Case Study (DrupalCon Denver 2012)Phase2

This document discusses Zagat.com's migration from a legacy ASP.NET website to Drupal. It outlines problems with the old site such as being difficult to update and test. Solutions included using Drupal and related modules, optimizing front-end performance, automating deployments, and adding tools like Varnish, Jenkins, and Selenium. Non-Drupal talent was brought in to help with tasks like testing. Analytics and user testing were used to track goals and iterate quickly.

Keys To World-Class Retail Web Performance - Expert tips for holiday web read...SOASTA

As Walmart.com’s former head of Performance and Reliability, Cliff Crocker knows large scale web performance. Now SOASTA’s VP of products, Cliff is pouring his passion and expertise into cloud testing to solve the biggest challenges in mobile and web performance. The holiday rush of mobile and web traffic to your web site has the potential for unprecedented success or spectacular public failure. The world’s leading retailers have turned to the cloud to assure that no matter what load, mobile and web apps will delight customers and protect revenue. Join us as Cliff explores the key criteria for holiday web performance readiness: Closing the gap in front- and back-end web performance and reliability Collecting real user data to define the most realistic test scenarios Preparing properly for the virtual walls of traffic during peak events Leveraging CloudTest technology, as have 6 of 10 leading retailers

Browser Based Performance Testing and TuningBala Murali Krishna Kanchukambala

The document discusses client side performance testing. It defines client side performance as how fast a page loads for a single user on a browser or mobile device. Good client side performance is important for user experience and business metrics like sales. It recommends rules for faster loading websites, and introduces the WebPageTest tool for measuring client side performance metrics from multiple locations. WebPageTest provides waterfall views, filmstrip views, packet captures and reports to analyze page load times and identify optimization opportunities.

URL DesignWalter Ebert

This document discusses URLs and URL design. Some key points covered include: - URLs should be meaningful and describe the content or functionality behind them. File structure and naming conventions in URLs can help with this. - URL rewriting techniques like Pretty URLs can make URLs cleaner and more readable for users and search engines. - Namespaces, routing conventions, and RESTful design principles can help organize URLs and map URLs to application functionality. - Vanity URLs, long URLs, and duplicate or dangling URLs should generally be avoided for usability and maintenance reasons.

Shopzilla - Performance By DesignTim Morrow

Shopzilla redesigned their architecture to improve performance and scalability. The new design simplified layers, utilized caching extensively, and applied best practices for front-end performance. This led to significant business benefits including a 7-12% increase in conversion rates, 8-120% increase in search engine sessions, and a 225% increase in development velocity. Performance testing was a key part of the new approach.

Extreme Web Performance for Mobile Devices Maximiliano Firtman

This document summarizes a presentation about extreme performance for mobile web. It discusses understanding the mobile web ecosystem today, focusing on performance differences for mobile and tools to measure performance. It also covers HTML5 APIs and specifications for performance as well as tips for extreme performance including optimizing the network layer, reducing redirects and stop signs, prioritizing responsive design, minimizing above-the-fold content, loading CSS asynchronously, treating JavaScript as optional, and ensuring fast user interfaces. The overall message is that perception of performance is more important than actual load times and focuses on techniques to optimize for mobile.

Front-End Test Fest Keynote: The State of the Union for Front End Testing.pdfApplitools

The Truth About Your Web App's PerformanceJohn Riviello

The performance of your web app is obviously important. But how do you know your web app is performing well for all of your users? Out of the box tools provide us metrics, but most only provide an overall view. This case study of building the XFINITY X1 single-page web app will demonstrate what frontend performance data you should be gathering, how to gather it, and how to make sense of all that data. Existing tools provide insight into the performance of our web applications, but there is not a single tool that gives you the full picture. You can fill these gaps by gathering the performance data of your actual users. In this talk, we'll walk through the parts of the W3C Navigation Timing, High Resolution Time & User Timing recommendations that you can easily take advantage of right now to collect important metrics (with the help of Open Source software). We'll determine the "types" of users you need to focus on to understand your web app, as well as what other factors could impact those individual users' experiences. And we'll make sure "Average Response Time" is never the primary focus of your metrics dashboard.

Web Performance Internals explained for Developers and other stake holders.Sreejesh Madonandy

Measuring performance - Velocity 2016 TrainingPatrick Meenan

Website Testing Practicesdeseomar

Client-Side Performance Monitoring (MobileTea, Rome)Andrew Rota

Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman

Browserscope oscon 2011lsimon

Performance on a budgetDimitry Ushakov

Rum first london web perf meetupCliff Crocker

CTU June 2011 - Things that Every ASP.NET Developer Should KnowSpiffy

Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman

Web Performance 101Uri Lavi

Codestrong 2012 breakout session introduction to mobile web and best practicesAxway Appcelerator

Zagat.com Case Study (DrupalCon Denver 2012)Phase2

Keys To World-Class Retail Web Performance - Expert tips for holiday web read...SOASTA

Browser Based Performance Testing and TuningBala Murali Krishna Kanchukambala

URL DesignWalter Ebert

Shopzilla - Performance By DesignTim Morrow

Extreme Web Performance for Mobile Devices Maximiliano Firtman

Front-End Test Fest Keynote: The State of the Union for Front End Testing.pdfApplitools

The Truth About Your Web App's PerformanceJohn Riviello

Web Performance Internals explained for Developers and other stake holders.Sreejesh Madonandy

More from Patrick Meenan (13)

Resource PrioritizationPatrick Meenan

This document discusses resource prioritization strategies to optimize loading performance. It explains that the browser processes resources sequentially and blocks on certain resource types. It then provides recommendations for developers to inform the browser of dependencies and priorities through techniques like preloading. The document also analyzes HTTP/1.x versus HTTP/2 prioritization and compares performance of loading scripts and fonts with different approaches. It evaluates tools for testing prioritization and discusses why prioritization can fail or appear broken. Finally, it offers suggestions for servers and networks to better support prioritization.

HTTP/2 PrioritizationPatrick Meenan

This document discusses HTTP/2 prioritization and how resources are prioritized during loading. It begins by explaining how browsers prioritize different resource types during parsing and rendering. It then covers how HTTP/2 allows all requests to be sent immediately to the server with priority specifications, as opposed to HTTP/1.x which limits connections. The document concludes by discussing challenges with prioritization across connections and various tools for testing prioritization.

Http2 in practicePatrick Meenan

Resource loading, prioritization, HTTP/2 - oh my!Patrick Meenan

The document discusses key aspects of resource loading and prioritization on the web, including: 1. The HTML parser stops for non-async scripts until previous CSS is downloaded and the script is parsed and executed, but does not pause for CSS or image loading. 2. Resources can only be loaded once discovered by the parser or layout; optimal ordering prioritizes render-blocking and parser-blocking resources first using full bandwidth. 3. HTTP/2 allows for prioritization of resources from a single domain, while priority hints and preloading help prioritize cross-domain assets.

How fast is it?Patrick Meenan

This document discusses various metrics for measuring website speed and performance. It outlines different technical, visual, and interactive metrics and explains considerations for synthetic versus real-user measurement. Key recommendations include using First Contentful Paint, Speed Index from synthetic tests and First Interactive for real-user measurement to track progress towards performance goals. Effective connection type distribution from real-user data should also be considered to ensure optimizations work for all users.

Machine Learning RUM - Velocity 2016Patrick Meenan

TLS - 2016 Velocity TrainingPatrick Meenan

This document summarizes a presentation on debugging front-end performance related to TLS and HTTPS. It discusses optimizing the TLS handshake to reduce round trips, using session resumption, OCSP stapling, TLS false start, and dynamic record sizing. It also covers TLS debugging tools like istlsfastyet.com and security headers like HSTS, CSP, and HPKP. The presentation aimed to provide practical techniques and checks to improve TLS performance in practice.

Service workers - Velocity 2016 TrainingPatrick Meenan

This document summarizes a presentation on debugging front-end performance using service workers. Service workers allow intercepting and responding to network requests and caching assets. They also support features like push notifications, offline access, and progressive web apps. The presentation covered how service workers work, common use cases like handling errors, CDN failover and prefetching, as well as future possibilities like drawing images locally and custom compression.

Image optimizationPatrick Meenan

This document discusses techniques for optimizing image delivery on web pages. It recommends delay-loading hidden images, using lazy-loading attributes, delivering progressive JPEGs that display at lower quality first before higher quality, and using tools to convert images to progressive format to improve perceived page load speeds. Examples and links are provided to demonstrate how progressive JPEGs can display portions of images faster than regular JPEGs during loading.

Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan

The amount of 3rd-party content included on websites is exploding (social sharing buttons, user tracking, advertising, code libraries, etc). Learn tips and techniques for how best to integrate them into your sites without risking a slower user experience or even your sites becoming unavailable. Video is available here: http://www.youtube.com/watch?v=JB4ulhFFdH4&feature=plcp

Velocity 2012 - Taming the Mobile BeastPatrick Meenan

Frontend SPOFPatrick Meenan

The document discusses the frontend single point of failure (SPOF) problem caused by blocking JavaScript and CSS files. It provides examples of popular websites, code libraries, widgets, and content management systems that contribute to frontend SPOFs. The document recommends solutions for browsers, widget owners, CMS developers, and site owners to address this issue through asynchronous loading of resources and better monitoring of frontend performance.

Web performance testingPatrick Meenan

Resource PrioritizationPatrick Meenan

HTTP/2 PrioritizationPatrick Meenan

Http2 in practicePatrick Meenan

Resource loading, prioritization, HTTP/2 - oh my!Patrick Meenan

How fast is it?Patrick Meenan

Machine Learning RUM - Velocity 2016Patrick Meenan

TLS - 2016 Velocity TrainingPatrick Meenan

Service workers - Velocity 2016 TrainingPatrick Meenan

Image optimizationPatrick Meenan

Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan

Velocity 2012 - Taming the Mobile BeastPatrick Meenan

Frontend SPOFPatrick Meenan

Web performance testingPatrick Meenan

Recently uploaded (20)

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Want to learn practical tips for designing systems that can scale efficiently without compromising speed? Join us for a workshop where we’ll address these challenges head-on and explore how to architect low-latency systems using Rust. During this free interactive workshop oriented for developers, engineers, and architects, we’ll cover how Rust’s unique language features and the Tokio async runtime enable high-performance application development. As you explore key principles of designing low-latency systems with Rust, you will learn how to: - Create and compile a real-world app with Rust - Connect the application to ScyllaDB (NoSQL data store) - Negotiate tradeoffs related to data modeling and querying - Manage and monitor the database for consistently low latencies

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Cyber Awareness overview for 2025 month of securityriccardosl1

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

Build Your Own Copilot & Agents For DevsBrian McKeiver

tecnologias de las primeras civilizaciones.pdffjgm517

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

Designing Low-Latency Systems with Rust and ScyllaDB: An Architectural Deep DiveScyllaDB

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma

Cyber Awareness overview for 2025 month of securityriccardosl1

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

Build Your Own Copilot & Agents For DevsBrian McKeiver

tecnologias de las primeras civilizaciones.pdffjgm517

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Measuring web performance

1. Measuring Web Performance Patrick Meenan [email protected] @patmeenan

2. Types of Measurement velocityconf.com/velocity2011/public/schedule/detail/18039

3. Measuring Web Performance SYNTHETIC TESTING

4. Active Testing • Consistent results – Good for detecting and diagnosing issues that are 100% repeatable and on pages you are monitoring • Lots of detail • Availability monitoring • Not representative of actual end-user performance – Usually tested from data centers – Sometimes co-located with CDN provider equipment

5. Bandwidth/Latency Impact (Fixed 60ms RTT) (Fixed 5Mbps Bandwidth) 5 www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/

6. US Broadband Latency WebPagetest DSL WebPagetest Cable WebPagetest FIOS Backbone 6 www.fcc.gov/document/measuring-broadband-america-report-consumer-broadband-performance-us

7. Actual Users Backbone Testing 7

8. DSL – Back-End: 17% Backbone – Back-End: 52% 8

9. Mac Traffic Shaping OS X Lion + Xcode 4.1 Cable, DSL, 3G, Edge, WiFi and Custom GUI for dummynet (which has been available for a while) osxdaily.com/2011/08/10/simulate-internet-connectivity-bandwidth-speeds-network-link-conditioner/

10. Synthetic Browsers • Know HOW your active testing is done – Some only test the base page – Synthetic browsers usually not reflective of real browser – Real browser testing – Connectivity (backbone, last-mile) • www.engadget.com – Synthetic Browser: 447 requests – IE 8: 241 requests

11. Measuring Web Performance REAL USER MONITORING (RUM)

12. Real User Monitoring (RUM) • Full coverage on all pages visited by users • Real performance information for end-user experience • No availability monitoring • No competitive reference • Limited detail – … but getting better

13. Navigation Timing window.performance.timing IE 9+ Chrome Firefox 9+ Android 4+ Front-End Back-End 13 dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

14. Resource Timing (draft) Timing for every network-loaded resource w3c-test.org/webperf/specs/ResourceTiming/

18. Back-End Only

19. Access Logs • Overall Response Times - %D (Apache) • Custom variables (app-specific timings) • Logster + graphite = graphs • Lots of data-mining opportunities – Broken links/content (404’s with useful referer information) • Mike Brittain (Etsy) Presentation – http://www.slideshare.net/mikebrittain/web-performance-culture- and-tools-at-etsy-11159635

20. Measuring Web Performance THE METRICS

21. When is “Done”? Easy answer is onLoad But…

22. When is “Done”? Twitter onLoad (2.4s) Twitter end of activity (8.2s)

23. 2 Pages, Identical Performance …

24. http://youtu.be/Ipk1k_IobYg

25. Start Render Identical

26. Load Time Identical

27. Last Visual Change Identical

28. Visual “Completeness”

30. Measuring Web Performance INTRODUCING…

31. The Speed Index The user experience of A was 7.4 times faster than B sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

33. Amazon.com vs. Twitter …

35. Amazon vs. Twitter Amazon Twitter Speed Index 1501 6014 (+300%) onload 2.4 2.4 Fully Loaded 6.4 8.2 (+28%) www.webpagetest.org/video/view.php?id=120414_22f2206da973b41621c499e2be01d555cdac6ab0&bare=1

37. Measuring Web Performance WHAT’S NEW IN WEBPAGETEST

38. New Waterfall UI Nav Timing – domContentLoaded (Firefox/Chrome) Nav Timing – load event (Firefox/Chrome) Pop-up request details

39. Dependencies (Chrome) Line of code that Triggered request

40. Response Bodies

41. Dev Tools Timeline (Chrome)

42. Dev Tools Timeline (Chrome)

43. Creating Videos

44. Creating Videos (cont) Customize: - End Point/Times - Specific Run - First/Repeat View - Labels www.webpagetest.org/video/compare.php?tests=120416_QX_3ZKFP%2C120416_DR_3ZKFJ&bare=1

45. SPOF Demonstrating www.webpagetest.org/video/view.php?id=120416_d635d742a17d7eecf57df6282bcea87f5de2322c&bare=1

47. Custom viewport size Chrome/Firefox

48. EC2 AMIs IE 7 m1.small or IE 8 c1.medium IE 9, Chrome, Firefox (single image)

49. News/Updates • Twitter: @patmeenan • Google+ [email protected] WebPagetest • WebPagetest Forums http://www.webpagetest.org/forums/

Measuring web performance

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Measuring web performance (20)

More from Patrick Meenan (13)

Recently uploaded (20)

Measuring web performance