Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Rendering & Performance

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Drew Powers Drew Powers
February 28, 2018
58
0

Browser Rendering & Performance

Lunch & Learn (28 Feb 2018)
https://www.youtube.com/watch?v=l03FMI5PjS0

Avatar for Drew Powers

Drew Powers

February 28, 2018

More Decks by Drew Powers

See All by Drew Powers
Styling in React
Avatar for Drew Powers dangodev
0
51
Styling Systems in React
Avatar for Drew Powers dangodev
0
67
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
120
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
95
The Science of Font Selection
Avatar for Drew Powers dangodev
2
500

Featured

See All Featured
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
310
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
750
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
260
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
880
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
540
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.8k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k

Transcript

  1. BROWSER RENDERING AND PERFORM- ANCE BROWSER RENDERING AND PERFORM- ANCE

  2. None

  3. PREFACE:
 SHOUTS TO
 FIREFOX PREFACE: SHOUTS TO FIREFOX

  4. webpack.js.org

  5. 01. NETWORK
 TAB 01. NETWORK TAB

  6. dashboard.manifold.co Image Optimization

  7. 01. NETWORK TAB G O A L No cartoonishly large/slow

    requests, and images are reasonably-sized
  8. None

  9. 02. PERF TAB 02. PERF TAB

  10. dashboard.manifold.co* Addy Osmani: The Cost of JS * local dev

    Airbnb: React Performance Google: The RAIL model

  11. 02. PERF TAB G O A L Interactive in 2s,

    and each interaction takes 100ms

  12. 03.
 RENDER
 PANEL 03.
 RENDER PANEL

  13. Smashing Mag: Compositing 60FPS CSS Animations

  14. 03. RENDER PANEL G O A L Keep it at

    60FPS

  15. 04. ANIMATING 04.
 ANIMATING

  16. Material Design: Easing Nintendo Switch Loading

  17. 04. ANIMATING G O A L Find that sweet spot

    between “smooth” and “sluggish”

  18. NETWORK Identify large/slow requests PERF Interactive up front, interactive all

    the way through RENDERING Keeping it at 60FPS ANIMATING The user experiences everything; make it look good G O A L S

  19. TIME’S UP!