XF 2.1 Why font awesome files so big?

[dethfire]

I've been looking to speed up my site and something I can't understand is why font awesome files are so massive. It seems like they've more than tripled in size the past few years. For example, ~30% of every XF.com forum page's overhead is due to loading the 3 font awesome files. That is crazy!

In XF1 my FA file size is only 70kb, now between the 3 is over 300kb!

 

[DeltaHF]

I have published a guide on how to create your own optimized FontAwesome files as a resource here:

Unmaintained - Reduce FontAwesome icon font file size

NOTICE This add-on will no longer be maintained as a better solution for reducing your FontAwesome file sizes has been published by @Kirby here. I would strongly suggest using his add-on instead...

xenforo.com

 

[duderuud]

Here are the updated raw scripts. Including the ones to generate the applicable css lines. It's raw, and it's a bit Frankenstein. I'm not that skilled at sed/pipe -- but it works.

...

5. CSS lines from the output of #2 above, Append to "fa-thin.css"

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo '\\([a-fA-F0-9]+){4}' | sort | uniq | sed -E 's/(.)/@fa-var-([a-z0-9\-])+: "\\\1";/g' | grep -Ef /dev/stdin upload/src/addons/XF/_data/templates.xml | sed 's/@fa-var-/fa-/' | sed 's/:./:/' | sed 's/fa-/}-/g'| grep -f /dev/stdin upload/src/addons/XF/_data/templates.xml | grep "fa-css-prefix}" | grep "content" >> fa-thin.css
...
[/code]

This step gives me a lot of output:

grep: /dev/stdin:3: Invalid back reference
grep: /dev/stdin:4: Invalid back reference
grep: /dev/stdin:5: Invalid back reference
grep: /dev/stdin:6: Invalid back reference
grep: /dev/stdin:7: Invalid back reference
grep: /dev/stdin:8: Invalid back reference
grep: /dev/stdin:9: Invalid back reference
grep: /dev/stdin:10: Invalid back reference
grep: /dev/stdin:11: Invalid back reference
grep: /dev/stdin:12: Invalid back reference
grep: /dev/stdin:13: Invalid back reference
grep: /dev/stdin:14: Invalid back reference
grep: /dev/stdin:15: Invalid back reference
grep: /dev/stdin:16: Invalid back reference
grep: /dev/stdin:17: Invalid back reference
grep: /dev/stdin:18: Invalid back reference
grep: /dev/stdin:19: Invalid back reference
grep: /dev/stdin:20: Invalid back reference
grep: /dev/stdin:21: Invalid back reference
grep: /dev/stdin:22: Invalid back reference
grep: /dev/stdin:23: Invalid back reference
grep: /dev/stdin:24: Invalid back reference
grep: /dev/stdin:112: Invalid back reference
grep: /dev/stdin:113: Invalid back reference

Is that expected behaviour?

Edit: If that is expected, all went well. But I'm not sure if I need to do something else? Is this purely CSS and do I still need to edit/change the woff files?

 

[arn]

that's not expected. I ran this on macOS. What are you running it on? And which script produced that output?

 

[duderuud]

On my beta server, Ubuntu 18.04

 

[arn]

Can you make a test file called "test.txt" with the contents:

\1234 hello \2345

And run:

grep -Eo '\\([a-fA-F0-9]+){4}' test.txt

For me, this is the output

\1234
\2345

 

[eva2000]

@arn maybe https://stackoverflow.com/questions/50508245/how-to-fix-fatal-invalid-back-reference

 

[duderuud]

Can you make a test file called "test.txt" with the contents:

\1234 hello \2345

And run:

grep -Eo '\\([a-fA-F0-9]+){4}' test.txt

For me, this is the output

\1234
\2345

Same for me

 

[arn]

Same for me

Try this

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo '\\([a-fA-F0-9]+){4}' | sort | uniq | sed -E 's/(.)/@fa-var-([a-z0-9\-])+: "\\\1";/g' | grep -EfF /dev/stdin upload/src/addons/XF/_data/templates.xml | sed 's/@fa-var-/fa-/' | sed 's/:./:/' | sed 's/fa-/}-/g'| grep -fF /dev/stdin upload/src/addons/XF/_data/templates.xml | grep "fa-css-prefix}" | grep "content" >> fa-thin.css

 

[duderuud]

That gives me

grep: F: No such file or directory
grep: F: No such file or directory

Maybe a typo in

grep -EfF /dev/stdin

or

grep -fF /dev/stdin

?

 

[arn]

That gives me

grep: F: No such file or directory
grep: F: No such file or directory

Maybe a typo in

grep -EfF /dev/stdin

or

grep -fF /dev/stdin

?

Yeah I added the capital F because I thought it would fix it


Try this. the order apparently matters

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo '\\([a-fA-F0-9]+){4}' | sort | uniq | sed -E 's/(.)/@fa-var-([a-z0-9\-])+: "\\\1";/g' | grep -EFf /dev/stdin upload/src/addons/XF/_data/templates.xml | sed 's/@fa-var-/fa-/' | sed 's/:./:/' | sed 's/fa-/}-/g'| grep -Ff /dev/stdin upload/src/addons/XF/_data/templates.xml | grep "fa-css-prefix}" | grep "content" >> fa-thin.css

 

[duderuud]

Quickly editting the script hehe! Previous one gave an error
Will try, one sec

Hmm, keeps giving

grep: conflicting matchers specified

 

[duderuud]

Made the CSS changes manually (fa_core.less) and built my own WOFF2 files (have some custom FA icons).

Results WOFF2 loading times:

Default:
1345ms/724ms/1555ms

After tweaking:
64ms/86ms/90ms

(Source: webpagetest.org)

Very good results, thanks @arn and @DeltaHF !

 

[arn]

nice! I haven't gotten around to doing a full replacement for ours. but need to.

arn

 

[rdn]

Here are the updated raw scripts.

Can you please suggest a command to run against a single XML file?
I exported my style as independent style.
Thanks.

Edit:
Simple but useful a bit
cat style.xml | grep fa-

 

[arn]

I finally did this for our board.

- The scripts I posted don't entirely work. Sorry. I had to tweak it to work again

I guess the best steps to reproduce this is

1. Grab the pre-generated list for stock XF python script
2. Export your own template, rerun scripts to pull those. Add to the python list
3. Run this against your addon directory .xml files too to grab those. Add those to python list

I'll try to clean this up when I have time

 

[nrep]

ok, first attempt

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v "fa--" | grep -v -E 'fa-light-300|fa-brands-400|fa-regular-400|fa-solid-900' | sed 's/fa-var-/fa-/g' | sort | uniq | tr '\n' ',' | sed 's/fa-//g'

cat upload/src/addons/XF/_data/* | sed '/<template type="public" title="core_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa.less"/,/<\/template>/d' | sed '/<template type="public" title="setup_fa4_variables.less"/,/<\/template>/d' | grep -Eo '\\([a-fA-F0-9]+){4}'  | sort | uniq | tr '\n' ',' | sed 's/\\/0x/g'

find . -name '*.php' -exec cat {} \; | grep -Eo 'fa-([a-z0-9\-]+)' | grep -v 'fa-1f1' | grep -v 'fa-fe0f' | grep -v 'fa--' | sort | uniq | tr '\n' ',' | sed 's/fa-//g'

output

2x,3x,address-card-o,angle-down,angle-left,angle-right,angle-up,arrow-circle-up,arrow-down,arrow-up,asterisk,backward,balance-scale,ban,bars,bell,bell-slash,bolt,bookmark,bug,bullhorn,calendar,caret-down,caret-left,caret-right,chart-bar,check,check-circle,check-square,chevron-down,chevron-left,chevron-right,chevron-up,circle,clock,code,cog,cogs,columns,comment-alt,comments,compress,copy,credit-card,download,edit,envelope,envelope-open,exclamation-circle,exclamation-triangle,expand,external-link,eye,eye-slash,facebook,facebook-f,facebook-official,file,file-alt,file-archive,file-audio,file-code,file-excel,file-pdf,file-powerpoint,file-video,file-word,fire-extinguisher,forward,frown,fw,github,globe,history,home,id-badge,image,info,info-circle,key,language,lg,life-ring,link,linkedin,list,lock,map,map-signs,medkit,microphone-slash,minus,minus-octagon,newspaper,object-group,paint-brush,paper-plane,paperclip,pause-circle,pen,pinterest-p,pinterest-square,play-circle,plus,plus-circle,plus-square,power-off,pulse,puzzle-piece,question-circle,quote-left,random,reddit-alien,reply,rss,save,search,search-minus,search-plus,server,share,share-alt,shield,sitemap,sliders-h,sort,spin,spinner,square,star,star-half,sync,sync-alt,tachometer,tags,th,thermometer-half,thumbs-up,thumbtack,times,times-circle,toggle-off,toggle-on,trash,trash-alt,tumblr,twitter,unlock,upload,user,user-circle,user-plus,user-times,users,video,whatsapp,windows,wrench,yahoo,

0x00A0,0x00B7,0x00a0,0xFaceb,0xFeed,0xFeede,0xe01a,0xe01d,0xe033,0xe070,0xe094,0xe095,0xe0f2,0xe1ff,0xe20c,0xe20d,0xe311,0xe312,0xe80d,0xe901,0xe902,0xe903,0xe904,0xf101,0xf102,0xf103,0xf104,0xf105,0xf106,0xf107,0xf108,0xf109,0xf10a,0xf10b,0xf10c,0xf10d,0xf10e,0xf10f,0xf110,0xf111,0xf112,0xf113,0xf114,0xf115,0xf116,0xf117,0xf118,0xf119,0xf11a,0xf11b,0xf11c,0xf11d,0xf11e

align-left,bold,code,cog,dollar-sign,ellipsis-h,ellipsis-h-alt,ellipsis-v-alt,eraser,euro-sign,exclamation-triangle,file-alt,flag,flag-checkered,font,fw,hryvnia,image,indent,info-circle,italic,lg,link,lira-sign,list,list-ol,list-ul,lock,outdent,pound-sign,question-circle,quote-right,redo,ruble-sign,rupee-sign,save,shekel-sign,smile,strikethrough,table,tenge,terminal,text-height,tint,underline,undo,video,video-plus,won-sign,yen-sign

run it from your xenforo package download directory

That should be everything from the standard Xenforo install. Could be a mistake somewhere. But it hits templates, css, and php files to look for references to font awesome fonts. Scanning other 3rd party templates should be easy to do too.

arn

edit: removed the "fa-" prefixes

Great script @arn! I tried running this on 2.2, but as all of the glyphs are pre-compiled in setup_fa.less, it gives me a list of all of the icon names.

Have you had any luck with this on 2.2 at all? It made a huge improvement to my site speed, so I'm trying to get it working somehow.

 

[arn]

sorry, I haven't tried updating this for XF 2.2. We are on ui.x and they removed all font-awesome in that for xf 2.2.

 

[Chromaniac]

Google Fonts has a text parameter that can be used to select the characters you are going to use on that font. If only something similar could have been used with font awesome. Would have made this process so much simpler!