I Feel the Need, the Need for Speed! Make your Website Load Fast.
“I Feel the Need, the Need for Speed!” – Maverick and Goose
Why Does Speed Matter?
Not only do users get annoyed with slow loading pages, but they can affect your rankings in search. People will leave slowly loading websites, and they may not even know you exist if your website loads too slowly.
You should regularly check your website loading speed with these tools:
- PageSpeed Insights
- YSlow – Toolbar for Chrome or Firefox
- Firebug – Use the Net tab to see how things load in real time. Makes it easy to find the offending script. Seriously, use the Net tab. It has awesome speed loading info.
Make Sure your Website Loads Fast
So why do I feel the need for speed? Our site was almost 9 months old, so we had some code and graphics bloat. We recently did a major review of our own website. We noticed the blog was loading sloooooooooooooowly.
First, we found a plugin that caused the load time to increase from a less than a second to over 5 to 10 seconds per page, just by itself. Ouch! Obviously, we deleted that plugin. From there though, we started to look at all our code and found ways to improve.
Here are ways we improved our own code:
- Plugin Check. We use WordPress for our blog, so we checked our plugins and removed any that were not really in use (i.e. installed but not really needed). We also consolidated some plugins as they were overlapping with each other.
- Sprites. We launched the new site last summer with Sprites for graphics, but over time, we had to update the Sprite graphic with new graphics.
- Graphics. We removed some non-essential graphics (i.e. fades, shadows, and other textures). It is more of a flat design, but that is good. The new design loads faster, while looking cleaner and more modern.
- CSS and JS. We combined JavaScript files, ditto for CSS. Now the JavaScript and CSS load a lot quicker.
- Image Smushing. We smushed a bunch of images.
- Killed Non-Essential JS. We had JavaScript loading globally for all pages in the header. We killed that and instead only loaded it when needed.
- Turned on WP Super Cache for the Blog. This helps some, especially with frequented pages.
The Results
Overall, we reduced our home page loading from 1.5 MB of total size of everything to just 867KB. Most of that space is the 5 high-res graphics for the home page slider and the 338KB sprite for the entire site graphics. We need those to make the site look good. This reduced the home page load time from 5 to 8 second in full to 2 to 4 seconds.
The good news is that with modern caching, once those files load the first time, then the rest of the site typically loads less than 50KB a page (sometimes just 10KB). So sub-pages are amazingly quick, along with the blog. Typically they load in less than a second or two.
Next Steps
There is still more to be done, but alas, clients’ websites come first.
10:43 am on March 8th, 2013
Hi Pol,
Thanks for your comment. I took some screenshots of our logo compressed in PNG format using the website you provided.
PNG-8: http://screencast.com/t/vCwTaj00
PNG-24: http://screencast.com/t/QbZ94FMXO9
While the PNG-8 image distorts the logo with its limited colors, the PNG-24 logo does look up to par in terms of quality and for only 3kb. However, I chose not to use this method for two reasons:
1) Compress PNG’s formula makes the resulting PNG un-editable. If you open the PNGs in Photoshop or another image-editing program, they are not recognized as PNGs anymore and have radically changed. The Elephant is excellent for large PNG images that won’t be tweaked going forward but for logos especially, I prefer the the uncompressed image to easily make changes in the future without the original PSD file.
2) Since our site uses a solid background, I prefer non-transparent image formats reserving the transparent PNGs for gradient backgrounds and the like.
When it comes down to small savings of 2-3kb, I am swayed to the side that offers a higher quality and easy edits in the future. That said, I totally agree with compressing large PNGs from 120kb down to 60kb for a 50% savings but sometimes, preference wins out in development-decisions. I did re-visit our logo and re-saved it as a JPG which reduced the size from 10kb to about 5/6kb.
Again, thank you for the comment and for taking a look at our website!