Web Performance:
Performance Overview

InstartLogic.github.io/p/SFHTML5/webperf.html

Table of Contents

  1. Performance Overview
  2. Progressive WebApps & Lighthouse
  3. Visual Metrics: SI & PSI
  4. SpeedPerception Study

Performance Overview

  1. What is Web Performance
  2. Objective Metrics
  3. Perceived Performance

What is Fast?

What is fast? Hello World Lord of the Rings 0 s 1 s 2 s 3 s 4 s 5 s 6 s 7 s 8 s 9 s 10 s 11 s 12 s 13 s 14 s 15 s 16 s 17 s 18 s 19 s 20 s Time to Load Number of Visitors

What is Load Time?

a made up histogram in a bell curve shape with a long tail

Which feels faster?

Performance

  • Time to Load
  • Time until usable
  • Jitter
  • Responsiveness
  • Smoothness

RAIL

Four phases of interaction: end-user’s perception

  1. Response to Input touch_app
  2. Animation & Scrolling directions_run
  3. Idle alarm
  4. Page Load cached

Video: How Users Perceive the Speed of The Web (2015): Paul Irish / Google

Web Performance

Download
# of resources: images, fonts, HTML, scripts, and CSS loaded
Parse
File size of above resources
Execute
Parsing & Painting
Perceived Performance
Users perception of the speed of the load and reaction time.

What's involved in a page load?

  • HTTP request
  • DNS lookup
  • TCP Connect
  • HTTP request sent
  • Server Magic
  • Server Sends response
  • Browser receives/parses response
  • Resources fetched from Cache
  • Parse & Execute Scripts
  • Render Site
  • Each request: go back to DNS lookup or HTTP Request
  • Stylesheets are blocking
  • Scripts are blocking.

Navigation Timing API metrics

Navigation Timing API metrics

Objective v. Subjective

Load Time v. Visually Complete

Load Times: 3,729ms v. 3,768ms

Visually Complete: 16s v. 8.7s

Staples
Wolferman's

What is good User Experience?

Active v. Passive Waiting

Questions

  • How does visual jitter impact perceived performance?
  • Are sites free of visual jitter like modals and overlays viewed as more performant?
  • Is it possible to automatically predict the presence of jitter to help choose a better set of metrics?
  • Does a long DOM Content Loaded impact perceived performance?
  • Can metrics be improved?

User Experience > Developer Experience

Visual Metrics launch

  1. SpeedIndex (SI)
  2. Perceptual Speed Index (PSI)
Go launch

Thank you

Speed Perception: Understanding and Measuring Perceived Performance

http://instartlogic.github.io/p/SFHTML5