Spade shape with cobalt blue background

Performance Newsletter

Archives
Calibre Monitoring
Free Speed Tools
Log in
Subscribe
26 July 2022

⚡ 106: Can SVG symbols affect performance?

͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏
 
Performance Newsletter
[issue 106]()
 
#### Editor’s note
 

One of the goals in web performance (and user experience) is the ability to correlate metrics to business outcomes with certainty. While often organisations store a breadth of data, this is still a difficult task. In this issue, we feature Farfetch, which created an internal tool to assign potential business impact to performance improvements. This certainly can be one way to convince your stakeholders!

 

Can we then 100% rely on data to do the convincing? I don’t think so. Hesitance toward page speed work can come from various sources, as I described in <a class="editor-rtfLink" href="https://calibreapp.com/blog/convince-your-boss-about-performance" style='color: #4a6ee0;background: transparent;margin-top: 0pt;margin-bottom: 0pt;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;' target="_blank"><span data-preserver-spaces="true" style="background: transparent;color: #4a6ee0;margin-bottom: 0pt;margin-top: 0pt;border-collapse: collapse;mso-line-height-rule: exactly;">How to Convince Your Boss to Care About Speed</span></a>. Some of the reasoning can be a lack of knowledge or one of the base human emotions: fear of the unknown. 

 

We can use data to help us make specific points and back up hypotheses. But at the end of the day, it’s people who we have to persuade, not computers, that crunch the numbers.

 
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  
 
A comparison of performance of using SVGs with and without symbols
 
### [Can SVG Symbols affect web performance?](https://bstefanski.com/can-svg-symbols-affect-web-performance)
 
[Bart Stefanski](https://twitter.com/bmstefanski)
SVG symbols allow to declare an SVG element once per page and reuse it many times without losing web performance. But do they significantly boost speed?
 
Photo of Senna the cat and the code markup to render the photo with predefined sizing
 
### [Avoiding layout shifts: aspect-ratio vs width & height attributes](https://jakearchibald.com/2022/img-aspect-ratio/)
 
[Jake Archibald](https://twitter.com/jaffathecake/)
By default, an image tag takes up zero space until the browser loads enough of the image to know its dimensions. Here’s how we can use modern markup to avoid unnecessary layout shifts!
 
WebPageTest showing HTTP/2 enabled for a tested site
 
### [Faster WordPress rendering with 3 lines of configuration](https://www.phpied.com/faster-wordpress-rendering-with-3-lines-of-configuration/)
 
[Stoyan Stefanov](https://twitter.com/stoyanstefanov)
Check out this experiment into better asset prioritisation and un-blocking CSS rendering in WordPress-based sites.
 
 
 
# Case Studies  
 
Farfetch Site Speed Business Case Calculator
 
### [Luxury Retailer Farfetch Sees Higher Conversion Rates For Better Core Web Vitals](https://web.dev/farfetch/)
 

[Rui Santos](https://twitter.com/ruijssantos), [Manuel Garcia](https://twitter.com/corrosion_pt),  [Patrícia Couto Neto](https://www.linkedin.com/in/pccneto/?originalSubdomain=pt) & [Dikla Cohen](https://twitter.com/diklla)
 

See how Farfetch created an internal tool to help make a business case out of performance improvements by calculating the business impact. And how they lifted conversion rates by addressing Largest Contentful Paint.
 
 
 
# Courses, Talks & Podcasts  
 
Slide saying "this happens when you want to center a div in Chrome" with a complex diagram of tasks that need to be performed by the browser
 
### [Modern CSS Rendering Performance: The Internals of Website Optimization](https://www.youtube.com/watch?v=adRawKeHi90&ab_channel=9elements)
 
[Michael Hladky](https://twitter.com/Michael_Hladky)
Learn the critical render performance concepts to understand how CSS can affect speed. If you’d like to see the slides, you can also find them on [Google Slides](https://docs.google.com/presentation/d/1LBXgXeJClAmBe5xarh_dUsfSySUootLfXOm2sdZtXHw/edit#slide=id.g11e3e1a882e_0_1472)!
 
 
# New in Calibre  
 
Release Notes: June
### [Release Notes: June](https://calibreapp.com/blog/release-notes-june-2022)
Here’s our monthly roundup of what was released in June: Lighthouse 9.6.2, a preview of new Test Profile device settings, and more.
 
 
Calibre
 
This email is brought to you by the team at [Calibre](https://calibreapp.com). We automate web performance testing, reporting and alerting, so you don’t have to.
 
 

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/><br/>149A Brunswick Street<br/>Ngár-go<br/>Fitzroy VIC 3065<br/>Australia</a>

 
Don't miss what's next. Subscribe to Performance Newsletter:
← Newer ⚡ 107: Speed impact of generated JavaScript Older → ⚡ 105: Why cached JavaScript is still slow
perf.email
Bluesky
LinkedIn