Download to read offline
![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)](https://image.slidesharecdn.com/web-performance-optimisation-131010154053-phpapp02/85/Web-Performance-Optimisation-41-320.jpg)
![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)](https://image.slidesharecdn.com/web-performance-optimisation-131010154053-phpapp02/85/Web-Performance-Optimisation-66-320.jpg)
Uploaded byChris Burgess
Web Performance Optimisation
The document emphasizes the critical importance of web performance and page speed for both search engine rankings and user satisfaction. It highlights statistics showing user stress related to slow websites and outlines best practices, tools, and strategies for optimizing page load times. Ultimately, it notes that faster websites lead to happier users and increased conversions, making speed a vital aspect of web development.
More Related Content
Similar to Web Performance Optimisation
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
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
- 11.
- 12. Why do happy users ma=er?
- 13.
- 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
- 18.
- 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?
- 34.
- 35.
- 36.
- 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
- 50.
- 53.
- 54.
- 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/
- 58.
- 59. • h5p://loadimpact.com/ Load Impact
- 60.
- 61.
- 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)
- 67.
- 68.
- 69.
- 70.
- 71. Where to get more informa8on
- 72. Steve Souders Source: h5p://stevesouders.com/
- 73. Planet Performance Source: h5p://www.perfplanet.com/
- 74.
- 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.