A presentation at Artifact in in Austin, TX, USA by Tim Kadlec
OUTSIDE LOOKING IN Tim Kadlec @tkadlec #artifactconf
? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? 288 QUESTIONS ? ? ? ? ? ? ? ? ? ? ? ? ? PER?DAY ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ?? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? I HAVE 5 KIDS.
DAD….
DAD…. WHAT IF INSTEAD OF CHANGING THE BABY’S DIAPER…
DAD…. WHAT IF INSTEAD OF CHANGING THE BABY’S DIAPER… WE HAD TO CHANGE HIS HEAD?
ARE WE THERE YET?
BILLY’S BIRTHDAY WAS YESTERDAY.
BILLY’S BIRTHDAY WAS YESTERDAY. HE’S 5 YEARS OLDER THAN HIS SISTER WHO IS 9.
BILLY’S BIRTHDAY WAS YESTERDAY. HE’S 5 YEARS OLDER THAN HIS SISTER WHO IS 9. HOW TALL IS THEIR GRANDMA?
ALWAYS EASIER TO BUILD FOR PEOPLE LIKE ME
ALWAYS EASIER TO BUILD FOR PEOPLE LIKE YOU
ALWAYS EASIER TO BUILD FOR PEOPLE LIKE US
WE’RE BUILDING A WEB OF EXCESS
306.3kb
▲191% 891.7kb
56.9kb
375.4KB ▲616% 56.9kb
375.4KB ▼1.9%
BECAUSE WE CAN
32 MONTHS
$214
85%
ANDROID > 1 YEAR OLD < $200
#THROTTLETHURSDAY
“ALL TESTING SHOULD BE DONE ON SLOW AND OLD ANDROID” https://twitter.com/simonhearne/status/1176559022666895360
19S 65S PIXEL 2 ALCATEL 1X
WE’VE BUILT A WEB THAT LARGELY DISMISSES AFFORDABLE, TYPICAL SMARTPHONES AND THE PEOPLE THAT USE THEM.
A GOOD FRAMEWORK MAKES IT EASY TO BUILD
A GOOD FRAMEWORK MAKES IT EASY TO BUILD WELL
60 DETECTABLE ERRORS PER PAGE
80 60 59.6 65.5 70.9 73.7 Angular VueJS 40 20 0 Overall React
375.4KB 1300KB
2400 2,243 2,345 Angular React 1800 1,653 1200 1,300 600 0 Overall VueJS
WE SHOULD EXPECT MORE OF OUR TOOLS.
UNLESS A GLOBALLY LAUNCHED FRAMEWORK LABELS ITSELF AS EXCLUSIVELY TARGETING THE USERS OF THE WEALTHY WESTERN WEB, IT HAS A RESPONSIBILITY TO HELP DEVELOPERS TARGET EVERY PHONE ON THE WIDENING PERFORMANCE GAP SPECTRUM. - SURMA
3RD PARTIES
706% Increase in 3rd party size 2011 2018
CLIENT-SIDE A/B TESTING & PERSONALIZATION
Single-Point of Failure (SPOF)
addEventListener(‘fetch’, event => { event.respondWith(handleRequest(event.request)) }) /** * Fetch and log a request * @param {Request} request */ async function handleRequest(request) { return new Response((new Date).toString()); }
2x-20x improvement
It’s still on us.
Checks & Balances
Feature-Policy: my-policy allowed-origins;
<iframe allow=”my-policy allowed-origins”>IN-BROWSER PERFORMANCE LINTING
Feature-Policy: oversized-images ‘none’;
Feature-Policy: unoptimized-lossy-images ‘none’; Feature-Policy: unoptimized-lossless-images-strict ‘none’;
Feature-Policy: unsized-media ‘none’;
“bundlesize”: [ { “path”: “./dist/vendor-.js”, “maxSize”: “3 kB” }, { “path”: “./dist/main.js”, “maxSize”: “20 kB” }, { “path”: “./dist/chunk-.js”, “maxSize”: “3 kB” } ]
SURFACE OUR BLIND SPOTS
ALWAYS EASIER TO BUILD FOR PEOPLE LIKE ME
ME
WHITE
WHITE MALE
WHITE MALE RUGGEDLY HANDSOME
WHITE MALE RUGGEDLY HANDSOME HEALTHY
WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF
WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF FLUENT ENGLISH
“WE’RE FOCUSED ABOVE THE FOLD.” - TATIANA MAC
TECHNICAL DOCUMENTATION
“JUST” “EASY” “SIMPLE”
WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF FLUENT ENGLISH
WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF FLUENT ENGLISH
WHITE MALE RUGGEDLY HANDSOME HEALTHY COMFORTABLY WELL-OFF FLUENT ENGLISH
CRITICISM.
OBSERVATION.
IS THIS IS FOR EVERYONE?
OR FOR PEOPLE LIKE US?
ME
YOU
US
EVERYONE
THANK YOU! Tim Kadlec @tkadlec #artifactconf
Over the past several years, there has been a lot of conversation about how performance impacts key business metrics, but that’s not all that’s at stake. As sites grow heavier, using more JavaScript and images than ever, it’s not just the business that feels the effects. Spotty networks, cheap devices, accessible tech and more struggle to handle the increasing demands we place on them. If we’re not careful, the people down the street and around the world who rely on those technologies will be left out entirely.
In this talk we’ll explore performance outside the bubble and what we can do to make sure that we’re not leaving people on the outside looking in.
The following resources were mentioned during the presentation or are useful additional information.
An accessibility analysis of the top 1,000,000 home pages
Here’s what was said about this presentation on social media.
for free. You
can too.