How to optimize your Github Page static site

written by Guido Percú on February 1, 2016

Last week I've decided to improve this site performance. It was taking too long to load for such a simple static site. Research says that every second matters on website performance

I've improved the loading time of my website from 4.7s to 1.6s 1.43s! Here is how I did it:

Measure

Use tools to help you understand your performance problems before you start. I used WebPageTest, Varvy Page Speed Optimization and Google Pagespeed Insights

Firefox and Google Chrome also have tools for this. Check them out.

Understand your server

I use Github Pages to host my site, so I need to understand the Github Pages has Pros and Cons of it.

The main problem here is about cache expire time. I don't change the assets too much, so I'ts really anoying to just have a 10 min max-age cache. Still looking for solutions on this (maybe moving the assets to Dropbox?).

Compress and minimize!

Compress your images, nobody needs to download a 1MB+ image that's going to be your background. I really liked using TinyJPG for this task

This should also be done with JS and CSS, there are some great tools for it:

Depending on your workflow, you should try using task runners for this, like GruntJS or GulpJS

Test it

Use Apache Benchmark tool to load test your web site.

ab -n 1000 -c 500 http://www.yourdomain.com.br/

Want to know more? Check them out: