Bryan L. Robinson

Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more

Screenshot of “Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more”

https://bryanlrobinson.com/blog/climbing-the-11ty-performance-leaderboard/

This is an excellent writeup of the different paths Bryan went to optimize the performance of his site built with Eleventy. I will definitely look for inspiration in this code.

With so many cool things happening the JAMstack recently, I think we should always keep an eye on performance. Many frameworks can sacrifice speed for developer convenience. The ideas behind hydration and rehydration can sometimes negatively impact this as well. First render is quick, but first useful render can be tediously slow.

I love that 11ty has decided to prominently call out sites that are doing well in this regard. It shows their goal of performant, HTML-driven sites.

- Nicolas Hoizey
- 26 October 2022
- Core Web Vitals, Eleventy, LCP, WebPerf
- 15 reactions
- permalink
If you use #Eleventy and know how to add fetchpriority="high" on your Largest Contenful Paint image, I made a plugin that adds a <link rel="preload"…> for it, even it it's responsive: https://github.com/nhoizey/eleventy-plugin-auto-preload

Feedback welcome! 🙏
- Nicolas Hoizey
- 9 November 2021
- Eleventy, image, WebPerf
- 17 reactions
- permalink
Without any visual change, a simple config change in my #Eleventy plugin images-responsiver improved srcset and sizes attributes of images on my photography site and have reduced the homepage weight by half! 🏎
Carolina Gilabert

Rebuilding my site - Part 1: Eleventy
- Nicolas Hoizey
- 2 February 2021
- Eleventy, image, WebPerf
- 7 reactions
Carol shares the process to build her new site with Eleventy, with a section about image optimisation, a topic I'm very interested in, as you should…
Mark Llobrera

Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
- Nicolas Hoizey
- 22 January 2021
- image, Eleventy, responsive, WebPerf, Netlify
- 5 reactions
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
- Nicolas Hoizey
- 18 November 2020
- Cloudinary, Eleventy, image, Netlify, responsive, WebPerf
- 9 reactions
- permalink
I mixed this awesome #Netlify proxy for #Cloudinary trick from @philhawksworth and @tkadlec with #Eleventy and my responsive images plugin, and the result is great! 😍

https://demo-11ty-netlify-cloudinary.netlify.app/