Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – <link rel=“preload” in header.php but google pagespeedinsight still shows slow Preload key requests for mobile

I am struggling to fix wordpress website speed issue in mobile. Mobile speed is 43 wheareas desktop speed is 93
I see the main problem is from Preload key requests time. That problem is coming from Elementor plugin fonts used in font awesome. Though I have set Preload key requests in header.php file <link rel="preload" for the used fonts but I see it still causing slower for mobile devices, checked by google pagespeed insights. Also I see in google dev tools console showing me error that:

“font was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.”

I also used wprocket plugin for caching website. Though I cleared cache and deactivate caching, I see still it shows the font problem for mobile.

I am not finding any way to fix the mobile font issues.

Can anyone give me any suggestion to fix all font speed issues for both mobile and desktop?

Tags:

2

Answers


  1. 0

    Preload Error

    "font was preloaded using link preload but not used within a few
    seconds from the window’s load event. Please make sure it has an
    appropriate as value and it is preloaded intentionally."

    This means that you did the preload correctly, but you preloaded something that was not needed on the page.

    If you see the same error on every page of your site then you are loading a font that is not needed.

    I am not sure if elementor has a setting within WordPress admin to remove fonts, if it doesn’t you will have to delve into the code and manually disable it.

    Bear in mind that if you do this you could cause problems with elementor.

    Though I cleared cache and deactivate caching, I see still it shows the font problem for mobile.

    More than likely you are using one of your font icons for the hamburger menu, this would explain why you get the error on mobile but not on desktop.

    Can anyone give me any suggestion to fix all font speed issues for both mobile and desktop?

    Yes, don’t use font-awesome. Instead learn how to use inline SVGs – once you understand them it is normally just a copy and paste job to replace the icons. Here is some information on inline SVGs vs fonts as Icons to get you started.

    Login or Signup to reply.
  2. 0

    There is a quick fix for this. Just get the url that needs to be pre-loaded from Google Page Speed Insights.

    Then Download the Plugin: Insert Headers and Footers.

    In the Scripts in the header – Just add the following line:

    <link rel="preload" href="https://url-to-font-location" as="font" type="font/woff2" crossorigin="anonymous">

    Assuming the resource is a Font – If not, adjust accordingly. This is cleaner than updating php theme files.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search