Optimization is a big concern for everyone who wants to desing/host a website. Google has made some progress by implementing standard rules to use when designing one. In this post I’ll show you how I created a responsive and AMP compatible (as you can see below) website using jekyll static website generator.
The lighthing bolt on the website name means that is AMP compatible
I have been using jekyll static website generator because it’s
- the most popular static website generator,
- it’s works natively with github pages and
- it has a great community and themes.
I wanted to be have a website optimized for google search (SEO) then I started using the emping theme, which has been designed to be AMP compatible. It’s a good starting point to produce content with very fast results but it’s very difficult to make visual changes if you don’t master css and also building times might be considerable long because scss conversion and minification in jekyll it’s a little bit slow.
AMP websites have the following restrictions:
- No external css loading like
<link rel="stylesheet" type="text/css" href="mystyle.css">is admitted.
- The only excuse are the loading of external fonts.
- Custom css must be included in the header, minified and it shouldn’t execedd 50kb.
- No external css loading like
- images: no
<img>component. Use instead
<amp-img>, which always includes width and height or at least a ratio between the two because helps render a website.
Building website with github pages
I host my website in github pages, which natively builds pages using jekyll.
The little issue is that only a bunch of jekyll gems are allowed in the process
github-pages gems group), which makes
difficult to optimize websites, since there is no js/css supported
bundler/uglifier. This was one of the first reasons that I started looking for alternatives to optimize my website.
How to include 150kb bulma css in AMP
Bulma includes too many classes in it’s css file so it’s mandatory to filter it’s file before using it. At the beginning I started filtering the sass version with the only the components that I used but this process is very tedious to do by hand and at the end my results were not enough to be below 50kb.
I finally found the purifycss plugin, that was used in this post to shrink bootstrap. In my case the resulting css file is around 45kb even if I use a lot of classes from bulma, as you can see in my website (go take a look).
I process my css as follows:
- I have a main.scss that reads my custom variables and loads bulma,
- the result is purified using the only the used classes in my html,
- concatenation with a syntax highlight css file that I use to highlight code
- and the final result is minified/inlined.
I also added a pipeline to create image form the same size using gulp-responsive package and then I optimize my images using gulp-image package.
The compilation of npm plugins are the following:
- gulp-sass: compile sass/scss files
- gulp-clean-css: minify and clean css
- gulp-concat: concatenate css/js files
- gulp-purifycss: remove not used classes from css
- gulp-replace: replace a pattern in files
- gulp-responsive: create different image sizes
- gulp-image: optimize images
I am satisfied with the results that I get with my new process pipeline. I decreased build time of my website from 12 to 2 seconds. Even if AMP restrictions can be annoying, the results are good: good SEO referencing, fast loading times, predefined layout of your page so that components won’t move when loading.
On the other side, I am forced to commit more frequently my resulting css file if I change the used classes from bulma and I don’t think I’ll be able to use all bulma classes because I’ll be above the 50kb of css.
PS: I like to use emojis and I found the jemoji gems very interesting until I found out that is not very AMP friendly.