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:
- Loading all of the posts (with descriptions) on the homepage requests 27.05 KB. This means that the page size will increase linearly with each new post.
- Loading a paginated 7 posts on the homepage is 8.25 KB. This also ensures that the payload size remains constant.
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:
pagination:
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: ''
trail:
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. I was able to take a couple of KB off of this total without any noticable degredations.
Going further, I am experimenting with instant.page. 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? ;)