Speeding up 3rd party widgets using ASWIFT

This is a summary of the talk by Arvind Jain, Michael Kleber from Google at velocityconf about how to write widgets using same domain iframe using document.write. Speed improvements of over 90% in loading widgets with this change.

  • Web is slow
    • Avg page load time 4.9s
    • 44 resources, 7 dns requests, 320kb
    • Lot of 3rd party widgets
      • digg/facebook/etc
  • Measurements of 3rd party widgets
    • Digg widget
      • 9 HTTP requests, 52 kB
      • scripts block the main page from downloading
      • stylesheets blocks the main page from rendering in IE
    • Adsense takes up  12.8% page load time
    • Analytics takes up < 5%   ( move to async widget )
    • Doubleclick takes up 11%
  • How to make Google AdSense “fast by default”
    • Goals / Challenges
      • Minimize blocking the publishers page
      • Show the ad right where the code is inserted
      • Must run in publishers Domain
    • Solution (ASWIFT) - Asynchronous Script Written into IFrame Tag
      • Make show_ads.js a tiny loader script
      • Loader creates a same-domain iframe (using document.write)
      • Loads the rest of the show_ads into the iframe by document.write() of a <script> tag
      • This loading of iframe is asynchronous.
    • Browser specific surprises
      • Problems with parallel downloads of same script in IE
      • Iframe creation inside <head> in Firefox has a problem
      • Requesting headers in Chrome was buggy
      • Forward-Back-Reload behavior is buggy (refetching instead of using cache)
      • document.domain vs friendly iframes

Comments

5 Quick Changes To Improve Your Website’s Performance « Web Dev & Design said…
[...] You would think that these would all be well engineered, but many are not. For example, the Digg widget makes nine requests, is 52 KB and blocks the main page from [...]
12:32 AM
Post a Comment

Popular posts from this blog

Chrome Frame - How to add command line parameters

Image
Chrome frame intentionally does stuff without getting in the way of the user. This sometimes makes things harder to debug. For example how can one debug an issue if chrome frame doesn't even launch ? Apparently there is a flag for that. But you have to know how to enable it. Here are the steps. Make sure chrome frame is installed. We can enable startup flags for dumping debug logs using a policy called AdditionalLaunchParameters If this is just for one desktop, I recommend doing a registry edit (it can be pushed via GPO as well) Add a REG_SZ property " AdditionalLaunchParameters " to " SoftwarePoliciesGoogleChromeAdditionalLaunchParameters " with the value "--enable-logging --v=1" (also documented here  and mentioned here )  [ Attachment 1 ] Next kill the IE browser and make sure chrome is also dead by checking taskmgr Restart IE and go to " gcf:about:version " and confirm that the parameters you added show up next to "Command Line:"
Read more

Creating your first chrome app on a Chromebook

Image
Doing development on Chromebook usually means developing online. There are a lot of sites around for that. But with the APIs getting more mature, its just a matter of time before someone builds a kick-ass IDE which runs natively on Chromebooks without network connectivity. One such tool which I've been exploring for a last few weeks is from Google and called " Chrome Dev Editor " If you have never built and run a chrome app or extension, I'll show you how to do this in 3 easy steps.     Step 1 Launch the app and click on the "+" button to add a new project. Pick a project name and select "JavaScript Chrome App" in the drop down menu.       Step 2 Notice how it automatically adds the minimum code required for it to run. This will be the template you are going to work with. You are almost done, but lets review the files in there to understand why they are there.   manifest.json - This is the most important file. Modify the app name, version number
Read more

Brewers CAP Theorem on distributed systems

Image
Large distributed systems run into a problem which smaller systems don’t usually have to worry about. “ Brewers CAP Theorem ” [ Ref 1 ] [ Ref 2 ] [ Ref 3 ]  defines this problem in a very simple way. It states, that though its desirable to have Consistency, High-Availability and Partition-tolerance in every system, unfortunately no system can achieve all three at the same time . C onsistent : A fully Consistent system is one where the system can guarantee that once you store a state (lets say “x=y”) in the system, it will report the same state in every subsequent operation until the state is explicitly changed by something outside the system. [ Example 1 ] A single MySQL database instance is automatically fully consistent since there is only one node keeping the state. [ Example 2 ] If two MySQL servers are involved, and if the system is designed in such a way that all keys starting “a” to “m” is kept on server 1, and keys “n” to “z” are kept on server
Read more