This module will automatically sends Link HTTP headers supporting
resource hints
and preload, via HTTP headers.
From OptionsInterface:
public const MODE_PRELOAD = 'preload';
public const MODE_PREFETCH = 'prefetch';
public const MODE_DNS_PREFETCH = 'dns-prefetch';
public const MODE_PRECONNECT = 'preconnect';
public const MODE_PRERENDER = 'prerender';This is the default configuration and options can be overridden in your configuration.
return [
'facile' => [
'laminas_link_headers_module' => [
'stylesheet_enabled' => false, // send link headers for stylesheet links
'stylesheet_mode' => 'preload', // resource hint for stylesheet links
'script_enabled' => false, // send link headers for scripts
'script_mode' => 'preload', // resource hint for script links
'http2_push_enabled' => true, // if disabled, a "nopush" attributed will be added to disable HTTP/2 push
],
],
];Default configuration:
return [
'facile' => [
'laminas_link_headers_module' => [
'stylesheet_enabled' => false, // send link headers for stylesheet links
'stylesheet_mode' => 'preload', // resource hint for stylesheet links
'script_enabled' => false, // send link headers for scripts
'script_mode' => 'preload', // resource hint for script links
'http2_push_enabled' => true, // if disabled, a "nopush" attributed will be added to disable HTTP/2 push
],
],
];In your template:
<!DOCTYPE html>
<html lang="it">
<head>
<?=
$this->headLink(['rel' => 'preload', 'as' => 'image', 'href' => $this->basePath() . $this->asset('assets/images/logo.png'), 'media' => 'image/png')
->headLink(['rel' => 'preload', 'as' => 'style', 'href' => $this->basePath() . $this->asset('assets/vendor.css')])
->headLink(['rel' => 'preload', 'as' => 'script', 'href' => $this->basePath() . $this->asset('assets/vendor.js')])
// prefetch (low priority) resources required in th next pages
->headLink(['rel' => 'prefetch', 'as' => 'style', 'href' => $this->basePath() . $this->asset('assets/next.css')])
// do not send preload headers
->prependStylesheet($this->basePath() . $this->asset('assets/vendor.css'))
->prependStylesheet($this->basePath() . $this->asset('assets/vendor.js'))
?>
<?=
$this->headScript()
->prependFile('/script/foo.js')
?>
</head>
<body>
<!-- your content here -->
<script type="text/javascript" src="<?= $this->basePath() . $this->asset('assets/vendor.js') ?>"></script>
</body>
</html>The module will automatically add a Link header to the response:
Link: </assets/images/logo.png>; rel="preload"; as="image"; media="image/png",
</assets/vendor.css>; rel="preload"; as="style",
</assets/vendor.js>; rel="preload"; as="script",
</assets/next.css>; rel="prefetch"; as="style"
You should notice that resource /script/foo.js is not in headers, because it wasn't
included in preload head links.
Enabling stylesheet_enabled mode in your configuration, you can avoid inserting preload links
for all your styles.
return [
'facile' => [
'laminas_link_headers_module' => [
'stylesheet_enabled' => true, // send link headers for stylesheet links
],
],
];You can optionally change the stylesheet_mode
(supported modes are vailable as constants in OptionsInterface)
to use on stylesheets.
In your template:
<!DOCTYPE html>
<html lang="it">
<head>
<?=
$this->prependStylesheet($this->basePath() . $this->asset('assets/vendor.css'))
?>
</head>
<body>
<!-- your content here -->
</body>
</html>The module will automatically add a Link header to the response:
Link: </assets/vendor.css>; rel="preload"; as="style"; type="text/css"; media="screen"
Enabling script_enabled mode in your configuration, you can avoid inserting preload links
for all your scripts.
return [
'facile' => [
'laminas_link_headers_module' => [
'script_enabled' => true, // send link headers for script links
],
],
];You can optionally change the script_mode
(supported modes are vailable as constants in OptionsInterface)
to use on stylesheets.
In your template:
<!DOCTYPE html>
<html lang="it">
<head>
<?=
$this->headScript()
->prependFile('/script/foo.js')
->prependFile('/script/bar.js', 'text/foo')
?>
</head>
<body>
<!-- your content here -->
</body>
</html>The module will automatically add a Link header to the response:
Link: </script/foo.js>; rel="preload"; as="script"; type="text/javascript",
</script/bar.js>; rel="preload"; as="script"; type="text/foo"
Using HTTP/2, sending preload link headers the web server will push contents to the browser when the page is requested.
This isn't always necessary, because browsers can cache the contents and pushing them can increase bandwidth usage with no significant performance.
You can disable push setting http2_push_enabled configuration option to false.
This will add a nopush attribute
that indicates to an HTTP/2 push capable server that the resource hould not be pushed
(e.g. the origin may have additional information indicating that it may already be in cache).