web performance 101 - gil givati
DESCRIPTION
TRANSCRIPT
![Page 2: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/2.jpg)
...נעים להכיר חברה המתמחה במתן שירותים בתחום ניהול ביצועי מערכות
בכלל ומערכות מבוססות דפדפן בפרט
מנהליIsrael Web Performance Optimization meetup
מטמיעי ומפתחי פתרונות תוכנה בתחומים, נציגי:
האצת אתרים
ניטור ואיתור תקלות בזמן אמת
www.efficens-software.com
Twitter: efficens
Facebook :מ"בע סופטוור אפיסנס
http://www.meetup.com/wpo-il
![Page 3: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/3.jpg)
בתוכנית היום 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
![Page 4: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/4.jpg)
![Page 5: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/5.jpg)
באתר המבקרעל ידי הנתפסהזמן "
עד לתגובה ( כמו לחיצה)בין פעולה
"משמעותית
Stephan Thair, Seriti consulting
![Page 6: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/6.jpg)
תפיסת הזמן
http://velocityconf.com/velocity2010/public/schedule/detail/13019
![Page 7: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/7.jpg)
![Page 8: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/8.jpg)
איטיות והמוח שלנו
“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
![Page 9: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/9.jpg)
-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
![Page 10: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/10.jpg)
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
![Page 11: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/11.jpg)
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
![Page 12: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/12.jpg)
http://www.webperformancetoday.com/2010/06/22/the-90-minute-optimization-life-cycle-faster-by-default-before-our-eyes/
![Page 13: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/13.jpg)
![Page 14: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/14.jpg)
? מהם ביצועים טובים
0.1 מיידיתנותן תחושה של תגובה שניות
1 רצף מחשבתימונע הסחת דעת ומאפשרת שניה
10 הגולשתשומת לב שומרות על שניות
8 הוא הזמן הממוצע שלוקח לגולש לקבל החלטה האם שניות
עובר למקום אחרהוא נשאר בדף או
Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
![Page 15: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/15.jpg)
![Page 16: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/16.jpg)
![Page 17: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/17.jpg)
![Page 18: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/18.jpg)
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
![Page 19: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/19.jpg)
19
מרכיבי זמן התגובה
Server side Content delivery Rendering
מחוץ למסגרת המערכת אבל
עדיין באחריותנו
קריטי ליישומי
Web 2.0
מהזמן נצרך מחוץ לגבולות השרת 80-90%
![Page 20: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/20.jpg)
![Page 21: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/21.jpg)
Bandwidth & Latency
![Page 22: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/22.jpg)
בקווי 200KBהורדת
1.5Mb/Sec
כשנייהאורכת
![Page 23: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/23.jpg)
?פשוט ורזה , לא הבטיחו לנו ממשק אחיד
![Page 24: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/24.jpg)
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
![Page 25: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/25.jpg)
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
![Page 26: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/26.jpg)
![Page 27: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/27.jpg)
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
![Page 28: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/28.jpg)
![Page 29: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/29.jpg)
?מה מודדים בדיקות מבוססות זמן•
• Time to first byte
• Time to first impression
• onLoad
• Fully loaded time
המבוססים על מתודולוגיות ידועות" ציוני תקן"•
• Yahoo! YSlow
• Google Page Speed
• dynaTrace AJAX edition
![Page 30: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/30.jpg)
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
![Page 31: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/31.jpg)
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
![Page 32: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/32.jpg)
?מה חשוב
http://www.httpArchive.org
![Page 33: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/33.jpg)
?מה חשוב
http://www.httpArchive.org
![Page 34: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/34.jpg)
![Page 35: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/35.jpg)
טעינה מהירות מספר בקשות 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
![Page 36: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/36.jpg)
![Page 37: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/37.jpg)
?רוצים עוד
•Http KeepAlive
•Async JS Load
•DOM Elements
•CDN
![Page 38: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/38.jpg)
![Page 39: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/39.jpg)
![Page 40: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/40.jpg)
![Page 41: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/41.jpg)
![Page 42: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/42.jpg)
![Page 43: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/43.jpg)
![Page 44: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/44.jpg)
![Page 45: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/45.jpg)
![Page 46: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/46.jpg)
![Page 47: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/47.jpg)
![Page 48: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/48.jpg)
![Page 49: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/49.jpg)
http://www.efficens-software.com/2011/07/understanding_waterfall_charts/
![Page 50: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/50.jpg)
![Page 51: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/51.jpg)
![Page 52: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/52.jpg)
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(
![Page 53: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/53.jpg)
https://developers.google.com/pagespeed/
![Page 54: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/54.jpg)
![Page 55: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/55.jpg)
![Page 56: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/56.jpg)
![Page 57: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/57.jpg)
?על מה להסתכל
![Page 58: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/58.jpg)
http://www.gomez.com/instant-test-pro/
![Page 59: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/59.jpg)
What’s the #1
cause of slow
web pages?
![Page 60: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/60.jpg)
JAVASCRIPT!
![Page 61: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/61.jpg)
JavaScript performance
directly
affects user experience
![Page 62: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/62.jpg)
The browser UI thread is responsible for both UI updates and JavaScript execution
Only one can happen at a time
![Page 63: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/63.jpg)
<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>
![Page 64: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/64.jpg)
Before Click UI Thread
UI Queue
time
![Page 65: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/65.jpg)
When Clicked UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 66: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/66.jpg)
When Clicked UI Thread
UI Queue
time
onclick
UI Update
UI Update
Draw down state
![Page 67: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/67.jpg)
When Clicked UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 68: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/68.jpg)
When Clicked UI Thread
UI Queue
time
onclick UI Update UI Update
Draw up state
![Page 69: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/69.jpg)
No UI updates while
JavaScript is executing
![Page 70: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/70.jpg)
Loadtime Techniques Don't let JavaScript interfere with page load performance
![Page 71: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/71.jpg)
<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello world!</p>
<script src="foo.js"></script>
<p>See ya!</p>
</body>
</html>
![Page 72: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/72.jpg)
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
![Page 73: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/73.jpg)
Translation:
The page doesn't render while
JavaScript is downloading,
parsing, or executing during
page load
![Page 74: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/74.jpg)
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
![Page 75: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/75.jpg)
Technique #1: Load scripts
dynamically
![Page 76: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/76.jpg)
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
![Page 77: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/77.jpg)
Downloads no longer block
the UI thread
![Page 78: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/78.jpg)
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
![Page 79: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/79.jpg)
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);
}
![Page 80: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/80.jpg)
loadScript("foo.js", function(){
alert("Loaded!");
});
Usage
![Page 81: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/81.jpg)
Timing Note:
Script execution begins
immediately after download
and parse – timing of
execution is not guaranteed
![Page 82: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/82.jpg)
Technique #2: Defer scripts
![Page 83: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/83.jpg)
<!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>
![Page 84: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/84.jpg)
Support for <script defer>
3.5 7.0 5.0 4.0 ?
![Page 85: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/85.jpg)
Deferred scripts begin to
download immediately,
but don't execute until all UI
updates complete
![Page 86: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/86.jpg)
Using <script defer> UI Thread
time
Download
See ya! Hello world!
Parse
Run
Similar to dynamic script nodes, but with a guarantee that execution will happen last
More UI More UI
![Page 87: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/87.jpg)
Timing Note:
Although scripts always
execute after UI updates
complete, the order of multiple
<script defer> scripts is not
guaranteed across browsers
![Page 88: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/88.jpg)
Technique #3: Asynchronous
scripts
![Page 89: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/89.jpg)
<!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>
![Page 90: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/90.jpg)
Support for <script async>
3.6 7.0 5.0 10 ?
![Page 91: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/91.jpg)
Using <script async> UI Thread
time
Download
See ya! Hello world!
Parse
Run
Download begins immediately and execution is slotted in at first available spot
UI Update
![Page 92: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/92.jpg)
Note:
Order of execution is explicitly
not preserved for
asynchronous scripts
![Page 93: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/93.jpg)
Timers
![Page 94: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/94.jpg)
//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
![Page 95: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/95.jpg)
Web Workers
![Page 96: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/96.jpg)
![Page 97: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/97.jpg)
Support for Web Workers
3.5 4.0 4.0 10 10.6
![Page 98: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/98.jpg)
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
![Page 99: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/99.jpg)
סיכום -כלים 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
![Page 100: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/100.jpg)
Books
- High Performance Web Sites
- Even Faster Web Sites
- Website Optimization
- Complete Web Monitoring
-High Performance JavaScript
![Page 101: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/101.jpg)
![Page 102: Web Performance 101 - Gil Givati](https://reader034.vdocuments.net/reader034/viewer/2022042813/547eac08b4af9faa158b56d9/html5/thumbnails/102.jpg)
054-2552060
@efficens