How I Doubled My Website Speed in 10 Minutes
Tuesday Jun 19, 2012 by Kevin Mandeville - Web Designer, Yottaa
Here at Yottaa we’re obsessed with making websites better, and a major component of that mission is improving website speed. Simply put: We eat, sleep, and breathe web performance optimization (WPO).
I’m Kevin, a web designer at Yottaa, and I’m willing to admit that when I joined the company several months ago I knew precious little about WPO. As a non-technical designer, performance was low on my list of priorities at the time. Making things look great visually was, and still is, my passion. (That and the Celtics.) But since I arrived here at Yottaa I’ve been lucky enough to learn many tips and tricks for better web performance from my colleagues, and I’m proud to say that WPO is now something I consider in all the work I do.
Last week I decided to put my newfound knowledge to the test by optimizing my own poorly performing website, kevingotbounce.com. The outcome was pretty astonishing. I doubled my website speed and cut my page size in half . . . all in 10 quick minutes! Here’s the story.
My Website Was Fat
Before, my website was flat out fat. It was bloated with images, weighing in at over 1 MB (!) for my homepage. This slowed my website down tremendously — especially for overseas users — and caused my site to surpass the “holy grail” of a sub-2 second page load time, which is what many users now expect when they visit a website.
How I Put My Site on a Diet
Here are the three simple steps I performed to tackle the issue of my slow website:
1) Remove the Unimportant
The fastest and easiest way to reduce page size is to remove images altogether. I quickly analyzed which pieces of my website were crucial and removed the rest. For example, I took out the entire “Twitter Design” section of my portfolio. This aspect of my work is no longer a core focus of mine, making it unnecessary to showcase on my homepage.
I also replaced a couple of images with pure CSS. This simple step dropped my page size by a couple hundred KB!
2) Compress Images
The size of the average web page has septupled since 2003, growing from 94KB to 679KB. Since images are generally the largest assets of a website, they present the greatest opportunity for optimization. Did you know you can actually compress image size without losing any quality?
I used Yahoo!’s Smush.it tool to compress my existing images. Having 75+ assets to begin with, every KB mattered. Just like that, another couple hundred KB where shaved off my website.
3) Compress CSS
Websites are driven by CSS, which can be just as large as images. Just like images, CSS can be compressed. Compressing CSS — techniques such as removing whitespace and condensing text — is another quick and simple way to reduce page size. I used csscompressor.com to do this, but there are a litany of free tools to do this automatically. Just Google “CSS compression” to start.
The Results
My Yottaa Score spiked up.
My page size decreased by 500+ KB.
My page load speed doubled in San Francisco, Washington, & Dublin.
Yup, It’s That Easy
I was amazed at how easy it was to optimize my site, and even more amazed at how huge the performance improvement was. I encourage everyone to learn more about web performance optimization so that you can achieve a faster website, like I did. The Even Faster Websites book by Steve Souders is a great place to start.
Kevin Mandeville is a Web Designer at Yottaa in Boston. You can find this blog post and infographic on the Yottaa blog located here. You can also follow Kevin (@kevingotbounce) on Twitter by clicking here.
Related Posts
| Categories: |