responsive)web)design why)image)optimization)is...

11
RESPONSIVE WEB DESIGN: WHY IMAGE OPTIMIZATION IS CRUCIAL FOR A MOBILE9FRIENDLY CUSTOMER EXPERIENCE EXECUTIVE SUMMARY Responsive websites are often not designed with the crucial mobile user as the foremost priority. For many web designers and developers, ensuring a high;quality visual experience and delivering a project within tight timelines are top priorities. However, the automatic smooth image resizing and other layout transformations that are the essence of responsive design can place heavy processing demands on mobile devices. In this survey, Trilibis assesses the impact of image;heavy responsive websites on the experience of mobile users. SURVEY FINDINGS ! Paying attention to image size is critical for ensuring that responsive websites load quickly and deliver the best experience for mobile users. ! In this survey, for 4 out of 5 highly rated responsive design websites, page weight and load time were sub;optimal. ! 69 percent of the responsive sites we sampled were image;heavy, with images contributing to more than 50 percent of overall page weight. ! The responsive sites in this survey generally performed badly on mobile phones. Only 32 out of the 155 responsive sites (21 percent) responded with acceptable load times. 32 percent took anywhere from 8 to 48 seconds to load ! Server;side image optimization delivered some compelling performance gains on mobile devices: Image weight was reduced by 77 percent. Page;load times were reduced by 28;54 percent.

Upload: others

Post on 05-Aug-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

RESPONSIVE)WEB)DESIGN:))WHY)IMAGE)OPTIMIZATION)IS)

CRUCIAL)FOR)A)MOBILE9FRIENDLY)CUSTOMER)EXPERIENCE)

)

)

)

)))) )

!

EXECUTIVE)SUMMARY)Responsive!websites!are!often!not!designed!with!the!crucial!mobile!user!as!the!foremost!priority.!For!many!web!designers!and!developers,!ensuring!a!high;quality!visual!experience!and!delivering!a!project!within!tight!timelines!are!top!priorities.!

However,!the!automatic!smooth!image!resizing!and!other!layout!transformations!that!are!the!essence!of!responsive!design!can!place!heavy!processing!demands!on!mobile!devices.!

In!this!survey,!Trilibis!assesses!the!impact!of!image;heavy!responsive!websites!on!the!experience!of!mobile!users.!!

SURVEY)FINDINGS)! Paying!attention!to!image!size!is!critical!for!ensuring!that!responsive!

websites!load!quickly!and!deliver!the!best!experience!for!mobile!users.!

! In!this!survey,!for!4!out!of!5!highly!rated!responsive!design!websites,!page!weight!and!load!time!were!sub;optimal.!

! 69!percent!of!the!responsive!sites!we!sampled!were!image;heavy,!with!images!contributing!to!more!than!50!percent!of!overall!page!weight.!

! The!responsive!sites!in!this!survey!generally!performed!badly!on!mobile!phones.!– Only!32!out!of!the!155!responsive!sites!(21!percent)!responded!with!

acceptable!load!times.!– 32!percent!took!anywhere!from!8!to!48!seconds!to!load!

! Server;side!image!optimization!delivered!some!compelling!performance!gains!on!mobile!devices:!– Image!weight!was!reduced!by!77!percent.!– Page;load!times!were!reduced!by!28;54!percent.!

!!

Page 2: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 2'

RESPONSIVE!DESIGN!AND!CUSTOMER!EXPERIENCE!FOR!MOBILE! !!Millions!of!consumers!prefer!to!use!mobile!devices!to!connect!with!the!websites!of!marketers,!publishers!and!top!brands.!According!to!August!2013!data!from!the!Pew!Research!Centeri,!63!percent!of!U.S.!adult!mobile!phone!owners!now!use!their!phones!to!go!online—double!the!level!of!2009.!Significantly,!34!percent!of!these!consumers!say!they!access!the!web!primarily!from!their!mobile!phones.!Meanwhile,!tablets,!which!account!for!8!percent!of!total!U.S.!web!traffic,!have!surpassed!smartphones!as!the!preferred!device!for!mobile!browsing.ii!!Designing!for!optimal!presentation!of!content!on!mobile!devices!has!become!a!high!priority!for!website!developers.!For!many!of!them,!ensuring!that!their!website!will!display!perfectly!across!all!types!of!mobile!devices!and!all!major!browsers!—!on!tablets!and!mobile!phones,!as!well!as!desktops.!!Responsive!web!design!(RWD)!has!become!a!popular!web!design!methodology!to!address!this!need.!!A!recent!Forrester!surveyiii!reported!that!more!than!40!percent!of!developers!chose!responsive!design,!or!a!variant!of!it,!as!part!of!their!current!web!design!approach.!The!same!report!also!noted!the!“hype!and!lack!of!understanding”!associated!with!RWD,!especially!with!regard!to!best!practices!related!to!implementation.!!

Here!at!Trilibis,!we’ve!watched!the!market!shift!from!so;called!“m;dot”!websites,!which!are!developed!specifically!for!mobile!phones!(and!offer!content!that!differs!from!full;featured!desktop!sites),!to!a!general!market!consensus!that,!for!most!brands,!it!makes!more!sense!to!have!a!single!website!codebase!that!serves!content!to!all!kinds!of!devices!—!desktop,!phone!and!tablet.!We!support!the!RWD!approach!because!we!see!it!as!an!efficient!way!to!deliver!a!holistic!“one!web”!experience!across!all!devices.!!However,!this!‘one!size!fits!all’!approach!has!some!potential!and!significant!downsides.!Radware!recently!tested!the!load!times!of!the!top!500!retail!web!sitesiv!and!found!that!pages!are!heavier!and!slower!than!they!were!just!one!year!ago.!This!correlates!with!our!own!experiences.!Through!our!work!with!clients!to!eliminate!performance!issues!on!their!websites,!we!noticed!that!aspects!of!RWD!sites!were!often!the!reason!for!slow!site!load!on!mobile!devices.!Too!often,!in!the!rush!to!deploy!a!time;sensitive!website,!performance!and!page;load!time!are!not!given!the!necessary!attention!to!ensure!the!best!experience!for!mobile!users.!

Page 3: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 3'

ANALYSIS:!IMAGE!SIZE!VS.!PAGE!WEIGHT!While!a!number!of!factors!can!determine!the!overall!weight!(i.e.,!size!in!bytes)!of!a!web!page,!images!are!generally!the!principle!contributor.!This!is!particularly!true!for!responsive!websites,!which!generally!serve!the!same!content!to!all!devices.!This!can!lead!to!overly!large!images!being!served!to!mobile!devices.!

This!survey!sets!out!to!measure!the!image!weight!of!the!top!RWD!websites!and!assesses:!1. How!much!do!images!contribute!to!page!

weight!on!responsive!websites?!2. How!much!does!this!affect!load!time!for!

different!types!of!users?!3. Can!page!weight!and!load!time!be!reduced!

without!affecting!user!experience?!

To!compile!a!list!of!the!best!RWD!sites,!we!turned!to!the!industry!experts.!Our!shortlist!was!based!on!recommendations!provided!by!Dashburst,!Econsultancy,!Mobify,!Search!Engine!Journal,!and!The!Next!Web.!This!yielded!a!list!of!155!prominent!

websites!that!use!RWD!techniques!to!optimize!content!for!mobile!devices!(see!Appendix!A).!

To!better!understand!how!much!the!size!of!each!website’s!home!page!consisted!of!images,!we!ran!a!set!of!tests!on!all!155!sites!to!rank!them!by!page!weight.!We!encountered!a!wide!range!of!results:!the!lightest!page!was!a!mere!57KB!while!the!heaviest!came!in!at!a!whopping!11MB.!

On!average,!the!mean!home!page!weight!of!the!155!sites!we!sampled!was!1.7MB,!with!a!median!weight!of!1.2MB.!Notably,!this!figure!was!considerably!heavier!than!the!420KB!average!page!weight!of!the!top!30!retailers!tracked!on!the!Keynote!Mobile!Commerce!Performance!Indexv!(a!well;regarded!industry!benchmark).!

Also!of!note!was!the!distribution!of!image!weight!as!a!percentage!of!overall!page!weight.!For!107!of!the!155!sites!(69!percent),!images!constituted!more!than!50!percent!of!overall!page!weight.!The!six!most!image;heavy!sites!served!home!pages!with!more!than!90!percent!of!overall!page!weight!consisting!of!images.

) )

Page 4: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 4'

PAGE!WEIGHT!VERSUS!LOAD!TIME!)Most!designers!would!agree!that!a!heavy!page!directly!conflicts!with!a!core!objective!that!led!to!the!adoption!of!a!RWD!approach:!to!deliver!an!excellent!experience!for!the!mobile!users.!In!fact,!there!is!evidenceiv!that,!in!general,!pages!delivered!to!mobile!users!are!loading!more!slowly:!9.3!sec!in!2014!vs!7.7!sec!in!2013,!based!on!the!median!load!time!of!500!ecommerce!home!pages.!!More!importantly,!there!is!a!direct!relationship!between!page;load!time!and!shopper!behavior.!A!study!conducted!by!Walmartvi!concluded!that!faster!pages!resulted!in!more!buyers!than!non;buyers.!!!Other!research!underscores!the!emphasis!on!page;load!times.!The!March!Keynote!index!showed!average!load!time!for!all!top!30!retailers!on!mobile!devices!was!7.73!seconds,!with!the!longest!clocking!in!at!18.15!seconds.!Research!conducted!by!The!Search!Agencyvii!found!that!the!average!time!it!takes!to!load!a!Fortune!100!company!homepage!on!a!smartphone!is!about!5!seconds.!This!research!found!that!average!page!load!speeds!were!much!quicker!on!dedicated!mobile!sites!(2.9!seconds)!than!on!desktop!sites!accessed!via!a!smartphone!(6.57!seconds),!while!those!sites!using!responsive!

design!had!the!slowest!load!speeds,!timing!out!at!an!average!of!8.4!seconds.!Based!on!the!performance!of!dedicated!mobile!sites,!one!conclusion!that!can!be!drawn!from!this!is!that!3;4!seconds!is!a!reasonable!target!for!page;load!time!on!mobile!devices.!!To!understand!the!load!times!of!the!155!responsive!sites!in!this!survey,!we!tested!them!using!the!Akamai!Mobitest!on;line!tool!and!recorded!the!following!times:!mean:!7.95!seconds;!median:!5.82!seconds;!minimum:!0.54!seconds;!maximum:!48.08!seconds.!There!was!clearly!room!for!much!improvement!in!page;load!time!for!the!responsive!design!websites!we!sampled:!!1. The!responsive!sites!generally!loaded!slowly!on!

mobile!phones.!Only!32!out!of!the!155!responsive!sites!(21!percent)!responded!with!acceptable!load!times!of!less!than!4!seconds.!32!percent!required!anywhere!from!8!to!48!seconds!to!load.!

2. Load!time!becomes!unacceptable!when!page!weight!exceeds!1!MB.!

3. On!average,!images!make!up!50–60!percent!of!page!weight!in!this!survey.

!!

!!!!! !!!) )

21%$

48%$

31%$

Only%1%in%5%Responsive%Sites%Demonstrated%Good%Load%Times%

Good$(<$4$secs)$

Bad$(438$secs)$

Ugly$(>$8$secs)$

0"

500"

1000"

1500"

2000"

2500"

3000"

Good"(<"4"secs)" Bad"(438"secs)" Ugly"(>8"secs)"

Image&Weight&a&Key&Driver&of&Overall&Page&Weight&

Other"Weight"

Image"Weight"

Page 5: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 5'

OPTIMIZING!PAGE!WEIGHT!ON!RESPONSIVE!WEBSITES!Responsive!websites!are!often!not!designed!with!image!optimization!in!mind.!For!many!web!designers!and!developers,!ensuring!a!high;quality!visual!experience!and!delivering!a!project!within!tight!timelines!are!top!priorities.!

However,!the!automatic!smooth!image!resizing!and!other!layout!transformations!that!are!the!essence!of!RWD!place!heavy!processing!demands!on!the!network!and!the!device.!For!desktop!computers!with!high;bandwidth!connections!and!abundant!local!resources!(disk,!RAM),!page!weight!is!not!a!major!concern.!But!for!mobile!devices,!the!exact!opposite!is!true.!!

What%if%a%web%server%could%pre4process%pages%before%serving%them%to%devices?!!

Could!server;side!image!optimization!deliver!a!lower!page!weight!without!compromising!user!experience?!To!answer!these!questions,!we!analyzed!those!websites!in!our!sample!that!served!a!home!page!weight!greater!than!1MB!and!served!at!least!one!image!exceeding!100KB!in!size.!64!of!the!155!websites!in!our!survey!met!these!criteria.!!

We!ran!every!image!on!these!websites!through!an!image!optimization!process!that!would!ensure!excellent!rendition!on!a!wide!range!of!desktop!and!mobile!devices.!To!replicate!a!real;world!experience,!we!optimized!the!images!across!all!devices!including!mobile!and!desktop.!

For!the!compression!we!used!a!cross;platform,!open;source!optimizer!(GD!graphics!library),!and!selected!image!compression!levels!as!follows:!• PNG!compression!level!set!to!9!of!9!(max)!• JPG!compression!level!set!to!50!of!100!!• Mobile!set!to!640!pixels!wide!

The)results)were)extraordinary.)

Before!server;side!optimization,!the!total!image!weight!of!all!64!responsive!websites!was!115MB.!The!image!optimization!process!dramatically!reduced!the!page!weight!for!every!class!of!device:!down!to!50MB)for)desktop)browsers,)30MB)for)tablets,)and)27MB)for)smartphones!(a!reduction!in!page!weight!of)57)percent,)74)percent)and)77)percent,!respectively).!The!mean!page!weight!of!the!64!websites!was!1.8MB;!optimization!reduced!this!to!780KB)(desktop),)470KB)(tablet))and)420KB)(phone).!

)) )

Page 6: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 6'

CASE!STUDIES:!APPLYING!SERVER;SIDE!OPTIMIZATION!

It!certainly!makes!sense!to!optimize!images!for!the!sake!of!efficiency,!and!our!tests!so!far!had!yielded!some!dramatic!page!weight!economies.!An!important!benefit!of!lighter!images!is!improved!page!load!time!—!especially!for!mobile!devices!on!cellular!networks.!We!wondered!how!much!we!could!improve!the!overall!user!experience!for!some!real;world!examples,!and!achieve!the!target!load!time!for!RWD!sites!on!mobile!devices!of!no!more!than!3;4!seconds.!

We!selected!three!RWD!websites:!boldandnoble.com,!engadget.com,!and!starbucks.com.!For!each!site,!we!replicated!each!site’s!content!on!our!own!webserver.!We!then!optimized!all!the!images!used!on!the!home!page!of!each!website,!calculated!the!image!weight!savings!for!both!desktop!and!mobile!devices,!and!then!calculated!load!times!both!before!and!after!optimization.!

!!!!CASE)1:)BoldandNoble.com)Images!accounted!for!2.2MB!(49!percent)!of!the!total!4.5MB!home!page!weight.!Optimization!results:!• Reduced)mobile)page)weight)from)2.2MB)to)212KB)(90%)savings).)• Shortened)load)time)from)6.63)seconds)to)3.912)seconds)(41%)reduction).))

!!! !

Page 7: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 7'

CASE)2:)Engadget.com)Images!accounted!for!0.9MB!(53!percent)!of!the!total!1.7MB!home!page!weight.!Optimization!results:!• Reduced)mobile)page)weight)from)861KB)to)362KB)(58%)savings).)• Shortened)load)time)from)11.814)seconds)to)5.45)seconds)(54%)reduction).)

!

!!CASE)3:)Starbucks.com)Images!accounted!for!0.9MB!(53!percent)!of!the!total!1.7MB!home!page!weight.!Optimization!results:!!• Reduced)mobile)page)weight)from)892KB)to)90KB)(91%)savings).)• Shortened)load)time)from)4.454)seconds)to)3.206)seconds)(28%)reduction).)

!

!.!

Page 8: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 8'

ADDING!DEVICE!AWARENESS!TO!RESPONSIVE!DESIGN!WEBSITES!!There!is!a!wealth!of!excellent!guidance!on!designing!websites!that!deliver!a!superior!user!experience!on!mobile!devices.!Using!responsive!techniquesviii!is!considered!a!best!practice!for!ensuring!a!consistent,!“one!web”!experience!across!all!devices.!!

In!this!survey,!for!4!out!of!5!highly!rated!responsive!design!websites,!page!weight!and!load!time!were!sub;optimal.!Applying!server;side!optimization!techniques!resulted!in!much!lighter!pages!and!substantially!improved!page;load!times!

These)findings)highlight)some)important)design)considerations)for)responsive)websites:)

! Paying!attention!to!image!size!is!critical!to!ensure!responsive!websites!load!quickly!and!deliver!the!best!experience!for!mobile!users.!

! 69!percent!of!the!responsive!sites!we!sampled!were!image;heavy,!with!images!contributing!to!more!than!50!percent!of!overall!page!weight.!

! The!responsive!sites!in!this!survey!generally!loaded!slowly!on!mobile!phones.!– Only!32!out!of!the!155!responsive!sites!(21!

percent)!responded!with!acceptable!load!times.!

– 32!percent!took!anywhere!from!8!to!48!seconds!to!load!

! Server;side!image!optimization!delivered!some!compelling!performance!gains!on!mobile!devices:!– Image!weight!was!reduced!by!77!percent.!– Page;load!times!were!reduced!by!28;54!

percent.!

Recommendations)for)website)designers)Our!research!shows!that!delivering!a!truly!exceptional!user!experience!on!the!Web!requires!more!than!simply!redefining!layout!and!styling!for!the!screen!width!of!a!particular!device.!!

Performance!and!user!context!are!two!critical!areas!where!the!limitations!of!responsive!design!are!apparent.!!

To!address!these!shortcomings,!server;side!technologies!can!be!used!in!conjunction!with!responsive!design!techniques.!These!provide!the!ability!to!fine;tune!the!user!experience!for!the!device!that!is!accessing!the!website.!Server;side!controls!can!easily!allow!for!a!complete!swap!of!crucial!page!elements!and!enable!custom!functionality!based!on!local!device!characteristics.!

For!example,!a!retailer!can!ensure!fast!presentation!of!a!product!catalog!with!images!optimized!for!the!accessing!device.!Or!a!content;heavy!site!can!deliver!entirely!different!ad!placement!based!on!device!and!user!context.!

These!server;side!technologies!are!simple!to!implement!and!apply!readily!available!server;side!computing!resources!to!optimize!the!image!size!for!the!accessing!device!before!it!is!sent!to!the!client.!This!approach!can!deliver!much!faster!load!times!—!and!a!far!better!experience!for!the!user.!!

Trilibis!is!focused!on!creating!server;side!technologies!that!simplify!multi;device!development!and!deployment.!By!marrying!server;side!technology!with!responsive!design!techniques,!the!web!server!can!handle!all!the!heavy!lifting,!providing!the!mobile!visitor!with!a!smooth!and!fast!web!experience.!

!) )

Page 9: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 9'

APPENDIX!A:!LIST!OF!ALL!SITES!SURVEYED!2012.buildconf.com/!2012.dconstruct.org/!2012.fromthefront.it/!2013.ampersandconf.com/!2013.uxlondon.com/!24ways.org/!8faces.com/!ableton.com/!abookapart.com/!abwoodenwatches.com/!adayinbigdata.com/!aids.gov/rwd;router/!alistapart.com/!alwayscreative.net/!anderssonwise.com/!andytaylor.me/!aneventapart.com/!awwwards.com/!bahs.com/!bbc.co.uk/!beamland.com/!beta.tfl.gov.uk/!beta.visitstockholm.com/!boldandnoble.com/!bostonglobe.com/!cafeevoke.com/!capitalone.com/!carters.com/!chrisbrogan.com/!christmas.jackdaniels.com/!cinnamontoast.ca/!clearleft.com/!cloggs.co.uk/!colly.com/!contentsmagazine.com/!css;tricks.com/!currys.co.uk/!dacs.org.uk/!dadaabstories.org/!danielvane.com/!davegamache.com/!designedtomove.org/!designweekportland.com/!disney.com/!dmcileasing.com/!dressresponsively.com/!dribbble.com/!ebags.com/!ee.co.uk/!einstein.edu/!engadget.com/!

fantassin.fr/!firebox.com/!fitforaframe.com/!fivesimplesteps.com/!fizzle.co/sparkline!foodsense.is/!formfett.net/!fray.com/!garmin.com/!gatwickairport.com/!getbootstrap.com/!getdonedone.com/!gigaom.com/!gingerwhale.com/!goldinteractive.ch/!google.com/culturalinstitute/home!gov.org/!gravitymovie.warnerbros.com/!happycog.com/!harvard.edu/!hbc.com/!hiutdenim.co.uk/!house.pl/kampania/!html.adobe.com/!hubspot.com/!iawriter.com/ipad/!indochino.com/!itravelyork.info/!jcsuzanne.com!justinaguilar.com/!kennedyandoswald.com/!kershaw.kaiusaltd.com/!khanacademy.org/!kickstarter.com/year/2012!kinhr.com/!lancaster.ac.uk/!lifeingreenville.com/!listverse.com/!macdonaldhotels.co.uk/!mailchimp.com/!mashable.com/!maximin.tv/srm/!microsoft.com/en;ph/!microsoft.com/en;us/!mitsubishi;motors.com.au/!mry.com/!mulberry.com/us/!multcolib.org/!myrainbownursery.co.uk/!nd.edu/!nixon.com/ca/en/!

nixon.com/uk/en/!nixon.com/us/en/!nokia.com/us;en/!nordicruby.org/!nscs.org/!oldspitalfieldsmarket.com/!oliverrussell.com/!olympic.ca/!omusicawards.com/!oxforddictionaries.com/us/!path.com/!pittsburghkids.org/!salesforce.com/!saltsurf.com/!sasquatchfestival.com/!sbnation.com/!singita.com/!skinnyties.com/!smashingmagazine.com/!sony.com/!spigotdesign.com/!squarespace.com/!starbucks.com/!stuffandnonsense.co.uk/!taktisk.volkswagen.no/!tattly.com/!teamtreehouse.com/!teehanlax.com/!thatma.de/!thenextweb.com/!thepaintdrop.com/!theprivatebank.com/!theworkcycle.com/!tilde.io/!time.com/time/!traveloregon.com/!trentwalton.com/!ucsd.edu/!unitedpixelworkers.com/!us.aritzia.com/!us.illyissimo.com/!us.suitsupply.com/!viljamis.com/!visitlondon.com/!vouchercodes.co.uk/!whisperism.com/!whitelotusaromatics.com/!wired.co.uk/!worldwildlife.org/!wythehotel.com/!zurb.com/!

!!! !

Page 10: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 10'

APPENDIX!B:!LOAD!TIMES!OF!THE!MOST!IMAGE;HEAVY!RESPONSIVE!WEBSITES!!Responsive)website) Load)Time) Good/Bad/Ugly)einstein.edu/' 2.49' ''alwayscreative.net' 2.83' ''kennedyandoswald.com/#!/premiereFscreen' 2.90' ''awwwards.com' 3.03' ''fitforaframe.com/' 3.98' ''saltsurf.com/' 4.21' ''hiutdenim.co.uk/' 4.47' ''2012.fromthefront.it/' 4.50' ''lifeingreenville.com/' 4.54' ''2012.buildconf.com/' 4.74' ''nixon.com/ca/en/' 4.81' ''path.com/' 4.84' ''us.suitsupply.com/en_US/home' 5.04' ''gravitymovie.warnerbros.com/' 5.08' ''bbc.co.uk/' 5.13' ''ucsd.edu' 5.42' ''html.adobe.com' 5.54' ''beamland.com/' 5.59' ''nscs.org' 5.67' ''designedtomove.org/' 5.76' ''thenextweb.com/' 5.78' ''us.illyissimo.com/' 5.87' ''tattly.com' 5.95' ''mry.com/' 6.16' ''visitlondon.com/' 6.49' ''us.aritzia.com/' 6.54' ''boldandnoble.com/' 6.98' ''nordicruby.org/' 7.05' ''worldwildlife.org/' 7.51' ''theprivatebank.com/' 7.56' ''abwoodenwatches.com' 7.59' ''house.pl/kampania' 8.05' ''microsoft.com/enFus/' 8.12' ''teamtreehouse.com' 8.14' ''adayinbigdata.com/' 8.72' ''starbucks.com/' 9.89' ''pittsburghkids.org/' 10.34' ''currys.co.uk/gbuk/index.html' 10.75' ''fandango.com/movies/valentinesday' 10.91' ''singita.com/' 11.35' ''engadget.com/' 11.42' ''omusicawards.com' 11.87' ''carters.com/' 12.21' ''time.com/time/' 12.63' ''oldspitalfieldsmarket.com' 13.39' ''disney.com' 13.40' ''formfett.net/' 13.44' ''cloggs.co.uk/' 14.13' ''nokia.com/usFen/' 15.48' ''sony.com/' 15.52' ''hubspot.com/' 15.97' ''itravelyork.info/' 15.98' ''traveloregon.com' 16.24' ''olympic.ca/' 17.66' ''garmin.com/enFUS' 18.57' ''kinhr.com' 20.50' ''oliverrussell.com' 21.14' ''wired.co.uk' 21.98' ''dadaabstories.org' 24.76' ''google.com/culturalinstitute/home' 27.97' ''sbnation.com/' 28.66' ''sasquatchfestival.com/' 48.08' ''

Page 11: RESPONSIVE)WEB)DESIGN WHY)IMAGE)OPTIMIZATION)IS …mp.s81c.com/pwb-production/000001-partner/3936/documentation/6273_en.pdfRESPONSIVE)WEB)DESIGN:)) WHY)IMAGE)OPTIMIZATION)IS) CRUCIAL)FOR)A)MOBILE9FRIENDLY)

Trilibis'Mobile' April'2014' 11'

APPENDIX!C:!STUDY!METHODOLOGY!!Trilibis!compiled!a!list!of!155!prominent!responsive!sites!based!on!published!data!from!Dashburst,!Econsultancy,!Mobify,!Search!Engine!Journal,!and!The!Next!Web.!Researchers!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.!For!the!image!optimization!analysis,!we!optimized!the!JPEG!and!PNG!images!of!the!targeted!sites!using!image!compression!and!resizing!methods!suitable!for!desktop!machines,!tablets,!and!smartphones.!!!Other)sources)referenced)in)this)survey:) i!Internet!Retailer,!September!2013!ii!Adobe!Digital!Marketing!Blog,!March!2013!iii!More!Than!Hype:!Determining!When!To!Use!Responsive!Web!Design,!Mark!Grannan!&!Peter!Sheldon,!Forrester!Research,!November!2013!iv!The!Great!Web!Slowdown,!Web!Performance!Today,!February!2014!v!Keynote!Systems.!Performance!Index:!Mobile!Commerce!(Retail)!–!US,!March!2014!vi!How!page!speed!correlates!to!business!metrics!at!Walmart.com,!Web!Performance!Today,!February!2012.!vii!Mobile!Experience!Scorecard:!Fortune!100!Companies,!The!Search!Agency,!October!2013!viii!12!Tips!for!Creating!a!Mobile;Friendly!Website,!CIO.com,!March!2014!!!