Web Performance Optimisation
•
3 j'aime•1,563 vues
The Need for Speed, a presentation at the Melbourne SEO Meetup on "Web Performance Optimisation and Why It Matters".
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (14)
Similaire à Web Performance Optimisation
Similaire à Web Performance Optimisation (20)
Plus de Chris Burgess
Plus de Chris Burgess (11)
Dernier
Dernier (20)
Web Performance Optimisation
- 1. I feel the need… the need for SPEED! @chrisburgess ChrisBurgess.com.au
- 2. Web performance op8misa8on and why it ma=ers
- 3. We know page speed is a ranking factor for search engines
- 4. November 13, 2009 Google first started talking about speed 4 years ago Today
- 5. So we get that Google thinks it’s a big deal…
- 6. But remember, we’re not just op8mising for search engines, page speed is a huge factor for users
- 7. Data from h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-‐Stress-‐Infographic-‐500.jpg Image: h5p://fisEuloFalent.com/wp-‐content/uploads/2012/06/angry-‐computer-‐large-‐500x320.jpg 78% of users say they’ve felt stress or anger while using a slow website
- 8. Data from h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-‐Stress-‐Infographic-‐500.jpg Image: h5p://celebrity-‐lists.com/wp-‐content/uploads/2012/03/brad-‐pi5.jpg 4% of people have thrown their phone while using a slow mobile site
- 9. 47% of consumers expect a web page to load in 2 seconds or less Data from h5p://blog.kissmetrics.com/loading-‐Nme/?wide=1 Image from: h5p://firewalkercreaNve.com/wp-‐content/uploads/2011/01/2seconds.jpg
- 10. Data from h5p://blog.kissmetrics.com/loading-‐Nme/?wide=1 Page load )me in seconds Page abandonment % 25% 50% 2 4 6 8 10
- 12. Why do happy users ma=er?
- 14. 1 second delay 7% reduc8on in conversions Data from h5p://blog.kissmetrics.com/loading-‐Nme/?wide=1
- 15. Data from h5p://blog.kissmetrics.com/loading-‐Nme/?wide=1 Image: h5p://workforceplanningtools.com.au/wp-‐content/uploads/2013/01/how-‐to-‐lose-‐money.jpg If your site made $100K a year that’s $7K in lost revenue for 1 second!
- 16. So happy users are more likely to: ▷ Hang around longer ▷ Come back to your site ▷ Become engaged ▷ Convert ▷ Talk about your site ▷ Share your content ▷ Link to your site
- 17. “We want you to be able to flick from one page to another as quickly as you can flick a page in a book. So we’re aiming very very high … at something like 100 milliseconds” – Urs Hölzle, Senior VP Opera5ons, Google Source: h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-‐Stress-‐Infographic-‐500.jpg Image: h5p://images.huffingtonpost.com/gen/143651/FLIP-‐BOOK-‐RAINBOW.jpg
- 19. In 2010, the Mozilla team found the Firefox download page was loading in 7 seconds. …by reducing the average page load 8me by 2.2 seconds, they saw a 15.4% increase in downloads. Source: h5p://zoompf.com/blog/2013/08/web-‐performance-‐basics-‐for-‐the-‐markeNng-‐team
- 20. How fast is fast enough? ▷ Within the user interface (UI) ▷ 0.1 second = User feels that the system is reacNng instantaneously ▷ 1 second = Limit for the user's flow of thought to stay uninterrupted ▷ 10 seconds = Limit for keeping the user's a5enNon focused, any longer users will want to perform other tasks while waiNng, so they should be given feedback indicaNng when the computer expects to be done. Source: h5p://www.nngroup.com/arNcles/response-‐Nmes-‐3-‐important-‐limits/
- 21. The appearance of performance…
- 22. Preloading vs Lazy Loading ▷ Preloading ▷ Lazy Loading
- 23. So how do we make our sites faster?
- 24. Client side Server side 80 / 20 Rule
- 25. There is no one size fits all…
- 26. You must test, then test some more…
- 27. Performance Tes8ng vs Load Tes8ng
- 30. There are six fundamental reasons companies measure performance of their sites: ▷ Establish baselines ▷ Detect and repair errors ▷ Measure the effecNveness of change ▷ Determine the impact of an outage ▷ Resolve disputes with users ▷ EsNmate how much capacity will be needed in the future Source: “Complete Web Monitoring” Alistair Croll and Sean Power
- 31. Google Best Prac8ces h5ps://developers.google.com/speed/docs/best-‐pracNces/rules_intro Yahoo! Performance Rules h5p://developer.yahoo.com/performance/rules.html …and there’s new content being added all the )me.
- 33. But connec8ons are gefng faster, right?
- 41. Processing generaNon-‐generosity… — [original] 300 x 178: Reduced by 8.9% (5.3 KB) — [thumbnail] 150 x 150: Reduced by 11.5% (3.1 KB) — [medium] 300 x 178: Reduced by 8.9% (5.3 KB) Processing optus_rockcorps_infographic_print… — [original] 600 x 1286: Reduced by 8.0% (15.2 KB) — [thumbnail] 150 x 150: Reduced by 6.1% (596 B) — [medium] 140 x 300: Reduced by 6.5% (1.1 KB) — [large] 477 x 1024: Reduced by 7.6% (10.2 KB) Processing australian-‐social-‐media-‐staNsNcs-‐2012-‐vs-‐2013_small… — [original] 600 x 450: Reduced by 11.4% (7.8 KB) — [thumbnail] 150 x 150: Reduced by 8.1% (666 B) — [medium] 300 x 225: Reduced by 8.7% (1.7 KB) Processing australian-‐social-‐media-‐staNsNcs-‐2012-‐vs-‐2013_large… — [original] 1020 x 765: Reduced by 14.8% (21.6 KB) — [thumbnail] 150 x 150: Reduced by 7.5% (633 B) — [medium] 300 x 225: Reduced by 8.2% (1.6 KB)
- 42. Also check out… ▷ h5p://compresspng.com/ ▷ h5p://pnggauntlet.com/ ▷ h5p://imageopNm.com/
- 43. What can make your site slow? ▷ HosNng ▷ Use of media (e.g photos and video) ▷ CSS, JavaScript, Fonts ▷ PlaEorm (theme, plugins) ▷ Errors and misconfiguraNon ▷ SSL (eek!)
- 45. There’s a plugin for that! ▷ WP Minify h5p://wordpress.org/plugins/wp-‐minify/ ▷ WP Smush.it h5p://wordpress.org/plugins/wp-‐smushit/ ▷ WP Super Cache h5p://wordpress.org/plugins/wp-‐super-‐cache/ (but there are others) ▷ Plugin Organizer h5p://wordpress.org/plugins/plugin-‐organizer/ ▷ JS & CSS Script OpNmizer h5p://wordpress.org/plugins/js-‐css-‐script-‐opNmizer/ ▷ WP-‐DBManager h5p://wordpress.org/plugins/wp-‐dbmanager/ ▷ P3 (Plugin Performance Profiler) h5p://wordpress.org/plugins/p3-‐profiler/ (see next slide) Source: “Complete Web Monitoring” Alistair Croll and Sean Power
- 46. P3 Profiler ▷ h5p://wordpress.org/plugins/p3-‐profiler/
- 47. Look for: # ############################################################################## # WEB PERFORMANCE # # ############################################################################## h5ps://github.com/h5bp/html5-‐boilerplate
- 48. Does everybody know what 8me it is?
- 49. Tool 8me -‐ tools for tes8ng ▷ WebPageTest.org ▷ Google AnalyNcs ▷ Yslow ▷ Your Web Brower “Developer Tools” ▷ Pingdom ▷ LoadImpact.com
- 53. Google Analy8cs
- 54. YSlow
- 55. PageSpeed Extension Also check out Speed Tracer for web apps
- 56. Web Browser (Developer Tools)
- 57. Google Tools ▷ h5ps://developers.google.com/speed/pagespeed/
- 59. • h5p://loadimpact.com/ Load Impact
- 64. More tools… ▷ ab ▷ cURL ▷ cURL-‐loader ▷ h5perf ▷ jmeter ▷ Siege
- 65. ab -‐n 100 -‐c 10 h=p://example.com/ 100 HTTP GET requests, 10 requests at a Nme
- 66. cmd:~ cb$ ab -‐n 100 -‐c 10 h=p://test.hypercrao.com/ This is ApacheBench, Version 2.3 <$Revision: 655654 $> Copyright 1996 Adam Twiss, Zeus Technology Ltd, h=p://www.zeustech.net/ Licensed to The Apache Sooware Founda8on, h=p://www.apache.org/ Benchmarking test.hypercrao.com (be pa8ent).....done Server Sooware: Apache/2.2.11 Server Hostname: test.hypercrao.com Server Port: 80 Document Path: / Document Length: 22595 bytes Concurrency Level: 10 Time taken for tests: 8.553 seconds Complete requests: 100 Failed requests: 0 Write errors: 0 Total transferred: 2303528 bytes HTML transferred: 2281598 bytes Requests per second: 11.69 [#/sec] (mean) Time per request: 855.335 [ms] (mean) Time per request: 85.533 [ms] (mean, across all concurrent requests) Transfer rate: 263.00 [Kbytes/sec] received Connec8on Times (ms) min mean[+/-‐sd] median max Connect: 30 33 2.0 33 39 Processing: 350 764 281.9 707 1495 Wai8ng: 220 474 233.2 388 1115 Total: 382 797 282.7 739 1531 Percentage of the requests served within a certain 8me (ms) 50% 739 66% 802 75% 876 80% 995 90% 1333 95% 1440 98% 1461 99% 1531 100% 1531 (longest request)
- 68. Mobile
- 70. Social
- 71. Where to get more informa8on
- 72. Steve Souders Source: h5p://stevesouders.com/
- 73. Planet Performance Source: h5p://www.perfplanet.com/
- 75. Recap So we’ve talked about: ▷ Why speed is important and how it can help your site ▷ Why it’s important to keep users happy ▷ Sweet spot = aim for 1 second or less ▷ Loading cues ▷ TesNng ▷ Tools ▷ Where to get more informaNon Source: “Complete Web Monitoring” Alistair Croll and Sean Power
- 76. In summary… Search engines care about speed… Users care about speed… Search engines care about users… So you should feel the need…the need for speed!
- 77. Thank you