1. Faster ForwardTM RESPONSIVE IN THE WILD Guy Podjarny (@guypod) CTO, Web Experience, Akamai

2. Faster ForwardTM Responsive is Taking Off 3. Faster ForwardTM So, how far have we come? ~500 Websites, Self SelectedMany small, manual studies Not Enough Data 4. Faster ForwardTM Detect RWD Option #1: Look for missing m. redirect Redirects arent always helpful Most Sites are neither RWD nor m. 5. Faster ForwardTM Detecting RWD Option #2: look for a media query @media screen and (max-width:768px) { .mobile-gallery-icon-big{background-size:32px;} .mobile-gallery-instruction{margin-top:0;top:3%} .mobile-gallery-instruction-text{text-align:left} .mobile-gallery-instruction-wrapper{padding:10px} } Close, but not quite there Many non RWD sites use MQs Often to Slightly Adjust Something 6. Faster ForwardTM Detecting RWD Option #3: Resize & see what happens RWD: No Cut areas Not RWD: Many Cut areas No Scrollbar Scrollbar! We Can Automate This!!! 7. Faster ForwardTM Ran the test - Sample: Top 100,000 Sites - Per Alexa - Only the top (/) path of each - Testing Tool: WebPageTest - Methodology: - Load URL in Chrome - Resize window to 320x480 - Look for Scrollbar - Results posted on guypo.com - Functionality now in webpagetest.org - Add responsive=1 to runTest API Sample Test Result: 8. Faster ForwardTM Well, that test kinda tests fluidity, not responsiveness RWD Fluid 1. Fluid Grids 2. Flexible Images 3. Media Queries 1. Fluid Grids? 2. Flexible Images? 9. Faster ForwardTM But what IS responsive anyway?! Brad Frost wrote By Tim Kadlec By Jason Grigsby Lyza Gardner wrote (on A List Apart): 10. Faster ForwardTM Digging into Data Warning: Here Be Dragons 11. Faster ForwardTM Filter out Error & Text pages www.doe.gov - Yes, theyre fluid, but we dont really want them - Hacky Solution: require 3+ 200 OK Responses - Removes ~7% of websites 12. Faster ForwardTM Finally, The Data! - ~11% of sites are Responsive - Roughly 1 in 9 sites - Ratio ~holds across top & bottom - RWD Share +1% without filter Top 100 Top 1K Top 10K Top 100K Non-RWD 85 841 8398 83259 RWD 10 113 1016 10112 RWD % 10.5% 11.8% 10.8% 10.8% RWD 11% Non- RWD 89% RWD Sites Ratio Top 100,000 sites 13. Faster ForwardTM Page Size on Small Resolution vs Big Resolution Much Smaller 7% Slightly Smaller 30% Roughly Same Size 63% Media Queri.es, 500 sites RWD Sites in Top 100,000 Sites 14. Faster ForwardTM People are sometimes touchy about their RWD 15. Faster ForwardTM RWD is GOOD for performance! (on desktop, long tail) 1,517 1,599 1,374 1,491 1,694 1,626 Top 1K Top 10K Top 100K Average Desktop Page Size (KB) RWD Non-RWD +2% -6% -15% 16. Faster ForwardTM RWD Still MUCH bigger than average m. site 1,643 1,513 540 Non-RWD RWD m. Average Page Size (KB), Top 5,000 Sites Page Weight 17. Faster ForwardTM Requests 80 42 104 62 Total Reqs Img Reqs RWD Sites Use Fewer Requests RWD Non-RWD 2.3 5.8 0.9 5.0 Font Reqs CSS Reqs RWD Sites have MORE Font/CSS Reqs RWD Non-RWD 9 18 14 18 28 15 Gif Reqs JPG Reqs PNG Reqs RWD Image Request Delta RWD Non-RWD 18. Faster ForwardTM Bytes Where Do They Come From? 5,407 32,082 19,572 5,077 23,148 13,901 Avg Gif Size Avg JPG Size Avg PNG Size Average Image File Size, Top 100K RWD Non-RWD 6,037 25,839 18,743 3,787 19,158 12,821 7,391 20,843 12,686 Avg Gif Size Avg JPG Size Avg PNG Size Average Image File Size, Top 5K RWD Non-RWD mdot 19. Faster ForwardTM Whats Next? - Track Popular RWD JS Libraries - Track Use of Responsive Images - Track future adoption of RWD - - Find Unicorn sites built Mobile First - Right now, Ill settle for another beer