June 14

speed up your website

Date: June 14, 2009. Comments»

I incline this post more towards google app engine or application that runs on python/Django. There are quite a few tools which will analyze your website and suggest the possible idea to improve the performance of your website. I use Yslow. The beauty about yslow is it grades your website and suggest the changes to improve it.


Implementation in python

Combine Files:

If your website has multiple JavaScript or CSS files you can combine them into one.

class Jsmin(webapp.RequestHandler):
 def get(self):
  data = memcache.get(key="js")
  if data is None:
   data = ""
   path = os.path.join(os.path.dirname(__file__), 'js/')
   files = ["prototype_1.6.1.js", "blog_2.1.js"]
   for file in files:
    f = open(path+file,'r')
    data += jsmin(f.read()) + '\n'
   memcache.add(key="js", value=data, time=31536000)
   self.response.headers['Content-Type'] = 'text/javascript'
   self.response.headers['Cache-Control'] = 'public max-age=31536000'
   self.response.out.write(data)

CSS Sprites

CSS Sprites is a good idea to combine all the images into one so that you can save the number of HTTP request back and forth to the server. You can either use GIMP or use sprites generator. Sprites generator takes up the images combine them into one and the beauty is it gives the position so that you can directly copy(Specially if you are a n00b in tools like GIMP which I am :p. So I choose to use csssprites).

Your style will look something like this:
background:url(/images/combine.gif) no-repeat scroll -98px -98px
There are places where you need to do inline images and have a src pointing to your image path in your server. You can base encode those images. You can use data: URL scheme
import base64
f = open('fp.png')
base64.b64encode(f.read())
You can add this in your template:
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7"

Cache static files

Static file like CSS, JavaScript and Images can be cached on the browser. So that browser doesn't send request back every time when the page is hit. If you are using google app engine you can add a line in your app.yml like this "default_expiration: '365d'". If you are combining files this rules doesn't apply since you will be pointing to a script file. So can set the header like "self.response.headers['Cache-Control'] = 'public max-age=31536000'" this sets the cache expiry to one year from now. So If you are updating these static files you can suffix the files with some unique number ("blog_2.1.js"), usually its better to have version number. When make updations to your static files since browser doesn't request for these files your new code will have no effect. So its important to change the name of these files.

Minify

You can save some size by stripping of the space and newline in your CSS and Javascript. JSMin was written by Crockford it has a python implementation as well. Refer to my JSMin class at the first section of this post.

Comments

Leave Comment: