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.cloud...
Slow load time is cited as
the most common issue
experienced when accessing
a website or application.
e-commercefacts.com/...
85% of mobile users expect
sites to load at least as fast
or faster than sites on their
desktop
www.strangeloopnetworks.co...
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
guypo.com/rwd-2014
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

-...
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-fa...
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=df...
The Guardian!
• Content

- only article, no comments, sharing, related/popular
articles, not even ads.!
• CSS

- critical ...
People Smarterer Than Me
• Patrick Hamann

- speakerdeck.com/patrickhamann/building-theguardian-dot-com 

- www.youtube.co...
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

- webp...
Mobile First Is Performance First
Mobile First Is Performance First
Mobile First Is Performance First
Mobile First Is Performance First
Mobile First Is Performance First
Mobile First Is Performance First
Mobile First Is Performance First
Prochain SlideShare
Chargement dans…5
×

Mobile First Is Performance First

5 902 vues

Publié le

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.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Mobile First Is Performance First

  1. 1. Mobile First Is Performance First Stephanie Hobson!
  2. 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. 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. 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. 5. 40% of people abandon a website that takes more than 3 seconds to load. blog.kissmetrics.com/loading-time
  6. 6. Your Desktop Site is Slowing Your Mobile Site Down
  7. 7. guypo.com/rwd-2014
  8. 8. www.smashingmagazine.com/2013/04/03/ build-fast-loading-mobile-website
  9. 9. www.smashingmagazine.com/2013/04/03/ build-fast-loading-mobile-website
  10. 10. Code Your Mobile Site First
  11. 11. Content! • Critical content
 - Article? Product? 
 - Sharing? Comments? Ads? Mega menu? Sidebar?! • Images
 - gradients
 - SVG
 - background
 - compressive images
 - srcset

  12. 12. CSS! • Defer or Inline! • Fonts
 - Do your mobile users need them?
 - FOIT vs FOUT
  13. 13. JavaScript! • Progressive Enhancement! • Defer and async! • Be picky
  14. 14. The First 14KB ! Are The Most Important!
  15. 15. chimera.labs.oreilly.com/books/1230000000545/ch02.html
  16. 16. 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
  17. 17. chimera.labs.oreilly.com/books/1230000000545/ch10.html
  18. 18. 1000ms - 14KB!
  19. 19. The Guardian! • The Guardian
 - speakerdeck.com/patrickhamann/building- theguardian-dot-com 
 - www.youtube.com/watch?v=dfweWyVScaI
  20. 20. 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”
  21. 21. 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!)
  22. 22. I like to make websites everyone can use Stephanie Hobson! stephaniehobson.ca! @stephaniehobson!
  23. 23. Testing Your Code • Waterfall
 - Network panels
 - webpagetest.org! • Slow connection
 - Tether
 - Chrome DevTools
 - webpagetest.org film strip view

×