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
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.