Web Performance - Jorge Ferreiro - Twitter London Js Roundabout

@JGFERREIRO / #TWITTERPerf WEB PERFORMANCE EXPECTATIONS VS REALITY Twitter London
- April 2th 2019

@JGFERREIRO @JGFERREIRO #twitterPerf 53% >3 seconds Google: 53% of mobile
users abandon sites that take over 3 seconds to load

@JGFERREIRO @JGFERREIRO #twitterPerf

@JGFERREIRO #TwitterPerf Frontend Eng @Eventbrite  Past Backend @Amazon Host @devsInDepth
and 360 Writer and #hamilton fan Jorge Ferreiro

Madrid Twitter HQ

@JGFERREIRO @JGFERREIRO #TwitterPerf R&D - Madrid

@JGFERREIRO @JGFERREIRO #TwitterPerf

@JGFERREIRO @JGFERREIRO #TwitterPerf What are you gonna learn today? •
My expectations Vs Reality • Tools. • How does the browser work? • 7 Lessons learned • Gift!!

@JGFERREIRO @JGFERREIRO #TwitterPerf #TwitterPerf

@JGFERREIRO @JGFERREIRO My expectations vs the Reality. 1.

@JGFERREIRO #TwitterPerf Just Google “7 Tips to improve my website”
and all problems solved!!!

@JGFERREIRO #TwitterPerf

Critical path!

@JGFERREIRO #TwitterPerf Web Performance is ALL about measuring, and understanding
your business needs Takeaway + Reality

@JGFERREIRO @JGFERREIRO THINK. MEASURE. COMPARE. REPEAT. 1. @JGFERREIRO #twitterPerf

@JGFERREIRO @JGFERREIRO Web Performance Tools 2.

Page Insights by Google

Google Audits

Node perf_hooks  (also works in Chrome!)

const {performance} = require('perf_hooks'); perfomance.mark(‘start’); // NB: Here you put
all the different // operations you want to measure. perfomance.mark(‘end'); perfomance.measure('My operations name', 'start', 'end') Node perf_hooks $ node perfomance_test.js $ node —-trace-opt perfomance_test.js $ node —-trace-opt —-trace-deopt perfomance_test.js

@JGFERREIRO @JGFERREIRO How does the browser work?  Desmystifying the magic
3.

@JGFERREIRO @JGFERREIRO Get HTML from the Server 1. www.myWebsite.com

@JGFERREIRO @JGFERREIRO HTML transformation 2.

Speed up web performance <html> <head> <title>Hello :)</title> <meta charset="UTF-8">
<link rel="stylesheet" </head> <body> <p>Hello, <span>web perf <div> <img src="" /> </div> </body> </html> Photo credit: Render-tree Construction, Layout, and Paint @JGFERREIRO Document Object Model (DOM)

@JGFERREIRO @JGFERREIRO CSS Transformation 3.

body { font-size: 16px; } p { font-weight: bold; }
span { color: red; } p span { display: none; } img { float: right; } Speed up web performance Photo credit: Render-tree Construction, Layout, and Paint @JGFERREIRO CSS Object Model (CSSOM)

@JGFERREIRO @JGFERREIRO Generating the Render Tree 4.

@JGFERREIRO @JGFERREIRO #twitterPerf DOM + CSSDOM = Render Tree

Photo credit: Render-tree Construction, Layout, and Paint

@JGFERREIRO @JGFERREIRO Painting! 5.

@JGFERREIRO @JGFERREIRO #TwitterPerf 1. Network request 2. Parsing 3. Rendering
3 key concepts

Parsing is SUPER time consuming Parsing + Compiling

@JGFERREIRO #TwitterPerf Takeaway Shipping less code reduces the time for
parsing, compiling, and executing the code

@JGFERREIRO @JGFERREIRO 6 Lessons Learned 4.

@JGFERREIRO #TwitterPerf There is no Silver Bullet for web performance.
Disclaimer and biggest lesson learned

@JGFERREIRO #TwitterPerf Don’t do a premature optimization… Find your real
business needs Takeaway

Empathy with your users 1.

@JGFERREIRO @JGFERREIRO #TwitterPerf SLOW access to Internet (Developing countries) Expensive
internet fares. Cheap phones/COMPUTERS

@JGFERREIRO #TwitterPerf Code for everybody and have a team culture
of testing in multiple devices and simulate bad internet access

Don’t overwork!  Load when you need 2.

Lazy loading!

@JGFERREIRO @JGFERREIRO #TwitterPerf Not only lazy loading images…

3. Modern images formats WebP (no PNG), JPG2000…

@JGFERREIRO #TwitterPerf Images are one of the main reasons why
your website takes more time to print. Takeaway

@JGFERREIRO @JGFERREIRO #TwitterPerf JPEG2000, WebP, JPEG XR

<picture> <source srcset="img/pic.webp" type="image/webp"> <source srcset="img/pic.jpg" type="image/jpeg"> <img src="img/pic.jpg" alt="Alt
Text!"> </picture> Speed up web performance https://css-tricks.com/using-webp-images/

Be careful with infinite lists… 4.

@JGFERREIRO @JGFERREIRO #TwitterPerf Messages project. My first React App :P
https://github.com/ferreiro/messages

import InfiniteCardList from ‘../components/InfiniteCardList' const isInfiniteScrollActivated = false; // State.
User Settings const onAddMessage = (message) => { /* Logic. */ }; const onRemoveMessage = (message) => { /* Logic. */ }; const onFavoriteMessage = (message) => { /* Logic. */ }; <InfiniteCardList loadLimit={20} messages={[]} isInfiniteScrollActivated={isInfiniteScrollActivated} onAddMessage={onAddMessage} onRemoveMessage={onRemoveMessage} onFavoriteMessage={onFavoriteMessage} /> Inﬁnite Scrolling React bit.ly/ferreiro-scroll

@JGFERREIRO #TwitterPerf Infinite lists are greedy. Be careful with them!

Simplify your code. Write less… 5.

@JGFERREIRO #TwitterPerf The less you write, the faster the parser
will finish. Remove unnecessary dependencies and code. Takeaway

@JGFERREIRO @JGFERREIRO #TwitterPerf div:nth-of-type(3) ul:last-child li:nth-of-type(odd)*{ font-weight:bold } CSS Shorter
Selectors, fast loading. Avoid THIS…!

@JGFERREIRO #TwitterPerf The shorter your CSS selectors, the faster the
browser will apply the styles Takeaway

Take a coffee with Backend folks… 6.

@JGFERREIRO @JGFERREIRO #TwitterPerf Cache on the Backend FERREIRO.me/GO/DAILYFOCUS

@JGFERREIRO @JGFERREIRO #TwitterPerf Quick Recap 1. Measure. Compare. Take action
2. Don’t prematurely optimize. 3. Less code = better! 4. Be empathic with your customers

@JGFERREIRO @JGFERREIRO #TwitterPerf Resources 1. Addy Osmani's 18-Point Web Performance
Checklist 2. http://ferreiro.me/go/perfomance 3. Frontend masters web perfomance. 4. https://developers.google.com/web/ updates/2016/07/inﬁnite-scroller

@JGFERREIRO @JGFERREIRO Concatenate and group CSS and JavaScript files Minify
your production assets Optimize and compress your images Image sprites Load your CSS styles and JavaScript asynchronously Use SVG whenever you can Revisit dependencies + ferreiro.me/go/perfomance

@JGFERREIRO @JGFERREIRO THINK. MEASURE. COMPARE. REPEAT. 1. @JGFERREIRO #twitterPerf

@JGFERREIRO - [email protected] Thanks! Questions?

Web Performance - Jorge Ferreiro - Twitter Lond...

Web Performance - Jorge Ferreiro - Twitter London Js Roundabout

More Decks by Jorge Ferreiro

Other Decks in Programming

Featured

Transcript