XF 2.2 Fixing First Containtfull Paint (FCP)

Anatoliy

Anatoliy

Well-known member
Google PagespeedInsights shows that all others are good, but FCP has to be fixed.

fcp.webp

As I understand, a browser has to download a page php file (18k), woff2 file (141k), and css file (66k) before it can render FCP. So I see 3 easy ways FCP could be reduced.

1. Reducing woff2 file size by removing unused in original xF style font awesome icons.
I understand that xF probably can't redistribute the altered font awesome file, but they could provide a list of used icons and an instruction on how to remove unused.

2. Reducing css file size by removing unused in original xF style font awesome icons.

3. Add critical style into html code
Not sure about this one, but it looks to me that fcp would pop up even before css and woff files loaded, if few lines of css would be placed between <head> </head> tags.

I guess I didn't write anything new, and xF team knows that, and I guess there are reasons why they don't do it.
So, If someone will help me with reducing FCP in 'do it yourself' style, I'll be very thankful.
 
Sort by date Sort by votes
By default, it loads 2 woff2 files: fa-regular-400 (174k) & fa-solid-900 (141k). I switched Font Awesome weight from Regular to Solid in style properties, and now it loads only fa-solid-900. Now I could probably go even further and remove from css.php a lot of lines, related to fa-regular-400.
If I would only know where to edit, and how to figure those lines. )
Please advice.
 
Upvote 0 Downvote
So I edited fa.css template, by removing all but styles/fonts/fa/fa-solid-900.woff?_v=5.14.0.
The size of css.php went from 66k to 33k. And FCP changed from 1.8s to 1.6s. But then I noticed, that the icons of forums on the homepage are gone. So I reverted fa.css back.
What did I wrong?
 
Upvote 0 Downvote
Anatoliy said:
So I edited fa.css template, by removing all but styles/fonts/fa/fa-solid-900.woff?_v=5.14.0.
The size of css.php went from 66k to 33k. And FCP changed from 1.8s to 1.6s. But then I noticed, that the icons of forums on the homepage are gone. So I reverted fa.css back.
What did I wrong?
Click to expand...
You have to make sure that fa solid is used everywhere if you only load fa solid.
Btw. Nice Trick ;)
 
Upvote 0 Downvote
Anatoliy said:
how? where?
Click to expand...
Yes that is the question.
For XF itself, i.e. the default style, you have already found the necessary setting yourself.
Then it depends on which add-ons use Font awesome, whether you are using something in extra.less that does not point to fa regular ...

Depending on your setup, there can be a very nice mix in the templates, addons, style variables (...).
Only you can search, find and adapt.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Anatoliy
  • Question Question
XF 2.2 Reducing CSS for guests. How?
2 3
Replies
47
Views
4K
jamalfree
jamalfree
Alternadiv
Peculiar & Retro Web Design || Alternadiv
Replies
19
Views
2K
Alternadiv
Alternadiv
ShikiSuen
  • Question Question
XF 2.1 AdminCP extra less experiment.
Replies
1
Views
2K
ShikiSuen
ShikiSuen
T
  • Question Question
XF 2.0 Email bounce log empty values
Replies
1
Views
803
Mike
Mike
giorgino
Server issue Bounce message processing failed: Invalid header value detected
Replies
9
Views
2K
giorgino
giorgino
Top Bottom