Speeding Up Your Website

Zoom zoom!
Posted By Ben - 28th Sep 2017

There are some simple steps you can take to speed up a website that don't involve rebuilding the entire thing. Using a service such as Pingdom can give you some insight to points that will be slowing your website down - everything from optimising image sizes to caching files and merging requests

Leverage Browser Caching

Caching is a quick and easy way to help speed up your site by letting the browser store static content for long periods (Images, CSS, JS etc.). On nginx this is as straight forward as adding a new location section to your sites configuration file:

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
    add_header Cache-Control "public, no-transform";
    expires 30d;
}

That little snippet will store all matching file types in the browser for 30 days - perfect for any content that's not likely to change any time soon. Once in place, the browser will no longer need to repeatedly request the same files over and over as the site is navigated.

Image Compression

We've all been taught through the years to save for web with our images, compressing JPG's as much as possible without degrading them. PNG images are a different case as they are a lossless image format... but these can still be compressed. There are many options out there but I personally use tinypng.com - simply upload your images, watch them get compressed and then download again. Simple - and you'd be surprised at how much they can be compressed!

Combine Requests & Query Strings

This one is simple - combine all your CSS and JS files into fewer files. This stops the browser making more requests and slowing the load procedure down. If you use a CDN for certain content (such as Bootstrap), just load up that file and embed the content into your own, and the same goes for Javascript files.

At the same time try and make sure none of your included files contain query strings (Such as version numbers) - when present, browsers often don't cache these files as they appear to be sending data that will likely result in dynamic content. Removing these will help your browser caching.

Cookieless Domains / CDN's

Most dynamic software (Such as Wordpress or Laravel) will leave cookie information (session data etc.) - when this is done the browser will send cookies with all requests under the domain used. If you serve your CSS, JS and images from the same domain (www.mysite.com) the browser will send the cookie data along with the requests. These files don't need this cookie data so it's redundant and slows the request down for no reason.

There are two ways to get around this - the first is to create a subdomain - such as images.mysite.com (this can point to your website just like your www domain would) and refer to all external content via this subdomain instead of the primary www domain. The other option is to use a CDN service such as Amazon's S3 to remotely host all this content under another domain.

Closing

These few tricks should help speed up your website and reduce the overall request size (often quite substantially). Once you've performed these tasks you're free to optimise your application to edge out the competition and provide a smoother, faster experience to your visitors.