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 doks.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',
        ...whitelister([
          './assets/scss/components/_doks.scss',
          './assets/scss/components/_code.scss',
          './assets/scss/components/_search.scss',
          './assets/scss/common/_dark.scss',
          './node_modules/katex/dist/katex.css',
        ]),
      ],
    }),
  ],
}

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 instant.page with default settings for link prefetching. By default, instant.page preloads 65 ms after hovering a link and when a mobile user starts touching their display.

See also the instant.page website: Intensity.

Lazy loading images#

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

See also the lazysizes Readme

Edit this page on GitHub