⏳ 3 mins read time
Optimization is a big concern for everyone who wants to design/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.
I have been using jekyll static website generator because it’s
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:
<link rel="stylesheet" type="text/css" href="mystyle.css">is admitted.
<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.
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.
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 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:
Here is the link to my gulpfile. A simple
npm run build will build a
minified css that I put the
_includes folder and then I insert in the header
of my page. When I developing I usually do an
npm run watch to include new bulma styles in my css that I would use.
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.
and share it with your friends: