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

1. Responsive in the Wild
Guy Podjarny (@guypod), CTO Web, Akamai

2. ©2014 AKAMAI | FASTER FORWARDTM
Responsive is Taking Off

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. ©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. ©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. ©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. 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. ©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. ©2014 AKAMAI | FASTER FORWARDTM
Sample Newly Responsive Sites
Allegro AOL Oracle Digg Groupon

10. ©2014 AKAMAI | FASTER FORWARDTM
RWD Desktop
Vs.
Performance Comparison

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. ©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. ©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. ©2014 AKAMAI | FASTER FORWARDTM
Big Screen Small Screen
Vs.
Performance Comparison

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. ©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. ©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. ©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. ©2014 AKAMAI | FASTER FORWARDTM
RWD Mobile Site
Vs.
Performance Comparison

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. ©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. 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. ©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. Thanks!
Questions?
Responsive in the Wild
Guy Podjarny (@guypod), CTO Web, Akamai