WordCamp SanFrancisco takeaways from Chris’s presentation titled “Chris Coyier: 10 Things to make your site faster”
We have to focus on the front end, which generally all over the web takes 80% of the load time. The server actually takes about 20% of time to load.
Lets say a webpage takes, 10 seconds to load, out of these 10 seconds, the webpage is generated by server within 2 seconds and our browser (irrespective of which one it is) takes 8 seconds. This was observed by Steve Sounders
Thats why we need to focus on the front end and most importantly this is really easy to accomplish as compared to server changes.
1. GZIP Everything
Check if you are doing gzip or not, gzipwtf.com
Visit HTML5BoilerPlate and check the .htaccess file to get the GZIP Compression code.
Copy and paste that code in your .htaccess file and it will work.
2. Cache Stuff
Browser cache and Server Cache
W3 Total Cache plugin,
Expire header, this rule in .htacces file tells the browser that the broser should KEEP the files and save it for some time (days, months), this rule can be applied to every file, CSS,images, etc.
However in this case, if there is a change in the CSS, images, the images wont change on some one elses browser until the time expires Or they clear cache from their browser.
OR We intentionally break the Cache by versioning your static files also known as “Auto-versioning” as described in detail here: http://derek.io/blog/2009/auto-versioning-javascript-and-css-files
This means that we can change the name of the CSS files in versions and
Quick way to do this, same as gzip compression, get the cache code from HTML5Boilerplate and put it in your htaccess file
3. Losslessly Optimize the images
We should allways reduce the size of the images by optimizing them:
* Save for web and devices (Photoshop)
* imageoptim.com Software for Mac
* pnggauntlet.com for Windows
Or use CodeKit (for Mac) to reduce the size of the images
Also here is an awesome alternative to CodeKit for Windows: http://mhs.github.com/scout-app/
Thanks to comment here: http://css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/#comment-170838
We can use image sprites http://css-tricks.com/css-sprites/ instead of multiple images for css.
A really cool tool to generate Sprites: http://sprites.me/