Building a 'Perfect' Site - Part II

A few months ago I set out to build a 'perfect' site in the eyes of Google's PageSpeed tool. The results were better than expected, with the site scoring a near perfect score on several website speed tests.

The site, SidecarMT.com is a simple example with only 2 pages and no content management system (CMS). The simple setup made it easy to optimize.

How to improve on perfect

For many sites a CMS is a requirement - allowing the client to update the site, add fresh content and keep the site up-to-date. Nearly every site I've built in recent years is powered by a CMS, usually Craft, WordPress, ExpressionEngine or Statamic. Each great for their own reasons.

The first three of those are traditional CMSs with a PHP/MySQL backend. The last, Statamic, is a flat-file CMS, using directories and basic file data to store the site's content. Flat-file CMSs are simple to install, build and customize, and they're also inherently fast.

In my opinion, a flat-file CMS is, at least currently, the easiest path to building a really fast site. While database-driven sites can be optimized, and even fast, a flat-file CMS can be more easily optimized to blazing-fast speeds.

I love Statamic but opted to explore other flat-file CMSs for this project. Turns out there are a number of great ones.

Of these three Grav was the most interesting.

Let's Try it

The new site is for a local Italian pizza joint, Pizza Campania. Similar in format to SidecarMT.com but with some minor differences. The site is a mobile first, responsive design. A bit simpler in that it's a single-page site (as opposed to two pages), and features a full-screen video background.

Pizza Campania

Nearly all of the strategies I used on SidecarMT.com were utilized on PizzaCampania.net:

  • Optimized images
  • Optimized and in-lined JS
  • Optimized and in-lined CSS
  • Compressed HTML
  • Caching

With the exception of a small customization to Grav to output the CSS and JS in-line the CMS is a stock installation. Only one plugin is installed, Static File Cache.

Results

In short, even with the CMS the site is absurdly fast.

Google's PageSpeed Insights gave the site a near perfect score. The main reason points were docked is due to the server response time, which I can only guess is due to the site being hosted on GoDaddy's shared hosting.

Google Pagespeed

Pingdom ranked the site a 97/100 with an average load time of just 434 milliseconds, less than half a second, and faster than 98% of all test websites. Despite a full-page video background the page's size is just 1MB.

Pingdom Test

Yahoo's YSlow ranked the site a perfect 100 with an A on all 23 tests.

YSlow Test

A survey of page load times from SiteSpeed (from around the world) recorded an average load time of only 0.72 seconds, with a best of 0.22 seconds.

SiteSpeed Test

About the site

Site design is by the talented Yogesh Simpson.

Next Steps

I'm hoping to try a more complex site next - powered by a CMS, with multiple pages, and with little to no loss in performance.

Brett DeWoody

Code craftsman, part-time bike explorer, music addict, digital cartography lover, occasional mountain jogger, Software Developer at Citrusbyte & Front-End Career Mentor at Thinkful.
Website