Performance

Get 100 scores on Google Lighthouse by default. Hyas removes unused css, prefetches links, and lazy loads images.

See also Google Lighthouse: Scan Results for hyas.netlify.app

Unused CSS removal#

./config/postcss.config.js:

const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss');
const whitelister = require('purgecss-whitelister');

module.exports = {
  plugins: [
    autoprefixer(),
    purgecss({
      content: [
        './layouts/**/*.html',
        './content/**/*.md',
      ],
      safelist: [
        'lazyloaded',
        'table',
        'thead',
        'tbody',
        'tr',
        'th',
        'td',
        'h3',
        'alert-link',
        ...whitelister([
          './assets/scss/components/_alerts.scss',
          // './assets/scss/components/_buttons.scss',
          './assets/scss/components/_code.scss',
          // './assets/scss/components/_syntax.scss',
        ]),
      ],
    }),
  ],
}

See also the PurgeCSS docs: Configuration, and the Purgecss Whitelister Readme.

Asset minification#

Hyas uses Hugo to minify CSS, JS and HTML.

Link prefetching#

Hyas uses Quicklink with default settings for link prefetching. By default, Quicklink will automatically prefetch URLs for links that are in-viewport during idle time.

See also the Quicklink website.

Lazy loading images#

Hyas uses lazysizes with a Low Quality Image Placeholder (LQIP) to lazyload images added with Markdown. The LQIP is blurred with a CSS filter.

See also the lazysizes Readme

Edit this page on GitHub