Link preload not working

  • celinabrar

    (@celinabrar)


    3 years, 4 months ago

    My lighthouse score is around 62-65 on mobile and 92-95 on desktop and it suggested me to use link preloads for 5 font files. I read an article on the same and placed them right under the head tag of my child theme’s header.php file.

    Even after several days both GTmetrix and pagespeed still didn’t show that issue as resolved! I tried tweaking the code but nothing works. Here is what I am currenntly using:

    <link rel=”preload” href=”socicon.ttf” as=”font” type=”font/ttf” crossorigin=”anonymous”>
    <link rel=”preload” href=”fontawesome-webfont.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>
    <link rel=”preload” href=”fa-solid-900.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>
    <link rel=”preload” href=”fa-brands-400.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>
    <link rel=”preload” href=”fa-regular-400.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Kjell Reigstad

    (@kjellr)

    3 years, 4 months ago

    Hi there! It looks like your code isn’t pointing to the right location for each of those files. For example, the code above tells the browser to look for the fa-regular-400.woff2 file at the following URL:

    https://sundaystyleblog.com/fa-regular-400.woff2

    But that results in a 404 error, since the file is actually located here:

    https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-regular-400.woff2

    To fix this, you’ll need to determine where your files are all being loaded from, and change the href value to the correct one. In this example, the code would be something like:

    <link rel=”preload” href=”https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-regular-400.woff2″ as=”font” type=”font/woff2″ crossorigin=”anonymous”>

    To find the correct location for each file, you can use your browser’s inspector functionality.

    Thread Starter celinabrar

    (@celinabrar)

    3 years, 4 months ago

    @kjellr I replaced the file names with the exact URLs as available on the GTmetrix report and it still doesn’t quite feel like it worked.

    I ran page speed insights and GTmetrix an unreasonable amount of times. Page speed still shows that I should preload all except the font awesome. GTmetrix is weird because it sometimes doesn’t recommend preload and sometimes it says I need to do 1 or 2.

    Is it normal to see such weird fluctuations in the reports? Does it take some tie for the changes to reflect? Here is my current code:

    <link rel=”preload” href=”https://sundaystyleblog.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/font/socicon.ttf&#8221; as=”font” type=”font/ttf” crossorigin=”anonymous”>
    <link rel=”preload” href=”https://sundaystyleblog.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/font/fontawesome-webfont.woff2?v=4.7.0&#8243; as=”font” type=”font/woff2″ crossorigin=”anonymous”>
    <link rel=”preload” href=”https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-solid-900.woff2&#8243; as=”font” type=”font/woff2″ crossorigin=”anonymous”>
    <link rel=”preload” href=”https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-brands-400.woff2&#8243; as=”font” type=”font/woff2″ crossorigin=”anonymous”>
    <link rel=”preload” href=”https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-regular-400.woff2&#8243; as=”font” type=”font/woff2″ crossorigin=”anonymous”>

    please ignore the &# and digits. IDK why they keep coming up when I copy the code.

    • This reply was modified 3 years, 4 months ago by celinabrar.
    • This reply was modified 3 years, 4 months ago by celinabrar.
    • This reply was modified 3 years, 4 months ago by celinabrar.
    • This reply was modified 3 years, 4 months ago by celinabrar.
    Kjell Reigstad

    (@kjellr)

    3 years, 4 months ago

    👋 I’m not personally familiar with GTmetrix, but someone else here might be able to chime in to answer that part of your question.

    Your code there looks a bit better, but when I visit your site I’m still seeing the old (404 Error) preloads.

    Thread Starter celinabrar

    (@celinabrar)

    3 years, 4 months ago

    @kjellr I had not placed the HTML as code (before) so &#+ digits were appended at the end of the links, for some reason.

    I have verified that each link is correct by pasting them in the search bar and whenever I visit them, it automatically starts downloading the file. You may see the same using the following code.

    The results on the two sites are still the same. Should I just presume that page speed has been unable to see the updates, while GTmetrix can usually recognize the changes?

           <link rel="preload" href="https://sundaystyleblog.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/font/socicon.ttf" as="font" type="font/ttf" crossorigin="anonymous">
	<link rel="preload" href="https://sundaystyleblog.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">
	<link rel="preload" href="https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
	<link rel="preload" href="https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
	<link rel="preload" href="https://sundaystyleblog.com/wp-content/themes/stunning/assets/webfonts/fa-regular-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    • This reply was modified 3 years, 4 months ago by celinabrar.
    • This reply was modified 3 years, 4 months ago by celinabrar.
    • This reply was modified 3 years, 4 months ago by celinabrar.
    Thread Starter celinabrar

    (@celinabrar)

    3 years, 4 months ago

    @kjellr I just cleared the cache from everywhere (wp-easy, Cloudflare, and cache enabler) and even page speed doesn’t show the “preload key requests’ anymore! I guess cache must have been the culprit.

    Kjell Reigstad

    (@kjellr)

    3 years, 4 months ago

    Ok great! I’m glad that got sorted out.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Link preload not working’ is closed to new replies.