⏳
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.
I recently meet bulma, a simple css framework that helps you build easily beautiful sites using defined classes. It’s based only on css rules (no javascript), it has very good documentation and it’s relatively light, 150kb for the minified version. In this post I’ll show you how i have adapted it to work with jekyll and obtain a fast amp website.
AMP websites have the following restrictions:
<script type="text/javascript" src="jquery-1.8.3.js"></script>. Meaning is not possible to use jquery, leaflet or other external js libraries. The only accepted js are the AMP js components that are “optimized” by google.<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.
I got insipired from this post from like Michael Rose and this post form from Savaslabs to use npm libraries to externalise my website optimization.
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.
Good web reference is related with how fast your web page loads. Google works in a web format called AMP, which makes loading pages faster but also imposes some restrictions, like no external javascript. It's not simple to add API calls in AMP so this post shows how to implement a search fonctionality in a static page.
This article shows how to implementent Algolia searching engine in a static website and update the entries using Github Actions.
Vim is a simple and ubiquitous text editor that I use daily. In this article I show how to use Vim to take and publish diary notes using Vimwiki and Hugo.
Services like Mopidy and Snapcast are ideal to create a multiroom streaming audio player using devices like the RaspberryPi or android telephones. This posts presents a web interface that uses the state of the art web technologies and integrates nicely with Mopidy and Snapcast.