Spade shape with cobalt blue background

Performance Newsletter

Archives
Calibre Monitoring
Free Speed Tools
Log in
Subscribe
2 December 2020

⚡️ 63: Make navigating sites fast

͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
 
Performance Newsletter
[issue 63]()
 
#### Editor’s note
 
We often measure the performance of websites at a fixed and finalised state. What about the in-betweens and interstitial states? They too contribute to the journey our users are on.
 

How fast and smooth is navigating between pages? How do the loading states feel and look? Just because interacting with those cases often lasts split seconds (or, at least *it should*) doesn’t mean they are not worthy optimising. They all contribute to a holistic experience. 

 
All experiences should be fast, no matter how temporary they are.
 
Karolina
 
 
 
 
#### What’s Performance newsletter?
 

Performance Newsletter is a fortnightly mailing by [Calibre](https://calibreapp.com), featuring web performance tools, talks and resources.

Don’t worry—we don’t spam. If you’d like to leave, [unsubscribe]() at any time. Suggest content [here](mailto:[email protected]).

 
 
 
# Articles  
 
Back/forward cache
 
### [Back/Forward Cache](https://web.dev/bfcache/)
 
[Philip Walton](https://twitter.com/philwalton)
Slow and jarring experiences when navigating sites are not uncommon. Learn how bfcache affects perceived performance, how to measure and improve it.
 
### [Progressively delivering new image formats with CSS and Cloudflare Workers](https://jross.me/progressively-delivering-new-image-formats-with-css-and-cloudflare-workers/)
 
[James Ross](https://twitter.com/CherryJimbo)
Images can have a negative impact on speed. Know how to reliably serve new image formats using Cloudflare Workers.
 
 
 
# Case Studies  
 
Web performance case study: Wikipedia page previews
 
### [Web performance case study: Wikipedia page previews](https://techblog.wikimedia.org/2020/11/23/web-performance-case-study-wikipedia-page-previews/)
 
[Noam Rosenthal](https://twitter.com/nomsternom)
Find out how the Wikimedia Performance Team evaluated speed issues with a preview popup and what to avoid if you’re working on similar interface patterns. Bonus anteater included.
 
 
 
# Tools  
 
### [Responsive Video Poster](https://nigelotoole.github.io/responsive-video-poster/)
 
[Nigel O Toole](https://www.purestructure.com/)
Gain creative control over placeholder images for videos and improve their performance with this handy JavaScript library.
 
 
 
# Talks & Podcasts  
 
This Is Your LCP On Images
 
### [This Is Your LCP On Images](https://www.youtube.com/watch?v=YMqnPeZHcuc&feature=youtu.be&ab_channel=HenriHelvetica)
 
[Patrick Hulce](https://twitter.com/patrickhulce)
Get the hang of how images affect your Largest Contentful Paint metric readings. Advice by Lighthouse core contributor.
 
Life of a Pixel
 
### [Life of a Pixel](https://www.youtube.com/watch?v=PwYxv-43iM4&t=82s&ab_channel=BlinkOn)
 
[Philip Rogers](https://github.com/progers)
Let me tell you that pixels go on quite a journey before they reach our eyes. Learn all the nitty-gritty details of how Chrome turns content into pixels.
 
 
Calibre
 
This email is brought to you by the team at [Calibre](https://calibreapp.com). Our performance monitoring platform helps you deliver stellar user experiences to everyone.
 
 

Performance Newsletter is sent from the traditional lands of the Wurundjeri people of the Kulin nation. We acknowledge that sovereignty was never ceded and pay respects to the Elders past, present and emerging.

Send your suggestions, links and feedback to [[email protected]](mailto:[email protected]).

[View or share this email →]()
[Quickly unsubscribe →]()
[Browse older issues →]()

**Sent by**
<a style='border-collapse: collapse;mso-line-height-rule: exactly;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";text-decoration: none;font-weight: normal;margin: 0;padding: 0;mso-effects-shadow-color: #2B2B2B;color: #ffffff;'>Calibre Analytics<br/>149A Brunswick Street<br/>Fitzroy Victoria 3065<br/>Australia</a>

 
Don't miss what's next. Subscribe to Performance Newsletter:
← Newer ⚡️ 64: The State of Performance in 2020 Older → ⚡️ 62: Prevent layout shifts with CSS
perf.email
Bluesky
LinkedIn