things stressing us out
by Dr. Miguel
Who gets stressed with...
Cognitive Load of stressful situations
๐ https://www.ericsson.com/en/press-releases/2016/2/streaming-delays-mentally-taxing-for-smartphone-users-ericsson-mobility-report
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
#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
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 โค๏ธ
#web-performance