How I fixed my blog's performance issues by writing a new Jekyll plugin

The page doesn't load any CSS, I get a 301 loop on main-e03066e7ad7653435204aa3170643558.css leading to ERR_TOO_MANY_REDIRECTS and over 100 requests and a nearly 1 second load time. Sections are displayed lazily and on each scroll I get dozens of requests sent to google-assets-formatavif-width672-4399f142b495ab9796b3b91053c097b9.avif with the same 301. This leads to section taking over 200ms for 4 lines of text.

While that may be great for Google Pagespeed, it leads to issues that wouldn't exist with a static page and a degraded experience for the end user. I'm not sure if the issue is related to the plugin discussed in the article.

With this being said, I can see many use-cases for such a plugin. Having compile-time image transformation/compression is really nice.

Over the weekend I stood up a small site with a blog of only a few articles. I've done this in the past with Wordpress and Jekyl, but I do it pretty rarely so I forget exactly how to do it and how to make the sites fast.

So I let Claude write it. I told it I wanted a simple static website without any js frameworks. It made the whole thing. Any time I add a blog post, it updates the blog index page.

The site is, of course, very fast. But the main gain, for me, was not having to figure out how to get the underlying tech working. Yes, I'm probably dumber for it, but the site was up in a few hours and I got to go on with my life.

I use Jekyll for my company website [1] and managed to get a lot of speed optimisations simply by using a post-processing tool on the statically generated output.

The tool I use is Jampack and I'd highly recommend it: https://jampack.divriots.com

For my product website, it reduced the overall size by 590MB or approximately 59% in size, along with changing the HTML/CSS to make the optimisations that this article notes.

[1] https://www.magiclasso.co/

Great effort - really happy to see people keeping Jekyll alive.

Q: Why did you decide to rewrite the whole image handling instead of just relying on the jekyll_picture_tag gem (https://github.com/rbuchberger/jekyll_picture_tag) - I am using that since years and it just works just fine.

On the YouTube embed aspect, using a component can take lots of time and efforts.

Just sharing another approach where you keep the YouTube embed iframe, but replace the domain "youtube.com" by this specific domain "embedlite.com". It loads only the thumbnail of the video and when someone clicks on it, it loads the full YouTube player.

More info: https://www.embedlite.com

I have a blog with pagespeed score of 98 but still got several pages de-indexed from google. Guess my content isn't that important.

And yet when I open the page it first loads without CSS and then after 0.5s applies the style.

all this for a blog.

Honestly, I believe you have made it a tad complex than it needs to be. I migrated to Jekyll from WordPress about 4 years ago. It does have all 100s in Google PageSpeed. I used Jekyll as just another tool so I can stick to GitHub Pages. There is nothing tied to anything, and I can move all the Markdown contents to another system within hours, if not minutes. I can also upload the generated HTML via FTP, and it will work as well.

Almost all audio, images, and videos are rather ornamental, and the content will be OK without them. I try to have all content as standalone on its own as possible. For instance, the posts follow the pattern "_posts/YYYY/YYYY-MM-DD-url-goes-here.md," so I know where the yearly content is, despite each post having its own designated published date. I also have a folder "_posts/todo" where published (but work-in-progress) and future dated posts live.

For images, I stopped worrying about serving multiple sources. I optimized it somewhere between good enough for both mobile and higher (I now consider tablet and desktop the same).

https://brajeshwar.com/2021/brajeshwar.com-2021/