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

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

The pain of Load balancing applications

Introduction Loadbalancing may mean many different things to different people but its all about distributing load. For me its an architecture of how some network services can be scaled by adding multiple servers performing the same tasks. If you had a popular website with static content, and if your server couldn't keep up with the request, all you had to do was setup multiple web servers and use round-robin DNS entries to divide the load into multiple servers. For dynamic web applications like search engines this plays a significant role because the number of users per node can support is much lower. Over time, as applications grew more complex and as web companies found customers outside US they found out the hardware that the only way to optimize network performance was by going local. Loadbalancing POP (points of presence) around the world provide a snappy user experience which has been important and drawing more customers. While, static content on web servers can easily be rep
Read more