5. Question# 3
How would you feel if you have to wait 15
seconds between views?
Google Confidential and Proprietary
6. Latency Kills
• Amazon reported that 100ms of latency costs sales by 1%
• An additional 500ms latency saw Google search usage drop by 20%
• Users perceive Quality and Ease of Use with lower latency
Google Confidential and Proprietary
8. Sources of latency
fetch page
gadget xml
fetch gadget iframe
fetch social data
Client fetch backend data Container Application
Browser (orkut) backend data Backend
content render
Google Confidential and Proprietary
10. Optimize your app
• Batch requests
• Caches are your friends
• Minify static content
• Be lean and mean
• Think ahead
• Best practices
Google Confidential and Proprietary
11. Optimize your app
Batch Requests
Put multiple independent requests together
var idspec = opensocial.newIdSpec({ quot;userIdquot; : quot;OWNERquot;, quot;groupIdquot; : quot;FRIENDSquot; });
var fields = [ quot;AppField1quot;, quot;AppField2quot;, quot;AppField3quot; ];
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), quot;get_ownerquot;);
req.add(req.newFetchPeopleRequest(idspec), quot;get_friendsquot;);
req.add(req.newFetchPersonAppDataRequest(idSpec, fields), quot;owner_dataquot;);
req.send(response);
Google Confidential and Proprietary
12. Caches are your friends
Proxy Content
Use gadgets.io.getProxyUrl(url) to get a proxy URL
var imgUrl = gadgets.io.getProxyUrl('http://example.org/image.png');
var html = '<img src=”' + imgUrl + '”>';
Content-rewrite
Automatically rewrite URLs to fetch from cache
<Optional feature=”content-rewrite”>
<Param name=”include-urls”>.*</Param>
<Param name=”exclude-urls”></Param>
<Param name=”include-tags”>img,script,embed,link,style</Param>
</Optional>
http://www.example.org/image.png becomes something like:
http://www1.orkut.gmodules.com/gadgets/proxy?url=http://example.org/image.png
Google Confidential and Proprietary
13. Caches are your friends
Use cache effectively
• makeRequests are cached; specify refresh interval
• set HTTP cache-headers effectively
BYO cache
• store user specific data in app data – faster to access
• cache global info in app data
e.g. high scores
update content in app data from backend as required
Google Confidential and Proprietary
14. Optimize your apps
Minify static content
• re-compress images to smaller sizes
• serve smaller and gzipped JS/CSS files
• concat. JS/CSS files to reduce number of fetches
• include JS/CSS in gadget XML if possible
Google Confidential and Proprietary
15. Optimize your apps
Be lean and mean
lighter faster profile pages
• use images, not swfs
• use app data as cache
• use owner/viewer only signed makeRequest
• may choose to show owner-only data on profile pages
• don't load unnecessary files
Google Confidential and Proprietary
16. Think ahead
• Expect user requests and prefetch content
• Preload content from your servers
<ModulePrefs ...>
...
<Preload href=”http://example.com/topScores”>
</ModulePrefs>
or
<Preload href=”http://example.com/myScores” authz=signed views=”profile,canvas”
signViewer=false>
Google Confidential and Proprietary
17. Best practices
• Show a “loading gif” image when expecting the user to wait
• Put Stylesheets at top
• Put Scripts at bottom
• Post-load components
• Use Google's cached version of JS libraries
Google Confidential and Proprietary
18. Demo time
Firefox extensions are your friends!
• Firebug
• Live HTTP Headers
• YSlow
Google Confidential and Proprietary
