responsive in the wild, 2014
DESCRIPTION
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 industryTRANSCRIPT
Responsive in the Wild Guy Podjarny (@guypod), CTO Web, Akamai
©2014 AKAMAI | FASTER FORWARDTM
Responsive is Taking Off
©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
©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”
©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!!!
©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
©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
11.8% 88.2%
18.3% 81.7%
18.7% 81.3%
©2014 AKAMAI | FASTER FORWARDTM
RWD Adoption (On Same URLs) – 2013 vs 2014
10.5% 11.8% 10.8% 11.8%
18.3% 18.7%
Top 100 Top 1,000 Top 10,000
RWD Adoption Over Time Nov, 2013 Oct, 2014
©2014 AKAMAI | FASTER FORWARDTM
Sample Newly Responsive Sites
Allegro AOL Oracle Digg Groupon
©2014 AKAMAI | FASTER FORWARDTM
Performance Comparison
RWD Desktop
Vs.
©2014 AKAMAI | FASTER FORWARDTM
RWD Sites Use Fewer Requests – But Not Fewer Bytes
Not RWD RWD
Number of Requests 25/50/75th percentile
Not RWD RWD
Number of KB 25/50/75th percentile
1,149 1,140 95 74
75th Percentile
25th Percentile
©2014 AKAMAI | FASTER FORWARDTM
RWD Websites Use Bigger Objects
12,389 13,660
8,219
11,418
15,769 16,519
9,782
14,524
Total JS CSS Image
Average Resource Size (Bytes) Not RWD RWD
©2014 AKAMAI | FASTER FORWARDTM
RWD Sites Use MUCH Bigger JPEGs
1,218
20,812
7,186
531
31,670
10,072
Gif JPG PNG
Average Image Size By Type Not RWD RWD
©2014 AKAMAI | FASTER FORWARDTM
Performance Comparison
Big Screen Small Screen
Vs.
©2014 AKAMAI | FASTER FORWARDTM
RWD Page Weight – Slightly lighter on smaller screen
71
1,271
66
1,183
Requests Bytes (1,000s)
RWD Sites, Small vs Big Screen Big Screen Small Screen
©2014 AKAMAI | FASTER FORWARDTM
RWD a bit smaller still with Mobile UA
71
1,271
66
1,183
63
1,096
Requests Bytes (1,000s)
RWD Sites, Small vs Big Screen Big Screen Small Screen Mobile UA
©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%)
©2014 AKAMAI | FASTER FORWARDTM
Site Distribution: RWD Weight on Mobile vs Big Screen
Mobile Bigger 20%
Mobile Slightly Smaller 31% Mobile
Much (2x+) Smaller 13%
Same Size 36%
2013 Results Much
Smaller 7%
Slightly Smaller 30% Same
Size 63%
2014 Results
©2014 AKAMAI | FASTER FORWARDTM
Performance Comparison
RWD Mobile Site
Vs.
©2014 AKAMAI | FASTER FORWARDTM
RWD Site Weight Much Higher Than Mobile-Only Sites
53
1,642
37
715
Requests KBs
Reqs & Bytes Across Site Types RWD mdot
Intersection of two data sets with ~600 mdot sites, ~500 RWD sites
©2014 AKAMAI | FASTER FORWARDTM
RWD Sites Delivery More Processing-Heavy Bytes
24
213
42 15
117
13
HTML KB JS KB CSS KB
HTML/JS/CSS Bytes Across Site Types RWD Mdot
Intersection of two data sets with ~600 mdot sites, ~500 RWD sites
©2014 AKAMAI | FASTER FORWARDTM
RWD Sites Take Longer To Process
Tests Run on Moto-G ($200 Android), simulated 3G Network, using Chrome, via WebPageTest
5,966
3,265
Compute Time (ms)
Absolute Processing Time RWD Mdot
31.30%
21.50%
Compute as % Of Load Time
Compute as % Of Page Load RWD Mdot
©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
Responsive in the Wild Guy Podjarny (@guypod), CTO Web, Akamai
Thanks! Questions?