2. ‫נעים להכיר ...‬
‫‪ ‬חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות‬
‫בכלל ומערכות מבוססות דפדפן בפרט‬
‫‪ ‬מנהלי ‪Israel Web Performance Optimization meetup‬‬
‫‪ ‬נציגי, מטמיעי ומפתחי פתרונות תוכנה בתחומים:‬
‫‪ ‬האצת אתרים‬
‫‪ ‬ניטור ואיתור תקלות בזמן אמת‬
‫‪www.efficens-software.com ‬‬
‫‪Twitter: efficens ‬‬
‫‪ :Facebook ‬אפיסנס סופטוור בע"מ‬
‫‪http://www.meetup.com/wpo-il ‬‬

3. ‫בתוכנית היום‬
 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

5. ‫"הזמן הנתפס על ידי המבקר באתר‬
‫בין פעולה (כמו לחיצה) עד לתגובה‬
‫משמעותית"‬
‫‪Stephan Thair, Seriti consulting‬‬

6. ‫תפיסת הזמן‬
http://velocityconf.com/velocity2010/public/schedule/detail/13019

8. ‫איטיות והמוח שלנו‬
“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

9. 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

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

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

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

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

18. 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

19. ‫מרכיבי זמן התגובה‬
‫קריטי ליישומי‬
‫0.2 ‪Web‬‬
‫‪Server side‬‬ ‫‪Content delivery‬‬ ‫‪Rendering‬‬
‫מחוץ למסגרת המערכת אבל‬
‫עדיין באחריותנו‬
‫%09-08 מהזמן נצרך מחוץ לגבולות השרת‬
‫91‬

21. Bandwidth & Latency

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

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

24. 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

25. 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

27. 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

29. ? ‫מה מודדים‬
‫• בדיקות מבוססות זמן‬
Time to first byte •
Time to first impression •
onLoad •
Fully loaded time •
‫• "ציוני תקן" המבוססים על מתודולוגיות ידועות‬
Yahoo! YSlow •
Google Page Speed •
dynaTrace AJAX edition •

30.  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

31.  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

32. ? ‫מה חשוב‬
http://www.httpArchive.org

33. ? ‫מה חשוב‬
http://www.httpArchive.org

35. ‫מהירות טעינה‬ ‫מספר בקשות‬ YSLOW ‫ציון‬ PS ‫ציון‬ ‫שם האתר‬
2.258 4 94 77 Roninsight
8.042 8 92 88 Roninsight
(WP)
4.05 90 74 76 ionroad
22.856 149 70 64 ELAL
13.29 53 73 83 rompr

37. ? ‫רוצים עוד‬
Http KeepAlive •
Async JS Load •
DOM Elements •
CDN •

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

52. 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 9+
IE 6-9 Chrome 6+
with Google Toolbar & Firefox 7+
PageRank Enabled 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 30-day simple average
average (popular pages (average the individual
matter more) page’s average load times(

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

57. ‫על מה להסתכל ?‬

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

59. What’s the #1
cause of slow
web pages?

60. JAVASCRIPT!

61. JavaScript performance
directly
affects user experience

62. The browser UI thread is responsible for
both UI updates and JavaScript execution
Only one can happen at a time

63. <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>

64. Before Click
UI Thread
time
UI Queue

65. When Clicked
UI Thread
time
UI Queue
UI Update
onclick
UI Update

66. When Clicked
UI Thread
UI Update
time
UI Queue
onclick
Draw down state
UI Update

67. When Clicked
UI Thread
UI Update onclick
time
UI Queue
UI Update

68. When Clicked
UI Thread
UI Update onclick UI Update
time
UI Queue
Draw up state

69. No UI updates while
JavaScript is executing

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

71. <!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello world!</p>
<script src="foo.js"></script>
<p>See ya!</p>
</body>
</html>

72. Result
UI Thread
Hello world! Download Parse Run See ya!
time
The UI thread needs to wait for the script to
download, parse, and run before continuing

73. Translation:
The page doesn't render while
JavaScript is downloading,
parsing, or executing during
page load

74. Result
UI Thread
JavaScript UI Update JavaScript UI Update JavaScript
time
The more scripts to download in between UI
updates, the longer the page takes to render

75. Technique #1: Load scripts
dynamically

76. Basic Technique
var script = document.createElement("script"),
body;
script.type = "text/javascript";
script.src = "foo.js";
body.insertBefore(script, body.firstChild);
Dynamically loaded scripts are non-blocking

77. Downloads no longer block
the UI thread

78. Using Dynamic Scripts
UI Thread
Hello world! See ya! Run UI Update
time
Download Parse
Only code execution happens on the UI thread,
which means less blocking of UI updates

79. function loadScript(url, callback){
var script = document.createElement("script"),
body = document.body;
script.type = "text/javascript";
if (script.readyState){ //IE <= 8
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
body.insertBefore(script, body.firstChild);
}

80. Usage
loadScript("foo.js", function(){
alert("Loaded!");
});

81. Timing Note:
Script execution begins
immediately after download
and parse – timing of
execution is not guaranteed

82. Technique #2: Defer scripts

83. <!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello world!</p>
<script defer src="foo.js"></script>
<p>See ya!</p>
<!-- even more markup -->
</body>
</html>

84. Support for <script defer>
3.5 7.0 5.0 4.0 ?

85. Deferred scripts begin to
download immediately,
but don't execute until all UI
updates complete

86. Using <script defer>
UI Thread
Hello world! See ya! More UI More UI Run
time
Download Parse
Similar to dynamic script nodes, but with a
guarantee that execution will happen last

87. Timing Note:
Although scripts always
execute after UI updates
complete, the order of multiple
<script defer> scripts is not
guaranteed across browsers

88. Technique #3: Asynchronous
scripts

89. <!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello world!</p>
<script async src="foo.js"></script>
<p>See ya!</p>
<!-- even more markup -->
</body>
</html>

90. Support for <script async>
3.6 7.0 5.0 10 ?

91. Using <script async>
UI Thread
Hello world! See ya! Run UI Update
time
Download Parse
Download begins immediately and execution is
slotted in at first available spot

92. Note:
Order of execution is explicitly
not preserved for
asynchronous scripts

93. Timers

94. //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

95. Web Workers

97. Support for Web Workers
3.5 4.0 4.0 10 10.6

98. 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

99. ‫כלים - סיכום‬
 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

100.  Books
- High Performance Web Sites
- Even Faster Web Sites
- Website Optimization
- Complete Web Monitoring
-High Performance JavaScript

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