web performance optimisation
Post on 15-May-2015
589 Views
Preview:
DESCRIPTION
TRANSCRIPT
I feel the need… the need for SPEED!
@chrisburgess ChrisBurgess.com.au
Web performance op8misa8on and why it ma=ers
We know page speed is a ranking factor for search engines
November 13, 2009
Google first started talking about speed 4 years ago
Today
So we get that Google thinks it’s a big deal…
But remember, we’re not just op8mising for search engines, page speed is
a huge factor for users
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
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
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
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
Source: h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-‐Stress-‐Infographic-‐500.jpg
Why do happy users ma=er?
Source: h5p://www.strangeloopnetworks.com/assets/images/Infographics/Web-‐Stress-‐Infographic-‐500.jpg
1 second delay
7% reduc8on
in conversions
Data from h5p://blog.kissmetrics.com/loading-‐Nme/?wide=1
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!
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
“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
Source: h5p://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_poster.jpg-‐RAINBOW.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
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/
The appearance of performance…
Preloading vs Lazy Loading
▷ Preloading ▷ Lazy Loading
So how do we make our sites faster?
Client side
Server side
80 / 20 Rule
There is no one size fits all…
You must test, then test some more…
Performance Tes8ng vs Load Tes8ng
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
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.
But connec8ons are gefng faster, right?
Source: h5p://h5parchive.org/
Source: h5p://h5parchive.org/
Source: h5p://h5parchive.org/
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)
Also check out…
▷ h5p://compresspng.com/
▷ h5p://pnggauntlet.com/
▷ h5p://imageopNm.com/
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!)
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
P3 Profiler
▷ h5p://wordpress.org/plugins/p3-‐profiler/
Look for:
# ############################################################################## # WEB PERFORMANCE # # ##############################################################################
h5ps://github.com/h5bp/html5-‐boilerplate
Does everybody know what 8me it is?
Tool 8me -‐ tools for tes8ng
▷ WebPageTest.org
▷ Google AnalyNcs ▷ Yslow ▷ Your Web Brower “Developer Tools”
▷ Pingdom
▷ LoadImpact.com
WebPageTest.org (Example)
Google Analy8cs
YSlow
PageSpeed Extension
Also check out Speed Tracer for web apps
Web Browser (Developer Tools)
Google Tools ▷ h5ps://developers.google.com/speed/pagespeed/
Yo=aa ▷ h5p://www.yo5aa.com/
• h5p://loadimpact.com/
Load Impact
▷ h5p://www.200Please.com
200Please.com
▷ h5ps://www.pingdom.com/
Pingdom
More tools…
▷ ab ▷ cURL ▷ cURL-‐loader ▷ h5perf ▷ jmeter
▷ Siege
ab -‐n 100 -‐c 10 h=p://example.com/
100 HTTP GET requests, 10 requests at a Nme
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)
Other considera8ons
Mobile
High defini8on displays
Social
Where to get more informa8on
Steve Souders
Source: h5p://stevesouders.com/
Planet Performance
Source: h5p://www.perfplanet.com/
Source: h5p://moz.com/ugc/why-‐site-‐speed-‐opNmisaNon-‐should-‐be-‐part-‐of-‐your-‐seo-‐strategy
Moz
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
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!
Thank you
top related