search

philipp-winterle / crittr

High performance critical css extraction with a great configuration abilities
https://hummal.github.io/crittr/
GNU General Public License v3.0
51 stars 6 forks source link

Fonts inside CSS file have a bad path generated #40

Closed Creativico closed 3 months ago

Creativico commented 2 years ago

Description: So this problem occurs when I have a CSS file with following url for fonts: @font-face{ .... font-family:eicons;src:url('https://mycdnapi/m:0/a:https://www.mysite.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.eot?5.14.0 .... )

Critical CSS translates that url() to https://www.mysite.com/fonts/eicons.woff2?5.14.0

It also occurs with any other font URL in the CSS file.

I run this code for generating critical: Crittr({ urls: [url], device: { scaleFactor: 2, width: 3050, height: 2000, }, pageLoadTimeout: 5000 }) .then(({critical, rest}) => { fs.writeFileSync(output, critical, 'utf-8'); }) .catch(err => { console.error(err); });

The problem is when the font url is bad, gtmetrix speed test has 302 redirects because of the bad url. https://jmp.sh/eiSaPh0

Creativico commented 2 years ago

@hummal Sorry, I have just verified that elementor sometimes uses absolute path, sometimes relative path to fonts and in cases when it's relative then critical CSS fails. With absolute path works perfect in all conditions.

Also, thanks for your great work! :)

philipp-winterle commented 2 years ago

Thank you for reaching me out!

So does this mean this is not a crittr issue?

As far as I understand this still happens if you have relative font urls?

Can you give a specific example to help me understand better?

Creativico commented 2 years ago

@hummal So I believe this is a crittr issue because for example the file locations is: www.whatever.com/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=5.14.0 And it's has contents as relative url to font @font-face{font-family:eicons;src:url(../fonts/eicons.eot?5.14.0);src:url(../fonts/eicons.eot?5.14.0#iefix) format("embedded-opentype")

Example: https://jmp.sh/PuaXMbM

So once that is parsed into critical css and inserted into the page as inline critical css the path stays relative url(../fonts/eicons.eot?5.14.0);

and in that case it translates in browser into bad url www.whatever.com/fonts/eicons.eot?5.14.0

While the correct url would be www.whatever.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.eot?5.14.0

So in this case if you have any relative url it will not work unless the css file and fonts are in root of the site.

philipp-winterle commented 1 year ago

I guess there is a misunderstanding in how crittr is working. It only parses the outout on the website. If the css contains already the right paths it only uses these paths and put them into the critical css. There is no changing of paths because if the original css already contains the wrong paths crittr is not responsible for fixing those paths.