@benschwarz, Ben Schwarz.
On the internet, time is money. Queue the stats!
47% of consumers expect a web page to load in two seconds or less.
"After a second of so, the user's flow and engagement with the initiated task is broken." -Ilya Grigorik.
Perceived speed is on the front-end. Speed is perceived.
So what can we do to make pages fast?
Minify.
Use AJAX.
Base-64 things.
Animate using CSS.
Use requestAnimationFrame for JS-based animation.
Use video rather than gifs. :(
position:fixed
can cause uncessary paints while scrolling. (So can a lot of other things.)
box-shadow
can be kiiiinnnd of evil.
Make animations small.
tl;dr:
Inlining critical styles will give you big boosts in speed.
So what else do I need to know?
Set a budget. How much is too much? If you set budgets for images, you can have interesting talks with your designers. (Designers like constraints.)
Use real-time analytics. GA has the average page load time: this is what will give you data on using CDNs, etc.
Do your own metrics. window.performance.timing
is a thing you can use in browsers and show you how long it took everything to load. If your site goes beyond a certain number, you can get alerts. You don't even need to fight to use GA or anything else; you have access to these metrics yourself.
window.performance.mark("foo")
: set marks and get them and see how long they took to load. (Realize how slow Disqus is on your site!)
Pingdom, New Relic, CSSStats, CalibreApp
Don't rely on what you think you know. Prove it.