portails/content/docs/core-hyas/performance.md

title	description	lead	date	lastmod	draft	images	menu	weight	toc
Performance	Get 100 scores on Google Lighthouse by default. Hyas removes unused css, prefetches links, and lazy loads images.	Get 100 scores on <a href="https://googlechrome.github.io/lighthouse/viewer/?gist=8b7aec005ae7b9e128ad5c4e2f125fea">Google Lighthouse</a> by default. Hyas removes unused css, prefetches links, and lazy loads images.	2020-09-17T15:37:44+02:00	2020-09-17T15:37:44+02:00	false		docs parent core-hyas	220	true

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',
      ],
      whitelist: [
        'lazyloaded',
        ...whitelister([
          './assets/scss/components/_syntax.scss',
          './assets/scss/components/_code.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 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]({{< ref "layouts" >}}). The LQIP is blurred with a CSS filter.

See also the lazysizes Readme