Spade shape with cobalt blue background

Performance Newsletter

Archives
Calibre Monitoring
Free Speed Tools
Log in
Subscribe
11 April 2018

Issue 16—Building performance culture, revenue impact calculator, lazy loading images and video, automating performance systems and more!

Performance Newsletter PRESENTATION # Build performance for the long-term

In February, [Allison McKnight](https://twitter.com/aemcknig), a Data Analytics engineer at Etsy, presented on building a performance culture at SmashingConf London. In her talk, Allison explains how to get business buy-in, prioritise, understand & scale performance-oriented approaches as a team.

If you prefer videos over slides, [head over to Vimeo](https://vimeo.com/254947097).  📺

[Building performance for the long-term](https://speakerdeck.com/aemcknig/building-performance-for-the-long-term)
OPEN SOURCE # Analyse resources used during page lifecycle

[Eric Bidelman](https://twitter.com/ebidel), an engineer at Google, working on Lighthouse and headless Chrome, has been preparing amazing demos of [Puppeteer](https://github.com/GoogleChrome/puppeteer)[s'](https://github.com/GoogleChrome/puppeteer) (headless Chrome Node API) capabilities. Check out his example of analysing the percentage of CSS and JavaSCript resources used during the lifetime of a page load, split by URLs. Handy!

Did you know you can also [verify Service Workers are caching your content correctly](https://twitter.com/ebidel/status/969619593978245120) and much more? 👏🏻

[Puppeteer examples](https://github.com/GoogleChromeLabs/puppeteer-examples)
TOOLS # Understand how mobile speeds impact revenue

Google has been spearheading building performance awareness with a lot of their latest projects. With [Speed Scorecard](https://www.thinkwithgoogle.com/feature/mobile/), it's possible to access Chrome User Experience Report data and compare it to your timings.

What's even more interesting is [Impact Calculator](https://www.thinkwithgoogle.com/feature/mobile/)—a tool allowing to estimate revenue loss based on performance pitfalls; something that can be used to convince businesses to commit more to building a fast Web.

[The Speed Scorecard and Impact Calculator](https://adwords.googleblog.com/2018/02/speed-scorecard-impact-calculator.html)
OPEN SOURCE # Web performance optimisation with Webpack

Webpack has become an essential part of a developer toolchain for many. Unfortunately, in many cases, it’s possible to not leverage its powerful, performance-oriented features.

But worry not, [Addy Osmani](https://twitter.com/addyosmani) and [Ivan Akulov](https://twitter.com/iamakulov) come in to explain the fundamentals of performance optimisation in Webpack, from reducing bundle sizes, long-term caching to monitoring and a wide range of tooling. ✨

[Web performance optimization with webpack](https://developers.google.com/web/fundamentals/performance/webpack/)
PRESENTATION # How’s the UX on the Web, really?

In his presentation, [Ilya Grigorik](https://twitter.com/igrigorik), a web performance engineer at Google, analyses the state of the Web based on the Chrome User Experience Report and vast amounts of performance data found in BigQuery. How can we leverage these tools to improve performance? Are we measuring the right metrics? 

[Video available here.](https://vimeo.com/254834890) ✌🏻

[How’s the UX on the Web, really?](https://docs.google.com/presentation/d/1xhFyYiaPaRD81cw83i88XnbTwvOC7_MllxkzGDd6Ed4/present?slide=id.g18d4e05999_0_16)
RESOURCES # Lazy loading images and video

Imagery and media are still a big part of the experience of the Web but can introduce significant downsides to user experience and performance.

Fortunately, [Jeremy Wagner](https://twitter.com/malchata) wrote an extensive guide to bulletproof lazy loading practices that can help avoid common pitfalls. ⚡️ 

[Lazy loading images and video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/)
SNEAK PEEK # Automate your performance system

Here’s a sneak peek of a major feature coming very soon—**a command-line interface allowing the running of one-off tests. Perfect for integrating into your CI/CD pipeline!** It’s never been easier to automate your performance systems and focus on what’s most important—delivering stellar experiences.

Additionally, [we’ve revamped Calibre’s ](https://calibreapp.com/pricing)[plans](https://calibreapp.com/pricing) so that you’re not limited by the number of pages or sites monitored. Give it a go now to avoid missing out on CLI launch!

[Try monitoring performance with Calibre for free](https://calibreapp.com/)
SPREAD THE WORD ABOUT PERF.EMAIL We'd love to see more people reading [perf.email](https://perf.email/), 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 17—sustainable technology, how healthy is the Internet, Chrome reduces parse and compile by almost 40% and more! Older → Issue №15—Front-end Performance Checklist, Safari and Webpack performance upgrades, #perfMatters Conference and more!
perf.email
Bluesky
LinkedIn