That takes care of the first video, in the second I’ll walk you through another important step: squeezing bits out of your image files, using Yahoo!’s Smushit tool. Together, these two steps (optimizing your code and optimizing your images) will greatly reduce your site’s footprint.
Screenshots: CSS & JS Components
The following are screenshots of selections I made in the screencast.
Want to Optimize Further?
Once you’ve downloaded and deployed your customized CSS and JS files, you may choose to make further gains by using a plugin like Dust Me Selectors to identify remaining unused selectors, which you could edit out of your CSS file by hand. This will be much easier with the smaller customized file than with the original file.
Step 2: Smush Your Image Files
While we’re optimizing files, we may as well mention an additional step that will help you with the biggest files in the average site: the image files. There’s a lot to think about when optimizing images for the web. You may be surprised to know that not all compression tools are equal. The “Save for web and devices” dialog in Photoshop turns out to be one of the least effective compression tools out there.
Here we’ll use Yahoo!’s Smushit tool to help us accomplish what Photoshop couldn’t.
For Further Reading
- Web Performance Best Pactice — Google Developers
- Minimizing payload size — Google Developers
- Optimizing Images for the Web – Andy Killen
- Yahoo!’s Smushit tool