Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Why your slow loading website is costing you sales and how to fix it

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 34 Publicité

Why your slow loading website is costing you sales and how to fix it

Télécharger pour lire hors ligne

Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website
.

Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website
.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (19)

Similaire à Why your slow loading website is costing you sales and how to fix it (20)

Publicité
Publicité

Why your slow loading website is costing you sales and how to fix it

  1. 1. Why Your Slow Loading Website Is Costing You Sales and How to Fix It Joe Strommen @strommen joe@joestrommen.com
  2. 2. Introductions • Software Engineer for 11 years • 2 years ago – started caring about business • Apr 2014, founded fasterweb.io • On the backburner (for now)  • Software Consulting • Specializing in web performance
  3. 3. Today we’ll learn: 1. Why your website MUST be fast to be competitive 2. How a page is loaded by the browser 3. How to measure page speed 4. 5 simple ways to speed up YOUR website 5. HTTP/2
  4. 4. Fast Websites Make More Money #1 Speeding up the fundraising site by 60% increased donations by 14%. Kyle Rush, Obama Campaign (2012)
  5. 5. Fast Websites Make More Money #2 Speeding up advertising load times by roughly 1.5 seconds increased CTR by 12%. DoubleClick (2011)
  6. 6. Fast Websites Make More Money #3 Cutting 2.2 seconds off loading time increased conversions by 15%. Blake Cutler, Mozilla (2010)
  7. 7. Fast Websites Make More Money #4 A 400ms increase in load time caused a 5-9% increase in site abandonment. Nicole Sullivan, Yahoo (2008)
  8. 8. Faster sites are more successful.
  9. 9. Today we’ll learn: 1. Why your website MUST be fast to be competitive 2. How a page is loaded by the browser 3. How to measure page speed 4. 5 simple ways to speed up YOUR website 5. HTTP/2
  10. 10. How Pages are Loaded: TCP • Bytes from A to B • Reliable • In-order • Meaningless • Connection setup: 30-100ms • 6 connections per host 30 81 89 02 81 81 00 bd 94 f1 a0 8c 82 3e 3d 6b 83 15 34 29 4b 6f 06 21 4e 90 51 70 e7 a9 cc 44 70 77 c1 ff a0 ca ef 03 f3 fb 4e 34 63 ad e9 0f ae 6d 5c b3 b8 d9 46 7a 90 44 7f 50 51 8b 46 cb c4 83 73 6f f7 a6 90 fd 01 03 33 7c ba bc e1 03 a0 cd ca 41 1f 27 50 87 0e 14 69 b5 36 c5 e5 49 f6 04 c5 6c c0 c7 b4 51 0c 59 ca 9c 6c 3f d6 02 d2 82 b4 4e c4 a5 76 fb 8a 24 ae 5f e1 7d b9 de 2d 08 b9 12 25 62 b9 02 03 01 00 01
  11. 11. How Pages are Loaded: HTTP • Works over TCP • Download & Upload Files • Cookies • Caching • GZip Compression
  12. 12. How Pages are Loaded: HTML • References other files: • JavaScript • CSS • Images • Parsing waits for JavaScript • JS execution waits for CSS • Rendering waits for CSS
  13. 13. How Pages are Loaded: TLS/HTTPS • TLS: extension of TCP • HTTPS: HTTP over TLS • Extra overhead: • Key exchange • Certificates • Validation HTTP HTTPS TCP TLS
  14. 14. Today we’ll learn: 1. Why your website MUST be fast to be competitive 2. How a page is loaded by the browser 3. How to measure page speed 4. 5 simple ways to speed up YOUR website 5. HTTP/2
  15. 15. Measuring Page Speed • Page Load Time • Everything is finished downloading • Default metric for Google Analytics, etc. • Start Render Time • Something is showing up on the screen • DOM Content Loaded • All scripts, etc. have run • Speed Index
  16. 16. 2 Speed Factors: Latency & Bandwidth • Latency: inherent delay for any request • Limited by geography & speed of light • Bandwidth: download speed • Limited by infrastructure • Download time = Latency + (size / Bandwidth) Read this: https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
  17. 17. Typical Bandwidth, Latency • Cable/DSL Internet • 20 Mbps, 40ms • 4G LTE • 10 Mbps, 80ms • 3G • 1 Mbps, 300ms • Bandwidth delay = Latency delay for 100kB Note Mbps = megabits, not megabytes
  18. 18. Measuring Page Speed – Google Analytics ga('create', 'UA-58954847-1', { 'siteSpeedSampleRate': 100 }); User Timings ga('send', { 'hitType': 'timing', 'timingCategory': 'jQuery', 'timingVar': 'Load Library', 'timingValue': 20, 'timingLabel': 'Google CDN', 'page': '/my-new-page' });
  19. 19. Measuring Page Speed – WebPageTest.org • X-Axis = Time • Y-Axis = HTTP Downloads • Green = Latency • Blue = Download
  20. 20. Waterfall Diagram • Visualization of page HTTP requests • Generated by Fiddler (Windows)  • HTTP only • HAR format (HTTP Archive) • Includes DNS, TCP, SSL • Browser debug tools, plugins • webpagetest.org • tools.pingdom.com Load Sequence for jsfiddle.net
  21. 21. Today we’ll learn: 1. Why your website MUST be fast to be competitive 2. How a page is loaded by the browser 3. How to measure page speed 4. 5 simple ways to speed up YOUR website 5. HTTP/2
  22. 22. 0. GZip Compression for Static Content • Reduces text file size by ≈70% • Not useful for images • Use it! • Please, please use it • Be careful with GZip + secure dynamic content
  23. 23. 1. Caching Headers • 3 Headers • Cache-Control (e.g. “public, max-age=3600”, “private”, “no-cache, no-store”) • Etag (file hash), Last-Modified (date/time) • Recommended: Versioned static files • Reference with hash, e.g. <link href="site.css?v=za3ffbjGOWq0NBu49W9UkZzJsAlCYJzmfwKDuOAv7eM1"… • Cache-Control: public, max-age=31536000 • ETag & Last-Modified Headers • Downside: conditional requests, 304 Not Modified
  24. 24. Caching != Fast Webpages • Caching helps: • Returning visitors • Intra-site navigation • Caching does not help for: • New visitors • Frequent updates • Yahoo cache miss rate: • Users: 40-60% • Page Views: 20% http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
  25. 25. 2. Optimize File Delivery • nginx – faster file server than Apache, IIS • Also, caching reverse proxy • Content Delivery Network (CDN) • Geo-distributed file servers • Really, really good at serving files • Downsides: purging • Cloudflare – recommended free CDN
  26. 26. 3. Optimize Images • Choose appropriate format • JPEG – lots of colors, fuzzy edges • PNG/GIF – line art, few colors • Choose appropriate size • Optimize them! • Shrink up to 75%
  27. 27. 4. Bundle Resources • One file, multiple scripts • JavaScript or CSS • Reduce request quantity • Consider cacheability
  28. 28. 5. Minimize Web Fonts • While loading… • Use websafe font? (Firefox) • Show no text? (Chrome) • Streamline font weights • Bold font vs. CSS font-weight: bold; • Common subset: 50% smaller • http://www.fontsquirrel.com/tools/webfont-generator
  29. 29. 6. JavaScript tricks • PJAX (github.com/defunkt/jquery-pjax) • Link target is fetched with AJAX, pushed into DOM & history API • No DOMContentLoaded • Example: www.mprnews.org • InstantClick (instantclick.io) • PJAX, but fetch on mouseover/touchstart • Example: www.joestrommen.com
  30. 30. Today we’ll learn: 1. Why your website MUST be fast to be competitive 2. How a page is loaded by the browser 3. How to measure page speed 4. 5 simple ways to speed up YOUR website 5. HTTP/2
  31. 31. HTTP/2 • First update to HTTP since 1999 • Focused on performance • Implemented in all major browsers • Not really in servers yet… • Only supporting CDN is Akamai • Requires HTTPS
  32. 32. Multiplexing • Multiple downloads, one connection • No more latency problems • Perf benefit…in theory • Rumors of 10-30% improvement • Concrete studies…?
  33. 33. Further Reading • VelocityConf slides – velocityconf.com/devops-web-performance-2015/public/schedule/grid/public • Steve Souders – www.stevesouders.com • PerfPlanet Calendar – calendar.perfplanet.com • Twitter: #perfmatters • My Github: github.com/strommen • I’m always happy to discuss this stuff! joe@joestrommen.com
  34. 34. Thanks!

Notes de l'éditeur

  • Audience poll:
    Developer, Leader/Manager, Entrepreneur
    Front-end, back-end – what technologies?
  • (before showing stats) As computer experts, we are bold, confident, and determined.
    That’s unusual
    Most internet users are scared, impatient, confused. Not just grandma!
    Adding friction is going to make them less likely to succeed
    Nice thing about web perf is that we can measure it
    (stats)
    Wide range of sites have reported stuff like this
  • Key point
  • Nielsen study is at http://www.nngroup.com/articles/response-times-3-important-limits/
  • Nielsen study is at http://www.nngroup.com/articles/response-times-3-important-limits/
  • Typical wired-network latency is speed of light to the server + 10ms. It’s not going to improve much
    Bandwidth can be improved – it’s just building bigger pipes.
  • Unless your file is >100kB, it causes more overhead due to latency than bandwidth
    Caveats: bandwidth #s are theoretical, latency #s are practical. is lost due to overhead…but
    Still though, 100kB is massive – jQuery is only 33kB
    Keep this in mind, and we’ll come back to it later
  • Nielsen study is at http://www.nngroup.com/articles/response-times-3-important-limits/
  • http://www.webpagetest.org/result/150721_NN_16T3/1/details/
  • X-Axis = time
    Y-Axis = HTTP requests
    Black bar is TTFB
    Requests with nothing after the black bar are tiny – download is instantaneous
  • The polar bear images are 50kB and 18kB respectively. I don’t even remember which is which.
  • Web fonts are reasonably heavy – 20-100kB

    Another thing to consider is that fonts can cause reflows when they load if they’re wider than the browser is going to guess.
    Personal website – I hide the entire content while the font downloads
  • SPDY is basically a beta version of HTTP/2
    I haven’t seen a single thing published along the lines of “We enabled SPDY and saw improvements of X%”
  • SPDY is basically a beta version of HTTP/2
    I haven’t seen a single thing published along the lines of “We enabled SPDY and saw improvements of X%”

×