Download to read offline
![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](https://image.slidesharecdn.com/webperf-150223235336-conversion-gate02/85/Mobile-First-Is-Performance-First-2-320.jpg)
Uploaded byStephanie Hobson
Mobile First Is Performance First
The document emphasizes the importance of optimizing desktop sites for mobile access, particularly focusing on fast load times as a critical factor for user satisfaction. It highlights that 85% of mobile users expect load speeds on mobile sites to be equal to or faster than desktop sites and suggests various strategies for coding mobile-first and enhancing performance. Key recommendations include critical content prioritization, efficient image handling, and minimizing JavaScript to meet user expectations effectively.
More Related Content
![Performance Is About People, Not Metrics [2017 Web Directions Summit]](https://cdn.slidesharecdn.com/ss_thumbnails/directions-summit-performance-is-about-people-171110003205-thumbnail.jpg?width=640&height=640&fit=bounds)
![The hunt for the unicorn performance metric [DeltaV London 2018]](https://cdn.slidesharecdn.com/ss_thumbnails/2018-deltav-unicorn-metric-180511092516-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Mobile First Is Performance First
Mobile First Is Performance First
- 1. Mobile First Is PerformanceFirst Stephanie Hobson!
- 2. If you couldonly 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 timeis 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 mobileusers 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 peopleabandon a website that takes more than 3 seconds to load. blog.kissmetrics.com/loading-time
- 6. Your Desktop Siteis Slowing Your Mobile Site Down
- 7.
- 8.
- 9.
- 11. Code Your MobileSite First
- 12. Content! • Critical content -Article? Product? - Sharing? Comments? Ads? Mega menu? Sidebar?! • Images - gradients - SVG - background - compressive images - srcset
- 13. CSS! • Defer orInline! • 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!
- 19.
- 20. Download speed isnot the bottleneck. The bottleneck is the network latency. www.smashingmagazine.com/2013/04/03/ build-fast-loading-mobile-website Johan Johansson
- 21.
- 23.
- 24. The Guardian! • TheGuardian - 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 ThanMe • 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 tomake 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
- #6 Amazon's 1 second = $1.6 billion /year. Google 4/10s = 8 million fewer searches per day Search ranking
- #7 Mobile is growing
- #8 Alexis top 10,000 using RWD. Smushed. Bytes per pixel.
- #9 Display:none and visibility:hidden on iPhone 4.
- #10 Stylesheets with MQ on iPhone 4.
- #12 3 problems: content, CSS, JS. Identify critical rendering path add rather than subtract. This is hard (alphabet)
- #13 mobile content = critical content
- #14 CSS is render blocking. Penthouse and Critical CSS
- #15 https://twitter.com/mootcycle/status/438016755706101760
- #17 Work with JS turned off. Cut the mustard, yep/nope.
- #18 1954 by Roger Bannister 46 days
- #19 4 minutes = 14KB = the enemy here is latency Latency, 14KB, packets
- #22 This is why we combine http requests (sprites, mega CSS).
- #23 What if I told you… render
- #24 OMG seriously, I want to put this code in an art gallery.
- #27 Is possible: content, css , js.
- #31 network panels, simulate slow connection, webpagetest.org