Preload Script or CSS in TYPO3

user_7079883 0
Viewed 2117

i have some compressed JS and CSS files compressed in TYPO3 9.5.15. I'm trying to get a better Google PageSpeed rank. I get this hint but i dont't know how to make TYPO3 to preload those compressed files.

Right now it looks like this:

    page.includeJSFooterlibs {
        jquerycore = EXT:web4brelaunch/Resources/Public/JavaScript/jquery/jquery-3.1.1.min.js
    }

enter image description here

google-pagespeed typo3 html
2 Answers

I think TYPO3 currently does not support the link preloading, but when adding libraries, you can include the already minimized version (as you already did) of the library with headerData and footerData meanwhile to solve it. When including it this way, TYPO3 will neither minify nor merge this file.

page.headerData {
    10 = TEXT
    10.value = <link rel="preload" href="/typo3conf/ext/web4brelaunch/Resources/Public/JavaScript/jquery/jquery-3.1.1.min.js" as="script">
}
page.footerData {
    10 = TEXT
    10.value = <script src="/typo3conf/ext/web4brelaunch/Resources/Public/JavaScript/jquery/jquery-3.1.1.min.js" defer></script>
}

For further information about rel preloading see https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

user_7737400

There's several preloading techniques: 1) HTML <link rel>, 2) HTTP Link: header, 3) HTTP Early Hints

In order to get the final URLs for JS/CSS assetsin TYPO3 you should use the asset-post processing events/hooks:

See https://docs.typo3.org/c/typo3/cms-core/master/en-us/Changelog/10.4/Feature-90899-IntroduceAssetPreRenderingEvents.html (events for v10, contains references for v9-hooks, too).

hooks / Link:

As an example (v9): EXT:http2_push sets the Link: header

Early Hints

With TYPO3 lamentably we can't use the Early hints easily because we might not now the final URI of an asset before the page is rendered. If you can adjust your build/instance to have a stable asset URI (think about the ?timestamp as well) this could really make a difference in my opinion because downloading could really start early. But it requires careful thought.

I would thoroughly make sure not to prevent client caching by Early Hints. I am not sure, but it might even be that unconditionally pushing could even generate unnecessary overhead. I am not sure how experimental the Accept-Push-Policy header is.

Link: vs. <link>

I doubt that the HTML <link rel="preload"> would make any noticable difference in loading speed: For CSS, you have it in <head> anyways. And for JS, you can control if you want it in <head>, with or without async/defer. There might be a better use case for fonts.

The Link: header might actually help cut off some milliseconds because it does not require evaluating the HTML to gather the URIs. But we still have the latency for page generation (AFAIK headers won't be sent before the page has been generated).

user_28195810
Related