Spade shape with cobalt blue background

Performance Newsletter

Archives
Calibre Monitoring
Free Speed Tools
Log in
Subscribe
3 July 2017

Issue #10 — WebAssembly, base64, preload prefetch and more

Performance Newsletter WEB PLATFORM # WebAssembly drastically increases load times

Figma, a browser-based interface tool gaining significant traction within the design community, recently replaced asm.js in favour of [WebAssembly](http://webassembly.org/). This fairly simple, drop-in change resulted in speeding up the initial web app load times by 3x 😱🎉

Web Assembly is being built as a part of the open web platform, which ensures backwards-compatibility and implementation in all major browsers. Check out Figma’s learnings and take a leap to make your apps faster!

[WebAssembly cut Figma’s load time by 3x](https://blog.figma.com/webassembly-cut-figmas-load-time-by-3x-76f3f2395164)
CASE STUDY # Housing.com becomes a Progressive Web App [Ritesh Kumar](https://twitter.com/ritz078) goes through architectural decisions and performance gains resulting from Housing’s mobile redesign. Emphasising the importance of user experience, the perception of speed and reactiveness he explains how the team leveraged modern technologies such as Service Workers, Push Notifications or IndexedDB to achieve impressive results ⚡️
[Housing Go: Behind the Screens](https://medium.com/engineering-housing/progressing-mobile-web-fac3efb8b454)
OPEN SOURCE # Analyse how efficient your images are [NCC Image Checker](https://chrome.google.com/webstore/detail/ncc-image-checker/fphiheficgnpphmjdliclanppccfgifl?hl=en-GB) is a Chrome extension pinpointing unoptimised imagery that might have sneaked into production environments. Providing a helpful heat map interface as well as information on sizes, download duration and origin hosts it makes it a breeze to shave off unnecessary kilobytes.
[NCC Image Checker](https://chrome.google.com/webstore/detail/ncc-image-checker/fphiheficgnpphmjdliclanppccfgifl?hl=en-GB)
ARTICLE # Understand preload, prefetch and priorities in Google Chrome

In another deep-dive [Addy Osmani](https://twitter.com/addyosmani) thoroughly explains what the difference between **preload** and **prefetch** is and how to leverage them to deliver crucial content to your users faster.

Additionally, the article demonstrates investigating web loading primitives in DevTools and cites numerous real-world performance gains (👋🏻 Shopify, Flipkart, Housing, FT and Treebo).

[Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)
ARTICLE # Discover Base64 encodings’ dark side There was a time when Base64 encoding assets seemed like a reasonable tactic to reduce the number of requests and subsequently, improve performance. [Harry Roberts](https://twitter.com/csswizardry) carefully debunks the remaining myths of Base64s’ glory 🕵🏻 Make sure to check out the [Second Part of the article](https://csswizardry.com/2017/02/base64-encoding-and-performance-part-2/) based on further explorations into testing encoding performance upsides and downsides.
[Base64 Encoding & Performance, Part 1: What’s Up with Base64?](https://csswizardry.com/2017/02/base64-encoding-and-performance/)
ARTICLE # Ensure your animations performant A short but sweet tip by [Owen Campbell-Moore](https://twitter.com/owencm) on guaranteeing responsive animations, especially on mobile devices 📱
[One weird trick to performant touch-response animations with React](https://medium.com/@owencm/one-weird-trick-to-performant-touch-response-animations-with-react-9fe4a0838116)
NEW IN CALIBRE # New Test Profiles, request priority and more granular metric tracking After the last, big release of [Lighthouse integration](https://building.calibreapp.com/announcing-lighthouse-support-2a58bcfbd52b) Calibre has seen quite a few smaller but impactful improvements ✨

It’s now possible to emulate Motorola Moto G4 device (a solid 'global average phone' candidate) alongside with an 'emerging markets' connection speed. Give it a go if you haven’t yet before **Calibre Comparisons** are out 🙊
[New test profiles, pulse and metric updates, and more!](https://building.calibreapp.com/new-test-profiles-pulse-and-metric-updates-and-more-cb01c5997912)
SPREAD THE WORD ABOUT PERF.EMAIL We'd love to see more people reading [perf.email](http://calibre.cmail19.com/t/d-l-kjwtyk-hdjkikjjh-s/), so if you'd like to help—forward this email to a friend, tweet, or shout from a rooftop. It really does go a long way, please share it. ✌🏻
BROUGHT TO YOU BY
** ♠︎ Calibre** — Let’s make the web fast for everyone.
Don't miss what's next. Subscribe to Performance Newsletter:
← Newer Issue #11 — The Critical Request, Facebook news feed changes and more! 
perf.email
Bluesky
LinkedIn