24
Responsive in the Wild Guy Podjarny (@guypod ), CTO Web, Akamai
| Date post: | 21-Jun-2015 |
| Category: |
Technology |
| Upload: | guy-podjarny |
| View: | 877 times |
| Download: | 4 times |
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?
