Font file slowing down page loading

  • When I run a Lighthouse audit on my site, I get the following comment:

    Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.

    And the resource listed is https://www.ronitbaras.com/wp-content/plugins/wp-responsive-menu/assets/fonts/wprmenu.ttf?p8o4s0

    To resolve this, the plugin would have to add the following to the HEAD:

    <link rel="preload" href="FONT-URL" as="font">

    However, this is not trivial, because each type of browser loads a different font file format.

    Using a script to detect browser capabilities will cause other problems (render blocking), so that’s not a good idea either.

    This leaves us with removing the use of the special menu font and using CSS instead. From what I can see, the only use of the font is for is the open/close triangles/arrows.

    Please consider switching to using carets or ::before elements. See the desktop menu on https://www.plastic2go.com.au/product-category/plastic-crates/#sidebar1, which uses carets in the main menu and the “Products by Category” widget.

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Gal Baras

    (@galbaras)

    Actually, I’ve just found that TTF is supported by most browsers (in fact, more than those which support “preload”…). Therefore, preloading only the TTF makes sense and can be used too, maybe as a quick fix.

    Still, the best solution is without a font file.

    Plugin Contributor Kshirod Patel

    (@kshirod-patel)

    Hello,

    Thanks for the suggestion. Yes we are looking into it and hopefully we will release an update for this issue soon.

    Thread Starter Gal Baras

    (@galbaras)

    Until that’s done, let’s keep the ticket open.

    Also, while you’re at it, consider using WOFF2 for the font, because the file should be smaller.

    Can someone suggest a css solution for that?

    Thread Starter Gal Baras

    (@galbaras)

    @mark8888 adding CSS will not remove the plugin’s use of an extra font. The plugin author needs to address this for everyone.

    @kshirod-patel are you going to release this change any time soon?

    Just to be clear, the best approach would be to stop using a font altogether, and use the Bootstrap caret-based styling.

    Second best would be to preload a WOFF2 version of the font, with fallbacks in other formats (not preloaded).

    I have same problem too. Do we have solution to resolve this issue?

    Thread Starter Gal Baras

    (@galbaras)

    @kshirod-patel it’s been 5 months, and while the change is small, it will benefit 60,000+ active installations.

    Your progress with this will be much appreciated.

    Dear Kshirod,

    Can you please fix this issue. As Web Vitals became strong focus in webmaster community, solving it will also benefit you plugin popularity, not to mention all your subscribers.

    Thank you,
    Mark

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Font file slowing down page loading’ is closed to new replies.