Sep 17 2020

Light as a Feather: Adding pagination

This will likely be the last article in the series of “Light as a Feather”. I hope you’ve enjoyed it so far! Let’s talk a little about pagination.

With CSS as small as possible and Google Analytics removed, the fruit isn’t so low hanging anymore. One petty annoyance that I noticed with the homepage is that every single post was rendered. Is it necessary to list all of the publications? It seems that a fast initial load would have preferrable UX over rendering (a growing number of) all posts. Furthermore, a user that regularly reads this site likely be most interested in the newest content.

A quick experiment shows that:

This lightens the load of the html payload on the homepage by 18.8 KB (~70%).

The plan is to keep pagination and wait for some analytics (i.e. how often a user navigates to page 2 from the homepage). This should help drive my decision further. All in all, keeping pagination feels like a no-brainer.

If you’re interested in implementing pagination to your blog, have a look into jekyll-paginate-v2. I had troubles getting the original jekyll-paginate gem running on the latest version of jekyll. The one drawback to jekyll-paginate-v2 is that it appears to not be supported by GitHub Pages, so that may be a deal breaker depending on your situation.

The Jekyll configuration for my pagination setup is:

  enabled: true
  debug: false
  collection: 'posts'
  per_page: 7
  permalink: '/page/:num/'
  title: ':title - page :num'
  limit: 0
  sort_field: 'date'
  sort_reverse: true
  category: 'software'
  tag: ''
  locale: ''
    before: 2
    after: 2

Miscellaneous Improvements

One other performance improvement that probably does not warrant its own post: I reduced the profile picture on the homepage. The original photo was around 13 KB, which seemed a bit large. The 3.66 KB equivalent is a little grainy, but not too noticeable.

Going further, I am experimenting with This will make the blog feel more like a client-side app in regards to navigation. The only difference is that I have both an extremely fast initial load as well as subsequent navigation. Who needs JavaScript routing? ;)