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

ALWAYS TEST ON REAL PHONES WITH REAL NETWORKS

THANKS FOR LISTENING!