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.

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

7. guypo.com/rwd-2014

8. www.smashingmagazine.com/2013/04/03/
build-fast-loading-mobile-website

9. www.smashingmagazine.com/2013/04/03/
build-fast-loading-mobile-website

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!

19. chimera.labs.oreilly.com/books/1230000000545/ch02.html

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

21. chimera.labs.oreilly.com/books/1230000000545/ch10.html

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