Best practices for web development

Many techniques that are used in normal web development will also benefit your OpenSocial app. Here are some of the most effective techniques.

Control the caching on your content

Most containers offer support for the Cache-Control HTTP header. You have server-side control over how your resources are cached, so be sure to set your headers appropriately for maximum benefit

The Cache-Control header is best described in the HTTP/1.1 specification but there
are some simpler descriptions available as well. If you're not sure about the cache
headers your server is currently sending, you can try some publicly available tools to
examine the cache headers on your files and see if they need to be tweaked.




Be aware that the Cache-Controlheader will be examined for all content coming from
your server, including XML application specs, responses from makeRequest
(both prefetched and not), and proxied images. Be sure to set caching headers for all of this content!

Notes on Apache

Apache defaults to using Last-Modified and ETag headers to control
caching for static files, rather than the recommended Expires and Cache-Control: max-age headers
. If you are using Apache, change your cache headers to Expires and Cache-Control: max-age!

Need to disable caching on your Apache server? Use the following in your .htaccess
file to disable caching on .css, .js, and .xml files (change the
FilesMatch line if you need to support more filetypes):

Header unset ETag

FileETag None

Header set Cache-Control "no-cache"

What are the benefits? Your server has much more control over how the container caches its

content. You can set a low cache expiration for content that changes often, and a high cache timeout for

content that does not change. Caching will become much more efficient once you set the appropriate headers

Reducing the number of fetches
The HTTP/1.1 specification states:
Clients that use persistent connections SHOULD limit the number of simultaneous connections that they
maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any
server or proxy.

For this reason, some internet browsers (like IE7) will only download two files from a given server at a

time, shared amongst all HTML, XML, image, CSS, and JavaScript files. To reduce the number of connections
that a user has to make back to your server, consolidate and inline as much code as possible.

If your JavaScript includes look like:

<code><span style="font-weight: bold;"><script src="http://www.example.com/javascript.core.js" type="text/javascript"></script></span>

<span style="font-weight: bold;"> <script src="http://www.example.com/javascript.extra.js" type="text/javascript"></script></span></code>

then you should combine each file into one master JavaScript file:


Better yet, inline your code if at all possible:



This will save server connections for other assets. Remember that this approach can be used for CSS, as well
.
To decrease the number of image files your application needs to load, you can use image spriting to combine

all your image files into a single master "sprite" file. Check out A List Apart's CSS Spriting article
for a good description of this technique.

Generally speaking, concatenating your files is a great performance improvement you can make. Because of the
aggressive caching that containers perform, even using a relatively slow server-side script to
automatically concatenate files will still wind up performing better than separate files (once the
automatically concatenated file is cached). Aim for a single CSS and a single JS file in production.


What are the benefits? This approach keeps the number of server connections low, and reduces the total number
of HTTP requests that each user of your application has to make.

Some other best practices:
1.Turn on gzip for any content you deliver. Good things come in small packages.

2.Minimize JS and CSS. Again, small is good.

3.Split CSS and image files across 2-4 servers. Browsers limit the number of concurrent connections to any one
server.

4.Place JavaScript as late in the page as possible. Loading JavaScript blocks the downloading of other
important components like images and CSS.

Tip: Try the YSlow Firefox plugin to analyze your app's performance.