בתוכנית היום מי אנחנו?

אנחנו לא לבד...

מי אתם ?

Web Performance Optimization 101

והזוכה היום הוא...

? מי אנחנו ולקדם את נושא מהירות ותפעול אתרי לשתף ידעמטרת הקבוצה

ברמת חווית המשתמש בעיקר אינטרנט ויישומים מבוססי דפדפן

(אבל לא רק)

דפדפן יכול להיות גם מטלפון נייד...

(בהתאם לרמת הביקוש והעניין שלכם)שבועות 4-6פגישות אחת ל

ועוד תאורטיות, עסקיות, הרצאות טכניות .

בעלי נסיון אחרים בקהילה וכל מי שיכול , אתם, אנחנו: המרצים

.לתרום לקבוצה בנושא

הקמת קהילה תומכת , המטרה פעילות ודיאלוגים גם בין פגישות

.ומייעצת

...אנחנו לא לבד

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

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

נציגים ומטמיעים של ספקי פתרונות תוכנה מהמובילים בעולם :בתחומים

האצת אתרים

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

פתרונות משלימים למוצרי ניהול ופורטלים

www.efficens-software.com

Twitter: efficens

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

Compuware Application Performance Management

•Web, non-Web, mobile, streaming, cloud-based applications

•Across all customers, users, browsers, devices, infrastructure, and

geographies

•Rapid issue notification with actionable diagnostics

•Insight into how these issues affect your business (revenue, brand, cost)

אנו מסייעים לארגונים לייעל את ביצועי היישומים הקריטיים בעולם העסקי

SaaS, Cloud-Based and

On-Premises Offerings

• Rapid startup and payback

4,000+ Customers Worldwide

• 2,500+ enterprise customers

• 1,500+ SMB customers

• 12 of top 20 US sites

Global Reach • Over 80 offices in

29 countries worldwide

• Strategic service delivery

Recognized as Industry Leader

• Gartner: Leader in APM magic quadrant

• Forrester: “The leader in Web Experience Management”

• Ovum: “Game-changing”

O’REILLY הוצאת ספרים מקצועית ומפיקת כנסיVelocity

לחברי הקבוצה:

40% (לא כולל משלוח)הנחה על ספרים מודפסים

50% הנחה עלe-books

דברו איתי –לקבלת קוד ההנחה

www.oreilly.com

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

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

"משמעותית

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/

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

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

23

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

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

Global Browser Market Share

Jan 2010 - Jan 2011

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

0

5

10

15

20

25

30

35

%

IE 8.0 Firefox 3.6 IE 7.0 IE 6.0 Firefox 3.5 Firefox 3.0 Chrome 5.0 Chrome 8.0 Chrome 4.0 Safari 4.0 Safari 5.0 Chrome 7.0 Chrome 6.0 Opera 10.6 Firefox 2.0 Opera 10.5 Opera 10.0 Chrome 3.0 Firefox 4.0 Opera 9.6

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

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

• 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

?מה חשוב

http://www.httpArchive.org

?מה לעשות 1.Reduce Page Size (<500Kb)

2.Enable (Gzip) Compression

3.Reduce the number of roundtrips (<40 per page…(

4.HTTP Cache Headers (cache long & prosper!)

5.Structure the page (to improve render & download)

a) CSS First

b) Javascript last

?רוצים עוד

•Http KeepAlive

•Async JS Load

•DOM Elements

•CDN

5

10

19

5

9

2 3

9

0

2

4

6

8

10

12

14

16

18

20

0-2 2-3 3-4 4-5 5-6 6-7 7-8 8-13

התפלגות מהירות טעינת דפי הבית

מהירות טעינה האתר שם דירוג מהירות טעינה שם האתר דירוג

1 orange 1,342.5 27 3,599.0 דפי זהב

3,625.5 אלעל 28 1,561.5 ביז פורטל 2

GetIt 3,652.0 29 1,874.0 בזק 3

3,693.0 מהירות טעינה חציונית נמדדת 30 1,905.5 מנורה 4

3,734.0 וואלה טורס 31 2,028.5 דן 5

3,752.5 פלאפון 32 2,168.0 הבנק הבינלאומי 6

3,998.0 רסט 33 2,175.5 מכבי שירותי בריאות 7

4,079.5 בנק הפועלים 34 2,274.0 אגד 8

2eat 4,313.0 35 2,388.0 מגדל 9

10bis 4,401.0 36 2,692.0 וב מאסטר'ג 10

4,458.0 לאומי קארד 37 2,838.5 שירותי בריאות כללית 11

4,515.0 שופס! וואלה 38 2,894.0 ל.א.כ 12

13 GOV IL 2,909.0 39 5,026.0 עכבר העיר

jdate israel 5,193.0 40 2,921.5 ישראכרט 14

15 All Jobs 3,040.0 41 start 5,212.5

5,529.0 סלקום 42 3,076.5 זאפ 16

5,555.5 מעריב 43 3,079.5 פניקס 17

5,755.5 הארץ 44 3,092.5 פורטל בריאות 18

winwin 5,770.5 45 3,321.5 רשות הדואר 19

20 b144 3,379.5 46 5,821.5 וואלה

5,940.0 תפוז 47 3,403.0 ביטוח הראל 21

one sport 6,813.0 48 3,435.5 בנק לאומי 22

6,876.5 הבורסה לניירות ערך 49 3,442.0 מזרחי טפחות 23

xnet 7,356.5 50 3,467.0 איסתא 24

ynet 7,577.0 51 3,510.0 קופת חולים לאומית 25

26 buy2 3,549.0 52 7,996.5 משרד האוצר

119: מספר בקשות חציוני

ב"ק 979: גודל דף חציוני

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

?על מה להסתכל

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

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

סיכום -כלים 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

Velocity EU

Web Performance Conference

Berlin 8th/9th November

(see me for a discount code!)

http://velocityconf.com/velocityeu/

רעיונות למצגות עתידיות שילוב רכיבי צד שלישי באתרים

Selenium

כלים מתקדמים לניתוח ביצועי דפים

Mobile Web

HTML5

CSS Do’s and Don’ts

סיפורי הצלחה MSN

סיפורים ישראליים

פתרונותOpen Source ופתרונות מסחריים

שיפור מהירות אתרים מבוססי מנועי ניהול תוכן כגוןWP ובלוגר

gil@efficens-software.com

054-2552060

@efficens