Thread by @joaocunha

⚡️ 1 RT = 1 Web Performance tip

🇺🇸 version!

1. 👀 @SpeedCurve is the best tool I know for creating and nurturing a culture of performance through monitoring. It gives you insights, points what the main performance issues are and even ranks your site against your competitors.

2. 🔡 Sometimes the best font-loading strategy is not loading any font: the so-called "System Font Stack".

iPhone = San Francisco
Android = Roboto
Linux = Ubuntu
Windows = Segoe UI

…and so on. Native experience to everyone!

3. Animations are a great resource to buy time while something is loading. This concept is called "Active Wait" and I tell more about it at my talk The Psychology of Performance (🇪🇸 skip to 15:30). Also, read more at @mishunov's excellent article: smashingmagazine.com/2015/09/why-pe…

4. 🗺 Use tools like @simonhearne's Request Map Generator to audit your site's 3rd-party scripts (analytics, ads, etc.): requestmap.webperf.tools

For example, this is Amazon's Request Map.

5. ♿️ Performance is also a tool for ethics and accessibility. We are privileged to access the Web through fast, often unlimited internet connections but this is the exception and not the rule. YouTube reached entire new populations went it became lighter: blog.chriszacharias.com/page-weight-ma…

6. Use Resource Hints to pre-load or "warm up" the background connection.

👀 dns-prefetch makes a DNS lookup
📦 prefetch loads an asset
🤝 preconnect makes the handshake
🖥 preload loads the entire destination page.

medium.com/reloading/prel…

7. 🧠 Shameless plug: you can follow my Web Performance Specialists list on Twitter to keep yourself up to date!

twitter.com/joaocunha/list…

8. 📏 With Size Limit you can find which libs are the big offenders when it comes to total JS bundle size. You can even run it on your CI pipeline to warn/err at a certain threshold: github.com/ai/size-limit

9. 🏹 Define and follow a Performance Budget. It may feel counterproductive when you start, but it will help defining what to add to and to remove from your stack in a clear way. Also, for 3rd-party scripts, it's glorious.

10. 📊 Get to know the main rendering performance metrics: FCP, FMP, TTI, FID and other acronyms are very important and must be followed closely.

speedcurve.com/blog/rendering…

(image by @addyosmani)

11. 🖼 100KB worth of JS may "weigh" up to 100x more than one 100KB image. While an image has to go through decode, rasterize and paint (fast processes), JS hat to be parsed, compiled and executed, which are way more expensive.

medium.com/@addyosmani/th…

(image by @addyosmani)

12. 📱 Still on JS, the processing time on an average phone (Moto G4) takes SIX TIMES LONGER than the one of an iPhone 8. On an entry-level phone (Alcatel 1X), it takes TWENTY ONE TIMES LONGER. Leave your bubble when testing usability.

medium.com/@addyosmani/th…

13. 🤓 Take your users into account while testing your product's performance prioritizing the most common user profiles. At Google Analytics:

Audience → Mobile → Devices

You'll see a list that looks like this one:

14. 🥳 Do you know what happens when you "like" a tweet? The visual response appears even before the API is reached (TRY HERE!). Work as if everything would work, eliminating intermediate states - this concept is called Optimistic UI.

smashingmagazine.com/2016/11/true-l…

15. 🛣 Follow the PRPL pattern:

👉 P: Push critical resources for the initial URL route.
👉 R: Render initial routes.
👉 P: Pre-cache remaining routes.
👉 L: Lazy-load and create new routes on-demand.

developers.google.com/web/fundamenta…

16. 🚂 Since it's all acronyms already, time to learn the RAIL performance model:

👉 R: Response (feedback in less than100ms)
👉 A: Animation (60fps = 16ms per frame)
👉 I: Idle (intermediate state, 50ms blocks)
👉 L: Load (FMP as fast as possible)

smashingmagazine.com/2015/10/rail-u…

17. 🌳 Use Tree Shaking to eliminate the application's dead code. All popular module bundlers (Webpack, Parcel, Rollup, etc) already offer this feature.

developers.google.com/web/fundamenta…

18. 🔗 Activate Scope Hoisting on Webpack. It will identify import chains that can be converted into an inline function without compromising the code.

medium.com/webpack/brief-…

19. 🔪 Code Split your bundle. The golden rule was to minify everything into a single JS file, but in reality it is far from ideal. Send what the user needs only when the users needs it. This is done through Dynamic Importing - check out this promise.

hackernoon.com/lessons-learne…

20. 🧹 In the same way you can use Tree Shaking on JS, you can also use tools like UnCSS to remove unused CSS selectors, which are very common on large codebases or component libraries like Bootstrap.

github.com/uncss/uncss

21. 🔥 Speaking of CSS, here's a hot take: optimizing CSS selectors for performance is useless: you can't predict the performance impact. The way the browser's engine reorganizes, divides, collects and compiles the selectors is unpredictable.

benfrain.com/css-performanc…

22. 😔 "Geez, João, there's just too much to do… where do I even start optimizing?"

☝️ Start with @____lighthouse! The reports are super intuitive and show lots of low-hanging fruits for you to tackle.

23. 🔡 Font Subsetting can reduce the size of a font by an awful lot: it removes all unnecessary/illegible/foreign characters. It's a must for landing pages headings.

thenewcode.com/878/Slash-Page…

24. 🔡 When using Custom Fonts it's important to follow a good strategy in order to avoid the FOIT (Flash Of Invisible Text). This is nice guide by @zachleat com many strategies ("FOUT with a class" is my favorite).

zachleat.com/web/comprehens…

25. 👨‍🚀 Speaking of @zachleat, he is THE REFERENCE when it comes to Web Fonts. He wrote about 50 articles on the subject - if you ever find yourself in trouble with fonts, check his website because your issue is probably solved already. You rock, Zach!

zachleat.com/web/fonts/

26. 🖼 Despite the fact WebP offers a smaller file size than JPEG, it doesn't offer progressive loading - that means sometimes the perceived performance can be actually worse and it's harder to implement. But sometimes it's a good pick, regardless - test with care! 💛

27. 🚫 When working with JPEGs, always pick MozJPEG with progressive loading. Don't use JPEG-XR on the Web: it gets decoded on the main thread and blocks JS processing.

calendar.perfplanet.com/2018/dont-use-…

28. 🖼 Lazy Load all (or most) images below the fold. There are a number of techniques: fixed placeholder, dominant color placeholder, low quality version (LQIP/SQIP), etc. For example, Medium uses LQIP.

developers.google.com/web/fundamenta…

29. ⏱x🧠 - Time can be split in two ways: Objective and Subjective. The first one is measurable with a watch, while the second is the perception of how it flows. @NNgroup studies show that there are metrics for subjective time as well.

smashingmagazine.com/2015/09/why-pe…

30. ⚡️ Be 20% faster than your competitors. There's an interesting concept in Psychophysics called "Just Noticeable Difference" that determines the point at which our brain starts to notice differences. With time, this threshold is of approximately 20%.

smashingmagazine.com/2015/09/why-pe…

31. 🐌 Did you know you can simulate 3G and also throttle your CPU to test your site as if it was running on an older device? On the Chrome Dev Tools' "Performance" tab, click on the settings cog and and edit them.

32. 🌍 Some browsers offer resources that add the "save-data: on" request header. You can identify it on both the server and front-end and offer a lighter experience. But remember: lighter doesn't mean with less features, but a more adequate experience.

developers.google.com/web/fundamenta…

33. Some cool use cases for Save Data:

🔡 remove custom fonts
🙈 remove unnecessary images
🖼 serve low resolution image alternatives
🗺 replace interactive maps by their static counterparts
📊 remove tools like HotJar or Optimizely

34. ⏯ Use ASYNC and DEFER to load your JS - they allow the page to continue loading while the browser downloads the asset. With async the page load is interrupted while the asset is executed and with defer the execution is pushed for after the page load.

flaviocopes.com/javascript-asy…

35. 💁‍♀️ With Perfume.JS you can measure First Paint, First Contentful Paint and First Input Delay. It shows the components performance on DevTools timeline and even sends the measurement results to Google Analytics if you want.

zizzamia.github.io/perfume/

Thanks for checking out! I turned this thread into a Medium article if you prefer reading this way: medium.com/@joaocunha/35-…