feat: add async style link

Add async style links

In werkenbijhvc we came to the conclusion the css was render blocking. Reason being was that there was no preloading or asynchronous style linking in the project.

Preloading css links was already a working functionality, this can be added to a project by adding the following in the settings.php:

$config['uncinc_react_frontend.settings']['enable_preload'] = TRUE;

However, this is not enough to prevent the css from render blocking. The preload attribute just tells the browser to start downloading early without applying. To actually asynchronously load in the css we need to set the stylesheet link from rel="preload" to rel="stylesheet" this is done by adding the onload property:

        $link = [
          '#tag' => 'link',
          '#attributes' => [
            'rel' => 'preload',
            'as' => 'style',
            'href' => "/{$filename}",
            'onload' => "this.onload=null;this.rel='stylesheet'",
          ],
        ];

A non script fallback has been added as well:

// No script fallback
$noscript_tag = [
    '#type' => 'inline_template',
    '#template' => '<noscript><link rel="stylesheet" href="{{ href }}" /></noscript>',
    '#context' => ['href' => "/{$filename}"],
];
$page['#attached']['html_head'][] = [$noscript_tag, "noscript-css-{$filename}"];

There was also an issue where the stylesheet links were set to http instead of https on staging. I discussed with Niels, we came to the conclusion this was caused by the $base_url being present in the href attributes, they have been removed for now.

Lighthouse results

Without preloading enabled

With preloading enabled