Lighthouse: Low performance

[MDzyga]

Is your feature request related to a problem? Please describe.
I'm using fontawesome-pro package and after deploying on server, the audit log shows:

Describe the solution you'd like
I would like to increase perfomance of my application.

Additional context
I have an application with Angular Universal 9 and fontawesome-pro package in 5.12.1 version.

Feature request checklist

• This is a single feature (i.e. not a re-write of all of Font Awesome)
• The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and thanks for reporting this.

I think this is going to be fixed in the next release via #16077

You can workaround by setting font-display: block instead of auto in your css file

Please follow #16077 and wait for the next release, if that is not going to be fixed feel free to comment again here

[MDzyga]

Hi @tagliala,
font-display: block will stop showing a warning in lighthouse, so how can I set cache for e.g. 1 year and link rel=preload?

[tagliala]

so how can I set cache for e.g. 1 year

Hi, this does not depend on font awesome and it is related to your own server. I can see that your font files are fingerprinted (but please check your css does the same), so you can cache for more

Example for apache/htaccess https://css-tricks.com/snippets/htaccess/set-expires/

Docs for nginx https://www.nginx.com/blog/nginx-caching-guide/

and link rel=preload?

https://developers.google.com/web/tools/lighthouse/audits/preload

[MDzyga]

Hi,
I think it's between font awesome and angular (univesal) 9 because I added your package to my project as dependency and import styles in scss style like this:
@import "~@fortawesome/fontawesome-pro/css/all.css";
I don't declare any links to auto generated files. They are injected by angular during build an app.
So in this case I can:

• remove your package from dependencies
• upload generated fonts to some CDN
• declare links to fonts in index.html

Do you agree with it?

[robmadole]

@MDzyga do the answers that @tagliala gave you not make sense?

Since these are being served from your server you'll have to make the modifications the the Cache-Control header and you'll also need to add the rel="preload" in the bootstrapping page for your Angular app.

[MDzyga]

I resolved my problem in that way:

• upload fonts on azure storage
• duplicate your all.css file and change fonts urls on azure CDN which provide cache
• remove your package from dependencies

[MDzyga]

@robmadole @tagliala in my case I can't serve static files from app server. I decided to store your files on azure storage

[tagliala]

@MDzyga sorry but this is not related to Font Awesome.

I do not know azure storage, I've found this in the docs: https://docs.microsoft.com/en-us/azure/cdn/cdn-manage-expiration-of-blob-content

[MDzyga]

Yes, I know. Thanks for your help and advice