How to speed up your website?

There are many techniques you can use to speed up your site. Below some tricks we used on Applicake site. Hope you’ll find them valuable

Image optimization

First thing is pretty obvious: you shouldn’t use too many images in your layout as they increase page load time. Not to mention Flash that generally sucks

So before you upload an image on a server think about optimizing it. In many cases you don’t need full quality images. Try to compress them (decrease image resolution, depth etc.) in graphic editor and check how it affects size of a file. Finding the right balance between filesize and quality is the key.

Amazon Simple Storage Service (Amazon S3)

Amazon S3 is a fast and stable storage service. You should think about moving your static content (especially images and videos) to Amazon S3. So signup, get your access keys, create your own bucket (folder with your content on Amazon server) and upload stuff. Amazon S3 Firefox Organizer is an easy solution for organizing and managing files on Amazon S3.

You can also move your stylesheets and javascripts, so basically your whole public directory, to the Amazon bucket. When you do that remember to change your asset host in the environment configuration file because it’s no longer your public folder on the current host.

config.action_controller.asset_host
  = "http://assets.your_bucket_name.s3.amazonaws.com"

Also be careful with keeping the bucket up-to-date during deployment.

Image upload

Paperclip is a pretty cool file attachment library. To upload files directly to Amazon S3 you need to install right-aws gem. In every Model file which has an image attachment add few more lines to indicate new storage.

has_attached_file :your_name,
  :styles => { your_styles },
  :storage => :s3,
  :s3_credentials => "#{RAILS_ROOT}/config/amazon_s3.yml",
  :bucket => 'assets.your_bucket_name.com',
  :path => "system/:attachment/:id/:style/:basename.:extension"

Create amazon_s3.yml config file and fill it with your access keys.

production:
  bucket_name: assets.your_asset.com
  access_key_id: your_access_key_id
  secret_access_key: your_access_key

WordPress plugin

WordPress is a great publishing platform. You can upload files via WordPress admin panel directly to your bucket on Amazon S3 using this plugin.

Delayed image loading

There is no need to load all of images (including these which are not visible until an user scrolls down the page). It’s much better to load only these which are needed to make a site complete in a browser first. You can do it with Javascript of course. The easiest way is to use a plugin. You can use lazierLoad which works with Prototype.

Caching

There are different types of caching. You can cache whole sites, particular actions or just fragments of pages. Take a look at this guide to get an overview: Caching with Rails

You can start by caching stylesheets and javascripts. First, make sure that config.action_controller.perform_caching is set to “true” for your environment (as below)

config.action_controller.perform_caching = true

In Rails it’s easy to cache all stylesheet files into one file.

stylesheet_link_tag :all, :cache => true

You can do the same with Javascript files.

javascript_include_tag :all, :cache => true

To do some more advanced caching consider using Memcached as your cache store. Just type:

config.cache_store = :mem_cache_store

in the environment config file.

Let’s say you want to cache your last 3 tweets on a home page as there is no need to connect to Twitter API each time you want to display them. You can cache them and refresh every hour. So write in your home_controller (index action):

@twitter_statuses = []
cache = ActiveSupport::Cache::MemCacheStore.new
if cache.read('twitts') != nil
  @twitter_statuses = cache.read('twitts')
else
  begin
    url = 'http://twitter.com/statuses/user_timeline/user_name.json?count=3'
    json = Net::HTTP.get_response(URI.parse(url)).body
    data = (JSON.parse json)

    data.each do |ele|
      @twitter_statuses << { :created_at => ele['created_at'],
                                           :text => ele['text'],
                                           :id => ele['id']}
    end

    cache.write('twitts', @twitter_statuses, :expires_in => 3600.seconds)
  rescue #if Twitter API is down
    #@twitter_statuses = []
    #do not cache
  end
end

And that’s it