Performance and Responsive Web Design (2013)

Updated: There is a newer version of this presentation available.

The presentation was originally given to NebraskaJS in November of 2012. Unfortunately due to my own technical ineptitude with screen recording software I wasn’t able to publish the talk. So when I was asked to present on the topic again at the Omaha Mobile Group, I thought it would be a good opportunity to update the talk and get a second chance at recording it in front of an audience.

Video

View the Slide Deck (April 2013)

• Or, view the original Slide Deck (November 2012).

Content

• 0:00 Title and Personal Background
• 3:04 Responsive Web Design Primer
• 5:24 The Web has Responsive Roots
• 6:24 Alternatives to RWD
  • Do nothing
  • Create separate mdot site
• 14:44 Common RWD Performance Problems
  • 16:03 Blocking JavaScript
  • 18:27 Blocking CSS
  • 30:07 Images
    • 31:11 Manipulating Images with CSS
    • 36:47 Responsive Images (in HTML)
• RWD Buzzkills
  • 45:40 Advertising
  • 46:47 Social Networking Widgets
• 50:23 RWD Showcase Showdown
• 54:21 Conclusion
• Questions (Some really great discussion here)
  • 56:19 How do Data URIs impact the critical path?
  • 57:43 The difference between Responsive and Adaptive?
  • 58:18 Do you have to start from scratch with RWD?
  • 59:39 How would Jimmy Wales and Wikipedia implement RWD?

(Side note: I wish there was an equivalent to TimeJump for YouTube embeds)

Reactions, Reviews

Performance & Responsive Web Design speakerdeck.com/nebraskajs/per… great presentation from @zachleat

— Brad Frost (@brad_frost) November 17, 2012

People of Omaha! You _want_ to hear @zachleat talk about responsive design and performance. Trust me. meetup.com/Omaha-Mobile-G…

— Responsive Design (@RWD) March 29, 2013

The best RWD deck I've seen in a long time. The optimization section is a must read - speakerdeck.com/nebraskajs/per… by @nebraskajs

— Eric Snowden (@ericsnowden) March 6, 2013