mobile first is performance first
TRANSCRIPT
Mobile First Is Performance First
Stephanie Hobson!
If you could only do one thing to prepare your desktop site for mobile… [make] the desktop site blazingly fast.
blog.cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile
Jason Grigsby
Slow load time is cited as the most common issue experienced when accessing a website or application.
e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf
85% of mobile users expect sites to load at least as fast or faster than sites on their desktop
www.strangeloopnetworks.com/resources/infographics/web-performance-and-user-expectations/mobile-device-
users-expect-sites-to-load-fast
40% of people abandon a website that takes more than 3 seconds to load.
blog.kissmetrics.com/loading-time
Your Desktop Site is Slowing Your Mobile Site Down
www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website
www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website
Code Your Mobile Site First
Content!• Critical content
- Article? Product? - Sharing? Comments? Ads? Mega menu? Sidebar?!
• Images- gradients- SVG - background- compressive images- srcset
CSS!• Defer or Inline!• Fonts
- Do your mobile users need them?- FOIT vs FOUT
JavaScript!• Progressive Enhancement!• Defer and async!• Be picky
The First 14KB !Are The Most Important!
chimera.labs.oreilly.com/books/1230000000545/ch02.html
Download speed is not the bottleneck. The bottleneck is the network latency.
www.smashingmagazine.com/2013/04/03/build-fast-loading-mobile-website
Johan Johansson
chimera.labs.oreilly.com/books/1230000000545/ch10.html
1000ms - 14KB!
The Guardian!• The Guardian
- speakerdeck.com/patrickhamann/building-theguardian-dot-com - www.youtube.com/watch?v=dfweWyVScaI
The Guardian!• Content
- only article, no comments, sharing, related/popular articles, not even ads.!
• CSS- critical CSS inline in the head, ajaxed into localstorage- no web font on first load, FOUT, webfontjson!
• Javascript- only loaded by modern browsers that “cut the mustard”
People Smarterer Than Me• Patrick Hamann
- speakerdeck.com/patrickhamann/building-theguardian-dot-com - www.youtube.com/watch?v=dfweWyVScaI !
• Paul Irish- http://goo.gl/Lw8IAX !
• Scott Jehl- “Responsible Responsive Design”!
• Ilya Grigorik- “High Performance Browser Networking” (Free online!)
I like to make websites everyone can use
Stephanie Hobson!stephaniehobson.ca!@stephaniehobson!
Testing Your Code• Waterfall
- Network panels - webpagetest.org!
• Slow connection- Tether- Chrome DevTools - webpagetest.org film strip view