PageSpeed code voorbeelden

Fonts

Preload fonts

Preload fonts. Fonts worden geladen zodra zo 'ontdekt' worden in de render tree. Wanneer je vrij zeker weet dat een font gebruik wordt op het zichtbare gedeelte van de pagina kan het slim zijn om dit font te pre-loaden.

 <link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>

FontFace API

Wil je de flash of unstyled tekst beter timen dan kun je gebruik maken van de fontface API. Load fonts through the FontFaceSet API

document.fonts.load('400 1em FontX').then(function () {
document.documentElement.className += ' fl_fontx';
});

Subset fonts

Veel fonts kennen meer tekens dan je ooit zult gebruiken. Voor heading fonts is het vaak een slim idee om alleen de tekens in het font webstand te stoppen die je ook echt gaat gebruiken. For example: U+0020-U+007E (Basic Latin), see https://unicode-table.com/en/#basic-latin for more options

pip install fonttools brotli zopfli
pyftsubset font.ttf \
--unicodes="U+0020,U+0041-005A,U+0061-007A" \
--layout-features="" \
--flavor="woff2" \
--output-file="NotoSansSubset.woff2"

Fonts zonder layout shift

Je kunt een webfont laden zonder layout-shift wanneer je het font 'preload' in combinatie met display:optional. Voorheen was dit een 'anti pattern' maar sinds chrome 83 kan dit een zinnige strategie zijn. https://bugs.chromium.org/p/chromium/issues/detail?id=1040632

 <link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff2'),
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0020-U+007E;
}

CSS

Media queries

Voorkom ongebruikte CSS met media queries

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 1024px)">

Critical CSS

Een kortere CSS zorgt er voor dat de pagina eerder kan renderen

<style>//cricical CSS hier</style>

<link rel="preload"
      href="css.css"
      type="text/css"
      as="style"
      onload="this.onload=null;this.rel='stylesheet';"/>

Critical CSS genereren via node ciritcal

const critical = require('critical');

critical.generate({
    base: '/',
    src: 'https://www.example.com',
    inline: true,
    dimensions: [
    {height: 600,width: 400,},
    {height: 900,width: 1200},
  ],
}, function(err,css,html){
	console.log(css.css)
});

Images

asd

Modern formats with fallback

Support modern filetypes like WebP and legacy types like png and jpg

 <picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.png" width="100" height="100" alt="...">
</picture>

JavaScript

JavaScript kan jouw pagina flink vertragen. JavaScript kan het laden van de pagina blokkeren door het netwekr te blokkeren, de main thread to blokkeren maar ook door CPU te gebruiken die hard nodig is voor het opbouwen van de pagina

Blokkerend JavaScript

Gebruik dit alleren wanneer een script absoluut kritiek is voor het laden van de pagina en niet uitgesteld kan worden

<script src="critical.js">

Async JavaScript

Gebruik dit voor scripts de hoge prioriteit hebben. Blokkeert niet tijdens het laden, wel tijdens het uitvoeren

<script async src="async.js">

Deferred JavaScript

Blokkeert niet tijdens hetladen, wordt uitgevoerd wanneer de DOM is opgebouwd. Gebruik dit voor scripts die belangrijk zijn voor de pagina en in de juiste volgorde moeren worden uitgevoerd.

<script defer src="deferred.js">
<script defer src="depends-on-deferred.js">

Inject script na load event

Zet scripts hier die niet belangrijk zijn voor het laden van de pagina maar nadien functionaliteit kunnen toevoegen

window.addEventListener('load',
function() {
            var _scripts = ['script.js','anotherscript.js']
            for (var i in _scripts) {
                var node = document.createElement('script');
                node.src = _scripts[i];
                document.getElementsByTagName('head')[0].appendChild(node);
            }
});

Wanneer een script totaal onbelangrijk is:

window.addEventListener('load',
    function() {
            var _scripts = ['script.js','anotherscript.js']
            for (var i in _scripts) {
                var node = document.createElement('script');
                node.src = _scripts[i];
                document.getElementsByTagName('head')[0].appendChild(node);
           }
});

Opbouw van de pagina

Content visibility

Met de CSS declaratie content visibility:auto zorg je er voor dat een element pas volledig wordt ge-renderd op het moment dat het zichtbaar wordt. Handig voor elementen zoals de footer of op mobiele apparaten.

 footer{content-visibility:auto}

NGINX

NGINX is a lightweight webserver that usually outperforms APACHE

HTTP/2 Server Push (binnekort niet meer beschikbaar, we wachten op 103 Early Hints)

Pushing files gives a slight pagespeed boost over preloading them.

location ~ \.php$ {
    http2_push /static/font/somefont.woff2;
}