default-2

I’ve had a number of browser tabs open to articles all related to web performance and gosh darn it if blogging them is a way for me get some closure. They are all good!

Manuel Matuzovic, Why 543 KB keep me up at night:

Yes, I know, it depends. 543 KB aren’t always bad, but on that specific page there’s only a single image (the logo ~20 KB) and a single paragraph. So why then is the page still relatively large, where are the remaining 523 KB coming from?

Spoiler: it was the JavaScript. Also, I had no idea Google has a recommended ideal DOM that:

  • has less than 1500 nodes total.
  • has a maximum depth of 32 nodes.
  • has no parent node with more than 60 child nodes.

Next up, Performant front-end architecture (no byline):

Bundle splitting will result in more requests being made to load your app. But as long as the requests are made in parallel that’s not a big problem, especially if your site served over HTTP/2.

This is all about assuming the app is largely a client-side JavaScript site. I think there is a huge pile of low-hanging performance fruit, but it’s almost like a different list when talking about client-side JavaScript sites. It makes code-splitting one of the top priorities.


Jeremy Keith, Telling the story of performance:

Web Page Test is a terrific tool for measuring performance. It can also be used as a story-telling tool.

WPT ouputs video of the site loading. Put it side-by-side with a competitor and show it to the client.


CP Clermont, The Impact of Web Performance:

In this post, I’ll discuss what I did at ALDO to measure the revenue impact of web performance without having to spend time making performance improvements.

Not surprising that users with faster experiences generate more revenue. What is surprising is that it’s a lot more. Over 3x more on mobile and nearly 6x more on desktop.

The post Performance Links appeared first on CSS-Tricks.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to use CSS Scroll Snap

Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is

Read More »
Emergency Website Kit

Here’s an outstanding idea from Max Böck. He’s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely

Read More »
sendinblue