Measuring the visual experience of website performance

Feb 1, 2013Download as PPTX, PDF4 likes2,627 views

This document discusses different methods for measuring website performance from both a synthetic and real-user perspective. It introduces the Speed Index metric for quantifying visual progress and compares the Speed Index of Amazon and Twitter. It also covers the Chrome resource prioritization and different challenges around visual performance metrics.

Measuring the visual experience of
website performance
Patrick Meenan
Google
@patmeenan
pmeenan@webpagetest.org

Base page monitoring

• Measures just the HTML response
• How fast the server responded
• Largely for operational monitoring/back-end optimization
• Curl, wget, nagios, pingers, etc

Full Page (synthetic)

• Full browser
• Measures to onLoad

Full Page (RUM)

• Real-user data from the field
• Measures to onLoad
• Possibility for per-application specific measurement points
– Time to first tweet

Twitter onLoad (2.4s) Twitter end of activity (8.2s)

2 Pages, Identical Performance

http://youtu.be/Ipk1k_IobYg

Measuring the visual experience of website performance

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

PageSpeed Service

www.webpagetest.org/compare

Chrome resource prioritization

First Paint

insouciant.org/tech/throttling-subresources-before-first-paint/

Chrome resource prioritization

…

insouciant.org/tech/throttling-subresources-before-first-paint/

Move Along, There’s Nothing to See Here…

http://www.flickr.com/photos/danacea/2452567718/

Sensitivities to avoid

• Small visual changes causing large measured differences
– Pixels move (Layout Changes)

As-Implemented - Histograms
• Fixed End point (Fully loaded)

• Per-color histograms of color distribution across the page
– Pixel locations irrelevant
– Works “well enough”
– Minimal memory required

• Starting Histogram and Final Histogram captured

• Diff from Start to Final

• Each Video frame:
– Diff against start
– Compare to Diff from Final (calculate as %)

Lab-Only

http://www.flickr.com/photos/rmtip21/4788073408/

RUM Possibilities

• Measure time of individual DOM elements
• Measure paint events
• Requires browser enhancements

www.flickr.com/photos/powerbooktrance/505269005/

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.

Making the web fasterPatrick Meenan

Velocity EU 2012 - Third party scripts and youPatrick Meenan

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.

Web Performance OptimizationPatrick Meenan

Measuring web performancePatrick Meenan

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 Power Users - Velocity 2014Patrick Meenan

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.

Velocity 2014 nyc WebPagetest private instancesPatrick Meenan

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.

Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman

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

Hacking Web Performance Maximiliano Firtman

This document discusses ways to improve web performance for mobile users. It outlines goals like achieving a speed index between 1,100-2,500 and first meaningful paint within 1-3 seconds. Various techniques are presented for hacking first load times, data transfer, resource loading, images and user experience. These include avoiding redirects, using HTTP/2 and service workers, modern cache controls, responsive images, preloading resources, and ensuring consistent frame rates. The overall message is that mobile performance needs more attention given average load times and high bounce rates on slow mobile sites.

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.

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.

HTTPS and HTTP/2MatthewWalker9

HTTPS & HTTP/2 This document discusses securing websites with HTTPS and migrating to HTTP/2. It provides guidance on setting up HTTPS with self-signed or free certificates. HTTP/2 improves performance over HTTPS compared to HTTP/1.1 by enabling features like server push and multiplexing. The document recommends securing all website content and resources with HTTPS to future-proof sites and unlock new browser capabilities. It also discusses optimizing for HTTPS and HTTP/2 by redirecting HTTP to HTTPS, enabling HTTP/2 via a CDN, and using HSTS.

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.

Consuming ASP.NET Web API with WebSocketsMaayan Glikser

Monitoring web application response times, a new approachMark Friedman

Selenium Tips & Tricks - StarWest 2015Andrew Krug

This document provides an overview of Selenium testing tools and techniques. It discusses headless testing using Xvfb and PhantomJS. It also covers visual testing with Applitools, using proxy servers like BrowserMob for status codes and performance testing, and emulating mobile devices. Additional topics include growl notifications, file handling, A/B testing, and resources for learning more about Selenium.

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.

Chanhao Jiang And David Wei Presentation Quickling PagecacheAjax Experience 2009

Quickling and PageCache are two software abstractions at Facebook that improve front-end performance. Quickling makes the site faster by using AJAX to transparently load pages without reloading common elements. PageCache caches user-visited pages in the browser to improve latency and reduce server load when pages are revisited. Both have significantly reduced Facebook's page rendering times and improved the user experience.

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.

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.

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.

Web performance testingPatrick Meenan

Web automation in BDDSandy Yu

This document discusses using SpecFlow and WatiN for web automation testing with a behavior-driven development (BDD) approach. It provides an overview of BDD, demonstrates SpecFlow features like step arguments and scenario outlines, and recommends BDD patterns like page object model and driver pattern. The framework emphasizes clear specifications over tools, and supports collaboration between technical and non-technical teams through its use of plain language to describe features and scenarios.

Groovy on Google App Engine with GaelykKevin H.A. Tan

Gaelyk allows Groovy applications to be deployed to Google App Engine. It provides a lightweight framework for building web applications on App Engine using Groovy. Key features include Groovy script-based controllers and views, object-relational mapping for the datastore, caching, and plugins. Gaelyk applications can be run locally for development and deployed to App Engine for production using Gradle tasks.

Fast Sites and SEO - PubCon 2017MarketingNomads.com

The document discusses the importance of site speed and provides tips to accelerate site performance. It notes that mobile speeds are especially important as mobile usage increases. It recommends techniques like using content delivery networks, optimizing images, removing sliders, and implementing resource hints. The document also describes tools for analyzing site speed like GTMetrix, WebPageTest, PageSpeed Insights, and Chrome's developer tools. It provides specifics on how to use these tools and what metrics they measure to identify performance issues.

Web performance Speed mattersDeepti Bhutani

This document discusses various metrics, tools, and techniques for measuring and improving website performance. It outlines common metrics like first byte, first paint, and page load time. It also lists popular profiling tools like WebPageTest, FireBug, and Chrome Developer Tools. Additionally, the document discusses the differences between synthetic monitoring and real user monitoring. Finally, it provides recommendations for performance best practices such as reducing page size, optimizing images, leveraging caching, and optimizing JavaScript.

More Related Content

What's hot (20)

Velocity 2014 nyc WebPagetest private instancesPatrick Meenan

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

Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman

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

Hacking Web Performance Maximiliano Firtman

Service Workers for PerformancePatrick Meenan

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

HTTPS and HTTP/2MatthewWalker9

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

Consuming ASP.NET Web API with WebSocketsMaayan Glikser

Monitoring web application response times, a new approachMark Friedman

Selenium Tips & Tricks - StarWest 2015Andrew Krug

Measuring Web Performance Dave Olsen

Chanhao Jiang And David Wei Presentation Quickling PagecacheAjax Experience 2009

BDD / cucumber /CapybaraShraddhaSF

Testing Any Site With Cucumber and SeleniumChris Johnson

Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma

Web performance testingPatrick Meenan

Web automation in BDDSandy Yu

Groovy on Google App Engine with GaelykKevin H.A. Tan

Velocity 2014 nyc WebPagetest private instancesPatrick Meenan

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

Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman

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

Hacking Web Performance Maximiliano Firtman

Service Workers for PerformancePatrick Meenan

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

HTTPS and HTTP/2MatthewWalker9

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

Consuming ASP.NET Web API with WebSocketsMaayan Glikser

Monitoring web application response times, a new approachMark Friedman

Selenium Tips & Tricks - StarWest 2015Andrew Krug

Measuring Web Performance Dave Olsen

Chanhao Jiang And David Wei Presentation Quickling PagecacheAjax Experience 2009

BDD / cucumber /CapybaraShraddhaSF

Testing Any Site With Cucumber and SeleniumChris Johnson

Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma

Web performance testingPatrick Meenan

Web automation in BDDSandy Yu

Groovy on Google App Engine with GaelykKevin H.A. Tan

Similar to Measuring the visual experience of website performance (20)

Fast Sites and SEO - PubCon 2017MarketingNomads.com

Web performance Speed mattersDeepti Bhutani

Capturing speed of user experience using user timing apiSergeyChernyshev

Sergey Chernyshev will talk about the challenges of capturing accurate metrics around speed of user experience and how instrumenting your application using UserTiming API can help. He will give a brief overview of automated metrics that are captured by the browser and show how custom metrics, specific to features of your user interface can help your teams better relate to these numbers and help more directly align them with user interface optimizations. Sergey will show how to use native UserTiming API to mark specific events and measure differences between these marks on Performance Timeline. He will also introduce UX-Capture JavaScript library to help simplify and unify this instrumentation across your site. We will also look at debugging process using Chrome Developer Tools and how metrics captured with UserTiming API can be automatically picked up by open WebPageTest tool and other synthetic and RUM monitoring tools.

Web Performance Optimization (WPO)Betclic Everest Group Tech Team

This document discusses web performance optimization and provides tips to improve performance. It emphasizes that performance is important for user experience, search engine optimization, conversion rates, and costs. It outlines common causes of performance issues like round-trip times, payload sizes, browser rendering delays, and inefficient JavaScript. Specific recommendations are given to optimize images, stylesheets, scripts, and browser rendering through techniques like compression, caching, deferred loading, and efficient coding practices. A variety of tools for measuring and improving performance are also listed.

腾讯大讲堂09 如何建设高性能网站areyouok

The document discusses techniques for optimizing website performance, including making fewer HTTP requests, leveraging browser caching with cache control headers, minimizing component sizes, optimizing asset delivery through techniques like sprites and concatenation, and following front-end performance best practices. It provides examples of how major sites implement various optimizations and shares results from experiments measuring the impact of optimizations on response times.

腾讯大讲堂09 如何建设高性能网站topgeek

The document discusses techniques for improving website performance, including: 1. Focusing on front-end optimizations as they account for 80-90% of response time. 2. Following the 80/20 rule - optimizing the 20% of code that affects 80% of response time like assets on the front-end. 3. Using techniques like image sprites, combined scripts and stylesheets, CDNs, caching, gzip compression, and reducing cookie sizes and HTTP requests to improve response times.

High Performance Web DesignKoji Ishimoto

The document discusses high performance web design. It covers measuring performance using tools like YSlow and PageSpeed, as well as techniques to improve performance such as reducing HTTP requests by combining scripts and stylesheets, using CSS sprites, and inline images. The document also discusses how performance impacts businesses and provides examples of component weights and grades for different websites according to YSlow rules. It emphasizes the importance of clear objectives, consistent design, and clean code for building high performance sites.

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.

Client-Side Performance TestingAnand Bagmar

Slides from my 4-hour workshop on Client-Side Performance Testing conducted at Phoenix, AZ in STPCon 2017 (March). Workshop Takeaways: Understand difference between is Performance Testing and Performance Engineering. Hand’s on experience of some open-source tools to monitor, measure and automate Client-side Performance Testing. Examples / code walk-through of some ways to automate Client-side Performance Testing. See blog for more details - https://essenceoftesting.blogspot.com/2017/03/workshop-client-side-performance.html

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

High Performance Websites By Souders Stevew3guru

High Performance Web SitesPáris Neto

Plopoakleaf

The document discusses techniques for improving web page performance, including making fewer HTTP requests through image maps, CSS sprites, inline images, and combined scripts and stylesheets. It also covers using a content delivery network, adding expiration headers, CSS/JavaScript optimization, parallel downloads, cookies, browser caching, and more. Case studies and experiments demonstrate the impact of these techniques on major websites. The goal is to help web developers optimize front-end performance.

Real User Monitoring: Getting Real Data from Real Users in the Real World - S...Akamai Technologies

Improvements to user experience translate directly to real business metrics and the bottom line. To guide the business to making wise choices on user experience, you need an accurate picture of site performance for real users. In this talk, Steve Lerner will describe how eBay’s performance monitoring strategy has evolved, how the insights gained from real user monitoring have impacted eBay’s business, and some of the considerations that have shaped their in house implementation of Real User Monitoring to serve eBay’s massive global scale. See Steve Lerner's Edge Presentation: http://www.akamai.com/html/custconf/edgetv-commerce.html#real-user-monitoring The Akamai Edge Conference is a gathering of the industry revolutionaries who are committed to creating leading edge experiences, realizing the full potential of what is possible in a Faster Forward World. From customer innovation stories, industry panels, technical labs, partner and government forums to Web security and developers' tracks, there’s something for everyone at Edge 2013. Learn more at http://www.akamai.com/edge

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?) 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

Optimizing your WordPress websitemwfordesigns

Presenter - Mary White Mary is the owner of MW for Designs (MWforDesigns.com) and she teaches website design with Html, CSS , Dreamweaver and WordPress in the Johnson County Community College continuing education department. • Learn why you NEED to optimize your website • Learn how to check your website speed • Learn all the "small things" you can do to speed up your website • Discover the most useful WordPress plugins to optimize your website • Need more? Get some advanced tips to speed up your site • Learn basic maintenance techniques to KEEP your site running fast

EscConf - Deep Dive Frontend OptimizationJonathan Klein

The document discusses optimizing frontend performance. It recommends reducing HTTP requests by combining CSS files into one file and using sprites and data URIs for images. It also suggests automating minification, compression, and image optimization. Performance should be monitored using tools like WebPagetest, YSlow, and PageSpeed. Frontend optimizations like these can reduce page load times and bandwidth usage.

腾讯大讲堂09 如何建设高性能网站George Ang

The document discusses techniques for optimizing front-end web performance. It provides examples of how much time is spent loading different parts of top websites, both with empty caches and full caches. The "performance golden rule" is that 80-90% of end-user response time is spent on the front-end. The document also outlines Yahoo's 14 rules for performance optimization, which include making fewer HTTP requests, using content delivery networks, adding Expires headers, gzipping components, script and CSS placement, and more.

Maximizing Optimizely Website PerformanceOptimizely

This document discusses best practices for optimizing Optimizely performance, including: 1. Implementing the Optimizely snippet synchronously before other tags to avoid flashing and integration issues. 2. Using a content delivery network to deliver the snippet for fast loading. 3. Understanding the order of execution for Optimizely experiments to ensure proper prioritization and evaluation. 4. Avoiding common issues that can cause flashing like using regular JavaScript in experiments.

Fast Sites and SEO - PubCon 2017MarketingNomads.com

Web performance Speed mattersDeepti Bhutani

Capturing speed of user experience using user timing apiSergeyChernyshev

Web Performance Optimization (WPO)Betclic Everest Group Tech Team

腾讯大讲堂09 如何建设高性能网站areyouok

腾讯大讲堂09 如何建设高性能网站topgeek

High Performance Web DesignKoji Ishimoto

Rum first london web perf meetupCliff Crocker

Client-Side Performance TestingAnand Bagmar

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

High Performance Websites By Souders Stevew3guru

High Performance Web SitesPáris Neto

Plopoakleaf

Real User Monitoring: Getting Real Data from Real Users in the Real World - S...Akamai Technologies

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

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

Optimizing your WordPress websitemwfordesigns

EscConf - Deep Dive Frontend OptimizationJonathan Klein

腾讯大讲堂09 如何建设高性能网站George Ang

Maximizing Optimizely Website PerformanceOptimizely

More from Patrick Meenan (16)

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.

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.

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.

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.

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.

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.

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.

Resource PrioritizationPatrick Meenan

HTTP/2 PrioritizationPatrick Meenan

Getting the most out of WebPageTestPatrick 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

Measuring performance - Velocity 2016 TrainingPatrick Meenan

Mobile web performance - MoDev EastPatrick 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

Hands on performance testing and analysis with web pagetestPatrick Meenan

Recently uploaded (20)

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

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

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

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/.

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

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.

Cyber Awareness overview for 2025 month of securityriccardosl1

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Procurement Insights Cost To Value Guide.pptxJon Hansen

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! 🚀

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

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

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

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

Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

AI and Data Privacy in 2025: Global TrendsInData Labs

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

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

Cyber Awareness overview for 2025 month of securityriccardosl1

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Procurement Insights Cost To Value Guide.pptxJon Hansen

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

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

Measuring the visual experience of website performance

1. Measuring the visual experience of website performance Patrick Meenan Google @patmeenan [email protected]

2. How fast is your site?

3. Base page monitoring • Measures just the HTML response • How fast the server responded • Largely for operational monitoring/back-end optimization • Curl, wget, nagios, pingers, etc

4. Full Page (synthetic) • Full browser • Measures to onLoad

5. Full Page (RUM) • Real-user data from the field • Measures to onLoad • Possibility for per-application specific measurement points – Time to first tweet

6. Examples

7. Twitter onLoad (2.4s) Twitter end of activity (8.2s)

8. Twitter vs. Amazon

9. Twitter vs. Amazon

10. 2 Pages, Identical Performance http://youtu.be/Ipk1k_IobYg

11. 2 Pages, Identical Performance http://youtu.be/Ipk1k_IobYg

12. Start Render Identical

13. Load Time Identical

14. Last Visual Change Identical

15. Introducing the Speed Index

16. Visual “Completeness”

18. Unrendered Progress

19. 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

20. 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

22. www.webpagetest.org

23. www.webpagetest.org

24. PageSpeed Service www.webpagetest.org/compare

25. PageSpeed Service Development

26. Chrome resource prioritization First Paint insouciant.org/tech/throttling-subresources-before-first-paint/

27. Chrome resource prioritization … insouciant.org/tech/throttling-subresources-before-first-paint/

28. Visual Progress

29. Move Along, There’s Nothing to See Here… http://www.flickr.com/photos/danacea/2452567718/

30. Sensitivities to avoid • Small visual changes causing large measured differences – Pixels move (Layout Changes)

31. As-Implemented - Histograms • Fixed End point (Fully loaded) • Per-color histograms of color distribution across the page – Pixel locations irrelevant – Works “well enough” – Minimal memory required • Starting Histogram and Final Histogram captured • Diff from Start to Final • Each Video frame: – Diff against start – Compare to Diff from Final (calculate as %)

32. Lab-Only http://www.flickr.com/photos/rmtip21/4788073408/

34. RUM Possibilities • Measure time of individual DOM elements • Measure paint events • Requires browser enhancements

35. As-Implemented Issues

36. Interstitials

37. Backgrounds

38. Slideshows

39. Ads

40. www.flickr.com/photos/powerbooktrance/505269005/