Performance

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

On this page

Google Lighthouse Scan Results Doks

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

Unused CSS removal

./config/postcss.config.js:

  1. const autoprefixer = require('autoprefixer');
  2. const purgecss = require('@fullhuman/postcss-purgecss');
  3. const whitelister = require('purgecss-whitelister');
  5. module.exports = {
  6.   plugins: [
  7.     autoprefixer(),
  8.     purgecss({
  9.       content: [
  10.         './layouts/**/*.html',
  11.         './content/**/*.md',
  12.       ],
  13.       safelist: [
  14.         'lazyloaded',
  15.         'table',
  16.         'thead',
  17.         'tbody',
  18.         'tr',
  19.         'th',
  20.         'td',
  21.         ...whitelister([
  22.           './assets/scss/components/_doks.scss',
  23.           './assets/scss/components/_code.scss',
  24.           './assets/scss/components/_search.scss',
  25.           './assets/scss/common/_dark.scss',
  26.           './node_modules/katex/dist/katex.css',
  27.         ]),
  28.       ],
  29.     }),
  30.   ],
  31. }

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

Asset minification

Hyas uses Hugo to minify CSS, JS and HTML.

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