Modify CSS Links in Header

ClickAlgo

I seem to have duplicate forum.css files, which is affecting my performance.

<link rel="stylesheet" href="https://ctrader.info/assets/forum.css?v=90ae1362">
<link rel="next" href="https://ctrader.info?page=2">
<link rel="canonical" href="https://ctrader.info">
<link rel="preload" href="https://ctrader.info/assets/forum.css?v=90ae1362" as="style">
<link rel="preload" href="https://ctrader.info/assets/forum.js?v=ae0a51ce" as="script">
<link rel="preload" href="https://ctrader.info/assets/forum-en.js?v=078bd8de" as="script">
<link rel="preload" href="https://ctrader.info/assets/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="preload" href="https://ctrader.info/assets/fonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin="">
`

The culprit is bold at the top; does anybody have any ideas?

Also, is it possible to edit the header to add the assets to a CDN?

https://ctrader.info/

clarkwinkelmann

ClickAlgo what makes you say it's a performance hit?

Au contraire, a preload tag is there to supplement the stylesheet tag with the goal to improve performance. I'm not sure why it's placed after the stylesheet tag though, it probably has no effect in this case. Is this native to Flarum or from an extension? Your php flarum info output would be helpful.

ClickAlgo

Hi, Clarke; thank you for taking the time to reply.

I am asking because my site failed the core web vitals, but today I rechecked, and it passed again; when I use the tool PageSpeed Insights, it fails with the Largest Contentful Paint being too high. I thought part of the problem with slow page loading times is that the JS and CSS files are local and not on a CDN. Is it possible to modify these paths?

or even modify the path for this one: assets/fonts/fa-brands-400.woff2

The duplicate CSS is probably an extension, I will check.

There are also various tweaks to prevent render blocking:

The <script> tags for forum.js and forum-en.js are not using async or defer. These attributes are critical to prevent JavaScript from blocking page rendering:

Access to modifying these files would really help.

clarkwinkelmann

ClickAlgo The <script> tags for forum.js and forum-en.js are not using async or defer. These attributes are critical to prevent JavaScript from blocking page rendering:

This is a common message given by speed checkers, but in the case of Flarum nothing can be done as the app is a javascript single page app, deferring the javascript brings no benefit as the javascript is required for the page to render at all. At least until someone implements server-side rendering for Flarum.

I'm not sure if there's any publicly available extension that automates publishing assets to a CDN or change the URL prefix, but this has been done by some forum owners, probably by overriding the head content through the local PHP extender.

ClickAlgo

ok, thank you very much for your help.