Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive In The Wild, 2014

1,642 views

Published on

Slides from my Web Directions South 2014 Talk.

Abstract:
Responsive Web Design (RWD) is upon us, and it seems like every website has either gone responsive or planning to do so. And in this rush to implement – performance is left behind…

Last November (2013), I ran a test identifying the responsive websites amongst the top 10,000 sites, and inspected their performance traits. The results were depressing, showing many sites have gone responsive, and hardly any tackled performance.

In this talk, we’ll track the progress (or lack there of) we made as an industry. We’ll look at the results of a new test, tracking our progress in adopting RWD and – more importantly – in addressing its performance implications. We’ll share high level stats, highlight key trends, drill into representative examples, and come away with a better understanding of what we should be doing better, both on our own sites and as an industry

Published in: Technology
  • Be the first to comment

Responsive In The Wild, 2014

  1. 1. Responsive in the Wild Guy Podjarny (@guypod), CTO Web, Akamai
  2. 2. ©2014 AKAMAI | FASTER FORWARDTM Responsive is Taking Off
  3. 3. ©2014 AKAMAI | FASTER FORWARDTM Detect RWD Option #1: Look for missing m. redirect Redirects aren’t always helpful… Desktop (non-RWD) Sites Don’t Redirect
  4. 4. ©2014 AKAMAI | 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”
  5. 5. ©2014 AKAMAI | 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!!!
  6. 6. ©2014 AKAMAI | FASTER FORWARDTM What’s The Test Test Details - Test Set: Alexa Top 10,000 - Partial data on top 100,000 Sites - Test Tool: WebPageTest - Load Chrome with small window - Look for Scrollbar - Ran ~Same Test I ran in 2013 Perspectives On Results - RWD Adoption - Performance Comparison - RWD vs. Desktop Sites - RWD on Small vs. Big Screen - RWD vs. Mobile Sites
  7. 7. 81.3% 18.7% 81.7% 18.3% 88.2% 11.8% ©2014 AKAMAI | FASTER FORWARDTM 2014 RWD Adoption Stats Top 100 Top 1K Top 10K RWD 11.8% 18.3% 18.7% Non RWD 88.2% 81.7% 81.3% RWD Share In Top Tier Websites
  8. 8. ©2014 AKAMAI | FASTER FORWARDTM RWD Adoption (On Same URLs) – 2013 vs 2014 10.5% RWD Adoption Over Time Nov, 2013 Oct, 2014 18.3% 18.7% 11.8% 11.8% 10.8% Top 100 Top 1,000 Top 10,000
  9. 9. ©2014 AKAMAI | FASTER FORWARDTM Sample Newly Responsive Sites Allegro AOL Oracle Digg Groupon
  10. 10. ©2014 AKAMAI | FASTER FORWARDTM RWD Desktop Vs. Performance Comparison
  11. 11. RWD Sites Use Fewer Requests – But Not Fewer Bytes Number of KB 25/50/75th percentile 95 1,149 1,140 ©2014 AKAMAI | FASTER FORWARDTM Number of Requests 25/50/75th percentile Not RWD RWD Not RWD RWD 74 75th Percentile 25th Percentile
  12. 12. ©2014 AKAMAI | FASTER FORWARDTM RWD Websites Use Bigger Objects 12,389 Average Resource Size (Bytes) 13,660 Not RWD RWD 8,219 11,418 15,769 16,519 9,782 14,524 Total JS CSS Image
  13. 13. ©2014 AKAMAI | FASTER FORWARDTM RWD Sites Use MUCH Bigger JPEGs 1,218 Average Image Size By Type Not RWD RWD 20,812 7,186 531 31,670 10,072 Gif JPG PNG
  14. 14. ©2014 AKAMAI | FASTER FORWARDTM Big Screen Small Screen Vs. Performance Comparison
  15. 15. ©2014 AKAMAI | FASTER FORWARDTM RWD Page Weight – Slightly lighter on smaller screen 71 RWD Sites, Small vs Big Screen Big Screen Small Screen 1,271 66 1,183 Requests Bytes (1,000s)
  16. 16. ©2014 AKAMAI | FASTER FORWARDTM RWD a bit smaller still with Mobile UA 71 RWD Sites, Small vs Big Screen Big Screen Small Screen Mobile UA 1,271 66 1,183 63 1,096 Requests Bytes (1,000s)
  17. 17. ©2014 AKAMAI | FASTER FORWARDTM Example: Web Directions 2014 Page 89 Requests 87 2,563 KB Weight 2,474 KB 79 (89%) Image Requests 78 (90%) 2,258KB (88%) Image Bytes 2,251 KB (91%)
  18. 18. ©2014 AKAMAI | FASTER FORWARDTM Site Distribution: RWD Weight on Mobile vs Big Screen Mobile Bigger 20% Mobile Slightly Smaller Same Size 36% Mobile 31% Much (2x+) Smaller 13% 2013 Results Much Smaller 7% Slightly Smaller Same 30% Size 63% 2014 Results
  19. 19. ©2014 AKAMAI | FASTER FORWARDTM RWD Mobile Site Vs. Performance Comparison
  20. 20. ©2014 AKAMAI | FASTER FORWARDTM RWD Site Weight Much Higher Than Mobile-Only Sites 53 Reqs & Bytes Across Site Types 1,642 37 715 RWD mdot Requests KBs Intersection of two data sets with ~600 mdot sites, ~500 RWD sites
  21. 21. ©2014 AKAMAI | FASTER FORWARDTM RWD Sites Delivery More Processing-Heavy Bytes 24 HTML/JS/CSS Bytes Across Site Types RWD Mdot 213 42 15 117 13 HTML KB JS KB CSS KB Intersection of two data sets with ~600 mdot sites, ~500 RWD sites
  22. 22. Absolute Processing Time ©2014 AKAMAI | FASTER FORWARDTM RWD Sites Take Longer To Process RWD Mdot 5,966 Compute as % Of Page Load RWD Mdot Tests Run on Moto-G ($200 Android), simulated 3G Network, using Chrome, via WebPageTest 3,265 Compute Time (ms) 31.30% 21.50% Compute as % Of Load Time
  23. 23. ©2014 AKAMAI | FASTER FORWARDTM Takeaways - The Web Is Going Responsive - Adoption nearly doubled in less than a year - Current RWD Sites’ Performance Is Not Great - Perform ~Better Than Desktop - Don’t Optimize Performance For Small Screens - Perform Worse Than Mobile-Only Sites - Require Too Much Client Compute On Mobile - RWD CAN Be Fast – It Just Requires Effort - Free copy of my O’Reilly book here: http://bit.ly/rf-free
  24. 24. Thanks! Questions? Responsive in the Wild Guy Podjarny (@guypod), CTO Web, Akamai

×