Request to Add font-display: swap; in Generic_Plugin.php

  • Imagelenasterg

    (@lenasterg)


    1 week, 4 days ago

    Dear W3 Total Cache Support Team,

    I would like to suggest a small improvement to the Generic_Plugin.php file. Specifically, in the admin_bar_init() function, I recommend adding the following line:

    font-display: swap;

    right below line 441 font-style: normal; in the @font-face rule of Generic_Plugin.php file. Why this is important:

    Adding font-display: swap; ensures that text remains visible using a fallback font until the custom font is fully loaded, improving both perceived performance and user experience. This approach helps avoid the “flash of invisible text” (FOIT), which can negatively impact Core Web Vitals metrics, such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP). These metrics are crucial for Google PageSpeed Insights, and improving them can lead to a better overall performance score.

    Thank you for considering this suggestion.

    Bests,
    Lena

    • This topic was modified 1 week, 4 days ago by Imagelenasterg.
    • This topic was modified 1 week, 4 days ago by Imagelenasterg.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor ImageMarko Vasiljevic

    (@vmarko)

    1 week, 4 days ago

    Hello @lenasterg
    Thank you for reaching out, and I am happy to help!

    I’ve shared this information and your suggestion to the team and this is currently being reviewed.
    Thank you for yourr suggestion and your patience, and I’ll get back to you as soon as I have more information

    Thanks!

    Thread Starter Imagelenasterg

    (@lenasterg)

    3 days, 21 hours ago

    Hey again.
    In version 2.8.15 in Generic_Plugin.php the line where the suggestion should added has changed.

    So, I give below the start of the admin_bar_init() function, where I propose the line in bold to be added:

    */
    public function admin_bar_init() {
    $font_base = plugins_url( ‘pub/fonts/w3tc’, W3TC_FILE );
    $css = “
    @font-face {
    font-family: ‘w3tc’;
    src: url(‘$font_base.eot’);
    src: url(‘$font_base.eot?#iefix’) format(’embedded-opentype’),
    url(‘$font_base.woff’) format(‘woff’),
    url(‘$font_base.ttf’) format(‘truetype’),
    url(‘$font_base.svg#w3tc’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

    Thanks again,
    Lena

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.