Trilibis responsive-design-survey-news-sites final
-
Upload
ted-verani -
Category
Technology
-
view
245 -
download
0
Transcript of Trilibis responsive-design-survey-news-sites final
Software eNabling One Web
Responsive Design Survey
Do Responsive News Sites Deliver a Good Customer Experience OnMobile Devices?
March 2015
Goal
Prefaceß Most responsive sites deliver the same images to all
devices.ß In the majority of cases, the images are too heavy for fast
access by mobile devices.
Goalß Analyze how images affect the performance of responsive
sites, and to what extent optimizing these images can improve website performance for all devices.
3
4
Methodology
§ The Trilibis research team considered websites in the following categories: top technology blogs, IT/enterprise media, gadget/gaming media, and technology-‐specific blogs of the larger national news websites.
§ From these, we developed a shortlist of 100 prominent websites that use responsive design techniques to optimize content for mobile devices.
§ We then examined the total page and image weights of the home page of each of these responsive sites, and then measured the load time of each page on a mobile device.
MethodologyStep 1: Initial Analysis
ß Examined page and image weights of the home page of 100 responsive sites, using Y!Slow tool.
ß Examined load times using Chrome Network Analysis tool using LTE network.
ß Generated optimization target list of 26 sites using criteria:Top 10 images weight > 1 MB
Step 2: Image Optimization & Results Analysisß Optimized JPEG & PNG images of the targeted sites using image
compression and resizing for desktop, tablet, and phonesß Analyzed improvements
Step 3: Case Studiesß Replicated 2 sites using optimized imagesß Performed detail analysis of page & image weights and load
times, before and after optimization.
5
6
Analysis
1. Page Weight and Image Weight2. Image Weight as % of Page Weight3. Load time vs Page Weight
Page Weight vs. Image Weight
7
Min Max Median Industry Average
Image Weight 3 KB 22 MB 794 KB 1.7 MB
Page Weight 161 KB 23MB 1.6 MB 2.5 MB
0
5
10
15
20
25
1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51 53 55 57 59 61 63 65 67 69 71 73 75 77 79 81 83 85 87 89 91 93 95 97 99
MB
Page Weight
Image Weight
8
Image Weight as a Percentage of Page Weight
42
28 25
5
0
10
20
30
40
50
60
70
80
< 50% 50% -‐ 70% 70% -‐ 90% >90 %Image Weight as % of Page Weight
#of sites
Ø Images account for greater than 50% on 58 out of 100 sites (58%).Ø Images account for greater than 90% on 5 out of 100 sites (5%) .
Sites
Mobile Load Times vs. Page Weight (Chrome)
9
Load Times on Mobile
# Sites Average Page Weight
Average Image Weight
Image as % of Page Weight
Average # Images
Average Image Size
Good Under 4 seconds
26 1.6 MB 0.9 MB 56% 38 23 KB
Bad 4 – 8 seconds 47 3.0 MB 2.2MB 73% 41 52 KB
Ugly Over 8 seconds 27 2.5 MB 1.5 MB 60% 49 31KB
v Many responsive sites load slowly on mobile phones:§ 26 out of 100 responsive sites (26%) responded with acceptable load times.
§ 27 out of 100 responsive sites (27%) took anywhere from 8 – 35 seconds to load
v Load time becomes unacceptable when page weight exceeds 1.6 MB.
v On average, images make up 56%–73% of page weight.
Optimization Result – All Devices
11
Original (MB) Optimized (MB) Savings (MB) Avg Saving(%)
Desktop 81 43 38 47
Tablet 81 18 63 78
Phone 81 17 64 79
0
10
20
30
40
50
60
70
80
90
Desktop Tablet Phone
Original
Optimized
MB
79% average reduction
47%
78%
Average reduction after optimizing 26 sites
Optimization Results -‐ Desktop
12
Original After Optimization Improvement
Average Weight 3.2 MB 1.7MB 47%
Biggest Loser 17.9 MB 5.1 MB 72%
# of Heavy Sites (> 1 MB) 25 15 60%
Heaviest Site 17.9MB 5.1 MB 72%
Biggest Loser: 5MB saving
Average Image Weight After Optimization: 2.0 MB
Image Weight Before and After Image Optimization
Average Image Weight Original: 3.7 MB
0
2
4
6
8
10
12
14
16
18
20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
MB
Savings
Post Optimization Desktop
Optimization Results -‐ Desktop
13
v 12 out of 26 sites (46%) showed significant improvement of over 50%.v 2 out of 26 sites (8%) showed dramatic improvement of over 80%.
% Improvement
% Improvement for Desktop
14
5 5
2
0
2
4
6
8
10
12
14
16
< 50% 50% -‐ 70% 70% -‐ 80% > 80%
Series1
Optimization Results -‐ Mobile
14
Original After Optimization Improvement
Average Weight 3.2MB 684 KB 79%
Biggest Loser 17.9 MB 2 MB 89%
# of Heavy Sites (> 1 MB) 25 4 84%
Heaviest Site 17.9MB 2 MB 89%
Biggest Loser: 12.9 MB saving
Average Image Weight After Optimization: 684 KB
Image Weight Before and After Image Optimization
Average Image Weight Original: 3.2 MB
0
2
4
6
8
10
12
14
16
18
20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
MB
Series2
Series1
Optimization Results -‐ Mobile
15
v 24 out of 26 sites (92%) showed significant improvement of over 50%.v 10 out of 26 sites (38%) showed dramatic improvement of over 80%.
% Improvement
% Improvement for Mobile
2
8
6
10
0
2
4
6
8
10
12
< 50% 50% -‐ 70% 70% -‐ 80% > 80%
Series1
Optimization Results – Image Weight (KB)
16
Site Image SizePre-‐optimization
DesktopPost-‐optimization
TabletPost-‐optimization
MobilePost-‐optimization
1 987 506 411 3282 1310 943 587 4813 1470 655 607 5904 1500 1240 482 4825 1510 986 422 6906 1520 608 436 4227 1520 984 837 7838 1530 580 405 3859 1610 320 370 357
10 1650 348 262 26211 1670 1470 465 63612 1750 1450 992 95113 1780 1320 554 51014 2190 1010 567 81115 2260 1240 1240 110016 2430 500 454 45417 3000 2650 813 80418 3600 1080 512 44819 4110 2050 801 68520 4140 4140 378 37821 4150 625 510 56222 4190 3260 1200 116023 4900 1370 642 59624 5260 2730 1003 87525 5690 1270 1030 103026 17880 12780 2530 2000
Total 80607 43465 17697 16976Average 3224 1738 707 679
Sites whose images were optimizedhttp://www.computerweekly.com/http://www.newyorker.comhttp://www.macworld.co.uk/http://www.pocket-‐lint.com/http://www.macworld.com/http://startupchronicle.com/http://www.itworld.com/http://www.infosecurity-‐magazine.com/http://www.fortune.comhttp://www.engadget.com/http://www.ypulse.com/http://pando.com/http://singularityhub.com/
17
http://www.infoworld.com/http://discovermagazine.com/http://motherboard.vice.com/en_ushttp://www.9to5mac.com/http://bgr.com/http://www.boingboing.net/http://hbr.org/http://www.THR.comhttp://www.msnbc.comhttp://www.politico.comhttp://www.polygon.comhttps://www.techinasia.comhttp://thenextweb.com/
Case Study: Startupchronicle.com
§ Before SNOW IO
§ After SNOW IO
20
§ Page Weight: 5.3 MB§ Image Weight: 4.7 MB§ Load Time: 7.2 s
§ Page Weight: 1.4 MB (74%)§ Image Weight: 834 KB (82%)§ Load Time: 3.7 s (48%)
Case Study: Singularityhub.com
22
§ Before
§ After
§ Page Weight: 6.1 MB§ Image Weight: 4.9 MB§ Load Time: 7.7 s
§ Page Weight: 3.1 MB (49%)§ Image Weight: 2.0 MB (59%)§ Load Time: 5.2 s (30%)
Case Study: Discovermagazine.com
24
§ Before
§ After
§ Page Weight: 3.1 MB§ Image Weight: 2.6 MB§ Load Time: 6.8 s
§ Page Weight: 1.6 MB (48%)§ Image Weight: 1.1 MB (57%)§ Load Time: 6.2 s (6%)
25
Conclusions1. The page weights of the news media sites we sampled
were high.ß For 58 percent of the sample, images constituted
more than half of overall page weight; 5 percent of the sample served home pages with page weight consisting of more than 90 percent images
2. Many of the responsive sites in this survey performed badly on mobile phonesß Only 26 percent provided acceptable page-‐load timesß 27 percent were very slow (8 – 35 seconds to load)
3. Image optimization can reduce image weight by 47–79 percent.
4. Server-‐side image optimization delivered compelling performance gains on mobile devices:ß Average image weight was reduced by 79 percentß Page-‐load times were reduced by as much as 48
percent