Time to Care About Web Performance

transition: all, 60s, ease-in; /* a.k.a An Introduction for Beginners*/

The more I grow as a web developer, the more I realize how important it is to not only pay attention to write clean and organized code, but also crucial to think about webpage rendering and performance.

Before I learnt about web development, even being a UX advocate, I wasn’t aware of how an oversized, un-optimized, high-resolution hero image, animations, or input handlers would affect load time and performance, though they’re crucial for user experience. Now that I’ve been exposed to the front-end dev world, naturally I’ve been extremely interested in what and what not to do in order to optimize performance.

For those of you who are also starting but was a bit intimidated by the technical terminology, I’d like to share with you what I learnt and how I understood it.

After reading and skimming through a few articles on this topic, I find one that’s pretty basic, easy to follow, but incredibly well written. It’s by Google developers Paul Lewis and Paul Irish, called “High Performance Animations”.

There are usually more than one way to achieve the same UI effect, whether using CSS or javascript, or even just with CSS there are usually more than one way of doing it. But the difference in how they affect web performance is, at least I think, should be something we care about.

One image Paul Lewis repetitively uses, and therefore I think it’s quite obvious to pay attention to is this:

Taken from the recommended article “High Performance Animations”

Basically it tells us the higher up a property is in the waterfall is styled, the more work a browser has to do.

A list of of where most popular CSS properties are in the waterfall is also provided.

I hope this is easy-going enough to get started on this topic, and we’ll dive deep together in the upcoming days. Stay tuned.