Adding header code to pre-load two fonts

  • Hi,

    I’m adding a line of code into my header based on a recommendation from Google’s Page Speed Insights tool.

    I found this code example that I plan on using:

    <link rel=”preload” href=”fonts/cicle_fina-webfont.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>

    (Source)

    My question is related to the href URL. Should I be putting a full URL with https? Or just the shorter file path like in the example above?

    When I view the recommendations for my site in Google Page Speed Insights and hover my mouse over the two files that it recommends pre-loading, it shows me a full URL including https.

    But I just wasn’t sure if it matters, and which way will boost my site speed the most.

    I did implement it with the full URL, including https, and it seems to have worked (Google’s tool is no longer suggesting I preload these files). But I just wanted to make sure it’s done optimally.

    • This topic was modified 4 years, 1 month ago by Ronnie55.
    • This topic was modified 4 years, 1 month ago by Ronnie55.
Viewing 2 replies - 1 through 2 (of 2 total)

  • You should use the full URL in WordPress, because each page is dynamically generated, and has a different relation to the root and to the font folder.

    Although you with WordPress shouldn’t use totally dynamic addresses, you still may use a target that is relative to root, “/fonts/cicle_fina-webfont.woff2”, for instance. The browser will then prepend the protocol (http or https) and the server name from the page visited.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding header code to pre-load two fonts’ is closed to new replies.