Spade shape with cobalt blue background

Performance Newsletter

Archives
Calibre Monitoring
Free Speed Tools
Log in
Subscribe
5 June 2019

Issue #24—Webfont loading in Google Fonts, Lighthouse 5.0.0 and zero parse and compile for JavaScript.

Calibre Performance Newsletter #### PerformanceNewsletter
#### Issue 24
#### Editor’s Note

We’re currently recovering after a few intense days spent at the last edition of [CSSConf](https://2019.cssconf.eu/) and [JSConf](https://2019.jsconf.eu/) Europe. If you haven’t been, check the event hashtags—they are filled with great talks and knowledge.

We’ve been thinking about this for a while but it’s time to make it official—**Performance Newsletter will now be sent every two weeks** instead of once a month. There’s a great amount of content we’d love to be sharing with you more often.

Additionally, **we’ll be adding a Q&A section** to answer any doubts you might have about performance. 

If there’s an unanswered question or you can’t quite figure out a performance problem** let us know by replying to this email.** We’ll be featuring a selected question in the next issue.

— Karolina
#### tools Google fonts and font display ## Control web font loading in Google Fonts

Great news for everyone using [Google Fonts](https://fonts.google.com/) as their primary source of webfonts—it is now possible to use the **font-display** property to control how fonts behave on load. Using font-display can yield massive improvements to [First Meaningful Paint metric](https://calibreapp.com/docs/metrics/paint-based-metrics), resulting in much better perceived performance.

Make sure to update your Google Fonts stacks!

[We shipped font-display to Google Fonts →](https://addyosmani.com/blog/google-fonts-font-display/)
#### browsers Code caching for devs ## Zero JavaScript parse and compile on repeat visits In his article, [Leszek Swirski](https://twitter.com/leszekswirski) walks us through most effective caching strategies that can vastly improve web performance. One of them is using the service worker cache to achieve 0 JavaScript parse and compile on repeat visits. An impressive strategy but to be used with caution. [Code caching for JavaScript developers →](https://v8.dev/blog/code-caching-for-devs#use-service-worker-caches)
#### Tools ## Stack packs, budgets and plugins in Lighthouse

The Google I/O release of Lighthouse 5.0.0 brings a handful of new features. [Stack packs](https://github.com/GoogleChrome/lighthouse-stack-packs) add stack-specific performance advice, [plugins](https://github.com/GoogleChrome/lighthouse/blob/master/docs/plugins.md) allow for writing and integrating custom checks and last, but not least, Lightwallet feature introduces [performance budgets](https://developers.google.com/web/tools/lighthouse/audits/budgets) help with tracking regressions over time.

Speaking of budgets, here’s a handy [performance budget calculator](https://perf-budget-calculator.firebaseapp.com/).

[lighthouse 5.0.0 →](https://github.com/GoogleChrome/lighthouse/releases/tag/v5.0.0)
#### tools ## WebAssembly speeds up password management

With the move to WebAssembly, 1Password, an awesome password manager, were able to achieve 13x faster long-form filling in Chrome and up to 39x faster in Firefox.

Incredible!

[1password x: speed, speed, speed →](https://blog.1password.com/1password-x-may-2019-update/)
#### browsers
Keeping scroll fast
## Learn how to keep scrolling fast [Mariko Kosaka](https://twitter.com/kosamari) created a short zine explaining the ins and outs of compositing and how fast scrolling might potentially be blocked. A short but sweet primer on ensuring smooth scroll. [Keeping scroll fast →](https://drive.google.com/file/d/1JxDHLFtsnzolg8ZjJT9AUlpqTE2JvrGC/view)
#### browsers ## Lazy load images without JavaScript A year ago we wrote about a proposal and intention to ship native lazy loading in Chrome. Today it is implemented behind flags in Chrome Canary. Have a play! [A native lazy load for the Web platform →](https://calibreapp.com/blog/native-lazy-load/)
#### Spread the word about perf.email We’d love to see more people reading [perf.email](https://perf.email/); if you’d like to help—forward this email to a friend, tweet, or shout from a rooftop. It goes a long way. ✌🏻

#### Brought to you by ♠ [Calibre](https://calibreapp.com/). Make the web fast for everyone. [Update your profile]() [Unsubscribe]() [View in a browser]()
Don't miss what's next. Subscribe to Performance Newsletter:
← Newer Issue #25—The real impact of image optimisation, gain speed with variable fonts, accessibility for everyone and more. Older → Issue #23—Paint holding, visualising third party scripts and performance privilege
perf.email
Bluesky
LinkedIn