Priority hints issue with preload priority

  • Rookie

    (@alriksson)


    3 years ago

    Priority hints

    I preload all fonts except italic but italic is the one that get the highest priority when Chrome picks, which is strange? I don’t have anything in italic above the fold hence the non preload there. This could improve LCP once it’s font an overall performance, as the one that isn’t preloaded shouldn’t have higher priority.

    All fonts have importance=”high” but italic which isn’t preloaded has importance=”highest”.

    Could you look into adding an importance attribute to the font? Add high on the one preloaded and low on the ones without? And add low to the one that isn’t preloaded?
    https://web.dev/priority-hints/

    Maybe we can not come around this as the one not preloaded don’t have link attribute and only have reference n the stylesheet. I suspect it’s priority highest due to that it’s the first line in the generated additional-fonts.css

    Is it possible to sort the file based on the order you have preloaded. So italic 400 comes last in the css file. I’ve inlined the css file as it’s so small. But the only explanation why Chrome give it such high priority I can see is the order of the woff2’s in the stylesheet.

    • This topic was modified 3 years ago by Rookie.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author DaanvandenBergh

    (@daanvandenbergh)

    Thanks for the suggestion! I’ve put it on my todo list!

    Thread Starter Rookie

    (@alriksson)

    Sorry for the late reply, didn’t get notifications on your response here. So 2 months later any news on this where are we at? ??

    Thread Starter Rookie

    (@alriksson)

    @daanvandenbergh Did you see my reply?

    Thread Starter Rookie

    (@alriksson)

    @daanvandenbergh Any chance you could include this? ??

    Plugin Author DaanvandenBergh

    (@daanvandenbergh)

    Hi again,

    Why would you preload all fonts? You should only preload fonts that’re used above the fold.

    Also, reconsidering, I’m not sure I see the added value of this. Preloading already adds a priority to files compared to files that aren’t preloaded. And since you should limit font usage, preloading files should be limited even more.

    So, I think you came up with a solution to a problem, that shouldn’t even be a problem when the preload option is used properly.

    Correct me if I’m wrong.

    Thread Starter Rookie

    (@alriksson)

    I do preload 3 out of 5 woff2 files. But for some reason, browsers load the non preloaded woff2 file with the highest priority. I assumed this is due to the order the woff2 files appear and are referred in the stylesheet. But 400 italic is not no 1 and is not used above the fold.

    I’ve not manipulated the stylesheet manually myself to test, but on the spot this is the only reason I see why the browser would prioritize this one.

    As you say preloading only the prioritized fonts is what I do meaning excluding one for example 400 italic. But it has the highest priority in the browser once it renders the pages.

    And I would not preload all fonts I would add priority hints as well. For example, to make sure the non preloaded font is getting the highest priority I would add low. Right now, priority hints is only supported in the latest versions of Chrome, but it will be coming. Doesn’t hurt to add other browsers would just ignore it.

    But I would look into why the non preloaded fonts get high priority? What I do is I inline the additional font stylesheet and the order is:

    
	font-style: normal;
	font-weight: 400;
	font-display: swap;

	font-style: italic;
	font-weight: 400;
	font-display: swap;

	font-style: normal;
	font-weight: 700;
	font-display: swap;

	font-style: italic;
	font-weight: 700;
	font-display: swap;

	font-style: normal;
	font-weight: 900;
	font-display: swap;

    Any idea? What I can see is preloaded resources get priority high, while the two non preloaded italic get priority highest.

    Plugin Author DaanvandenBergh

    (@daanvandenbergh)

    Hey!

    Finally had some time to look into this. About the implementation of a fetchpriority attribute, I was thinking:

    • Allow to set a fetchpriority attribute per stylesheet, but then what?
    • If that fetchpriority is lower than ‘highest’, don’t allow preloads of that stylesheet maybe?
    • Or should that fetchpriority be set to all preloads defined in that stylesheet?
    • Should fetchpriority be allowed to be set per preload? Does that make sense?

      • I hope you can help me illuminate these issues ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Priority hints issue with preload priority’ is closed to new replies.