The Cost of Javascript
Kalil de Lima
The Montevideo JavaScript Meetup
Based on "The cost of Javascript at 2019" by Addy Osmani
kalil@rootstrap.com
github.com/kaozdl
Why is my SITE Slow?
Main Offenders
- Bad Code
- Slow CPU
- Slow Internet
We CAN ONLY FIX The First ONE
And IN The meantime Work arround the REST
Let's See some Quick Stats
But This IS NoT A Problem FOR OUR CLIENTS RIGHT?
ACTUALLY IT IS
Javascript is the most Expensive Part of our Sites
-
Not CSS
-
NOT IMAGES
-
NOT FONTS
TIME TO INTERACT (TTI)
AN AVERAGE WEBSITE SHIPS AROUND 360KB of JAVASCRIPT
-
CNN 2.6 MB
-
Youtube 1.1 MB
-
GOOGLE DOcs 2.3 MB
-
FAcebook 6.0 MB
-
LinkeDIN 7.2 MB
THE CONTENTS OF THE AVERAGE JS BUNDLE
WHat happens while we load a site?
MAIN THREAD PARSE/COMPILE
MAIN THREAD PARSE/COMPILE
HOW TO MITIGATE THIS?
-
REDUCING HOW MUCH JS iS BEING SHIPPED
-
SPLITTING LARGE BUNDLES INTO SMALLER CHUNKS
-
AVOIDING LARGE inline SCRIPTS
DOWNLOAD TIMES ARE CRITICAL FOR SLOW NETWORKS
JS EXECUTION TIME IS CRITICAL FOR PHONES WITH SLOW CPUS
COST OF JS DURING PAGE LOAD
HOW DO WE SPLIT OUR JAVASCRIPT?
Split by page
Split by route
Split by component
Split large bundles into smaller ones
Don'T ALLOW LARGE IMPORTS
DON'T USE A FRAMEWORK WHERE IS NOT NEEDED
MAKE PERFORMANCE PART OF THE CONVERSATION ON A DAILY BASIS
-
USE TTI AS A METRIC
-
PUT A GOAL ON BUNDLE SIZES
-
ADD RULES TO GUIDE OTHER PEOPLE IN WHAT TO IMPORT