Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Another great article, this time I made sure I read it properly instead of skim reading so I don't repeat what you said lol 😋
I am intrigued by the "inline SVGs can be expensive", my old site is about as heavy as you can get on SVG (all inline) and doesn't suffer on initial render even with a 4x CPU slowdown (although all my floating squares and the "train smoke" do kill performance 🤣), obviously if there is something I am missing here I would love to know to add it to my bag of "avoid doing this" tricks, is it particular filters or something that are best avoided? (it could be that because I ran them all through SVG OMG to optimise them i don't see issues?)
The only other thing is to add that when running a performance trace you should set the network to "Fast 3G" and the CPU to "4x Slowdown" in the settings (cog top right below the "menu 3 dots" to show settings) in order to catch long running tasks, layout shifts, LCP times etc. that Lighthouse would pick up for mobile audits as those are pretty similar to the settings Lighthouse uses to throttle your connection and CPU for the mobile test).
Software dev at Netflix | DC techie | Conference speaker | egghead Instructor | TC39 Educators Committee | Girls Who Code Facilitator | Board game geek | @laurieontech on twitter
Ya, optimizing SVGs can help a lot. If you have particularly complicated ones, or a huge number of them, it can be a factor. But depends on what other functionality exists that makes that slowdown more prominent.
Accessibility Specialist. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Yeah but that was what I meant, 1700+ nodes on the SVGs I linked to and no performance issues so not sure what makes you say SVGs can impact performance. Do you have an article / performance study as it would be really useful. Cheers
Software dev at Netflix | DC techie | Conference speaker | egghead Instructor | TC39 Educators Committee | Girls Who Code Facilitator | Board game geek | @laurieontech on twitter
Another great article, this time I made sure I read it properly instead of skim reading so I don't repeat what you said lol 😋
I am intrigued by the "inline SVGs can be expensive", my old site is about as heavy as you can get on SVG (all inline) and doesn't suffer on initial render even with a 4x CPU slowdown (although all my floating squares and the "train smoke" do kill performance 🤣), obviously if there is something I am missing here I would love to know to add it to my bag of "avoid doing this" tricks, is it particular filters or something that are best avoided? (it could be that because I ran them all through SVG OMG to optimise them i don't see issues?)
The only other thing is to add that when running a performance trace you should set the network to "Fast 3G" and the CPU to "4x Slowdown" in the settings (cog top right below the "menu 3 dots" to show settings) in order to catch long running tasks, layout shifts, LCP times etc. that Lighthouse would pick up for mobile audits as those are pretty similar to the settings Lighthouse uses to throttle your connection and CPU for the mobile test).
Ya, optimizing SVGs can help a lot. If you have particularly complicated ones, or a huge number of them, it can be a factor. But depends on what other functionality exists that makes that slowdown more prominent.
Yeah but that was what I meant, 1700+ nodes on the SVGs I linked to and no performance issues so not sure what makes you say SVGs can impact performance. Do you have an article / performance study as it would be really useful. Cheers
MDN talks a bit about it. developer.mozilla.org/en-US/docs/M...