web performance 101 - gil givati

mailto:[email protected]

...נעים להכיר חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות

בכלל ומערכות מבוססות דפדפן בפרט

מנהליIsrael Web Performance Optimization meetup

מטמיעי ומפתחי פתרונות תוכנה בתחומים, נציגי:

האצת אתרים

ניטור ואיתור תקלות בזמן אמת

www.efficens-software.com

Twitter: efficens

Facebook :מ"בע סופטוור אפיסנס

http://www.meetup.com/wpo-il

בתוכנית היום What is Web Performance

How does Web Performance affects our bottom line

The web Performance building blocks

Knowing your audience: understanding Browser behaviors

Measuring Performance using YSlow and Google PageSpeed

Understanding Waterfalls

Working with WebPageTest

Working with DynaTrace Ajax Edition

JavaScript and you

באתר המבקרעל ידי הנתפסהזמן "

עד לתגובה ( כמו לחיצה)בין פעולה

"משמעותית

Stephan Thair, Seriti consulting

תפיסת הזמן

http://velocityconf.com/velocity2010/public/schedule/detail/13019

איטיות והמוח שלנו

“Brain wave analysis from the experiment revealed that participants had to concentrate up to 50% more when using badly performing websites, while facial muscle and behavioural analysis of the subjects also revealed greater agitation and stress in these periods.

http://www.ca.com/Files/SupportingPieces/final_webstress_survey_report_229296.pdf

-8%

-25%

-33% -38%

-40

-35

-30

-25

-20

-15

-10

-5

0

5

10

2 secs 4 secs 6 secs 8 secs

Performanc

e

improvemen

t (seconds)

Percentage

change in

page

abandonme

nt

Source: Gomez 2010 Study of 500 Million End-User Interactions Across 200+ Web Sites

http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/

? מהם ביצועים טובים

0.1 מיידיתנותן תחושה של תגובה שניות

1 רצף מחשבתימונע הסחת דעת ומאפשרת שניה

10 הגולשתשומת לב שומרות על שניות

8 הוא הזמן הממוצע שלוקח לגולש לקבל החלטה האם שניות

עובר למקום אחרהוא נשאר בדף או

Jakob Neilsen. http://www.useit.com/alertbox/response-times.html

Web performance anatomy

Server Browser

Latency

HTTP

Cache

Parsing

Layouting

Rendering

Images

CSS

JavaScript

Flash

DNS

Server

3rd-party

servers

Internet

AJAX/XHR IE

Firefox

Chrome

Safari

Opera

19

מרכיבי זמן התגובה

Server side Content delivery Rendering

מחוץ למסגרת המערכת אבל

עדיין באחריותנו

קריטי ליישומי

Web 2.0

מהזמן נצרך מחוץ לגבולות השרת 80-90%

Bandwidth & Latency

בקווי 200KBהורדת

1.5Mb/Sec

כשנייהאורכת

?פשוט ורזה , לא הבטיחו לנו ממשק אחיד

It’s a Multi-Browser World: Different for Each

Customer Base

Source: http://arstechnica.com/web/news/2011/02/chrome-takes-10-usage-share-ie-continues-to-haemorrhage.ars; http://gs.statcounter.com/#browser_version-ww-monthly-201001-201101

Source: Gomez Real-User Monitoring

Real users around the world

Broadband connections only

466 million page measurements

200+ sites

0

5

10

15

20

25

Seco

nd

s

Load Time Perceived Render

Fragmented, rapidly-changing market

• Who is #1 today? Tomorrow?

• Who is #1 with your customers?

Different operational characteristics

• Number of parallel connections

• JavaScript processing

• Etc.

Processing moving to the browser

Major impact on user experience

Browser

Network

Infrastructure

• Performance

• Functionality

• Appearance

• Percentage of total response time

6

8

7

http://little-fr34k.deviantart.com/art/Google-Chrome-Dock-Icon-96826959

?מה מודדים בדיקות מבוססות זמן•

• Time to first byte

• Time to first impression

• onLoad

• Fully loaded time

המבוססים על מתודולוגיות ידועות" ציוני תקן"•

• Yahoo! YSlow

• Google Page Speed

• dynaTrace AJAX edition

Minimize HTTP Requests

Use a Content Delivery Network

Add an Expires or a Cache-

Control Header

Gzip Components

Put StyleSheets at the Top

Put Scripts at the Bottom

Avoid CSS Expressions

Make JavaScript and CSS

External

Reduce DNS Lookups

Minify JavaScript and CSS

Avoid Redirects

Remove Duplicate Scripts

Configure ETags

Make AJAX Cacheable

Use GET for AJAX Requests

Reduce the Number of DOM

Elements

No 404s

Reduce Cookie Size

Use Cookie-Free Domains for

Components

Avoid Filters

Do Not Scale Images in HTML

Make favicon.ico Small & Cacheable

http://developer.yahoo.com/yslow/help/#guidelines

Avoid bad requests

Avoid CSS expressions

Combine external CSS

Combine external JavaScript

Defer loading of JavaScript

Enable compression

Leverage browser caching

Leverage proxy caching

Minify CSS

Minify HTML

Minify JavaScript

Minimize request size

Minimize DNS lookups

Minimize redirects

Optimize images

Optimize the order of styles and

scripts

Parallelize downloads across

hostnames

Put CSS in the document head

Remove unused CSS

Serve resources from a consistent

URL

Serve scaled images

Serve static content from a

cookieless domain

Specify a character set early

Specify image dimensions

Use efficient CSS selectors http://code.google.com/speed/page-speed/docs/rules_intro.html

?מה חשוב

http://www.httpArchive.org

טעינה מהירות מספר בקשות YSLOWציון PSציון שם האתר

Roninsight 77 94 4 2.258

Roninsight

(WP)

88 92 8 8.042

ionroad 76 74 90 4.05

ELAL 64 70 149 22.856

rompr 83 73 53 13.29

?רוצים עוד

•Http KeepAlive

•Async JS Load

•DOM Elements

•CDN

http://www.efficens-software.com/2011/07/understanding_waterfall_charts/

Webmaster Tools Google Analytics

What is measured Time from Initial Page Request to “Document

Complete”

How it’s measured Google Toolbar Navigation Timing + Google

Toolbar on IE

Browsers measured Firefox 2-4

IE 6-9

with Google Toolbar &

PageRank Enabled

IE 9+

Chrome 6+

Firefox 7+

Android 4+

IE 6-8 with Google Toolbar

Sampling rate All Clients (assumed) 1% of clients, max 10K/day

Averaging techniques 7-day running weighted

average (popular pages

matter more)

30-day simple average

(average the individual

page’s average load times(

https://developers.google.com/pagespeed/

?על מה להסתכל

http://www.gomez.com/instant-test-pro/

What’s the #1

cause of slow

web pages?

JAVASCRIPT!

JavaScript performance

directly

affects user experience

The browser UI thread is responsible for both UI updates and JavaScript execution

Only one can happen at a time

<button id="btn" style="font-size: 30px; padding: 0.5em

1em">Click Me</button>

<script type="text/javascript">

window.onload = function(){

document.getElementById("btn").onclick = function(){

//do something

};

};

</script>

Before Click UI Thread

UI Queue

time

When Clicked UI Thread

UI Queue

time

onclick

UI Update

UI Update


UI Queue

time

onclick

UI Update

UI Update

Draw down state


UI Queue

time

onclick

UI Update

UI Update


UI Queue

time

onclick UI Update UI Update

Draw up state

No UI updates while

JavaScript is executing

Loadtime Techniques Don't let JavaScript interfere with page load performance

<!doctype html>

<html>

<head>

<title>Example</title>

</head>

<body>

<p>Hello world!</p>

<script src="foo.js"></script>

<p>See ya!</p>

</body>

</html>

Result UI Thread

time

Download See ya! Hello world! Parse Run

The UI thread needs to wait for the script to download, parse, and run before continuing

Translation:

The page doesn't render while

JavaScript is downloading,

parsing, or executing during

page load

Result UI Thread

time

JavaScript UI Update UI Update

The more scripts to download in between UI updates, the longer the page takes to render

JavaScript JavaScript

Technique #1: Load scripts

dynamically

var script = document.createElement("script"),

body;

script.type = "text/javascript";

script.src = "foo.js";

body.insertBefore(script, body.firstChild);

Basic Technique

Dynamically loaded scripts are non-blocking

Downloads no longer block

the UI thread

Using Dynamic Scripts UI Thread

time

Download

See ya! Hello world!

Parse

Run

Only code execution happens on the UI thread, which means less blocking of UI updates

UI Update

loadScript("foo.js", function(){

alert("Loaded!");

});

Usage

Timing Note:

Script execution begins

immediately after download

and parse – timing of

execution is not guaranteed

Technique #2: Defer scripts

<!doctype html>

<html>

<head>


</head>

<body>

<p>Hello world!</p>

<script defer src="foo.js"></script>

<p>See ya!</p>



</body>

</html>

Support for <script defer>

3.5 7.0 5.0 4.0 ?

Deferred scripts begin to

download immediately,

but don't execute until all UI

updates complete

Using <script defer> UI Thread

time

Download


Parse

Run

Similar to dynamic script nodes, but with a guarantee that execution will happen last

More UI More UI

Timing Note:

Although scripts always

execute after UI updates

complete, the order of multiple

<script defer> scripts is not

guaranteed across browsers

Technique #3: Asynchronous

scripts

<!doctype html>

<html>

<head>


</head>

<body>

<p>Hello world!</p>

<script async src="foo.js"></script>

<p>See ya!</p>



</body>

</html>

Support for <script async>

3.6 7.0 5.0 10 ?

Using <script async> UI Thread

time

Download


Parse

Run

Download begins immediately and execution is slotted in at first available spot

UI Update

Note:

Order of execution is explicitly

not preserved for

asynchronous scripts

Timers

//create a new timer and delay by 500ms

setTimeout(function(){

//code to execute here

}, 500);

setTimeout() schedules a function

to be added to the UI queue after

a delay

Web Workers

Support for Web Workers

3.5 4.0 4.0 10 10.6

Web Workers Asynchronous JavaScript execution

Execution happens outside the UI thread

Doesn’t block UI updates

Data-Driven API

Data is serialized going into and out of the worker

No access to DOM or BOM

Separate execution environment

סיכום -כלים Google Page Speed Tools Family

http://code.google.com/speed/page-speed/

dynaTrace AJAX Edition

http://ajax.dynatrace.com/ajax/en/

Yahoo! YSlow

http://developer.yahoo.com/yslow/

WebPagetest

http://www.webpagetest.org/

Show Slow

http://www.showslow.com/

Let's Make the Web Faster

http://code.google.com/intl/en-EN/speed/tools.html

Books

- High Performance Web Sites

- Even Faster Web Sites

- Website Optimization

- Complete Web Monitoring

-High Performance JavaScript

[email protected]

054-2552060

@efficens




web performance 101 - gil givati

Technology