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

Performance Workshop - SEO Gathering 2019

By Miguel Angel Durán García

Performance Workshop - SEO Gathering 2019

Version: SEO Gathering 2019

  • 45
Loading comments...

More from Miguel Angel Durán García