Mobile First Is Performance First
•
1 like•6,284 views
Is the desktop part of your responsive site slowing down your mobile users? Loading desktop content only to hide part of it means our mobile users are downloading more than they need to.
![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](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Mobile First Is Performance First
Similar to Mobile First Is Performance First (20)
More from Stephanie Hobson
More from Stephanie Hobson (9)
Recently uploaded
Recently uploaded (20)
Mobile First Is Performance First
- 1. Mobile First Is Performance First Stephanie Hobson!
- 2. 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
- 3. 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
- 4. 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
- 5. 40% of people abandon a website that takes more than 3 seconds to load. blog.kissmetrics.com/loading-time
- 6. Your Desktop Site is Slowing Your Mobile Site Down
- 11. Code Your Mobile Site First
- 12. Content! • Critical content - Article? Product? - Sharing? Comments? Ads? Mega menu? Sidebar?! • Images - gradients - SVG - background - compressive images - srcset
- 13. CSS! • Defer or Inline! • Fonts - Do your mobile users need them? - FOIT vs FOUT
- 16. JavaScript! • Progressive Enhancement! • Defer and async! • Be picky
- 18. The First 14KB ! Are The Most Important!
- 20. 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
- 23. 1000ms - 14KB!
- 24. The Guardian! • The Guardian - speakerdeck.com/patrickhamann/building- theguardian-dot-com - www.youtube.com/watch?v=dfweWyVScaI
- 25. 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”
- 27. 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!)
- 28. I like to make websites everyone can use Stephanie Hobson! stephaniehobson.ca! @stephaniehobson!
- 30. Testing Your Code • Waterfall - Network panels - webpagetest.org! • Slow connection - Tether - Chrome DevTools - webpagetest.org film strip view
Editor's Notes
- Amazon's 1 second = $1.6 billion /year. Google 4/10s = 8 million fewer searches per day Search ranking
- Mobile is growing
- Alexis top 10,000 using RWD. Smushed. Bytes per pixel.
- Display:none and visibility:hidden on iPhone 4.
- Stylesheets with MQ on iPhone 4.
- 3 problems: content, CSS, JS. Identify critical rendering path add rather than subtract. This is hard (alphabet)
- mobile content = critical content
- CSS is render blocking. Penthouse and Critical CSS
- https://twitter.com/mootcycle/status/438016755706101760
- Work with JS turned off. Cut the mustard, yep/nope.
- 1954 by Roger Bannister 46 days
- 4 minutes = 14KB = the enemy here is latency Latency, 14KB, packets
- This is why we combine http requests (sprites, mega CSS).
- What if I told you… render
- OMG seriously, I want to put this code in an art gallery.
- Is possible: content, css , js.
- network panels, simulate slow connection, webpagetest.org