Web Performance Optimisation
-
Upload
chris-burgess -
Category
Technology
-
view
586 -
download
0
description
Transcript of Web Performance Optimisation
![Page 1: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/1.jpg)
I feel the need… the need for SPEED!
@chrisburgess ChrisBurgess.com.au
![Page 2: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/2.jpg)
Web performance op8misa8on and why it ma=ers
![Page 3: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/3.jpg)
We know page speed is a ranking factor for search engines
![Page 4: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/4.jpg)
November 13, 2009
Google first started talking about speed 4 years ago
Today
![Page 5: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/5.jpg)
So we get that Google thinks it’s a big deal…
![Page 6: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/6.jpg)
But remember, we’re not just op8mising for search engines, page speed is
a huge factor for users
![Page 7: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/7.jpg)
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
![Page 8: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/8.jpg)
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
![Page 9: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/9.jpg)
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
![Page 10: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/10.jpg)
Data from h5p://blog.kissmetrics.com/loading-‐Nme/?wide=1
Page load )me in seconds
Page aba
ndon
ment %
25%
50%
2 4 6 8 10
![Page 11: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/11.jpg)
Source: h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-‐Stress-‐Infographic-‐500.jpg
![Page 12: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/12.jpg)
Why do happy users ma=er?
![Page 13: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/13.jpg)
Source: h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-‐Stress-‐Infographic-‐500.jpg
![Page 14: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/14.jpg)
1 second delay
7% reduc8on
in conversions
Data from h5p://blog.kissmetrics.com/loading-‐Nme/?wide=1
![Page 15: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/15.jpg)
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!
![Page 16: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/16.jpg)
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
![Page 17: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/17.jpg)
“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
![Page 18: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/18.jpg)
Source: h5p://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg-‐RAINBOW.jpg
![Page 19: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/19.jpg)
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
![Page 20: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/20.jpg)
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/
![Page 21: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/21.jpg)
The appearance of performance…
![Page 22: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/22.jpg)
Preloading vs Lazy Loading
▷ Preloading ▷ Lazy Loading
![Page 23: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/23.jpg)
So how do we make our sites faster?
![Page 24: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/24.jpg)
Client side
Server side
80 / 20 Rule
![Page 25: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/25.jpg)
There is no one size fits all…
![Page 26: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/26.jpg)
You must test, then test some more…
![Page 27: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/27.jpg)
Performance Tes8ng vs Load Tes8ng
![Page 28: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/28.jpg)
![Page 29: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/29.jpg)
![Page 30: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/30.jpg)
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
![Page 31: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/31.jpg)
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.
![Page 32: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/32.jpg)
![Page 33: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/33.jpg)
But connec8ons are gefng faster, right?
![Page 34: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/34.jpg)
Source: h5p://h5parchive.org/
![Page 35: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/35.jpg)
Source: h5p://h5parchive.org/
![Page 36: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/36.jpg)
Source: h5p://h5parchive.org/
![Page 37: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/37.jpg)
![Page 38: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/38.jpg)
![Page 39: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/39.jpg)
![Page 40: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/40.jpg)
![Page 41: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/41.jpg)
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)
![Page 42: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/42.jpg)
Also check out…
▷ h5p://compresspng.com/
▷ h5p://pnggauntlet.com/
▷ h5p://imageopNm.com/
![Page 43: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/43.jpg)
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!)
![Page 44: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/44.jpg)
![Page 45: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/45.jpg)
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
![Page 46: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/46.jpg)
P3 Profiler
▷ h5p://wordpress.org/plugins/p3-‐profiler/
![Page 47: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/47.jpg)
Look for:
# ############################################################################## # WEB PERFORMANCE # # ##############################################################################
h5ps://github.com/h5bp/html5-‐boilerplate
![Page 48: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/48.jpg)
Does everybody know what 8me it is?
![Page 49: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/49.jpg)
Tool 8me -‐ tools for tes8ng
▷ WebPageTest.org
▷ Google AnalyNcs ▷ Yslow ▷ Your Web Brower “Developer Tools”
▷ Pingdom
▷ LoadImpact.com
![Page 50: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/50.jpg)
WebPageTest.org (Example)
![Page 51: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/51.jpg)
![Page 52: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/52.jpg)
![Page 53: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/53.jpg)
Google Analy8cs
![Page 54: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/54.jpg)
YSlow
![Page 55: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/55.jpg)
PageSpeed Extension
Also check out Speed Tracer for web apps
![Page 56: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/56.jpg)
Web Browser (Developer Tools)
![Page 57: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/57.jpg)
Google Tools ▷ h5ps://developers.google.com/speed/pagespeed/
![Page 58: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/58.jpg)
Yo=aa ▷ h5p://www.yo5aa.com/
![Page 59: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/59.jpg)
• h5p://loadimpact.com/
Load Impact
![Page 60: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/60.jpg)
▷ h5p://www.200Please.com
200Please.com
![Page 61: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/61.jpg)
▷ h5ps://www.pingdom.com/
Pingdom
![Page 62: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/62.jpg)
![Page 63: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/63.jpg)
![Page 64: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/64.jpg)
More tools…
▷ ab ▷ cURL ▷ cURL-‐loader ▷ h5perf ▷ jmeter
▷ Siege
![Page 65: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/65.jpg)
ab -‐n 100 -‐c 10 h=p://example.com/
100 HTTP GET requests, 10 requests at a Nme
![Page 66: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/66.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)
![Page 67: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/67.jpg)
Other considera8ons
![Page 68: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/68.jpg)
Mobile
![Page 69: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/69.jpg)
High defini8on displays
![Page 70: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/70.jpg)
Social
![Page 71: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/71.jpg)
Where to get more informa8on
![Page 72: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/72.jpg)
Steve Souders
Source: h5p://stevesouders.com/
![Page 73: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/73.jpg)
Planet Performance
Source: h5p://www.perfplanet.com/
![Page 74: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/74.jpg)
Source: h5p://moz.com/ugc/why-‐site-‐speed-‐opNmisaNon-‐should-‐be-‐part-‐of-‐your-‐seo-‐strategy
Moz
![Page 75: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/75.jpg)
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
![Page 76: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/76.jpg)
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!
![Page 77: Web Performance Optimisation](https://reader034.fdocuments.in/reader034/viewer/2022052410/5554eb60b4c90566278b4c48/html5/thumbnails/77.jpg)
Thank you