Web Performance Optimisation

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/



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)


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


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