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 190 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
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
5 190
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 454
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • 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
  • 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

    ×