Jump to main content

Nicolas Hoizey

  • articles
  • billets
  • links
  • notes
  • talks
  • archives
  • about

Note from 13 January 2022

  • Nicolas Hoizey
  • 13 January 2022
  • Cloudflare, font, WebPerf
  • 18 reactions

My photography site is hosted on #Cloudflare, and they transform preload into HTTP/2 push. Great!

But why is my preloaded/pushed font downloaded twice then? 😅

The same font loaded twice

18 reactions

3 likes

  1. Holger Bartel avatar
  2. Gilberto Cocchi avatar
  3. Yuri Schimke avatar

14 replies
  1. Alex Russell avatar Alex Russell
    Bad "as" value?

    /cc @yoavweiss
    • 13 January 2022, 23:40
    • Source
  2. Bailey 💜 avatar Bailey 💜
    You probably have it defined in 2 places and your response headers are telling the browser not cache it or something similar. Screenshot doesn't really give enough details for anyone to help tbh.
    • 13 January 2022, 23:43
    • Source
  3. Alistair Shepherd avatar Alistair Shepherd
    Have you got crossorigin and type added and correct? Most duplicate requests from preloads I've had are due to CORS not matching
    • 13 January 2022, 23:45
    • Source
  4. Mathieu avatar Mathieu
    Isn’t that an old Firefox bug? Not sure about HTTP/2 push but it used to do that on preloaded fonts.
    • 13 January 2022, 23:52
    • Source
  5. Nicolas Hoizey avatar Nicolas Hoizey
    @Accudio @PolarIntersect here's the preload header

    </ui/fonts/Coniferous-Regular-subset.woff2>;rel=preload;as=font;crossorigin

    I removed the "type" part because I've read there are issues with it for Early Hints. Could it be the reason?

    The WPT report: webpagetest.org/result/220112_…
    • 13 January 2022, 23:53
    • Source
  6. Nicolas Hoizey avatar Nicolas Hoizey
    I found a bug like that in Bugzilla, but it was fixed 4 years ago.
    • 13 January 2022, 23:56
    • Source
  7. Nicolas Hoizey avatar Nicolas Hoizey
    Also, the screenshot was from a test with Chrome… 😅
    • 13 January 2022, 23:57
    • Source
  8. Barry Pollard avatar Barry Pollard
    Here's two interesting insights:
    1. They are both server pushed. So it's not Chrome requesting it.
    2. ALL your responses include that preload link. Couldn't you just have it on the page request?

    So seems to me you're basically telling it to push again and again.
    • 14 January 2022, 00:45
    • Source
  9. Barry Pollard avatar Barry Pollard
    Wanxiety - the fear that this time you won’t get the wordle and will end your perfect streak.

    Symptoms include increasingly audible heartbeat as you approach closer to the 6th line accompanied by forgetting every basic English word there every was.
    • 14 January 2022, 01:35
    • Source
  10. Alex Russell avatar Alex Russell
    That is where I assumed things would net out. Thanks for verifying
    • 14 January 2022, 08:45
    • Source
  11. Addy Osmani avatar Addy Osmani
    I would second preload being safer than push (…a few too many footguns, need to shim cache digests etc). Meanwhile push remains a Schrödinger feature in Chromium: groups.google.com/a/chromium.org… 😅
    • 14 January 2022, 08:49
    • Source
  12. Barry Pollard avatar Barry Pollard
    The fact it’s not enabled for HTTP/3 is the mail in the coffin IMHO and will soon give enough push (sorry/not sorry! 😁) to turn it off in H2 and gQUIC (does anything use gQUIC now?).
    • 14 January 2022, 08:53
    • Source
  13. Colin Bendell avatar Colin Bendell
    Check against shoesbycolin.com
    • 14 January 2022, 09:49
    • Source
  14. JohnnyFang avatar JohnnyFang
    Ah right, got it!

    Thanks :)
    • 14 January 2022, 11:52
    • Source

1 mention
  1. Page screenshot https://b1.bjkoreanav.pp.ua/early-hints-cloudflare/
    • 3 March 2023, 09:58
    • Source
  • Older: Note from 11 January 2022
  • Newer: Note from 15 January 2022

Related contents with similar topics

  1. screenshot of Web font file size study: a variable font addition

    Stoyan Stefanov avatar Stoyan Stefanov

    Web font file size study: a variable font addition

    • Nicolas Hoizey
    • 29 October 2024
    • font, variable, WebPerf
    • 2 reactions

    The sum is smaller than the parts. A variable font that has both normal and heavy (bold) weight (and also everything in between) is slightly smaller…

  2. screenshot of Introducing Speed Brain: helping web pages load 45% faster

    Cloudflare avatar Cloudflare , Alex Krivit and Suleman Ahmad

    Introducing Speed Brain: helping web pages load 45% faster

    • Nicolas Hoizey
    • 25 September 2024
    • Cloudflare, WebPerf, Speculation Rules
    • 1 reaction

    With the initial release of Speed Brain, we have designed a solution with important side effect prevention guardrails that completely removes the…

  3. screenshot of Subsetting.xyz — Type foundries that allow font subsetting

    Jeff Frankl avatar Jeff Frankl

    Subsetting.xyz — Type foundries that allow font subsetting

    • Nicolas Hoizey
    • 15 May 2024
    • font, WebPerf
    • 9 reactions

    Subsetting removes unused characters from a font to reduce file size. For example, you might not use math symbols like ≤ and ∫, and removing them…

  4. screenshot of Identifying Font Subsetting Opportunities with Web Font Analyzer

    Paul Calvano avatar Paul Calvano

    Identifying Font Subsetting Opportunities with Web Font Analyzer

    • Nicolas Hoizey
    • 26 March 2024
    • WebPerf, font
    • 10 reactions

    In this article, we’ll explore some potential issues around font loading and the performance benefits of a lesser used feature - font subsetting.…

  5. screenshot of How many bytes is “normal” for a web font: a study using Google fonts

    Stoyan Stefanov avatar Stoyan Stefanov

    How many bytes is “normal” for a web font: a study using Google fonts

    • Nicolas Hoizey
    • 7 March 2024
    • font, WebPerf
    • 25 reactions

    So here it is, folks, a web font file that supports extended Latin characters, your Às and your Ás and Â, Ã, Ä, Å... should weigh around 20K. Anything…

If you want to share an error or suggest an enhancement of this content, please edit the source on GitHub.

© Nicolas Hoizey

Built with Eleventy