Here are my notes from the course on Frontend Masters, “Website Performance”. Kyle Simpson is a very good teacher and I discovered that this was his first taught course!

Obviously, there were more important points throughout the 5-hour course, but the following ones were the ones I took time to write down:

Note 01. Users won’t detect the difference below 100ms.

Interestingly, this was established 30 years ago.

0.1 second is about the limit for having the user feel that the system is reacting instantaneously Jakob Nielsen

Note 02. Users tolerate up to 1s lag. Beyond — they perceive the element as laggy.

1.0 second is about the limit for the user’s flow of thought to stay uninterrupted Jakob Nielsen

Note 03. The critical path is the most important, optimise 8020 first.

As with everything in life and business, locate and concentrate on the most important things.

Note 04. User experience matters as much as the exact numbers

If it appears fast it is fast (like on StackOverflow AJAX calls).

Note 05. Total Cost of Ownership is higher for non-performant code

100% true. Same everything digital, including CRM and even design.

Note 06. Instead of quick to write — performant by default

This is my main rule to achieve defect-free work — it’s easiest to code things correctly the first time. Each post-QA amends round takes ten times longer than the time necessary to spot the defect. Rhetorical question: why do people rush?

Note 07. Dirty Little Secret — most of the Front End Optimisation happens on the middle end (templating, URL, Routing, Headers, Caching, Ajax, etc.)

Logical. Especially considering caching and headers.

Note 08. Big 14 — Steve Souders — Rules:

Steve Souders was a discovery for me.

Rule 1 - Make Fewer HTTP Requests

Rule 2 - Use a Content Delivery Network

Rule 3 - Add an Expires Header

Rule 4 - Gzip Components

Rule 5 - Put Stylesheets at the Top

Rule 6 - Put Scripts at the Bottom

Rule 7 - Avoid CSS Expressions

Rule 8 - Make JavaScript and CSS External

Rule 9 - Reduce DNS Lookups

Rule 10 - Minify JavaScript

Rule 11 - Avoid Redirects

Rule 12 - Remove Duplicate Scripts

Rule 13 - Configure ETags

Rule 14 - Make AJAX Cacheable

Note 09. There’s no inheritance in JS — only behaviour delegation up the scope chain, in this case, prototype chain.


Note 10. HTML5: requestAnimationFrame

That was new to me.

Note 11. CSS transitions and animations are better than JS-ones


Note 12. JS is asynchronous, not parallel

Further read.

My twopence to add to the list

Web fonts slow things down and paid web fonts slow down even more so consider the free font options first (there will be fewer calls to the analytics servers).