How I fixed my blog's performance issues by writing a new Jekyll plugin
9 months ago
- #Performance Optimization
- #Web Development
- #Jekyll
- Author discovered Google wasn't indexing their blog posts due to poor performance.
- Google PageSpeed Insights revealed a low score of 43/100, highlighting issues with Google Fonts, YouTube embeds, and image delivery.
- Self-hosted fonts by manually downloading and embedding CSS and WOFF2 files, removing unused font faces.
- Replaced YouTube's default embed code with a third-party library (lite-youtube) for better performance.
- Optimized images by offering multiple formats (AVIF, WebP), responsive sizes (srcset), and lazy loading.
- Created a new Jekyll plugin, jekyll-skyhook, to handle image transformations, responsive images, cache-busting, and CSS URL rewriting.
- The plugin integrates modern JavaScript build tools (esbuild, Tailwind) and avoids outdated Ruby asset pipelines.
- Implemented a development workflow with npm scripts for CSS/JS processing and Foreman for local development.
- Used a responsive-image helper include to automate optimal image delivery in blog posts.
- PageSpeed score improved dramatically to 99/100 after optimizations.