How I fixed my blog's performance issues by writing a new Jekyll plugin
10 months ago
- #Performance Optimization
- #Web Development
- #Jekyll
- 作者发现由于性能问题，谷歌没有索引他们的博客文章。
- Google PageSpeed Insights显示得分仅为43/100，暴露出谷歌字体、YouTube嵌入和图片交付的问题。
- 通过手动下载CSS和WOFF2文件并自托管字体，移除了未使用的字体样式。
- 使用第三方库(lite-youtube)替换YouTube默认嵌入代码以提升性能。
- 通过提供多种格式(AVIF、WebP)、响应式尺寸(srcset)和懒加载优化图片。
- 开发了新的Jekyll插件jekyll-skyhook来处理图片转换、响应式图片、缓存清除和CSS URL重写。
- 该插件集成了现代JavaScript构建工具(esbuild、Tailwind)，避开了过时的Ruby资源管道。
- 使用npm脚本处理CSS/JS和Foreman进行本地开发，建立了开发工作流。
- 通过响应式图片助手include自动化实现博客文章中的最佳图片交付。
- 优化后PageSpeed得分显著提升至99/100。