Chris Coyier of CSS-Tricks recently published a video called "Let's Do Simple Stuff to Make Our Websites Faster". Take a look at the first 10 minutes of this video, it gives a stellar overview and introduction into optimization. I particularly like some of the material he brings into the discussion from other thought leaders. The research of one in particular illustrates why optimization in the front end is so important:
80-90% of the end-user response time is spent on the frontend.
- "The Performance Golden Rule" by Steve Souders
If you're interested, also check out Steve Sounders article:
Now shift over to mobile, and according to "Early findings: 97% of mobile end-user response time happens at the front end" the performance Golden rule number increases significantly.
Caching with Rails: An overview
# http://work.stevegrossi.com/2013/05/28/set-far-future-expires-headers-for-assets-on-heroku/
config.static_cache_control = "public, max-age=31536000"
In client-side caching the browser stores website assets. When these assets are cached, the browser does not need to request them from the server again thereby saving the user a round-trip in communication and delivery of an asset.
The fastest HTTP request is the one not made. - Anonymous
You tell browsers how long to cache things for.
Serve up different image formats depending on the size of the image.
Versioning stylesheets breaks the cache.
Script loaders. Asynchronously or in parallel.
Step 1: Add
https://github.com/rumblelabs/asset_sync https://devcenter.heroku.com/articles/cdn-asset-host-rails31 http://blog.firmhouse.com/complete-guide-to-serving-your-rails-assets-over-s3-with-asset_sync
http://stackoverflow.com/questions/11261805/rails-3-font-face-failing-in-production-with-firefox http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
http://thisbythem.com/blog/rails-heroku-cloudfront-font-assets/
Mac CodeKit
Windows PNGGauntlet ImageOptim Pngcrush PngUtils
Linux Trimage
Now that we have image optimization covered, let's take a look at compressing and the asset pipeline. First, why do we need to compress? The answer is optimization: byte savings, decreased load times, and less trips to the server. In the old days I might have used something like one of the following to compress and minify my code:
These days the asset pipeline does it all for you.
The asset pipeline has three goals: precompile, concatenate and minify assets into one central path.
The only thing I'll add to this is just remember to precompile before you deploy to production:
bundle exec rake assets:precompile
For more details on asset pipeline compression follow these links:
- We took a look at how Rails helps us optimize the styles we produce through compression and the asset pipeline.