Measuring the visual experience of website performance

•Download as PPTX, PDF•

4 likes•2,625 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/

What's hot

Velocity 2014 nyc WebPagetest private instances

Patrick Meenan

Front-End Single Point of Failure - Velocity 2016 Training

Patrick 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 2017

Maximiliano 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 Performance

Patrick 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 Applications

Nicholas 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/2

MatthewWalker9

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 WebSockets

Maayan Glikser

Monitoring web application response times, a new approach

Mark Friedman

Selenium Tips & Tricks - StarWest 2015

Andrew 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 Pagecache

Ajax 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 /Capybara

ShraddhaSF

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 Selenium

Chris 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 Investigations

Nicholas 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 testing

Patrick Meenan

Web automation in BDD

Sandy 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 Gaelyk

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

What's hot (20)

Velocity 2014 nyc WebPagetest private instances

Front-End Single Point of Failure - Velocity 2016 Training

Hacking Web Performance @ ForwardJS 2017

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

Hacking Web Performance

Service Workers for Performance

Using Modern Browser APIs to Improve the Performance of Your Web Applications

HTTPS and HTTP/2

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

Consuming ASP.NET Web API with WebSockets

Monitoring web application response times, a new approach

Selenium Tips & Tricks - StarWest 2015

Measuring Web Performance

Chanhao Jiang And David Wei Presentation Quickling Pagecache

BDD / cucumber /Capybara

Testing Any Site With Cucumber and Selenium

Forensic Tools for In-Depth Performance Investigations

Web performance testing

Web automation in BDD

Groovy on Google App Engine with Gaelyk

Similar to Measuring the visual experience of website performance

Fast Sites and SEO - PubCon 2017

MarketingNomads.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 matters

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

Capturing speed of user experience using user timing api

SergeyChernyshev

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 Design

Koji 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 meetup

Cliff 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 Testing

Anand 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

Plop

oakleaf

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.

High Performance Web Sites

Páris Neto

High Performance Websites By Souders Steve

w3guru

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

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

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

Optimizing your WordPress website

mwfordesigns

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 Optimization

Jonathan 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 Performance

Optimizely

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.

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

Fast Sites and SEO - PubCon 2017

Web performance Speed matters

Capturing speed of user experience using user timing api

Web Performance Optimization (WPO)

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

High Performance Web Design

Rum first london web perf meetup

Client-Side Performance Testing

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

Plop

High Performance Web Sites

High Performance Websites By Souders Steve

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

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

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

Optimizing your WordPress website

EscConf - Deep Dive Frontend Optimization

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

Maximizing Optimizely Website Performance

More from Patrick Meenan

Resource Prioritization

Patrick 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 Prioritization

Patrick 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 WebPageTest

Patrick 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 practice

Patrick 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 2016

Patrick Meenan

TLS - 2016 Velocity Training

Patrick 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 Training

Patrick 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 Training

Patrick 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 East

Patrick 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 optimization

Patrick 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

Velocity 2012 - Taming the Mobile Beast

Patrick Meenan

Frontend SPOF

Patrick 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 pagetest

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

More from Patrick Meenan (16)

Resource Prioritization

HTTP/2 Prioritization

Getting the most out of WebPageTest

Http2 in practice

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

How fast is it?

Machine Learning RUM - Velocity 2016

TLS - 2016 Velocity Training

Service workers - Velocity 2016 Training

Measuring performance - Velocity 2016 Training

Mobile web performance - MoDev East

Image optimization

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

Velocity 2012 - Taming the Mobile Beast

Frontend SPOF

Hands on performance testing and analysis with web pagetest

Recently uploaded

How RPA Help in the Transportation and Logistics Industry.pptx

SynapseIndia

Quantum Communications Q&A with Gemini LLM

Vijayananda Mohire

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

ArgaBisma

UiPath Community Day Kraków: Devs4Devs Conference

UiPathCommunity

We are honored to launch and host this event for our UiPath Polish Community, with the help of our partners - Proservartner! We certainly hope we have managed to spike your interest in the subjects to be presented and the incredible networking opportunities at hand, too! Check out our proposed agenda below 👇👇 08:30 ☕ Welcome coffee (30') 09:00 Opening note/ Intro to UiPath Community (10') Cristina Vidu, Global Manager, Marketing Community @UiPath Dawid Kot, Digital Transformation Lead @Proservartner 09:10 Cloud migration - Proservartner & DOVISTA case study (30') Marcin Drozdowski, Automation CoE Manager @DOVISTA Pawel Kamiński, RPA developer @DOVISTA Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 09:40 From bottlenecks to breakthroughs: Citizen Development in action (25') Pawel Poplawski, Director, Improvement and Automation @McCormick & Company Michał Cieślak, Senior Manager, Automation Programs @McCormick & Company 10:05 Next-level bots: API integration in UiPath Studio (30') Mikolaj Zielinski, UiPath MVP, Senior Solutions Engineer @Proservartner 10:35 ☕ Coffee Break (15') 10:50 Document Understanding with my RPA Companion (45') Ewa Gruszka, Enterprise Sales Specialist, AI & ML @UiPath 11:35 Power up your Robots: GenAI and GPT in REFramework (45') Krzysztof Karaszewski, Global RPA Product Manager 12:20 🍕 Lunch Break (1hr) 13:20 From Concept to Quality: UiPath Test Suite for AI-powered Knowledge Bots (30') Kamil Miśko, UiPath MVP, Senior RPA Developer @Zurich Insurance 13:50 Communications Mining - focus on AI capabilities (30') Thomasz Wierzbicki, Business Analyst @Office Samurai 14:20 Polish MVP panel: Insights on MVP award achievements and career profiling

Observability For You and Me with OpenTelemetry

Eric D. Schabell

Are you interested in dipping your toes in the cloud native observability waters, but as an engineer you are not sure where to get started with tracing problems through your microservices and application landscapes on Kubernetes? Then this is the session for you, where we take you on your first steps in an active open-source project that offers a buffet of languages, challenges, and opportunities for getting started with telemetry data. The project is called openTelemetry, but before diving into the specifics, we’ll start with de-mystifying key concepts and terms such as observability, telemetry, instrumentation, cardinality, percentile to lay a foundation. After understanding the nuts and bolts of observability and distributed traces, we’ll explore the openTelemetry community; its Special Interest Groups (SIGs), repositories, and how to become not only an end-user, but possibly a contributor.We will wrap up with an overview of the components in this project, such as the Collector, the OpenTelemetry protocol (OTLP), its APIs, and its SDKs. Attendees will leave with an understanding of key observability concepts, become grounded in distributed tracing terminology, be aware of the components of openTelemetry, and know how to take their first steps to an open-source contribution! Key Takeaways: Open source, vendor neutral instrumentation is an exciting new reality as the industry standardizes on openTelemetry for observability. OpenTelemetry is on a mission to enable effective observability by making high-quality, portable telemetry ubiquitous. The world of observability and monitoring today has a steep learning curve and in order to achieve ubiquity, the project would benefit from growing our contributor community.

20240704 QFM023 Engineering Leadership Reading List June 2024

Matthew Sinclair

Implementations of Fused Deposition Modeling in real world

Emerging Tech

The presentation showcases the diverse real-world applications of Fused Deposition Modeling (FDM) across multiple industries: 1. **Manufacturing**: FDM is utilized in manufacturing for rapid prototyping, creating custom tools and fixtures, and producing functional end-use parts. Companies leverage its cost-effectiveness and flexibility to streamline production processes. 2. **Medical**: In the medical field, FDM is used to create patient-specific anatomical models, surgical guides, and prosthetics. Its ability to produce precise and biocompatible parts supports advancements in personalized healthcare solutions. 3. **Education**: FDM plays a crucial role in education by enabling students to learn about design and engineering through hands-on 3D printing projects. It promotes innovation and practical skill development in STEM disciplines. 4. **Science**: Researchers use FDM to prototype equipment for scientific experiments, build custom laboratory tools, and create models for visualization and testing purposes. It facilitates rapid iteration and customization in scientific endeavors. 5. **Automotive**: Automotive manufacturers employ FDM for prototyping vehicle components, tooling for assembly lines, and customized parts. It speeds up the design validation process and enhances efficiency in automotive engineering. 6. **Consumer Electronics**: FDM is utilized in consumer electronics for designing and prototyping product enclosures, casings, and internal components. It enables rapid iteration and customization to meet evolving consumer demands. 7. **Robotics**: Robotics engineers leverage FDM to prototype robot parts, create lightweight and durable components, and customize robot designs for specific applications. It supports innovation and optimization in robotic systems. 8. **Aerospace**: In aerospace, FDM is used to manufacture lightweight parts, complex geometries, and prototypes of aircraft components. It contributes to cost reduction, faster production cycles, and weight savings in aerospace engineering. 9. **Architecture**: Architects utilize FDM for creating detailed architectural models, prototypes of building components, and intricate designs. It aids in visualizing concepts, testing structural integrity, and communicating design ideas effectively. Each industry example demonstrates how FDM enhances innovation, accelerates product development, and addresses specific challenges through advanced manufacturing capabilities.

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Neo4j

Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.

Cookies program to display the information though cookie creation

shanthidl1

Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...

Bert Blevins

Today’s digitally connected world presents a wide range of security challenges for enterprises. Insider security threats are particularly noteworthy because they have the potential to cause significant harm. Unlike external threats, insider risks originate from within the company, making them more subtle and challenging to identify. This blog aims to provide a comprehensive understanding of insider security threats, including their types, examples, effects, and mitigation techniques.

Best Programming Language for Civil Engineers

Awais Yaseen

The integration of programming into civil engineering is transforming the industry. We can design complex infrastructure projects and analyse large datasets. Imagine revolutionizing the way we build our cities and infrastructure, all by the power of coding. Programming skills are no longer just a bonus—they’re a game changer in this era. Technology is revolutionizing civil engineering by integrating advanced tools and techniques. Programming allows for the automation of repetitive tasks, enhancing the accuracy of designs, simulations, and analyses. With the advent of artificial intelligence and machine learning, engineers can now predict structural behaviors under various conditions, optimize material usage, and improve project planning.

20240702 Présentation Plateforme GenAI.pdf

Sally Laouacheria

Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 : - Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants. - REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

jackson110191

Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

RaminGhanbari2

7 Most Powerful Solar Storms in the History of Earth.pdf

Enterprise Wired

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

Mydbops

This presentation, delivered at the Postgres Bangalore (PGBLR) Meetup-2 on June 29th, 2024, dives deep into connection pooling for PostgreSQL databases. Aakash M, a PostgreSQL Tech Lead at Mydbops, explores the challenges of managing numerous connections and explains how connection pooling optimizes performance and resource utilization. Key Takeaways: * Understand why connection pooling is essential for high-traffic applications * Explore various connection poolers available for PostgreSQL, including pgbouncer * Learn the configuration options and functionalities of pgbouncer * Discover best practices for monitoring and troubleshooting connection pooling setups * Gain insights into real-world use cases and considerations for production environments This presentation is ideal for: * Database administrators (DBAs) * Developers working with PostgreSQL * DevOps engineers * Anyone interested in optimizing PostgreSQL performance Contact info@mydbops.com for PostgreSQL Managed, Consulting and Remote DBA Services

The Rise of Supernetwork Data Intensive Computing

Larry Smarr

find out more about the role of autonomous vehicles in facing global challenges

huseindihon

What's New in Copilot for Microsoft365 May 2024.pptx

Stephanie Beckett

論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Toru Tamaki

Recently uploaded (20)

How RPA Help in the Transportation and Logistics Industry.pptx

Quantum Communications Q&A with Gemini LLM

WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf

UiPath Community Day Kraków: Devs4Devs Conference

Observability For You and Me with OpenTelemetry

20240704 QFM023 Engineering Leadership Reading List June 2024

Implementations of Fused Deposition Modeling in real world

BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf

Cookies program to display the information though cookie creation

Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...

Best Programming Language for Civil Engineers

20240702 Présentation Plateforme GenAI.pdf

INDIAN AIR FORCE FIGHTER PLANES LIST.pdf

Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy

7 Most Powerful Solar Storms in the History of Earth.pdf

Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops

The Rise of Supernetwork Data Intensive Computing

find out more about the role of autonomous vehicles in facing global challenges

What's New in Copilot for Microsoft365 May 2024.pptx

論文紹介：A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...

Measuring the visual experience of website performance

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

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/