Features

Performance outcomes

• Green optimized score in applicable lighthouse audits (including accessibility).
• Single HTTP request to First Contentful Paint.
• Very optimized Largest Contentful Paint (score depends on image usage, but images are optimized).
• 0 Cumulative Layout Shift.
• ~0 First Input Delay.

Images

• Generates multiple sizes of each image and uses them in srcset.
• Transcodes images to AVIF and webp and generates picture element.
• Lazy loads images (using native loading=lazy).
• Async decodes images (using decoding=async).
• Avoids CLS impact of images by inferring and providing width and height (Supported in Chrome, Firefox and Safari 14+).
• Downloads remote images and stores/serves them locally.
• Immutable URLs.

CSS

• Pre-processed with SCSS Advanced language.
• Using the tool of Gorko
• Dead-code-eliminates / tree-shakes / purges (pick your favorite word) unused CSS on a per-page basis with PurgeCSS.
• Minified CSS with Gulp csso.

Miscellaneous

• Immutable URLs for JS.
• Sets immutable caching headers for images, fonts, and JS (CSS is inlined).
• Minifies HTML and optimizes it for compression. Uses html-minifier with aggressive options.
• Uses rollup to bundle JS and minifies it with terser.
• Prefetches same-origin navigations when a navigation is likely.

Fonts

• Serves fonts with free premium fonts.
• Apple Garamond, Work Wans and many more

Analytics

.. Coming soon

SEO & Social

• Support for Open Graph metadata, including supported .
• Support for Twitter metadata.
• Support for schema.org JSON-LD.
• Sitemap.xml generation.

Largely useless glitter

• Read time estimate.
• …with an optimized implementation that should never cause a layout.

Security

Generates a strong Content-Security-Policy (CSP) using HTTP headers.

• Default-src is self.
• Disallows plugins.
• Generates hash based CSP for the JS used on the site.
• To extend the CSP with new rules, see CSP.js

Build performance

• Downloaded remote images, and generated sizes are cached in the local filesystem…

Customize

• Explore around in 'src/_includes' or 'src/_contents' so you can change dynamic layouts and fill the contents with markdown.
• Using SCSS compositions in HTML classes for changing some design layouts.

Web components

• Inside the lib folder, experiments of Lit Web Components. (BETA)