Web Performance 101 - The Israeli Meetup Presentation from 24/10/2011

‫בתוכנית היום‬
‫‪ ‬מי אנחנו ?‬
‫‪ ‬אנחנו לא לבד ...‬
‫‪ ‬מי אתם ?‬
‫‪Web Performance Optimization 101 ‬‬
‫‪ ‬והזוכה היום הוא ...‬

‫מי אנחנו ?‬
‫מטרת הקבוצה לשתף ידע ולקדם את נושא מהירות ותפעול אתרי‬ ‫‪‬‬
‫אינטרנט ויישומים מבוססי דפדפן בעיקר ברמת חווית המשתמש‬
‫(אבל לא רק)‬
‫דפדפן יכול להיות גם מטלפון נייד...‬ ‫‪‬‬
‫פגישות אחת ל 6-4 שבועות (בהתאם לרמת הביקוש והעניין שלכם)‬ ‫‪‬‬
‫הרצאות טכניות, עסקיות, תאורטיות ועוד.‬ ‫‪‬‬
‫המרצים: אנחנו, אתם, בעלי נסיון אחרים בקהילה וכל מי שיכול‬ ‫‪‬‬
‫לתרום לקבוצה בנושא.‬
‫המטרה פעילות ודיאלוגים גם בין פגישות, הקמת קהילה תומכת‬ ‫‪‬‬
‫ומייעצת.‬

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

‫‪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, 4,000+ Customers Global Reach Recognized as
Cloud-Based and Worldwide • Over 80 offices in Industry Leader
On-Premises • 2,500+ enterprise 29 countries • Gartner:
Offerings customers worldwide Leader in APM
• Rapid startup and • 1,500+ SMB • Strategic service magic quadrant
payback customers delivery • Forrester:
• 12 of top 20 “The leader in
US sites 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_webstr
ess_survey_report_229296.pdf

10
Performanc
e 5
improvemen 6 secs 8 secs
2 secs 4 secs
t (seconds) 0

-5 -8%

-10
-25%
-15
-33%
Percentage
change in -20 -38%
page
abandonme -25
nt
-30

-35

-40
urce: 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/

‫מהם ביצועים טובים ?‬
‫1.0 שניות נותן תחושה של תגובה מיידית‬ ‫‪‬‬
‫1 שניה מונע הסחת דעת ומאפשרת רצף מחשבתי‬ ‫‪‬‬
‫01 שניות שומרות על תשומת לב הגולש‬ ‫‪‬‬
‫8 שניות הוא הזמן הממוצע שלוקח לגולש לקבל החלטה האם‬ ‫‪‬‬
‫הוא נשאר בדף או עובר למקום אחר‬
‫‪Jakob Neilsen. http://www.useit.com/alertbox/response-times.html‬‬

Web performance anatomy
Latency

HTTP AJAX/XHR
IE
Firefox
Chrome Browser Internet Server
Safari
Opera

Images
CSS
JavaScript Cache
Flash

Parsing DNS 3rd-party
Layouting Server servers
Rendering

‫מרכיבי זמן התגובה‬
‫קריטי ליישומי‬
‫0.2 ‪Web‬‬

‫‪Server side‬‬ ‫‪Content delivery‬‬ ‫‪Rendering‬‬

‫מחוץ למסגרת המערכת אבל‬
‫עדיין באחריותנו‬

‫%09-08 מהזמן נצרך מחוץ לגבולות השרת‬
‫32‬

‫הורדת ‪ 200KB‬בקווי‬
‫‪1.5Mb/Sec‬‬
‫אורכת כשנייה‬

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

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

30

Global Browser Market Share 25
Jan 2010 - Jan 2011

20
%

15

10

5

0

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: 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

Load Time Perceived Render
25

20

15
Seconds

10

5

0

Source: Gomez Real-User Monitoring
Real users around the world 466 million page measurements
Broadband connections only 200+ sites

Fragmented, • Who is #1 today? Tomorrow?
rapidly-changing 7
market • Who is #1 with your customers? 6
8

Different • Number of parallel connections
operational • JavaScript processing
characteristics • Etc.

 Browser
Processing • Percentage of total
moving to the  Network
browser response time
 Infrastructure

• Performance
Major impact on • Functionality
user experience
• Appearance

? ‫מה מודדים‬
‫• בדיקות מבוססות זמן‬
Time to first byte •
Time to first impression •
onLoad •
Fully loaded time •

‫• "ציוני תקן" המבוססים על מתודולוגיות ידועות‬
Yahoo! YSlow •
Google Page Speed •
dynaTrace AJAX edition •

 Minimize HTTP Requests  Remove Duplicate Scripts
 Use a Content Delivery Network  Configure ETags
 Add an Expires or a Cache-  Make AJAX Cacheable
Control Header
 Use GET for AJAX Requests
 Gzip Components
 Reduce the Number of DOM
 Put StyleSheets at the Top Elements
 Put Scripts at the Bottom  No 404s
 Avoid CSS Expressions  Reduce Cookie Size
 Make JavaScript and CSS  Use Cookie-Free Domains for
External Components
 Reduce DNS Lookups  Avoid Filters
 Minify JavaScript and CSS  Do Not Scale Images in HTML
 Avoid Redirects  Make favicon.ico Small & Cacheable

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

 Avoid bad requests  Minimize redirects

 Avoid CSS expressions  Optimize images

 Combine external CSS  Optimize the order of styles and
scripts
 Combine external JavaScript
 Parallelize downloads across
 Defer loading of JavaScript hostnames
 Enable compression  Put CSS in the document head
 Leverage browser caching  Remove unused CSS
 Leverage proxy caching  Serve resources from a consistent
 Minify CSS URL

 Minify HTML  Serve scaled images

 Minify JavaScript  Serve static content from a
cookieless domain
 Minimize request size
 Specify a character set early
 Minimize DNS lookups
 Specify image dimensions
http://code.google.com/speed/page-speed/docs/rules_intro.html
 Use efficient CSS selectors

? ‫מה חשוב‬

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 •

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

‫התפלגות מהירות טעינת דפי‬
‫הבית‬ ‫0.995,3‬

‫5.526,3‬
‫דפי זהב‬

‫אלעל‬
‫72‬

‫82‬
‫5.243,1‬

‫5.165,1‬
‫‪orange‬‬

‫ביז פורטל‬
‫1‬

‫2‬
‫91‬ ‫02‬ ‫0.256,3‬ ‫‪GetIt‬‬ ‫92‬ ‫0.478,1‬ ‫בזק‬ ‫3‬

‫81‬ ‫0.396,3‬ ‫מהירות טעינה חציונית נמדדת‬ ‫03‬ ‫5.509,1‬ ‫מנורה‬ ‫4‬

‫61‬
‫41‬ ‫0.437,3‬ ‫וואלה טורס‬ ‫13‬ ‫5.820,2‬ ‫דן‬ ‫5‬

‫01‬ ‫21‬ ‫5.257,3‬ ‫פלאפון‬ ‫23‬ ‫0.861,2‬ ‫הבנק הבינלאומי‬ ‫6‬
‫9‬ ‫9‬ ‫01‬ ‫0.899,3‬ ‫רסט‬ ‫33‬ ‫5.571,2‬ ‫מכבי שירותי בריאות‬ ‫7‬

‫8‬ ‫5.970,4‬ ‫בנק הפועלים‬ ‫43‬ ‫0.472,2‬ ‫אגד‬ ‫8‬
‫5‬ ‫5‬ ‫6‬ ‫0.313,4‬ ‫‪2eat‬‬ ‫53‬ ‫0.883,2‬ ‫מגדל‬ ‫9‬
‫3‬ ‫4‬ ‫0.104,4‬ ‫‪10bis‬‬ ‫63‬ ‫0.296,2‬ ‫ג'וב מאסטר‬ ‫01‬
‫2‬
‫2‬ ‫0.854,4‬ ‫לאומי קארד‬ ‫73‬ ‫5.838,2‬ ‫שירותי בריאות כללית‬ ‫11‬

‫0‬
‫31-8‬ ‫8-7‬ ‫7-6‬ ‫6-5‬ ‫5-4‬ ‫4-3‬ ‫3-2‬ ‫2-0‬ ‫0.515,4‬ ‫וואלה! שופס‬ ‫83‬ ‫0.498,2‬ ‫כ.א.ל‬ ‫21‬

‫0.620,5‬ ‫עכבר העיר‬ ‫93‬ ‫0.909,2‬ ‫‪GOV IL‬‬ ‫31‬

‫מספר בקשות חציוני: 911‬ ‫0.391,5‬

‫5.212,5‬
‫‪jdate israel‬‬

‫‪start‬‬
‫04‬

‫14‬
‫5.129,2‬

‫0.040,3‬
‫ישראכרט‬

‫‪All Jobs‬‬
‫41‬

‫51‬

‫גודל דף חציוני: 979 ק"ב‬ ‫0.925,5‬

‫5.555,5‬
‫סלקום‬

‫מעריב‬
‫24‬

‫34‬
‫5.670,3‬

‫5.970,3‬
‫זאפ‬

‫פניקס‬
‫61‬

‫71‬

‫5.557,5‬ ‫הארץ‬ ‫44‬ ‫5.290,3‬ ‫פורטל בריאות‬ ‫81‬

‫5.077,5‬ ‫‪winwin‬‬ ‫54‬ ‫5.123,3‬ ‫רשות הדואר‬ ‫91‬

‫5.128,5‬ ‫וואלה‬ ‫64‬ ‫5.973,3‬ ‫441‪b‬‬ ‫02‬

‫0.049,5‬ ‫תפוז‬ ‫74‬ ‫0.304,3‬ ‫ביטוח הראל‬ ‫12‬

‫0.318,6‬ ‫‪one sport‬‬ ‫84‬ ‫5.534,3‬ ‫בנק לאומי‬ ‫22‬

‫5.678,6‬ ‫הבורסה לניירות ערך‬ ‫94‬ ‫0.244,3‬ ‫מזרחי טפחות‬ ‫32‬

‫5.653,7‬ ‫‪xnet‬‬ ‫05‬ ‫0.764,3‬ ‫איסתא‬ ‫42‬

‫0.775,7‬ ‫‪ynet‬‬ ‫15‬ ‫0.015,3‬ ‫קופת חולים לאומית‬ ‫52‬

‫5.699,7‬ ‫משרד האוצר‬ ‫25‬ ‫0.945,3‬ ‫2‪buy‬‬ ‫62‬

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‬‬ ‫‪‬‬
‫5‪HTML‬‬ ‫‪‬‬
‫‪CSS Do’s and Don’ts‬‬ ‫‪‬‬
‫סיפורי הצלחה‬ ‫‪‬‬
‫‪MSN ‬‬
‫‪ ‬סיפורים ישראליים‬
‫‪ ‬פתרונות ‪ Open Source‬ופתרונות מסחריים‬
‫‪ ‬שיפור מהירות אתרים מבוססי מנועי ניהול תוכן כגון ‪ WP‬ובלוגר‬

gil@efficens-software.com
054-2552060
@efficens

Web Performance 101 - The Israeli Meetup Presentation from 24/10/2011

More Related Content

Similar to Web Performance 101 - The Israeli Meetup Presentation from 24/10/2011 (20)

Web Performance 101 - The Israeli Meetup Presentation from 24/10/2011