This presentation covers the Web Performance from top to bottom, starting with the reasons for web site performance and ending with some of the free tools available.
Web Performance 101 - The Israeli Meetup Presentation from 24/10/2011
1.
2. בתוכנית היום
מי אנחנו ?
אנחנו לא לבד ...
מי אתם ?
Web Performance Optimization 101
והזוכה היום הוא ...
3. מי אנחנו ?
מטרת הקבוצה לשתף ידע ולקדם את נושא מהירות ותפעול אתרי
אינטרנט ויישומים מבוססי דפדפן בעיקר ברמת חווית המשתמש
(אבל לא רק)
דפדפן יכול להיות גם מטלפון נייד...
פגישות אחת ל 6-4 שבועות (בהתאם לרמת הביקוש והעניין שלכם)
הרצאות טכניות, עסקיות, תאורטיות ועוד.
המרצים: אנחנו, אתם, בעלי נסיון אחרים בקהילה וכל מי שיכול
לתרום לקבוצה בנושא.
המטרה פעילות ודיאלוגים גם בין פגישות, הקמת קהילה תומכת
ומייעצת.
5. Efficens Software
חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות
בכלל ומערכות מבוססות דפדפן בפרט
נציגים ומטמיעים של ספקי פתרונות תוכנה מהמובילים בעולם
בתחומים:
האצת אתרים
ניטור ואיתור תקלות בזמן אמת
פתרונות משלימים למוצרי ניהול ופורטלים
www.efficens-software.com
Twitter: efficens
:Facebook אפיסנס סופטוור בע"מ
6. 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”
7. O’REILLY
הוצאת ספרים מקצועית ומפיקת כנסי Velocity
לחברי הקבוצה:
40% הנחה על ספרים מודפסים (לא כולל משלוח)
50% הנחה על e-books
לקבלת קוד ההנחה – דברו איתי
www.oreilly.com
8.
9.
10. "הזמן הנתפס על ידי המבקר באתר
בין פעולה (כמו לחיצה) עד לתגובה
משמעותית"
Stephan Thair, Seriti consulting
13. איטיות והמוח שלנו
“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
14. 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
19. מהם ביצועים טובים ?
1.0 שניות נותן תחושה של תגובה מיידית
1 שניה מונע הסחת דעת ומאפשרת רצף מחשבתי
01 שניות שומרות על תשומת לב הגולש
8 שניות הוא הזמן הממוצע שלוקח לגולש לקבל החלטה האם
הוא נשאר בדף או עובר למקום אחר
Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
20.
21.
22. 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
23. מרכיבי זמן התגובה
קריטי ליישומי
0.2 Web
Server side Content delivery Rendering
מחוץ למסגרת המערכת אבל
עדיין באחריותנו
%09-08 מהזמן נצרך מחוץ לגבולות השרת
32
28. 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
29. 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
30.
31. 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
32.
33. ? מה מודדים
• בדיקות מבוססות זמן
Time to first byte •
Time to first impression •
onLoad •
Fully loaded time •
• "ציוני תקן" המבוססים על מתודולוגיות ידועות
Yahoo! YSlow •
Google Page Speed •
dynaTrace AJAX edition •
34. 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
35. 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
38. ? מה לעשות
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
39.
40. ? רוצים עוד
Http KeepAlive •
Async JS Load •
DOM Elements •
CDN •