things stressing us out

by Dr. Miguel

Who gets stressed with...

same stress as math problems!

slow websites cause...

62% behave more or less normally

๐Ÿ˜ถ

A survey by Harris Interactive for Tealeaf about web performance
๐Ÿ”— https://www.oreilly.com/library/view/time-is-money/9781491928783/ch01.html

23% curse at their phone

๐Ÿ˜ 

11% scream at their phone

๐Ÿคฌ

so... what about the remaining 4%?

when mobile site performs badly the user ...

4% just

THROW

their phone

A survey by Harris Interactive for Tealeaf about web performance
๐Ÿ”— https://www.oreilly.com/library/view/time-is-money/9781491928783/ch01.html

when mobile site performs badly the user ...

let's try to avoid that...

Web Performance Workshop โšก

SEO Gathering 2019

I'm Miguel รngel Durรกn

Enabler Frontend at

ย 

ย 

ย 

#web-performance

perfmatters gathering 2020

What's the performance?

10 years ago...

time to load the site

today...

is a feeling

today...

feeling that the website is fast

how to calculate that feeling?

Performance metrics

metrics based on
user experience

page load

number of requests

transfer size

public enemy number one๐Ÿ‘‡

the blank screen

let me present your

first paint ๐Ÿ–Œ

is it happening? is it loading?

from

to

first paint

what else besides if is it loading?

first contentful paint ๐Ÿ“–

first meaningful paint ๐Ÿ–ผ๏ธ

is it still happening? is it still loading?

is it useful? is it interesting for me?

first paint ๐Ÿ–Œ

first contentful paint ๐Ÿ“–

first meaningful paint ๐Ÿ–ผ๏ธ

largest contentful paint ๐Ÿ“

but...

not enough to calculate
perceived speed from the user

How quickly the contents of a page are visually populated

speed index ๐ŸŽ๏ธ

speed index ๐ŸŽ๏ธ

does it feel fast?

speed index formula ๐Ÿงช

speed index

visual perception: ๐Ÿ‘€

???

usable perception: ๐Ÿ‘†

time to interactive ๐ŸŽฎ

is it usable? is it responding?

๐Ÿ™ˆ

๐Ÿ™ˆ

right now...

๐Ÿ•ต๏ธโ€โ™€๏ธ check your perf metrics on...

๐Ÿ•ต๏ธโ€โ™€๏ธ check your perf metrics on...

old but gold ๐Ÿ…

๐Ÿ•ต๏ธโ€โ™€๏ธ check your perf metrics on...

curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://midu.dev

{
 "captchaResult": "CAPTCHA_NOT_NEEDED",
 "kind": "pagespeedonline#result",
 "id": "https://developers.google.com/",
 "loadingExperience": {
  "id": "https://developers.google.com/",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "percentile": 3482,
    "distributions": [
     {
      "min": 0,
      "max": 1000,
      "proportion": 0.37151728768042963
     },
     {
      "min": 1000,
      "max": 2500,
      "proportion": 0.4244153519077991
     },
     {
      "min": 2500,
      "proportion": 0.2040673604117713
     }
    ],
    "category": "SLOW"
   },
   "FIRST_INPUT_DELAY_MS": {
    "percentile": 36,
    "distributions": [
     {
      "min": 0,
      "max": 50,
      "proportion": 0.960628961482204
     },
     {
      "min": 50,
      "max": 250,
      "proportion": 0.02888834714773281
     },
     {
      "min": 250,
      "proportion": 0.010482691370063388
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "SLOW",
  "initial_url": "https://developers.google.com/"
 },
 "originLoadingExperience": {
  "id": "https://developers.google.com",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "percentile": 2761,
    "distributions": [
     {
      "min": 0,
      "max": 1000,
      "proportion": 0.4236433226493666
     },
     {
      "min": 1000,
      "max": 2500,
      "proportion": 0.45045120795679117
     },
     {
      "min": 2500,
      "proportion": 0.1259054693938423
     }
    ],
    "category": "SLOW"
   },
   "FIRST_INPUT_DELAY_MS": {
    "percentile": 45,
    "distributions": [
     {
      "min": 0,
      "max": 50,
      "proportion": 0.9537371485251699
     },
     {
      "min": 50,
      "max": 250,
      "proportion": 0.03044972719889055
     },
     {
      "min": 250,
      "proportion": 0.01581312427593959
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "SLOW",
  "initial_url": "https://developers.google.com/"
 },
 "lighthouseResult": {
  "requestedUrl": "https://developers.google.com/",
  "finalUrl": "https://developers.google.com/",
  "lighthouseVersion": "3.2.0",
  "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36",
  "fetchTime": "2018-11-01T03:03:58.394Z",
  "environment": {
   "networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3559.0 Safari/537.36",
   "hostUserAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36",
   "benchmarkIndex": 590.0
  },
  "runWarnings": [],
  "configSettings": {
   "emulatedFormFactor": "desktop",
   "locale": "en-US",
   "onlyCategories": [
    "performance"
   ]
  },
  "audits": {
   "estimated-input-latency": {
    "id": "estimated-input-latency",
    "title": "Estimated Input Latency",
    "description": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds, during the busiest 5s window of page load. If your latency is higher than 50 ms, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency).",
    "score": 1.0,
    "scoreDisplayMode": "numeric",
    "displayValue": "30 ms"
   },
   "uses-rel-preconnect": {
    "id": "uses-rel-preconnect",
    "title": "Preconnect to required origins",
    "description": "Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).",
    "score": 1.0,
    "scoreDisplayMode": "numeric",
    "details": {
     "headings": [],
     "type": "opportunity",
     "items": [],
     "overallSavingsMs": 0.0
    }
   },
   ...
  },
  "categories": {
   "performance": {
    "id": "performance",
    "title": "Performance",
    "score": 0.96,
    "auditRefs": [
     {
      "id": "first-contentful-paint",
      "weight": 3.0,
      "group": "metrics"
     },
     {
      "id": "first-meaningful-paint",
      "weight": 1.0,
      "group": "metrics"
     },
     ...
    ]
   }
  },
  "categoryGroups": {
   "a11y-element-names": {
    "title": "Elements Have Discernible Names",
    "description": "These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader."
   },
   "a11y-language": {
    "title": "Page Specifies Valid Language",
    "description": "These are opportunities to improve the interpretation of your content by users in different locales."
   },
   ...
  },
  "i18n": {
   "rendererFormattedStrings": {
    "varianceDisclaimer": "Values are estimated and may vary.",
    "opportunityResourceColumnLabel": "Opportunity",
    "opportunitySavingsColumnLabel": "Estimated Savings",
    "errorMissingAuditInfo": "Report error: no audit information",
    "errorLabel": "Error!",
    "warningHeader": "Warnings: ",
    "auditGroupExpandTooltip": "Show audits",
    "passedAuditsGroupTitle": "Passed audits",
    "notApplicableAuditsGroupTitle": "Not applicable",
    "manualAuditsGroupTitle": "Additional items to manually check",
    "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:",
    "scorescaleLabel": "Score scale:",
    "crcLongestDurationLabel": "Maximum critical path latency:",
    "crcInitialNavigation": "Initial Navigation",
    "lsPerformanceCategoryDescription": "[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.",
    "labDataTitle": "Lab Data"
   }
  }
 },
 "analysisUTCTimestamp": "2018-11-01T03:03:58.394Z"
}

based on

Let's try them!

Why performance matters?

#perfMatters for SEO

๐Ÿ” Time To First Byte
ย 
โž• crawled pages

#perfMatters for SEO



If your site is slow...
better have the best content EVER
or you are screwed. ๐Ÿ˜œ


ย 

#perfMatters for top of mind

think about...

Why do you useย  ย  ย  ย  ย  ย  ย  ย  ย  ย ?

#perfMatters for top of mind

better results?

minimalist?

fast?

#perfMatters for top of mind

loading best results in a minimalist way...

#perfMatters for top of mind

Would you return to a website that stress you out?

#perfMatters for leads

๐Ÿ”—ย SOASTA,The State of Online Retail Performance, U.S., April 2017.

#perfMatters for leads

#perfMatters for leads

Up to 4X faster site load times

4X increase in people clicking from BMW.com to a BMW sales site

50% growth in mobile users

Do you like to drive?

Why performance matters... for

#perfMatters for ads

In Q2,ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย  ย generated revenue of ~$39 billion.

reported advertising revenue of ~$33 billion.

...other revenues: ~$6 billion

#perfMatters for ads

53%

26%

ad network market share ๐Ÿ›’

Do you realize why

want your website to be
as fast as possible?

Soooo...

#perfMatters for ads

because...

and make more money ๐Ÿ’ธ

Why performance matters?

One of the most important keyย features of your product

to sum up...

How to fix performance?

forever

Establish a
performance culture

everybody need to understand the value of performance

Key Results ๐Ÿ”‘

Competitors ๐Ÿ‘พ

Budgets ๐Ÿ’ฐ

the marketing team

the productย  owner

the frontend

backend

each decision will turn into a counter strike

The BOSS

devops

data insights

CTO

your dad

QA

ADVERTISEMENT

Web performance is...

NOT a technical problem

Who is using your product?

Be user-centric

Does the user need 3MB of images?

๐Ÿ”— apple.es

Is the user perceiving the
11 different fonts?

๐Ÿ”— elpais.com

๐Ÿ‘ˆ ~700px visible

~20000px rendered ๐Ÿ‘‰

๐Ÿ˜ฑ

Why are we loading 33 results if the user is only seeing the first five?

How many adsย is the user actively viewing?

Web performance is...

NOT a technical problem

but could be...

a technical challenge

Performance technical challenges

user centric edition

Is the user loading resources that are not being used?

If not needed, remove it ๐Ÿงน

If not critical, async it ๐Ÿ”€

If used later, import it dynamically โฌ

Is the user loading images that are not being used?

<!-- Native Lazy Loading -->

<img src="celebration.jpg" loading="lazy" />

<iframe src="video-player.html" loading="lazy"></iframe>

I'm lazy ๐Ÿ˜ช

I'm a hacker!

<!-- Intersection Observer ๐Ÿ‘€
https://developer.mozilla.org/es/docs/Web/API/Intersection_Observer_API -->

const options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

const observer = new IntersectionObserver(callback, options)

I'm a developaaah! ๐Ÿ‘ฉโ€๐Ÿ’ป

Do you know what are you shipping to your user?

Are you penalizing your users?

Use progressive enhancement

~85% support

100% support with ๐Ÿ›

Giving the best resource priorization for the user needs?

Use resource hints

<!-- I'm going to need these connections resolved asap! -->
<link rel="preconnect dns-prefetch" href="https://frtassets.fotocasa.es">
<link rel="preconnect dns-prefetch" href="https://d.fotocasa.es">
<link rel="preconnect dns-prefetch" href="https://images.inmofactory.com">



<!-- High priority, pretty important resources! -->
<link as="style" rel="preload" href="https://frtassets.fotocasa.es/styles.css">
<link as="script" rel="preload" href="https://frtassets.fotocasa.es/vendor.95e3db3f.js">

Are your serving the content near your user?

Are fonts and images using best compression for the user?

Are requests using the best compression algorithm for them?

Think about your user

Empathize with theย people you're developing for

Win over your user'sย hearts โค๏ธ

Thanks!

@miguel

#web-performance

Made with Slides.com