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 80⁄20 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 9 - Reduce DNS Lookups
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
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).