Helping You Smash Those Pagespeed Scores Quicker
Minification
Removing comments and whitespace from HTML, CSS and JS files
Asset Optimization
Opt-in to have img tags converted into responsive, optimised pictures
CSS/JS Pipelines
CSS & JS are processed by 11ty, and can be extended with PostCSS and esbuild
Critical CSS
Automatic inlining of CSS above the fold
Automatic Sitemap Generation
Boost your SEO with a sitemap that changes on every build
Each feature, explained
Each feature is supplied by an 11ty plugin, which is briefly explained with appropriate documentation supplied in the .eleventy.js file. We have elaborated a little more on what each feature does in the dropdowns to the right, but we would recommend reviewing the docs for each plugin if you want to customise things yourself.
All code, when deployed, will be minified. HTML and CSS is minified via the "eleventy-plugin-files-minifier", whereas JS is minified as part of the esbuild pipeline. During development, we skip this minification step so you can keep the comments in the dev tools, to make development easier.
The "eleventy-critical-css" plugin takes all the CSS rendered above-the-fold on a 1920x1080 display and inlines it into the document head. Note that this CSS, by default, is not removed from the stylesheets, as this would make them uncacheable between pages. This is an option that can be modified, with further details found in the docs.
You can opt-in to asset optimization, where any standalone img tags will be converted into a full picture/source tag, complete with generation of responsive images. This requires some extra configuration, so it's been left as an opt-in feature. More details can be found in src/config/plugins/image.js
No more having to generate sitemaps yourself! This plugin generates a sitemap based on all templates that are passed through eleventy. Config and Asset files are excluded via their respective 11tydata.js files. Pairs well with the CMS kit to automatically include posts into the sitemap on rebuild.
CSS and JS files are passed through as templates, allowing for modification at build-time. Configuration for this can be found in src/config/eleventy.
CSS passes through a minimalistic PostCSS configuration set up to automatically prefix styles with the necessary vendor prefixes. You can add any other PostCSS plugin as you would normally via its JS API. Purging unneeded CSS? Polyfilling the latest sytax? Linting? All possible!
JS runs through an esbuild configuration where code is bundled (if using imports) and minified (in production only). By default, all files are passed through, bundling where necessary, with the same path as provided in src/.
