image What is Black-Hat SEO? image 3 Reasons Why WordPress is the Best CMS

How to Build a Freakin’ Fast Website

One of the most important elements of conversion rate optimization is to ensure that your site loads fast.  Not quick, but FAST.  There are countless studies available that definitely prove that the slower your website loads, the less your sites’ conversion rate will be. If your website is used as a tool to generate money online, you better take a few minutes to make sure that you are serving up a fast website.

Tools to Test Website Load Times

There are more than a few online tools that are low cost (and even better: free) that you should get familiar with. I am going to list the ones that I use on a frequent basis, but by no means is this a comprehensive list — feel free to message me or leave a comment below if you know of an even better tool.

  • Pingdom – What I like about this tool is that it is fast and also gives you some performance recommendation tips based on Google Page Speed
  • GTMetrix – Similar to Pingdom, this tool will give you optimization tips from Google Page Speed, as well as from Yahoo’s YSlow! Another really powerful/handy feature with this tool is that it allows you to compare multiple pages (4), and they have a nifty API that can be leveraged in many different ways (client reports, in-application performance monitoring, etc)
  • WebpageTest.org – The biggest features of this tool is that you can test from MANY locations using MANY browsers and that this tool will give your website’s time-to-first-byte (TTFB).  The full source is also released on GitHub, but you will most likely need to have a VPS with SSH access in order to install all of the dependencies.
  • Blitz.io – This tool varies greatly from the aforementioned tools because you can test your website under load. This is imperative for any website that gets sizable traffic or is operating a SaaS in which slow performance could significantly impact sales.

You will want to test your website from various locations, specifically where your users are coming from.  As a generality, you want your site to be fully loaded in under 2 seconds, and the time-to-first-byte needs to be under 500ms. Google and other search engines appear to place a higher emphasis on time-to-first-byte, which makes sense considering that their search spiders generally don’t download all supporting assets (such as images, css, js, etc).

Website Design

This can be a challenging venue if you do not have the support of your design and front-end team.

  • Remove unused CSS/JS – if you are using a CSS framework such as Twitter bootstrap, you probably have a fair amount of bloat going on.  Try to remove out as much CSS as possible.
  • Conditional asset loading – you know that “sweet” parallax image scroller on your homepage? Why are you loading all of its files on every page, even when there is not a scroller present? Make sure that your site is loading only the assets that it needs on each page, and nothing more.
  • Use minification tools – for JavaScript you might give this tool a try, and for CSS you can try this one.
  • Save images in the best format – for simple imagery that doesn’t use gradients, try PNG or SVG.  For larger, complex, raster-based images (JPG) save them as progressive JPGs.
  • Use image minification tools – for PNG you need to use this one, and for JPGs I recommend this one

Server Configuration and Directives

  • gzip
  • Caching with far future expiration dates for assets

Server Selection and Software

Aside from writing great code to begin with, one of the easiest ways to improve your performance is to increase your hardware and the software selection.   Everyone has their opinion and preferences, and here’s mine:

  • SSD based hard drives – I/O (input/output) events such as reading and writing files are significantly improved with SSD hard drives.
  • nginx – in lieu of the ever-popular and even-more-bloated Apache, I choose nginx (pronounced:  Engine-X) because it does exactly what I need, and nothing more. Plus I find nginx is much easier to configure when you are integrating complex setups that incorporate reverse proxies and a multitude of services.
  • php-fpm – why settle for boring ol’ regular PHP when you can have a version designed for busier sites?
  • php-apc – PHP5 comes standard with opcache which is used to cache and thereby accelerate your PHP application. However I have found that APC performs faster and more reliably than opcache.  Plus it’s really easy to install and configure, and simplicity always wins in my book.
  • Varnish – a high-speed http caching layer that “is a web application accelerator also known as a caching HTTP reverse proxy. You install it in front of any server that speaks HTTP and configure it to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 – 1000x, depending on your architecture.” Varnish can make budget servers ($10/mo) be capable of serving millions of hits per day.  It’s that good, although there are a few limitations in that it becomes significantly more difficult to serve dynamic content, such as comments.

Code Profiling

The undisputed tool for this is NewRelic.  This is an invaluable tool for developers and SEO engineers alike, as it can quickly show you were the bottlenecks are within your application.

A Departing Word

Performance optimization is not for the weak of heart.  It is an evolving, iterative process that will give you great satisfaction and undoubtedly frustration when things don’t work out as intended.  Be patient and stick with it though, because having a fast website will result in more conversions for your business.

About jmwebdev
Related Posts
  • All
  • By Author
  • By Category

Leave a Reply

Your email address will not be published.