Some Tools to Help Reduce Page Download Size

Posted in Articles

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

Reducing our page download size can help improve the speed of our website.  Here are some tools and principles to help with reducing page size.

PageSpeed Insights

First you want to run the site though the Google’s PageSpeed Insights   It will give you some suggestions on how to optimize for mobile and desktop views.

Pingdom

Another similar tool is Pingdom, which shows you a waterfall graph of the load time of various assets.

CSSLint

It might suggest things like concatenating and minifying CSS and JS.  Before minifying your CSS, you might want to remove unused CSS rules and then run it through CSSLint.net.  It will help you write better CSS code.

MinifyCSS

Then you can run the CSS through minifycss.com or other such online tools.  It is perfectly fine to run your code through these online tools because afterall the CSS and JS code are publicly visible on your site anyways.  It is not like you are uploading some propriatary code onto some unknown server.

Closure Compiler

For JS, I like running it through JSLint and then minifying using Closure Compiler Service (because it is by Google).  But of course, there are many others tools out there.

Smush.it

You also want to optimize image size.  Use JPG for photos and flattened PNG for other images.   Then run the image through Smush.it    There are many other tools that can optimize images (especially Photoshop and Fireworks).  But sometimes it is nice to have an online service like Smush.it (and it is by Yahoo!)

More References:

Sitepoint article part 1 and part 2.   Remove heavy social media scripts and use lighter weight scripts instead.