Top Banner
Deri Jones Making your website fast - and scalable Jan 14 2015 #Digibury @Digibury @SciVisum_Ltd
41
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Digibury: SciVisum - Making your website fast - and scalable

Deri Jones

Making your website fast - and scalable

Jan 14 2015 #Digibury@Digibury

@SciVisum_Ltd

Page 2: Digibury: SciVisum - Making your website fast - and scalable

Tue Feb 3rd

Page 3: Digibury: SciVisum - Making your website fast - and scalable

Website Speed

● Black Friday and Xmas peaks

Page 4: Digibury: SciVisum - Making your website fast - and scalable
Page 5: Digibury: SciVisum - Making your website fast - and scalable

The Need for Speed

● Impatience ● SEO

Page 6: Digibury: SciVisum - Making your website fast - and scalable

The Need for Speed

● Impatience ● SEO ● UX is the final USP

Page 7: Digibury: SciVisum - Making your website fast - and scalable

YourUX

Your offering

Page 8: Digibury: SciVisum - Making your website fast - and scalable

What makes sites slow ?

Page 9: Digibury: SciVisum - Making your website fast - and scalable

Network effects ●ADSL 3G 4G

Page 10: Digibury: SciVisum - Making your website fast - and scalable

Latency

Page 11: Digibury: SciVisum - Making your website fast - and scalable

Latency targets● Backbone best:

● Local: − ADSL 25 mS − Mobile 250 mS

Page 12: Digibury: SciVisum - Making your website fast - and scalable

Network effects ●Bulky: Images ●Too many objects ●Not using HTTP Keep alive

Page 13: Digibury: SciVisum - Making your website fast - and scalable

Firebug / devTools

Page 14: Digibury: SciVisum - Making your website fast - and scalable
Page 15: Digibury: SciVisum - Making your website fast - and scalable

Browser effects ●Objects block ●Rendering time

Page 16: Digibury: SciVisum - Making your website fast - and scalable

3rd party scripts

Page 17: Digibury: SciVisum - Making your website fast - and scalable

The offender: ●<script src="http://3rdparty.com/script.js"></script>

Page 18: Digibury: SciVisum - Making your website fast - and scalable

Old solution

These days<script async defer src="siteScript.js" onload="myInit()"></script>

These days:

Page 19: Digibury: SciVisum - Making your website fast - and scalable

Browser effects ●Objects block ●Rendering time ●3rd party blocking

Page 20: Digibury: SciVisum - Making your website fast - and scalable

Ad serving is slowAnd no political motive to be faster Will get slower as big-Data progresses

Page 21: Digibury: SciVisum - Making your website fast - and scalable

Responsive webAvoid the Whitehouse.org story...

Page 22: Digibury: SciVisum - Making your website fast - and scalable

Can be good: ●Painless install ●Many configuration choices

Can be tricky: ●Embedded CSS obsession

Page 23: Digibury: SciVisum - Making your website fast - and scalable

Tools

● Firebug, DevTools ● HTTPArchive.org ● Webpagetest.org

Page 24: Digibury: SciVisum - Making your website fast - and scalable

Designers vs Speeders

Page 25: Digibury: SciVisum - Making your website fast - and scalable

Challenges

● Responsive web: − Better than 2 sites www. and m.

Page 26: Digibury: SciVisum - Making your website fast - and scalable
Page 27: Digibury: SciVisum - Making your website fast - and scalable

Website Scaling

Page 28: Digibury: SciVisum - Making your website fast - and scalable

Surprising lessons

● Cloud auto-scaling – doesn't work

Page 29: Digibury: SciVisum - Making your website fast - and scalable

Surprising lessons

Cloud auto-scaling – doesn't work − Scales too late − Allows rest of farm to die − Small print: − Strictly 'very often' doesn't work

Page 30: Digibury: SciVisum - Making your website fast - and scalable

Surpising lessons

● Cloud auto-scaling – doesn't work − Scales too late − Allows rest of farm to die

Page 31: Digibury: SciVisum - Making your website fast - and scalable

● Cloud auto-scaling

● Uncertain spin-up time ● DOA

Page 32: Digibury: SciVisum - Making your website fast - and scalable

● Scaling

● Don't obsess Disk IO − Yes it's moving metal − Web is a lot about static content

Page 33: Digibury: SciVisum - Making your website fast - and scalable

● Scaling

● The code platforms are good ● Many problems in SysAdmin configs ● CDNs

− Cache-Miss hurts

● But don't assume!

Page 34: Digibury: SciVisum - Making your website fast - and scalable

● Scaling

● Many big hosters: − Not motivated to help you

Page 35: Digibury: SciVisum - Making your website fast - and scalable

● Scaling

Page 36: Digibury: SciVisum - Making your website fast - and scalable

Users' Experience

It's both: ●The new battleground ●A challenge

− Single Page website − Offline-cache content − Users' journeys complexity

Page 37: Digibury: SciVisum - Making your website fast - and scalable

User Experience

● Cultural shift − Make every one responsible for it!

● Performance is a deliverable − Test every release − Continuous Integration

Page 38: Digibury: SciVisum - Making your website fast - and scalable

User Experience

● Hard ● Easier to save timings in your code

− ElasticSearch, Graphite ● RUM and Analytics help

Page 39: Digibury: SciVisum - Making your website fast - and scalable

User Experience

● 'Do what your Customers do' − more Synthetic monitoring − For another day ...

Page 40: Digibury: SciVisum - Making your website fast - and scalable

Making your website fast - and scalable

Deri Jones

Digibury January 2015

Page 41: Digibury: SciVisum - Making your website fast - and scalable

Resources● London Web performance meetup

− http://www.meetup.com/London-Web-Performance-Group

● Third Party Footprints

− http://www.slideshare.net/bbinto/third-party-footprint-evaluating-the-performance-of-external-scripts

● HTTP Archive

− https://speakerdeck.com/deanohume/the-good-the-bad-and-the-ugly-of-the-http-archive