Improve webpage speed with Digital Ocean

July 27th, 2014

We don’t often talk much about web development or web optimization but recently we started investigating alternative methods / means to our web hosting environment. Currently we are using JustHost’s shared web hosting for jonbrown.org. We are using their lowest shared hosting tier at which costs us $6 per month. We recently did quite a bit to optimize our site and I figured I would share our secret recipe for success that helped us improve our overall web speed rank by almost 90%. Having a website that is faster obviously is better.

While investigating methods to improve our web hosting I stumbled upon Digital Ocean, these guys are awesome! Digital Ocean boasts a virtual private server environment running various flavors of Linux with amazing CPU and Memory options. Ironically the third tier server with Digital Ocean costing $20 per month together with our website code optimizations put us over the top.

I started my career in the web development field and moved into IT specializing in the Mac environment. Becoming an overall expert and feeling more at home in the Unix core gave me the confidence that I think most people lack. This lack of familiarity in this environment can be a huge hurdle when moving to a VPS server. Digital Ocean with its amazing array of tutorials and amazing customer service makes it easy for the entry level user to feel comfortable spinning up and configuring a very powerful web server.

Website Optimization

The first thing that we did to help improve our website speed was to remove un-needed CSS code from our website. We removed all drop shadow CSS3 effects, just by doing this we improved the overall speed of our site by 4% this was huge. The result was a more modern flat UI design that loaded faster and looked better. We then removed all references to the Google Font library which we were using throughout the site for a standard thin web font. This removed those lengthy calls to Google and improved our speed by an additional 8%. Once done we minified all CSS and Javascript code. Here are some of the tools we used.

CSS Magnification

ProCSSor. Beautiful CSS for beautiful websites.

JS Magnification

Smaller Batch minify HTML, PHP, CSS and JavaScript on the Mac.

Image Optimization

Image optimization was the second step. We had many images that we had already uploaded into our WordPress instance and many in our theme images folder that were much larger than they needed to be. We used a great compressor app to compress the images, by doing so we made our website much smaller. A smaller site, loads faster, makes sense right? Well I had no idea just how much it would improve things. We reduced the overall size of the site by 70% just by compressing our images. Here are some of the tools we used to compress the images on our site. This improved site load time by 10%

PNG Crusher

WP Smush.it – WordPress Plugin