If you want your site to be found, you need your site to be fast. Google has indicated that sites with faster performance do better in search results. Just recently, they started testing a "Slow" warning tag for heavy sites in search results.
It's far too common, however, for developers and clients to rely on tools, but slow down site performance:
- heavy CSS frameworks
- uncompressed JS libraries
- cheap shared hosts
- server-reliant page renders
This article is an explanation of my journey from a WordPress site on a shared host. Despite avoiding heavy frameworks and libraries, I still never got past mid-80s (out of 100) on Google Page Speed score.
Table of Contents
I changed to a Jekyll site hosted on GitHub Pages, behind CloudFlare's CDN, and now have a Google Page Speed of 99/100. Here's how:
Jekyll is flat file site generator. It allows you to save posts as markdown or HTML files, then its engine uses a theme (based on Liquid) to build fully-compiled HTML views for all the pages in your site.
This is a huge win for page speed over a site based on PHP/MySQL (or another server-side template and database CMS). Every time a PHP/MySQL CMS displays a page, the server queries the database, gives content (if found) to the templating engine, then generates HTML which is delivered to the user.
Granted, the server is a computer that normally does this very quickly, but a flat-file site provides a speed boost by removing these steps entirely.
Jekyll is a Ruby gem that you'll install via command line with the following commands:
$ gem install jekyll $ jekyll new site
All the config options for your site live in
_config.yml in the root of the folder that the
jekyll new mysite command created. If you open it, you'll see the following default code:
# Site settings title: Your awesome title email: firstname.lastname@example.org description: > # this means to ignore newlines until "baseurl:" Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description. baseurl: "" # the subpath of your site, e.g. /blog/ url: "http://yourdomain.com" # the base hostname & protocol for your site twitter_username: jekyllrb github_username: jekyll # Build settings markdown: kramdown
You'll want to change most of those things:
- Your email address
- Baseurl (maybe)
- Twitter username
- GitHub username
Once you've customized the site variables in
_config.xml, you're ready to start adding content.
You'll put new posts in the
_posts folder. You can see the file naming convention in the post that Jekyll automatically created there for you:
By default, Jekyll will use that date and that slug to create a permalink to your post. If you create a file called
2015-02-22-using-jekyll.md, Jekyll will convert that file to a full HTML page at
If you had a WordPress site you're converting to Jekyll, this exporter will be a big help to you. It'll create all the markdown files you need, preserving your old WP permalinks, and bringing all the necessary media attachments from
Building Your Site
In the folder that contains your
_config.xml file, run the command
jekyll build. This will process all of your markdown files with your theme and build a full site in the
If you want to test the site locally, run
$ jekyll serve
instead, then go to
http://localhost:4000 in your browser to use your site.
GitHub offers automatic hosting for Jekyll sites. If you don't have a GitHub account, you can create a free account here.
Setting up GitHub Repo
Once you've created a GitHub account, create a new repository for this site to live in.
I'd recommend choosing the "Initialize this repository with a README" option. Click "Create repository" and you'll be taken to a page that shows you an overview of the whole repo. This tutorial will walk you through connecting your local folder to that GitHub repo.
Once that's done, GitHub will publish your site automatically from your_username.github.io. In order to add your own domain to that site, you'll need to add a file called
CNAME (all caps, no extension) to the root of your repo. That file should contain one line: your domain (no protocol, just the domain).
Then set your DNS to point to GitHub: you can do that with either A or CNAME records.
Pushing new content
As you write new content, you'll create posts in your local
_posts folder. To publish those posts to your GitHub site, you'll follow the following steps:
$ git add . $ git commit -m 'message about which post you published' $ git push origin master`
The new page will be added automatically to your GitHub Pages site. GitHub serves these pages much more quickly than any shared host I've ever used: another big performance win!
CloudFlare is the last piece of this puzzle. You can set up a free account at cloudflare.com/sign-up. CloudFlare acts as both a DNS host and a proxy for your site. They provide several CDN and minification tools to speed up this site even more.
Adding a domain to CloudFlare
Once you've created your account, add the domain you want to use in the large "+Add website" field at the top of the page. It'll take a moment to scan the web and import all existing DNS records for that domain. When CloudFlare is done scanning, you'll be given instructions for pointing your domain at CloudFlare's DNS host servers.
Configuring minification & caching
Once the domain is successfully being run by CloudFlare, you can edit its CDN and minification settings. The domain will now appear in the list of "My websites" - click the gear icon at the far right of that row, then choose "CloudFlare settings".
On the settings page, go to the "Performance setting" tab. I recommend the following settings:
- Performance profile: this will change by itself
- Individual performance settings: Aggressive
- Minimum expire TTL: 24 days
- Auto Minify (Web optimization): select all (JS, CSS, HTML)
- Rocket Loader: off
Now you have a flat-file website, automatically generated by Jekyll, hosted at lightning-speed by GitHub Pages, and optimized by CloudFlare. What kind of Page Speed gains have you seen? Please share before/after numbers in the comments!