I've managed to get this working inside the core for the most part. Still needs a little tweaking but for people not afraid to edit core files and what not this is the code.
src/Http/WebApp/WebAppView.php
public function render(Request $request)
{
.... Code removed for shortening this ....
$baseUrl = array_get($forum, 'data.attributes.baseUrl');
$view->cssUrls = $this->buildCssUrls($baseUrl);
$view->jsUrls = $this->buildJsUrls($baseUrl);
$this->addLinkHeaders();
$view->head = implode("\n", $this->head);
}
protected function addLinkHeaders()
{
$css = [
str_replace(public_path(), '', $this->getCss()->getFile()),
str_replace(public_path(), '', $this->localeCss->getFile())
];
$js = [
str_replace(public_path(), '', $this->getJs()->getFile()),
str_replace(public_path(), '', $this->localeJs->getFile())
];
foreach($css as $cssUrl) {
header('Link: <' . $cssUrl . '>; rel=preload, as=style', false);
}
foreach ($js as $jsUrl) {
header('Link: <' . $jsUrl . '>; rel=preload, as=script', false);
}
}
Performance wise I've found that it shaves about 300ms of each asset pushed. Some timings are as followed:
https://gist.github.com/tankerkiller125/128fff4b946d1b1153a99e4710d7f197
Seems that it improves the speed pretty well (please also note that these timings include the time for the browser to process the files and use them actual network time is less.) (Also note that the edit was because I read the CSS file wrong.)
