CS193H: High Performance Web Sites Lecture 20: Vol 2 – Don't Scatter Inline Scripts Steve Souders Google

Slides:



Advertisements
Similar presentations
Web 2.0 Programming 1 © Tongji University, Computer Science and Technology. Web Web Programming Technology 2012.
Advertisements

Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June Lessons.
CS193H: High Performance Web Sites Lecture 9: Rule 5 – Put Stylesheets at the Top Steve Souders Google
CS193H: High Performance Web Sites Lecture 7: Add an Expires Header Steve Souders Google
Steve Souders Even Faster Websites Disclaimer: This content does not necessarily reflect.
17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache.
Steve Souders Even Faster Web Sites best practices for faster pages Disclaimer: This.
Steve Souders Even Faster Web Sites (inside ma.tt) best practices for faster pages.
17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache.
CS193H: High Performance Web Sites Lecture 4: Class Projects Steve Souders Google
CS193H: High Performance Web Sites Lecture 22: Vol 2 – Optimize Images, Use Iframes Sparingly, Flush the Document Early Steve Souders Google
Steve Souders High Performance Widgets Disclaimer: This content does not necessarily.
Steve Souders Life's too short, write fast code part 1 Disclaimer: This content does.
Steve Souders Even Faster Web Sites best practices for faster pages Disclaimer:
CS193H: High Performance Web Sites Lecture 1: Introduction Steve Souders Google
17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache.
CS193H: High Performance Web Sites Lecture 17: Rule 14 – Make Ajax Cacheable Steve Souders Google
Steve Souders Even Faster Web Sites Disclaimer: This content does not necessarily reflect.
CS193H: High Performance Web Sites Lecture 21: Vol 2 – Split Dominant Domains Steve Souders Google
High Performance Web Sites Essential Knowledge for Frontend Engineers
CS193H: High Performance Web Sites Lecture 15: Rule 12 – Remove Duplicate Scripts Steve Souders Google
Steve Souders Even Faster Web Sites Disclaimer: This content does not necessarily reflect.
CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google
CS193H: High Performance Web Sites Lecture 6: Use a CDN Steve Souders Google
Steve Souders Even Faster Web Sites Disclaimer: This content does not necessarily.
Steve Souders Even Faster Web Sites best practices for faster pages Disclaimer: This content does not necessarily.
Steve Souders Life's too short, write fast code part 1 Disclaimer: This content does.
Steve Souders Even Faster Web Sites best practices for faster pages Disclaimer: This content does not necessarily.
CS193H: High Performance Web Sites Lecture 5: Make Fewer HTTP Requests Steve Souders Google
CS193H: High Performance Web Sites Lecture 12: Rule 8 – Make JavaScript and CSS External Steve Souders Google
CS193H: High Performance Web Sites Lecture 19: Vol 2 – Load Scripts Without Blocking Steve Souders Google
CS193H: High Performance Web Sites Lecture 10: Rule 6 – Put Scripts at the Bottom Steve Souders Google
CS193H: High Performance Web Sites Lecture 2: The Importance of Frontend Performance Steve Souders Google
CS193H: High Performance Web Sites Lecture 11: Rule 7 – Avoid CSS Expressions Rule 9 – Reduce DNS Lookups Steve Souders Google
CS193H: High Performance Web Sites Lecture 18: Vol 2 – Split the Initial Payload Steve Souders Google
Web Performance Meetup 1 Web Performance 101 Jeremy
Web Performance Meetup 1 Web Performance Toolbelt Jeremy
Hossain Shahriar Mohammad Zulkernine. One of the worst vulnerabilities in web applications It involves the generation of dynamic HTML contents with invalidated.
CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google
JavaScript and AJAX Jonathan Foss University of Warwick
CHAPTER 15 WEBPAGE OPTIMIZATION. LEARNING OBJECTIVES How to test your web-page performance How browser and server interactions impact performance What.
The DOM tree CS The DOM tree CS380 2 Types of DOM nodes  element nodes (HTML tag)  can have children and/or attributes  text nodes (text in.
A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh
JQuery & SharePoint San Antonio Users Group – September Meeting September 22, 2009 Microsoft SharePoint Server.
Stevesouders.com/docs/sfjs pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
High Performance Websites (Based on Steve Souder’s lecture) By Bhoomi Patel.
Mark Phillip markphillip.com 200s, 304s, Expires Headers, HTTP Compression, And You.
Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.
Chapter 19: Adding JavaScript
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
Lecture 11 – DOM Scripting SFDV3011 – Advanced Web Development Reference: 1.
Stevesouders.com/docs/thinkvitamin pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. flickr.com/photos/ddfic/ /
MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard
JavaScript, Fourth Edition
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
Page Speed Bryan McQuade Richard Rabbat. Outline  What is Page Speed?  Inception of Page Speed  Cool features  Identify unused JavaScript and CSS.
Don't Let Third Parties Slow You Down Arvind Jain, Michael Kleber Google.
1 Javascript DOM Peter Atkinson. 2 Objectives Understand the nature and structure of the DOM Add and remove content from the page Access and change element.
Web Technologies Lecture 7 Synchronous vs. asynchronous.
Dawn Pedersen. What is JavaScript? JavaScript is the basis for both jQuery and Spry applications JavaScript is referred to as a client-side scripting.
Open Solutions for a Changing World™ Eddy Kleinjan Copyright 2005, Data Access WordwideNew Techniques for Building Web Applications June 6-9, 2005 Key.
Even Faster Web Sites best practices for faster pages
AJAX.
AJAX.
Even Faster Web Sites best practices for faster pages
HTML A brief introduction HTML.
AJAX Robin Burke ECT 360.
Browser Support for HTML5
DR. JOHN ABRAHAM PROFESSOR UTPA
Creating dynamic/interactive web pages
Presentation transcript:

CS193H: High Performance Web Sites Lecture 20: Vol 2 – Don't Scatter Inline Scripts Steve Souders Google

announcements 11/17 – guest lecturer: Robert Johnson (Facebook), "Fast Data at Massive Scale - lessons learned at Facebook" Handouts of Vol 2 chapters 1-4 are available in class and at office hours. Copies are being sent to SCPD students. DO NOT COPY OR DISTRIBUTE THESE HANDOUTS!

Load scripts without blocking follow-up from previous lecture: ads Google Analytics degrading script tags pattern – John Resig

ads and async scripts many ads load external scripts why can't these scripts be loaded using these non-blocking techniques? they use document.write if a script containing document.write is loaded asynchronously, the entire page is erased: (click on "Load Dynamically") an alternative: Opera's "Delayed Script Execution"

Opera: Delayed Script Execution opera:config#Delayed%20Script%20Execution "Primarily for low bandwidth devices, not well-tested on desktop. Ignore script tags until entire document is parsed and rendered, then execute all scripts in order and re-render." renders page without blocking for script when script executes, document.write is performed where the script occurred good model for how SCRIPT DEFER should be implemented on all browsers blog post: script-execution-in-opera/

Google Analytics "Learn more about where your visitors come from and how they interact with your site." case study: American Cancer Society HTML code: <script type="text/javascript" src=" var gaAcctNumber = "UA "; var pageTracker = _gat._getTracker(gaAcctNumber); pageTracker._initData(); pageTracker._trackPageview how load this asynchronously?

Google Analytics async IE IE: <script defer type="text/javascript" src=' window.onload = function() { var gaAcctNumber = "UA "; var pageTracker = _gat._getTracker(gaAcctNumber); pageTracker._initData(); pageTracker._trackPageview; }

Google Analytics async FF Firefox: var se = document.createElement('script'); se.src = ' document.getElementsByTagName('head')[0].appe ndChild(se); window.onload = function() { var gaAcctNumber = "UA "; var pageTracker = _gat._getTracker(gaAcctNumber); pageTracker._initData(); pageTracker._trackPageview; }

Google Analytics async other techniques: script in iframe 2 requests (iframe and ga.js) instead of 1 (ga.js) could try setting iframe's innerHTML (TBD) XHR eval and XHR injection different domains ( document.write blocks other resources script DOM element for IE and FF add onreadystatechange handler instead of onload "degrading script tags" pattern – what's that?

Degrading Script Tags from John Resig blog post GA example: <script type="text/javascript" src=" var gaAcctNumber = "UA "; var pageTracker = _gat._getTracker(gaAcctNumber); pageTracker._initData(); pageTracker._trackPageview no browser supports calling the inlined code instead, ga.js would be modified to call it...

Degrading Script Tags add to the end of the external script (eg, "ga.js"): var scripts = document.getElementsByTagName("script"); var cntr = scripts.length; while ( cntr ) { var curScript = scripts[cntr-1]; if (-1 != curScript.src.indexOf('ga.js')) { eval( curScript.innerHTML ); break; } cntr--; // why backwards? }

wrapping ga.js you can't modify ga.js proxy ga.js on your own server write cronjob to check ga.js Last-Modified update your proxied version when ga.js changes if you add versioning, you can give your vesion a far future Expires header (ga.js is 7 days)

Firefox 3 and IE download stylesheets in parallel with other resources f2_0&c2=bi1hfff2_0&c3=bf1hfff2_0&c4=bj1hfff2_0 stylesheets are parsed in the order specified, regardless of download order same for stylesheets and inline styles what about stylesheets and inline scripts? Stylesheets – ensuring order

Inline scripts block long executing inline scripts block rendering and downloads of everything after them in the page f0_5&c2=bi1hfff1_0 workarounds: initiate execution with setTimeout (>250 for FF, nglayout.initialpaint.delay ) move JavaScript to external script with advanced downloading techniques use Defer attribute (IE only)

Inline script parallelization resources that occur before an inline script download in parallel while the script executes f0_1&c2=bf2hfff2_0&c3=bb0hfff0_1&c4=bi3hfff2_0...except for stylesheets ff0_1&c2=bc2hfff2_0&c3=bb0hfff0_1&c4=bi3hfff2_0 why?! CSS and JavaScript might have interdependencies how might this affect stylesheet and inline script download parallelization?

Stylesheet, inline script Block Downloading Firefox 3 and IE download stylesheets in parallel with other resources...unless the stylesheet is followed by an inline script best to move inline scripts above stylesheets or below other resources use allows the inline script to start and block in IE and FF2 fft2_0&c2=hb0hfff0_3&c3=hj1hfff2_0&t=

eBay MSN MySpace Wikipedia Examples of Scattered Scripts

Don't Scatter Inline Scripts remember inline scripts carry a cost avoid long-executing inline scripts don't put inline scripts between stylesheets and other resources

Homework 12/1 11:59pm – Assignment #6 - Improving a Top Site rules Vol 2: Split the Initial Payload Load Scripts Without Blocking Don't Scatter Inline Scripts Shard Dominant Domains Optimize Images

Questions What happens if an external script loaded asynchronously does document.write? How can you load an external script asynchronously, and have an inline script execute as soon as the external script is loaded? What do inline scripts block? How can you workaround this blocking? What's the unusual behaviour of a stylesheet, inline script, and image (in that order)? What would explain why browser developers implemented this behaviour? How cause downloading problems with stylesheets followed by inline scripts?