SlideShare a Scribd company logo
1 of 83
*fantastic*
frontend
performance
tricks and
why we
do them
Jenna Zeigen
QCon SF
11/5/18
whee!
InfoQ.com: News & Community Site
• Over 1,000,000 software developers, architects and CTOs read the site world-
wide every month
• 250,000 senior developers subscribe to our weekly newsletter
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• 2 dedicated podcast channels: The InfoQ Podcast, with a focus on
Architecture and The Engineering Culture Podcast, with a focus on building
• 96 deep dives on innovative topics packed as downloadable emags and
minibooks
• Over 40 new content items per week
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
front-end-performance-optimization
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com
jenna.is/at-qconsf
@zeigenvector
Senior Frontend Engineer
at Slack
Organizer of EmpireJS
Organizer of BrooklynJS
Whatchu know 'bout FE?
Whatchu, whatchu know 'bout FE?
Whatchu know 'bout FE?
Whatchu, whatchu know?
♪♪♪
loading
+
rendering
loading
+
rendering
(keep things small)
loading
+
rendering
(keep things small)
(keep things smart)
loading
+
rendering
(keep things small)
(keep things smooth)
(keep things smart)
but wait
how do
websites?
'Cause I’m on the network
getting packets
Server’s sending me three-
hundred and five
♪♪♪
how do websites?
The bigger you send,
The harder you fall
Take it from me, girl,
You gotta start small
♪♪♪
how do websites?
We did everything right,
Bytes are on the client side
♪♪♪
how do websites?
Are you listening?
(Whoa-oh-oh-oh-oh)
Please come back.
(Whoa-oh-oh-oh-oh)
I’ll tell you what do I need
I’ll tell you what do I need
Whoa-oh, whoa-oh
♪♪♪
how do websites?
how do websites?
document
html
head body
divtitle
h1 p
“Kitties!” “Cats!”
how do websites?
document
html
head body
divtitle
h1 p
“Kitties!” “Cats!”
body
div
h1 p
font-size: 16px
font-size: 16px
font-weight: bold
font-size: 16px
color: blue
font-size: 16px
float: left
how do websites?
+
document
html
head body
divtitle
h1 p
“Kitties!” “Cats!”
body
div
h1 p
font-size: 16px
font-size: 16px
font-weight: bold
font-size: 16px
color: blue
font-size: 16px
float: left
=
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
The page was still young
When I first saw you
♪♪♪
Well, I'm gonna paint my picture
Paint myself in blue and red and
green and… a
All of the beautiful pixels
are very, very meaningful
♪♪♪
Whoa, oh, oh, oh, oh
Whoa, oh, oh, oh,
DOM’s interactive
DOM’s interactive
♪♪♪
keep
things
small
Harder, Better,
Faster, Smaller
♪♪♪
keep things small
minify your html, css, and js
Got some files to send over
And their length’s insane
Remove the whitespace, baby
It’ll up your game
♪♪♪
keep things small
var array = [];
for (var i = 0; i < 20; i++) {
array[i] = i;
}
https://en.wikipedia.org/wiki/Minification_(programming)
keep things small
minify your html, css, and js
for(var a=[i=0];++i<20;a[i]=i);
https://en.wikipedia.org/wiki/Minification_(programming)
keep things small
minify your html, css, and js
compress your html, css, and js
Shrink it down,
gzip it
(Don’t reverse it…)
♪♪♪
keep things small
optimize your images
All the small things
What speed this brings!
♪♪♪
keep things small
optimize your images
The picture is far too
big to look at kid
Your screen’s just not
wide enough
♪♪♪
keep things small
optimize your images
keep things small
<img srcset="miso-320w.jpg 320w,
miso-480w.jpg 480w,
miso-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="miso-800w.jpg"
alt="Miso, a big, red cat">
optimize your images
keep things small
<picture>
<source
media="(max-width: 799px)"
srcset="miso-480w-close-portrait.jpg">
<source
media="(min-width: 800px)"
srcset="miso-800w.jpg">
<img
src="miso-800w.jpg"
alt="Miso, a big red cat">
</picture>
caching
Guess they had to change that code
Updated that file
Which then changed its number
So I need the new stuff though
Now it’s just some page
That I used to know
♪♪♪
keep things small
caching
Pull it down, I'm yelling timber
Unless it moves or gets enhanced
This data, I’m told to remember
Until it tells me to forget
♪♪♪
keep things small
only include *necessary* files
Well I know that
I'll get through this
'Cause I know that I am smart
I don't need you anymore
I don't need you anymore
I don't need you anymore
No I don't need you anymore…
♪♪♪
keep things small
only include *necessary* files
Shake it, shake it, shake it,
Shake it, shake it, shake it,
Shake it, shake it, shake it
Shake it like a JavaScript bundle
Hey ya!
♪♪♪
keep things small
optimize fonts
Baby I don't need fancy glyphs
To have a good site
(Yay system fonts!)
♪♪♪
keep things small
put your assets in a cdn
keep things small
I feel so close to you right now
♪♪♪
keep
things
smart
concatenate your css and js
Come together, right now
Up the speed
♪♪♪
keep things smart
use image sprites and icon fonts
Yeah, it's always better
When they’re together
♪♪♪
keep things smart
make js non-blocking
Scripts go at the bottom
Not up here
Scripts go at the bottom
So the whole page freakin’ here
♪♪♪
keep things smart
make js non-blocking
So I don’t take the fall
Of a document.write call
When I see you, everything stops
Never put JS on top
♪♪♪
keep things smart
keep things smart
make js non-blocking
We can’t stop…
♪♪♪
make js non-blocking
And we won’t stop…
♪♪♪
keep things smart
make js non-blocking
But yeah does it feel so good
'Cause I get scripts when
I want them now
And if you could
then you know you would
'Cause yeah it just feels so
It just feels so good
♪♪♪
keep things smart
put css at the top
In your <head>
In your <head>
Stylesheet, stylesheet,
eet, eet, eet
♪♪♪
keep things smart
put css at the top
Critical styles inlined
To make this page load streamlined
♪♪♪
keep things smart
How you gonna upgrade me?
What's higher than
One point one?
♪♪♪
keep things smart
use http/2
Want you to make me feel
Like I'm the only
TCP connection in the world
♪♪♪
keep things smart
use http/2
These are my compressions
♪♪♪
keep things smart
use http/2
Ah, push it
Push it good
Ah, push it
Push it real good
♪♪♪
keep things smart
use http/2
keep
things
smooth
keep things smooth
You got the kind of scrollin’
That can be so ~smooth~, yeah
Get rid of jank, make it real
Or else forget about it
♪♪♪
how do websites, pt 2
+
document
html
head body
divtitle
h1 p
“Kitties!” “Cats!”
body
div
h1 p
font-size: 16px
font-size: 16px
font-weight: bold
font-size: 16px
color: blue
font-size: 16px
float: left
=
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
how do websites, pt 2
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
Cause the render’s gonna…
rend, rend, rend?
♪♪♪
how do websites, pt 2
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
And the painter’s gonna
paint, paint, paint…
♪♪♪
how do websites, pt 2
RenderView
Scroll
Block
Block
Block
Block Block
Text Text
And the compositor’s gonna
composite, composite,
composite…
♪♪♪
how do websites, pt 2
Do it alllll agaaaain
♪♪♪
how do websites, pt 2
Layout Painting Compositing
this. sick. feat.
♪♪♪
how do websites, pt 2
Loop loop ba-doop loop ba-doop
Loop ba-doop ba-doop
Ba-doop loop ba-doop loop
Ba-doop loop ba-doop, ba-doop,
ba-doop
♪♪♪
Here’s to never ending circles
And building them on top of me
And here's to another no, man
You won’t get a render
You won’t get a render
♪♪♪
how do websites, pt 2
use requestAnimationFrame
keep things smooth
Debounce bounce bounce
bounce bounce bounce
bounce bounce bounce
bounce
♪♪♪
use requestAnimationFrame
keep things smooth
use requestAnimationFrame
keep things smooth
Baby, I'm not always
There when you call,
But I'm always on time
And I gave you my all,
Now baby, be mine
♪♪♪
use web workers
keep things smooth
Give it away
Give it away
Give it away
Give it away now
♪♪♪
use web workers
keep things smooth
When what you have
Will take too long
Move along, move along
Like I know you do
♪♪♪
animate with transform + opacity
keep things smooth
I, I, I, I, I, I
Know how to transform
I transform, I transform
I'm a transformer
I, I, I, I, I, I
Know how to transform
I transform (I can do it!)
I'll transform (I can do it!)
I'm a transformer
♪♪♪
animate with transform + opacity
keep things smooth
Layout Painting Compositing
animate with transform + opacity
keep things smooth
.moving-element {
will-change: transform;
}
use a css methodology
keep things smooth
CSS, take it easy
For there is something
that we can do.
CSS, take it easy
BEM it on me
Or BEM it on you.
♪♪♪
use a css methodology
keep things smooth
.box:nth-last-child(-n+1) .title {
  /* styles */
}
https://developers.google.com/web/fundamentals/performance/rendering/
reduce-the-scope-and-complexity-of-style-calculations
use a css methodology
keep things smooth
.Box_title--special {
  /* styles */
}
https://developers.google.com/web/fundamentals/performance/rendering/
reduce-the-scope-and-complexity-of-style-calculations
always
measure
first
always measure first
synthetic measurements
Is someone getting the test,
the test, the test,
the test of you?
♪♪♪
always measure first
real user measurements
Ain’t it fun
Timing in the real world
Ain’t it good
Testing in their Chrome
♪♪♪
seriously,
always
measure
first
keep things
small, keep
things smart,
keep things
smooth
•Front-End Performance Checklist 2018
•Optimizing the Critical Rendering Path
•Rendering Performance
•Philip Roberts: What the heck is the event loop
anyway?
•window.requestAnimationFrame()
•Using Web Workers
•Assessing Loading Performance in Real Life with
Navigation and Resource Timing
•High Performance Browser Networking
•Server Farm to Table, Annotated
Resources
Lil' Mama - Lip Gloss
Alanis Morissette – Hand in My Pocket
The Supremes & The Four Tops - The Bigger You Love, The Harder You Fall
Calvin Harris ft. Ellie Goulding - Outside
Jimmy Eat World - Sweetness
Taylor Swift - Love Story
Counting Crows - Mr. Jones
Imagine Dragons - Radioactive
Daft Punk – Harder, Better, Faster, Stronger
Taylor Swift - Blank Space
Missy Elliot - Work It
Blink 182 - All The Small Things
Bright Eyes - The Big Picture
Gotye - Somebody That I Used To Know
Pitbull ft. Ke$ha - Timber
Cher - Believe
OutKast - Hey Ya
Sia - Cheap Thrills
Calvin Harris - Feel So Close
The Beatles - Come Together
Jack Johnson - Better Together
Drake - Started from the Bottom
Complete Tracklist
Beyoncé - Love on Top
Miley Cyrus - We Can’t Stop
Paramore - Misery Business
The Cranberries - Zombie
Taking Back Sunday - Cute Without the E
Beyoncé - Upgrade U
Rihanna - Only Girl in the World
Usher - Confessions Part II
Salt-N-Pepa - Push It
Santana ft. Rob Thomas - Smooth
Taylor Swift - Shake it Off
Katy Perry - Last Friday Night (T.G.I.F)
Salt-N-Pepa - Shoop
CHVRCHES - Never Ending Circles
R. Kelly - Ignition
Ja Rule ft. Ashanti - On Time
Red Hot Chili Peppers - Give it Away
The All-American Rejects - Move Along
Gnarls Barkley - Transformer
Mika - Relax, Take it Easy
Foo Fighters - The Best of You
Paramore - Ain't it Fun
Complete Tracklist
*something witty
about a POP
server…*
Thanks!
jenna.is/at-qconsf
@zeigenvector
💙 🐳
🚀
✨
🌻🐝
⚡
😻 🔥
🌟
🍉
🍕 💖
🐢
🐘
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
front-end-performance-optimization

More Related Content

Similar to Fantastic Front-End Performance Tricks & Why We Do Them

DevOps Army of N - Recovering From Being A Human SPOF
DevOps Army of N - Recovering From Being A Human SPOFDevOps Army of N - Recovering From Being A Human SPOF
DevOps Army of N - Recovering From Being A Human SPOF
funjon
 
The Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators Edition
Dave Olsen
 
WebProgrammingTutorial
WebProgrammingTutorialWebProgrammingTutorial
WebProgrammingTutorial
Jacob Johnson
 
Website Redesign: Less Hassle, More Happy
Website Redesign: Less Hassle, More HappyWebsite Redesign: Less Hassle, More Happy
Website Redesign: Less Hassle, More Happy
Sisarina
 

Similar to Fantastic Front-End Performance Tricks & Why We Do Them (20)

chatgpt dalle.pptx
chatgpt dalle.pptxchatgpt dalle.pptx
chatgpt dalle.pptx
 
DevOps Army of N - Recovering From Being A Human SPOF
DevOps Army of N - Recovering From Being A Human SPOFDevOps Army of N - Recovering From Being A Human SPOF
DevOps Army of N - Recovering From Being A Human SPOF
 
Blog or bucket?
Blog or bucket?Blog or bucket?
Blog or bucket?
 
A blog or a bucket?
A blog or a bucket?A blog or a bucket?
A blog or a bucket?
 
The Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators Edition
 
Keywords and beyond
Keywords and beyondKeywords and beyond
Keywords and beyond
 
How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cin...
How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cin...How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cin...
How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cin...
 
WebProgrammingTutorial
WebProgrammingTutorialWebProgrammingTutorial
WebProgrammingTutorial
 
Wait what? How to Enhance your Responsive Process with Content Questions
Wait what? How to Enhance your Responsive Process with Content QuestionsWait what? How to Enhance your Responsive Process with Content Questions
Wait what? How to Enhance your Responsive Process with Content Questions
 
Website Redesign: Less Hassle, More Happy
Website Redesign: Less Hassle, More HappyWebsite Redesign: Less Hassle, More Happy
Website Redesign: Less Hassle, More Happy
 
Free Range Content: Unlock Your Content to Increase Your Reach
Free Range Content: Unlock Your Content to Increase Your ReachFree Range Content: Unlock Your Content to Increase Your Reach
Free Range Content: Unlock Your Content to Increase Your Reach
 
Responsive Discovery: The underpants of a great web project
Responsive Discovery: The underpants of a great web project Responsive Discovery: The underpants of a great web project
Responsive Discovery: The underpants of a great web project
 
Presentation document
Presentation document Presentation document
Presentation document
 
Beyond the Standards
Beyond the StandardsBeyond the Standards
Beyond the Standards
 
Terri Karp 2010 03 23 V2
Terri Karp 2010 03 23 V2Terri Karp 2010 03 23 V2
Terri Karp 2010 03 23 V2
 
Championing accessibility
Championing accessibilityChampioning accessibility
Championing accessibility
 
Lecture 1
Lecture 1Lecture 1
Lecture 1
 
27_07_Landing Pages_Gilles de Clerck_EIA Porto 2022.pdf
27_07_Landing Pages_Gilles de Clerck_EIA Porto 2022.pdf27_07_Landing Pages_Gilles de Clerck_EIA Porto 2022.pdf
27_07_Landing Pages_Gilles de Clerck_EIA Porto 2022.pdf
 
Powerpoint
PowerpointPowerpoint
Powerpoint
 
Using Wikis In The Classroom 2009
Using Wikis In The Classroom 2009Using Wikis In The Classroom 2009
Using Wikis In The Classroom 2009
 

More from C4Media

More from C4Media (20)

Streaming a Million Likes/Second: Real-Time Interactions on Live Video
Streaming a Million Likes/Second: Real-Time Interactions on Live VideoStreaming a Million Likes/Second: Real-Time Interactions on Live Video
Streaming a Million Likes/Second: Real-Time Interactions on Live Video
 
Next Generation Client APIs in Envoy Mobile
Next Generation Client APIs in Envoy MobileNext Generation Client APIs in Envoy Mobile
Next Generation Client APIs in Envoy Mobile
 
Software Teams and Teamwork Trends Report Q1 2020
Software Teams and Teamwork Trends Report Q1 2020Software Teams and Teamwork Trends Report Q1 2020
Software Teams and Teamwork Trends Report Q1 2020
 
Understand the Trade-offs Using Compilers for Java Applications
Understand the Trade-offs Using Compilers for Java ApplicationsUnderstand the Trade-offs Using Compilers for Java Applications
Understand the Trade-offs Using Compilers for Java Applications
 
Kafka Needs No Keeper
Kafka Needs No KeeperKafka Needs No Keeper
Kafka Needs No Keeper
 
High Performing Teams Act Like Owners
High Performing Teams Act Like OwnersHigh Performing Teams Act Like Owners
High Performing Teams Act Like Owners
 
Does Java Need Inline Types? What Project Valhalla Can Bring to Java
Does Java Need Inline Types? What Project Valhalla Can Bring to JavaDoes Java Need Inline Types? What Project Valhalla Can Bring to Java
Does Java Need Inline Types? What Project Valhalla Can Bring to Java
 
Service Meshes- The Ultimate Guide
Service Meshes- The Ultimate GuideService Meshes- The Ultimate Guide
Service Meshes- The Ultimate Guide
 
Shifting Left with Cloud Native CI/CD
Shifting Left with Cloud Native CI/CDShifting Left with Cloud Native CI/CD
Shifting Left with Cloud Native CI/CD
 
CI/CD for Machine Learning
CI/CD for Machine LearningCI/CD for Machine Learning
CI/CD for Machine Learning
 
Fault Tolerance at Speed
Fault Tolerance at SpeedFault Tolerance at Speed
Fault Tolerance at Speed
 
Architectures That Scale Deep - Regaining Control in Deep Systems
Architectures That Scale Deep - Regaining Control in Deep SystemsArchitectures That Scale Deep - Regaining Control in Deep Systems
Architectures That Scale Deep - Regaining Control in Deep Systems
 
ML in the Browser: Interactive Experiences with Tensorflow.js
ML in the Browser: Interactive Experiences with Tensorflow.jsML in the Browser: Interactive Experiences with Tensorflow.js
ML in the Browser: Interactive Experiences with Tensorflow.js
 
Build Your Own WebAssembly Compiler
Build Your Own WebAssembly CompilerBuild Your Own WebAssembly Compiler
Build Your Own WebAssembly Compiler
 
User & Device Identity for Microservices @ Netflix Scale
User & Device Identity for Microservices @ Netflix ScaleUser & Device Identity for Microservices @ Netflix Scale
User & Device Identity for Microservices @ Netflix Scale
 
Scaling Patterns for Netflix's Edge
Scaling Patterns for Netflix's EdgeScaling Patterns for Netflix's Edge
Scaling Patterns for Netflix's Edge
 
Make Your Electron App Feel at Home Everywhere
Make Your Electron App Feel at Home EverywhereMake Your Electron App Feel at Home Everywhere
Make Your Electron App Feel at Home Everywhere
 
The Talk You've Been Await-ing For
The Talk You've Been Await-ing ForThe Talk You've Been Await-ing For
The Talk You've Been Await-ing For
 
Future of Data Engineering
Future of Data EngineeringFuture of Data Engineering
Future of Data Engineering
 
Automated Testing for Terraform, Docker, Packer, Kubernetes, and More
Automated Testing for Terraform, Docker, Packer, Kubernetes, and MoreAutomated Testing for Terraform, Docker, Packer, Kubernetes, and More
Automated Testing for Terraform, Docker, Packer, Kubernetes, and More
 

Recently uploaded

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
Muhammad Subhan
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 

Recently uploaded (20)

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 

Fantastic Front-End Performance Tricks & Why We Do Them

  • 1. *fantastic* frontend performance tricks and why we do them Jenna Zeigen QCon SF 11/5/18 whee!
  • 2. InfoQ.com: News & Community Site • Over 1,000,000 software developers, architects and CTOs read the site world- wide every month • 250,000 senior developers subscribe to our weekly newsletter • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • 2 dedicated podcast channels: The InfoQ Podcast, with a focus on Architecture and The Engineering Culture Podcast, with a focus on building • 96 deep dives on innovative topics packed as downloadable emags and minibooks • Over 40 new content items per week Watch the video with slide synchronization on InfoQ.com! https://www.infoq.com/presentations/ front-end-performance-optimization
  • 3. Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide Presented at QCon San Francisco www.qconsf.com
  • 5. Senior Frontend Engineer at Slack Organizer of EmpireJS Organizer of BrooklynJS
  • 6. Whatchu know 'bout FE? Whatchu, whatchu know 'bout FE? Whatchu know 'bout FE? Whatchu, whatchu know? ♪♪♪
  • 7.
  • 11. loading + rendering (keep things small) (keep things smooth) (keep things smart)
  • 13. 'Cause I’m on the network getting packets Server’s sending me three- hundred and five ♪♪♪ how do websites?
  • 14. The bigger you send, The harder you fall Take it from me, girl, You gotta start small ♪♪♪ how do websites?
  • 15. We did everything right, Bytes are on the client side ♪♪♪ how do websites?
  • 16. Are you listening? (Whoa-oh-oh-oh-oh) Please come back. (Whoa-oh-oh-oh-oh) I’ll tell you what do I need I’ll tell you what do I need Whoa-oh, whoa-oh ♪♪♪ how do websites?
  • 17. how do websites? document html head body divtitle h1 p “Kitties!” “Cats!”
  • 18. how do websites? document html head body divtitle h1 p “Kitties!” “Cats!” body div h1 p font-size: 16px font-size: 16px font-weight: bold font-size: 16px color: blue font-size: 16px float: left
  • 19. how do websites? + document html head body divtitle h1 p “Kitties!” “Cats!” body div h1 p font-size: 16px font-size: 16px font-weight: bold font-size: 16px color: blue font-size: 16px float: left = RenderView Scroll Block Block Block Block Block Text Text
  • 20. The page was still young When I first saw you ♪♪♪
  • 21. Well, I'm gonna paint my picture Paint myself in blue and red and green and… a All of the beautiful pixels are very, very meaningful ♪♪♪
  • 22. Whoa, oh, oh, oh, oh Whoa, oh, oh, oh, DOM’s interactive DOM’s interactive ♪♪♪
  • 25. minify your html, css, and js Got some files to send over And their length’s insane Remove the whitespace, baby It’ll up your game ♪♪♪ keep things small
  • 26. var array = []; for (var i = 0; i < 20; i++) { array[i] = i; } https://en.wikipedia.org/wiki/Minification_(programming) keep things small minify your html, css, and js
  • 28. compress your html, css, and js Shrink it down, gzip it (Don’t reverse it…) ♪♪♪ keep things small
  • 29. optimize your images All the small things What speed this brings! ♪♪♪ keep things small
  • 30. optimize your images The picture is far too big to look at kid Your screen’s just not wide enough ♪♪♪ keep things small
  • 31. optimize your images keep things small <img srcset="miso-320w.jpg 320w, miso-480w.jpg 480w, miso-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="miso-800w.jpg" alt="Miso, a big, red cat">
  • 32. optimize your images keep things small <picture> <source media="(max-width: 799px)" srcset="miso-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="miso-800w.jpg"> <img src="miso-800w.jpg" alt="Miso, a big red cat"> </picture>
  • 33. caching Guess they had to change that code Updated that file Which then changed its number So I need the new stuff though Now it’s just some page That I used to know ♪♪♪ keep things small
  • 34. caching Pull it down, I'm yelling timber Unless it moves or gets enhanced This data, I’m told to remember Until it tells me to forget ♪♪♪ keep things small
  • 35. only include *necessary* files Well I know that I'll get through this 'Cause I know that I am smart I don't need you anymore I don't need you anymore I don't need you anymore No I don't need you anymore… ♪♪♪ keep things small
  • 36. only include *necessary* files Shake it, shake it, shake it, Shake it, shake it, shake it, Shake it, shake it, shake it Shake it like a JavaScript bundle Hey ya! ♪♪♪ keep things small
  • 37. optimize fonts Baby I don't need fancy glyphs To have a good site (Yay system fonts!) ♪♪♪ keep things small
  • 38. put your assets in a cdn keep things small I feel so close to you right now ♪♪♪
  • 40. concatenate your css and js Come together, right now Up the speed ♪♪♪ keep things smart
  • 41. use image sprites and icon fonts Yeah, it's always better When they’re together ♪♪♪ keep things smart
  • 42. make js non-blocking Scripts go at the bottom Not up here Scripts go at the bottom So the whole page freakin’ here ♪♪♪ keep things smart
  • 43. make js non-blocking So I don’t take the fall Of a document.write call When I see you, everything stops Never put JS on top ♪♪♪ keep things smart
  • 44. keep things smart make js non-blocking We can’t stop… ♪♪♪
  • 45. make js non-blocking And we won’t stop… ♪♪♪ keep things smart
  • 46. make js non-blocking But yeah does it feel so good 'Cause I get scripts when I want them now And if you could then you know you would 'Cause yeah it just feels so It just feels so good ♪♪♪ keep things smart
  • 47. put css at the top In your <head> In your <head> Stylesheet, stylesheet, eet, eet, eet ♪♪♪ keep things smart
  • 48. put css at the top Critical styles inlined To make this page load streamlined ♪♪♪ keep things smart
  • 49. How you gonna upgrade me? What's higher than One point one? ♪♪♪ keep things smart use http/2
  • 50. Want you to make me feel Like I'm the only TCP connection in the world ♪♪♪ keep things smart use http/2
  • 51. These are my compressions ♪♪♪ keep things smart use http/2
  • 52. Ah, push it Push it good Ah, push it Push it real good ♪♪♪ keep things smart use http/2
  • 54. keep things smooth You got the kind of scrollin’ That can be so ~smooth~, yeah Get rid of jank, make it real Or else forget about it ♪♪♪
  • 55. how do websites, pt 2 + document html head body divtitle h1 p “Kitties!” “Cats!” body div h1 p font-size: 16px font-size: 16px font-weight: bold font-size: 16px color: blue font-size: 16px float: left = RenderView Scroll Block Block Block Block Block Text Text
  • 56. how do websites, pt 2 RenderView Scroll Block Block Block Block Block Text Text Cause the render’s gonna… rend, rend, rend? ♪♪♪
  • 57. how do websites, pt 2 RenderView Scroll Block Block Block Block Block Text Text And the painter’s gonna paint, paint, paint… ♪♪♪
  • 58. how do websites, pt 2 RenderView Scroll Block Block Block Block Block Text Text And the compositor’s gonna composite, composite, composite… ♪♪♪
  • 59. how do websites, pt 2 Do it alllll agaaaain ♪♪♪
  • 60. how do websites, pt 2 Layout Painting Compositing this. sick. feat. ♪♪♪
  • 61. how do websites, pt 2 Loop loop ba-doop loop ba-doop Loop ba-doop ba-doop Ba-doop loop ba-doop loop Ba-doop loop ba-doop, ba-doop, ba-doop ♪♪♪
  • 62. Here’s to never ending circles And building them on top of me And here's to another no, man You won’t get a render You won’t get a render ♪♪♪ how do websites, pt 2
  • 63. use requestAnimationFrame keep things smooth Debounce bounce bounce bounce bounce bounce bounce bounce bounce bounce ♪♪♪
  • 65. use requestAnimationFrame keep things smooth Baby, I'm not always There when you call, But I'm always on time And I gave you my all, Now baby, be mine ♪♪♪
  • 66. use web workers keep things smooth Give it away Give it away Give it away Give it away now ♪♪♪
  • 67. use web workers keep things smooth When what you have Will take too long Move along, move along Like I know you do ♪♪♪
  • 68. animate with transform + opacity keep things smooth I, I, I, I, I, I Know how to transform I transform, I transform I'm a transformer I, I, I, I, I, I Know how to transform I transform (I can do it!) I'll transform (I can do it!) I'm a transformer ♪♪♪
  • 69. animate with transform + opacity keep things smooth Layout Painting Compositing
  • 70. animate with transform + opacity keep things smooth .moving-element { will-change: transform; }
  • 71. use a css methodology keep things smooth CSS, take it easy For there is something that we can do. CSS, take it easy BEM it on me Or BEM it on you. ♪♪♪
  • 72. use a css methodology keep things smooth .box:nth-last-child(-n+1) .title {   /* styles */ } https://developers.google.com/web/fundamentals/performance/rendering/ reduce-the-scope-and-complexity-of-style-calculations
  • 73. use a css methodology keep things smooth .Box_title--special {   /* styles */ } https://developers.google.com/web/fundamentals/performance/rendering/ reduce-the-scope-and-complexity-of-style-calculations
  • 75. always measure first synthetic measurements Is someone getting the test, the test, the test, the test of you? ♪♪♪
  • 76. always measure first real user measurements Ain’t it fun Timing in the real world Ain’t it good Testing in their Chrome ♪♪♪
  • 78. keep things small, keep things smart, keep things smooth
  • 79. •Front-End Performance Checklist 2018 •Optimizing the Critical Rendering Path •Rendering Performance •Philip Roberts: What the heck is the event loop anyway? •window.requestAnimationFrame() •Using Web Workers •Assessing Loading Performance in Real Life with Navigation and Resource Timing •High Performance Browser Networking •Server Farm to Table, Annotated Resources
  • 80. Lil' Mama - Lip Gloss Alanis Morissette – Hand in My Pocket The Supremes & The Four Tops - The Bigger You Love, The Harder You Fall Calvin Harris ft. Ellie Goulding - Outside Jimmy Eat World - Sweetness Taylor Swift - Love Story Counting Crows - Mr. Jones Imagine Dragons - Radioactive Daft Punk – Harder, Better, Faster, Stronger Taylor Swift - Blank Space Missy Elliot - Work It Blink 182 - All The Small Things Bright Eyes - The Big Picture Gotye - Somebody That I Used To Know Pitbull ft. Ke$ha - Timber Cher - Believe OutKast - Hey Ya Sia - Cheap Thrills Calvin Harris - Feel So Close The Beatles - Come Together Jack Johnson - Better Together Drake - Started from the Bottom Complete Tracklist
  • 81. Beyoncé - Love on Top Miley Cyrus - We Can’t Stop Paramore - Misery Business The Cranberries - Zombie Taking Back Sunday - Cute Without the E Beyoncé - Upgrade U Rihanna - Only Girl in the World Usher - Confessions Part II Salt-N-Pepa - Push It Santana ft. Rob Thomas - Smooth Taylor Swift - Shake it Off Katy Perry - Last Friday Night (T.G.I.F) Salt-N-Pepa - Shoop CHVRCHES - Never Ending Circles R. Kelly - Ignition Ja Rule ft. Ashanti - On Time Red Hot Chili Peppers - Give it Away The All-American Rejects - Move Along Gnarls Barkley - Transformer Mika - Relax, Take it Easy Foo Fighters - The Best of You Paramore - Ain't it Fun Complete Tracklist *something witty about a POP server…*
  • 83. Watch the video with slide synchronization on InfoQ.com! https://www.infoq.com/presentations/ front-end-performance-optimization