b13/http2

TYPO3 Extension for supporting HTTP/2 Server Push

HTTP/2 Pre-Fetch for TYPO3

Latest Version on Packagist Software License Build Status

This TYPO3 extension fetches all CSS and JS resources that are used for a page-rendering and sends additional HTTP/2 Headers "Link" for each resource resulting in a faster first contentful paint for TYPO3 CMS.

This extension currently runs on TYPO3 v10, TYPO3 v11 and TYPO3 v12, and needs PHP 7.4 or higher.

Installation

Just use composer req b13/http2 and install the extension via the Extension Manager, flush caches and you're ready to go.

In order to see if the extension works, ensure that your webserver supports HTTP/2, runs via HTTPS and check your Response headers to see if "link: " headers are added to your HTTP response.

Nothing to configure, it just works(tm).

Requirements

You need a webserver with HTTP/2 support, and - of course - HTTPS.

Also, use PHP7 - if you care about performance or supported PHP versions, there is nothing to discuss.

How it works under the hood

1. Hook into the "PageRenderer" API class by fetching the concatenated CSS / JS files, and libraries.
2. If in FE, this is stored within TSFE together with cached data (could be run twice here for non-cached info)
3. Send to the client via header() - in BE directly or in FE at the end of the request via a PSR-15 middleware (TYPO3 v10+ only).

ToDo

• Implement options to also allow to define other resources (fonts/images), e.g. via TypoScript.
• Use proper DTOs instead of arrays.

Credits

• Benni Mack

License

As this is a PHP project, extending TYPO3, all code is licensed as GPL v2+.

Sharing our expertise

Find more TYPO3 extensions we have developed that help us deliver value in client projects. As part of the way we work, we focus on testing and best practices to ensure long-term performance, reliability, and results in all our code.

http2's Issues

Option for adding additional files

This would be useful for font preloading.

PHP Fatal Error when page doesn't contain CSS and/or JS

If a page has no CSS and/or JS included a fatal PHP error is thrown.

array_unique() expects parameter 1 to be array, null given | TypeError thrown in file http2/Classes/PageRendererHook.php in line 64

The easiest solution would be an array cast in PageRendererHook line 64 and 65. I can provide a pull request.

JavaScript Modules are not handled correctly

EcmaScript modules require a rel=modulepreload instead of rel=preload: https://web.dev/articles/modulepreload

It would be nice if the extension would reflect that. An simple approach would be to check if the file extension is .mjs. Something like this in Classes/Http/ResourcePusher.php:addPreloadHeaderToResponse():

if(str_contains($uri, '.mjs')) {
    return $response->withAddedHeader('Link', '<' . htmlspecialchars(PathUtility::getAbsoluteWebPath($uri)) . '>; rel=modulepreload; as=' . $type);
} else {
    return $response->withAddedHeader('Link', '<' . htmlspecialchars(PathUtility::getAbsoluteWebPath($uri)) . '>; rel=preload; as=' . $type);
}

Unwanted resources pushed

I just used the extension with EXT:dp_cookieconsent and checked the network connections.
I saw a connection to an external script, which I only wanted to load after cookie acceptance, even though no cookies were accepted.
Also the script tag was still of type text/plain and had an empty src attribute.
Then I found the URL inside the link HTTP header.

The script was included via page.headerData like this:

page.headerData.10 = TEXT
page.headerData.10.value (
  <script data-ignore="1" data-cookieconsent="statistics" type="text/plain" data-src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-XX"></script>
)

I guess the RegEx checks for something like <script ...src=""></script> and therefore pushes the unwanted resource.
Even if I used another cookie consent tool, the data-src attribute is used in most cases.
For now I load external scripts via JS, but I would appreciate, if the extension respected the data-src attribute.

I know, that cookies are not set on preload, but I would like to prevent the connection completely to prevent confusion when checking GDPR compliance.

nopush

Would it be better to add nopush:
https://httpd.apache.org/docs/2.4/howto/http2.html#push
If you want to use preload links without triggering a PUSH, you can use the nopush parameter, as in

Link </xxx.css>;rel=preload;nopush

Incorrect Link headers for URLs with equal signs "="

Right now, the Resource matcher does not deal with URLs that contain an equal sign.

https://github.com/b13/http2/blob/master/Classes/ResourceMatcher.php#L18

Example:
https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CURL gets truncated to https://polyfill.io/v3/polyfill.min.js?flags.

load styles first

Is there a reason why the scripts are processed first?

Properly handle crossorigin resources

If an external resource is included in a site with crossorigin and integrity attributes, e.g. like this:

page.includeJSLibs {
	jQuery = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
	jQuery {
		external = 1
		integrity = sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==
		crossorigin = anonymous
	}
}

then it is pushed as Link: <https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js>; rel=preload; as="script". However, that resource is not actually preloaded, as this triggers a warning (at least in Firefox and Chrome) which reads similar to this: "A preload for 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' is found, but is not used due to an integrity mismatch."

IMHO such resources should either be discarded by the extension (i.e. not pushed), or the crossorigin and integrity information should be included in the Link header: Link: <https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js>; rel=preload; as=script; crossorigin=anonymous; integrity=sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==. According to this issue that seems to be supported at least in some browsers now.

Firefox/Safari misses basic authentication on link resources

Do you know the issue that for FF and safari the browser asks for basic authentiction for every link resource and can't reuse the provided user/pwd?

Large number of CSS & JS files - Response Header too long - HTTP Status 500

If there is a large list of CSS, JS, ... files in the TSFE context, an HTTP response code 500 is returned.
The reason is the Response Header Limit (Apache: LimitRequestFields, ...)

We should have the possibility to limit the header link: value list to a maximum of kiloBytes or a maxium of items in the list.
Alternatively, a hook or event would also be possible, so that each extension can intervene there.

We encountered the problem in our local development environment because the CSS and JavaScript components were loaded individually for the source maps instead of combined for staging and production.

At the moment we just don't see any possibility of limiting the HTTP2 resource pusher to that effect.

Error for Ajax-Calls with no JS/CSS attached

be8af93
This refactoring causes a 500 error for me.

In my case, i have an ajax-call with no css or js attached to $params.

Line 64 crashes with "array_unique() expects parameter 1 to be array, null given", because the key "scripts" does not exist.
Please add a proper check.

Exclude scripts with attributes async and defer

To limit the preload scripts it would be nice to exclude scripts with the attributes async and defer.

Consider support for "Early Hints"

HTTP/2 Server Push is disabled by default in Chrome 106 and other Chromium-based browsers:
https://developer.chrome.com/blog/removing-push/

The (new) alternative seems to be "Early Hints":
https://developer.chrome.com/blog/early-hints/

Maybe you can consider supporting "Early Hints" in the future.