Christian Engvall

I’m trying to get this site to load as fast as possible. One thing I wanted to try was to use Jekyll instead of Wordpress to achieve this.

I’ve finally made the switch now. The page loads are faster since the site does not go through the Wordpress loop anymore. Jekyll creates static HTML-files that are then uploaded to the web server.

Page loads before and after

Below you can see screenshots of the network tab in Chrome where Christianengvall.se is loaded while being served with Wordpress and with static files created by Jekyll.

You can see that the load time is marked in red. That is because i use Ghostery) to block trackers like Clicky and Google analytics and so on.

This is only two page loads. A better test would be to load it lots of times and compare the average load time. But this is enough to see that a nice change for the better has been accomplished.

Load times Wordpress:

Page load with wordpress

And load times with static files created by Jekyll:

Page load static page with Jekyll

The load time went from 2,04 seconds to 452 ms. It probably loads a bit slower if you do not block trackers.

When then switch to Jekyll was made I’ve also started to delete some Wordpress leftovers in the HTML-markup.

I also skipped the implementation of share buttons for the new site, i’ve never been a fan of their loading times so now I’m skipping them as a test.

I now also use an image lazy loader that is only using vanilla javascript, making it unnecessary to include jQuery or any other framework. That generates fewer bytes to download for the visitor.

Migration tool

I tried using the official tools to migrate posts and pages from Wordpress to Jekyll. That however left me with a lot of html-fixes to do in every post on the site. I ended up using exitwp instead. Still got to do some fixes, but a lot less of them.

Deploy

You can use Github pages to host your jekyll site. A lot of people do this. But i decided to stay with my current host and got the opportunity to write my own deploy script :)

I thought I’d share it with you if you want to build your own from this template. It uses secure copy to upload the files to the server.

It also gzips every html, js and css asset before deploying. I got the script from Dominic Watson But changed it a bit to fit my site.

#!/bin/bash
ACTION='\033[1;90m'
FINISHED='\033[1;96m'
READY='\033[1;92m'
NOCOLOR='\033[0m'

echo
echo -e ${ACTION}Removing _site folder
echo -e =======================${NOCOLOR}
rm -rf _site/
echo -e ${FINISHED}Done.${NOCOLOR}
echo

echo -e ${ACTION}Building site
echo -e =======================${NOCOLOR}
echo
jekyll build JEKYLL_ENV=production
echo
echo -e ${FINISHED}Done.${NOCOLOR}

echo
echo -e ${ACTION}Compressing all Html, css and js with GZIP
echo -e =======================${NOCOLOR}
find _site/ -iname '*.html' -exec gzip -k -n {} +
find _site/ -iname '*.js' -exec gzip -n -k {} +
find _site/ -iname '*.css' -exec gzip -n -k {} +
echo -e ${FINISHED}Done.${NOCOLOR}

echo
echo -e ${ACTION}Transfering files to host
echo -e =======================${NOCOLOR}
echo
scp -r _site/*[!wp-content] user@host:/path/to/send/site/
echo
echo -e ${FINISHED}Done.${NOCOLOR}
echo
echo -e ${READY}Site deployed.${NOCOLOR}
echo

exit 0

scp -r _site/*[!wp-content] user@host:/path/to/send/site/

This line takes care of sending the files to the host. The [!wp-content] excludes that folder so that i won’t upload all the images every time.

Update: I now use rsync to transfer the files instead of scp.

Other tools

To minify css and javascript i use the Jekyll assets plugin. And to minify the html i use the compress html layout by Anatol Broder.

ssl

I now also use Cloudflare to get hands on a free ssl-certificate that they also take care of renewing. All to get that marginal boost in the SERP.