Essential steps for a Great Web Experience - EBriks Infotech

7/30/2019 Essential steps for a Great Web Experience - EBriks Infotech

1/54

http://www.flickr.com/photos/dex1138/7879381800


2/54

http://www.flickr.com/photos/randomidea/247994072


3/54

http://www.flickr.com/photos/kindofindie/4099768084


4/54

100ms 1s 10s

Response Time in Man-computer Conversational TransactionsRobert B. Miller, 1968

Instant

Seamless Yawn!

Our perception of response time

3s - RecommendedLoad Time

6.5s - Alexa 2000Fall 2012


5/54

http://www.flickr.com/photos/yourdon/3366991042


6/54

Abandonment rate over 200+ sites / 177+ million page views over 2 weeks - http://www.measureworks.nl / Gomez
http://www.measureworks.nl/http://www.measureworks.nl/http://www.measureworks.nl/


7/54

Bing did some experiments

+1s - 2.8%

$/


8/54

Wallmart made some improvements

-1s +2%


9/54http://velocityconf.com/velocity2009/public/schedule/detail/7709

$$$

+12% +25% -50%


10/54http://www.flickr.com/photos/wwarby/7109538317


11/54

loadEventStart,

Prompt,

for,

unload,

App,

cache,DNS, TCP, Request, Response, onLoad,Processing,

redirectStart,

fetchStart,

domainLookupStart,

domainLookupEnd,

connectStart,

connectEnd,

requestStart,

responseStart,

responseEnd,

domLoading,

domInteracve,

domContentLoaded,

domComplete,

loadEventEnd,

redirect,

redirectEnd,

navigaonStart,

unloadStart,

unloadEnd,

unload,

(secureConneconStart),

http://www.w3.org/TR/navigation-timing/


12/54

Text


13/54

1 2 3 4 5 6 7 8 9 10

Visitors(%)

Load Time (s)


14/54

1 2 3 4 5 6 7 8 9 10 > 10

Visitors(%)

Load Time (s)

1 2 3 4 5 6 7 8 9 10 > 10

Visitors(%)

Load Time (s)


15/54

0

1

2

3

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 16 27 28 29 30

ResponseTime(s)

September 2012


16/54http://www.flickr.com/photos/arnybo/2679622216


17/54

YSlow PageSpeed


18/54


19/54


20/54


21/54

http://www.flickr.com/photos/getbutterfly/6317955134


22/54

Measured via residential ADSL line using Google Chrome

news.bbc.co.uk

ebay.co.uk

debenhams.co.uk

direct.gov.uk

amazon.co.uk

mumsnet.com

guardian.co.uk

0 1 2 3 4 5

BackendFrontend


23/54


24/54

news.bbc.co.uk tested via webpagetest.org throttled at 1.5Mbps(bursts over 1.5Mbps are artefact of testing)

10s0s 5s

0.5

1.0

1.5

2.0


25/54

1 2 3 4 5 6 7 8 9 10

PageLoadTim

e

Bandwidth (Mbps)


26/54

Carlos Bueno (@archivd) https://vimeo.com/14439742


27/54

1

2

3

4

0 20 40 60 80 100 120 140 160 180 200 220 240

Pa

geLoadTime(s)

Round Trip Time (ms)


28/54

TCP and the Lower Bound of Web PerformanceJohn Rauser

71kB

143kB

214kB

285kB

1 2 3 4 5 6 7 8 9 10 11

(TCP Segments)

Round Trips

Size


29/54

In 2012, the average worldwide RTT to Google is still

~100ms, and ~50-60ms within the US.

http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

we are looking at 100-1000ms RTT range on mobile

Ilya Grigorik


30/54

3G Radio Resource Control

http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf

IDLE CELL_FACH

CELL_DCH Idle for 5s

Idle for 12s

1-2s delay!

Exact timings vary and depend on carrier NOT device

1s delay


31/54

http://www.flickr.com/photos/mikebaird/2464769129/


32/54

Speeding Things Up - Some Basics

Compress Minify Reduce Requests Cache

HTTP Keep-Alive Use a CDN?


33/54

Whats the web made of?

ImagesScriptsStylesheetsHTMLFlash

Other

Composition of average web page via httparchive.org


34/54

JPEG PNG GIF

Optimise, Optimise, Optimise!

(jpegmini, pngmini, Smush.it, ImageOptim, Gifsicle etc.)


35/54

http://www.flickr.com/photos/roopaw/6985954465
http://www.flickr.com/photos/roopaw/6985954465http://www.flickr.com/photos/roopaw/6985954465


36/54

CSS SVG Fonts

Bitmaps still a challenge but interesting experiments around


37/54

http://www.flickr.com/photos/adactio/6960610178


38/54

Go Mobile First for Responsive Designs

http://seesparkbox.com


39/54

Standards support (picture? srcset?) is coming but unclear when!

Meanwhile services such as sencha.io, resrc.it and JS libraries -

picturefill.js, foresight.js can help.

Use Right-sized Images

http://www.flickr.com/photos/emzee/139794246


40/54

http://www.flickr.com/photos/barteko/6128499314


41/54


42/54

This is my title

.

.

.

CSS before JSIdeally one file*

Only JS neededduring page load

* Depends on size and whether major / minor breakpoints used


43/54

.

.

.

One file or many?

(Depends on size)

Script loaders can help but scripts arent discoverable by pre-fetcher


44/54

Until the script has executed, the rendering ofall elements below is blocked!


45/54

Virgin Media Broadband ISP UsersAffected by Website Routing Woes

ISP Review, May 26, 2012

Customer jcmm33 said:

Same issue here as well, been like this all day. Sites like

autotrader.co.uk dont appear to be accessible, others like

the telegraph.co.uk are waiting on other components to

download (content from sites like cg-global.maxymiser.com,

pixel.quantserve.com).
http://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.htmlhttp://www.ispreview.co.uk/index.php/2012/05/uk-virgin-media-broadband-isp-users-affected-by-website-routing-woes.html


46/54


47/54


48/54

http://www.flickr.com/photos/corneveaux/3248566797


49/54

http://www.flickr.com/photos/simeon_barkas/2557059247


50/54

Measure

AnalyseOptimise


51/54

http://www.flickr.com/photos/safari_vacation/5961260280


52/54

http://www.flickr.com/photos/jurvetson/6212582593


53/54

http://www.flickr.com/photos/auntiep/5024494612

@andydavies

[email protected]

http://www.slideshare.net/andydavies
http://www.slideshare.net/andydavieshttp://www.slideshare.net/andydaviesmailto:[email protected]:[email protected]


54/54

Date post:	04-Apr-2018
Category:	Documents
Upload:	ebriks-infotech-pvt-ltd
View:	219 times
Download:	0 times

Essential steps for a Great Web Experience - EBriks Infotech

Documents