Building the Fastest Possible Beautiful Functional Website

Hi! We are back to start the new year with a focus on speed. The goal is to make the lightest and fastest website possible, but it has to look good and have enough functions to be able to serve its purpose of ranking well in search engines, helping customers to understand your business, gather leads, and ultimately help you improve your business performance.
fastest web hosting australia

There are plenty of fast sites out there bragging about their speed, but they seem mostly to be plain blogs, with very minimal graphics, no videos, no mailing list signup forms or anything else that a modern website needs to be able to perform a decent marketing function.

The goal of my current activities is to document the setup of a very fast site, with enough of the above-mentioned basic functions, make it quickly and easy to replicate, and also to package up the information so as to make it easy to teach others to replicate by themselves.

Server Setup

The first thing I will do, is to setup WordPress on an Nginx VPS with CGI Fastcache. Okay a bit of jargon there, but what it gives us is WordPress on a cheap server, in a configuration with caching.

Nginx is a server setup that runs on top of Linux Ubuntu, it’s very light and fast, is able to serve many more users  with the same amount resources, so you can get massive bang for buck in terms of page views per dollar spent. It will be more than most small businesses will ever need.

Nginx used to be a geeks-only thing, as you couldn’t get near it if you didn’t know some coding. But with easyengine.io that’s all changed. A few easy commands and you have an awesome WordPress to Nginx setup ready to go.

So far, we have done the following list of things:

  1. Setup vultr $5 server, choosing Ubuntu 16.4
  2. Login to server.
  3. Go to easyengine.io and copy/paste the initial install command, to get Nginx server running.
  4. Paste server setup for with CGI Fastcache and HHVM:
    sudo ee site create YOURDOMAIN.COM –wpfc –php7 –letsencrypt –user=YOURUSERNAME –pass=YOURPASSWORD —  email=YOUREMAIL –hhvm

So that’s the server setup done. That’s a summary list only. I will be making a detailed step-by-step list at some point.

At this stage we have a very fast server, with caching already running. This alone will beat a lot of Web hosting options out there. And will almost certainly beat options at the same price point.

But still, we have more to do if we want to be the fastest. Let’s continue.

Theme Install and Optimisations

  1. Install Generatepress theme.
  2. Install WP Rocket plugin.
  3. Do Nginx config for WP rocket  https://github.com/maximejobin/rocket-nginx, cronjob instructions: https://www.digitalocean.com/community/questions/set-up-cron-job-ubuntu-nginx-server
  4. Set WP Rocket.
  5. Install Autoptimize.
  6. Install WP Critical CSS.
  7. Get CSS user at www.criticalcss.com
  8. Enter WP Critical CSS API key.
  9. Install Shortpixel.
  10. Optimise Images.
  11. Install various plugins.
  12. Install HeartBeat Control plugin.

So having done all that, we are now at the empty blog stage. The site is indeed running super fast. Now let’s run some tests.

Pingdom Speed Test

We have a 96 score on Pingdom.com with a page load time of  154ms, as tested from Melbourne.

GT Metrix Speed Test

We have a 100/99 score on GTMetrix.com with a full page load time of 0.8 seconds, as tested from Sydney.

So far, so good. The next thing is to get more content and functions into the site, while seeing how much speed we can maintain. While embedding analytics and similar functions will add on a little time, as will pictures and other content, we will keep things as light as possible while trying to look good.

I have been looking at some tricks for preventing video embeds from dragging down the time. I have previously had websites with nice full pages running at consistent 325ms load times. So let’s see what we can do, keeping in mind the main technical goals of record, replicate and teach.

Wish me luck! Any please leave your questions and tips below.

 

Facebook
Google+
Twitter
LinkedIn
Pinterest
AlphaPress

AlphaPress

Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

2 thoughts on “Building the Fastest Possible Beautiful Functional Website

Leave a Comment