Tuning a Static Site for Performance and SEO
I use jekyll, a static site generator1, to manage this blog. It is a fairly geeky tool, but it has been a lot of fun to learn and it gives me complete control over my content. I ran a test recently using Google’s PageSpeed Insights and saw some areas I could improve my site’s performance.
Now, you may be thinking, Improve performance? It’s a static site, there is no database to slow things down! You’re just serving static html files! That is true, it is already fast, but a lot of the performance issues actually happen on the front-end in the browser, especially on mobile.
I host my site on a Windows virtual server running in Azure, mostly because I already had it setup. Here are some of the challenges I faced and what I did to overcome them and improve performance and SEO.
Creating a Canonical URL
An SEO best practice is to only have your content exist at a single URL. That means you don’t want to have the same article available at two different URLs, like austingrigg.com/blog/2014-goals and www.austingrigg.com/blog/2014-goals. You want to create a canonical URL and redirect the other to it. I chose to go without the www for my canonical URL, just austingrigg.com. It is really just a matter of preference – pick one and stick with it.
So, there are two ways to do that. I could have created a separate site in IIS and added the www.austingrigg.com binding to that site and just had that whole site redirect to austingrigg.com, but I don’t like the idea of having a whole site just for redirecting. That is where the URL Rewrite Module comes in. Install this using the Web Platform Installer and then add the following to your web.config in the root of your site’s folder:
Obviously replacing the URL for your blog for mine.
Give Unique Name
First, I installed the Jekyll Minibundle plugin which will hash3 a file and re-name it using that hash. This ensures that the filename is unique and only changes when the actual content of the file changes.
To use the Minibundle plugin, I reference my CSS stylesheet like this:
And once the site is built, it outputs this:
Set Cache Control Headers
If someone navigates to a URL on your site that doesn’t exist, you probably want to display a friendly message saying you couldn’t find the page they were looking for.
So, I created a 404.html page and setup IIS to redirect to it if the URL could not be found. Great, everything seems to be working, except that page is returned with a 200 OK status code instead of the 404 status code that indicates that the page wasn’t found. Why is this a big deal? Because, when Google (or any other search engine) indexes your site, if a page no longer exists you want to let them know. The only way you can do that is to send a 404. If you send a 200 status code Google will assume that was a legitimate page and put it in their index.
So, to fix this I created an aspx (ASP.NET Web Forms page) that returned a 404 status code and the content from my 404.html page as the response body. Below is the web.config setting to redirect to the 404.aspx page and the code to send the status code and return the correct html.
It is a little convoluted, but it is worth it to provide a good user experience and do the right thing for SEO.
So, hopefully this helped you understand a little bit more about making your static site load faster and following SEO best practices. Feel free to reach out to me on twitter as @austingrigg if you have any questions or any suggestions to make the site better.
A static site generator is just a tool that takes source code, templates, and assets and builds a simple HTML site. The advantage is that you can host your site pretty much anywhere and it is super fast because there is no database, you are just serving HTML pages and static resources. ↩
comments powered by Disqus