This is what I learnt today and my research after the meetup.
- 85% of mobile users expect site to load as at least fast as, or faster than desktop version
- 45% of users leave with taking longer than 3 seconds to load
What can we do with...
- Contents(especially images)
- Gradients, drawing images by CSS (Example)
- SVG
- Load images in background (Example)
- Compressive images (I use this optimizer)
- CSS
- Defer or Inline. Inline CSS will be cached.
- Fonts
- Do your mobile users need them?
- FOIT vs FOUT, (FOIT: Flash of Invisible Text, FOUT: Flash of Unstyled Text)
- Tips for FOIT: loadCSS, Woff2
- Tips for FOUT: Quick Tip: Avoid FOUT by Adding a Web Font Preloader
- JavaScript
- Progressive enhancement(Unobtrusive JavaScript) Understanding Progressive Enhancement
- Defer and async (Found an article easy to know)
- Be picky
Talked about TCP, more about protocol.
the server can send up to 10 TCP packets on a new connection (~14KB) in first roundtrip
- First loading: Only article, no contents, showing, related/popular articles, not even ads
- Network panels
- webpagetest.org
- SVG sprite
- http/2, this is about different layer.
by Kyle Peatt
Covering up with animation.
But spinners are bad. A spinner meant waiting, don't let users feel waiting.
When I was building an iOS App, I realized Instagram has a great trick when user uploads a photo. FYI:The 3 White Lies Behind Instagram's Lightning Speed
CSS tool resources