Font preload means longer load times and lower speed index

  • *** Font preload results in longer load times and lower speed index

    I use Hueman (great theme!) with the latest version of WP. My website is very light-weight, well optimised and loads quickly. I don’t use any plugins except WP Super Cache (which I disable when testing).

    This week I updated Hueman from version 3.6.0 to 3.7.4. With the older version, GTmetrix suggested to preload the following 3 fonts:
    titillium-light-webfont.woff, titillium-regular-webfont.woff and titillium-semibold-webfont.woff

    Now that Hueman includes preload, GTmetrix no longer complains about missing preload. However, Hueman now seem to load all fonts, even those that are not used. As a result, the total load size is higher and the load time is longer than without font preload.

    On https://presscustomizr.com/performance-improvements-in-hueman-free-and-pro/ it says that this feature “… allows modern browsers to start loading the font assets very early and therefore render the page significantly faster.”

    In reality, the page is heavier and loads slower with font preload. The number of CSS files, JavaScript files and images that are loaded by Hueman, is the same as before. Only the number of loaded fonts is different.

    The reason for the poorer performance must be that all the fonts are preloaded, which means Hueman now loads more resources, resulting in more requests and larger total load size. I have confirmed this using Developer Tools in Safari and Firefox, as well as GTmetrix, Pingdom Website Speed Test and Google’s PageSpeed Insights. I did tests with all these tools both before and after I updated Hueman. All tests show the same thing: Hueman now loads more resources and takes longer to render a page. The performance score of GTmetrix, Pingdom and PageSpeed Insights are all lower with font preload compared to before (without font preload). As an example: Previously, my website consistently scored between 88 and 91 on Mobile in PageSpeed Insights. Now, with font preload, I get 75–77, with significantly slower Speed Index and Time to Interactive.

    Currently the fonts in Hueman make up 48 % (!!) of the total load size (JavaScript 11 %, images 33 %).

    My question is: Is there any possibility of preloading only the fonts that are actually used by the page in question?

    *** “Make sure all attributes of the preload tag are set correctly.”

    I also noticed 8 new warnings related to preload in the Console tab on Firefox’ Web Developer. The same warnings appear with Hueman’s demo site on https://demo-hueman.presscustomizr.com/ . Here is the complete output concerning 5 different Titillium fonts and 3 different Font Awesome fonts:

    
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/webfonts/fa-brands-400.woff2?v=5.12.1” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. classical-grid
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/webfonts/fa-regular-400.woff2?v=5.12.1” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. classical-grid
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/webfonts/fa-solid-900.woff2?v=5.12.1” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. classical-grid
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/fonts/titillium-light-webfont.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. classical-grid
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/fonts/titillium-lightitalic-webfont.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. classical-grid
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/fonts/titillium-regular-webfont.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. classical-grid
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/fonts/titillium-regularitalic-webfont.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. classical-grid
The resource at “https://demo-hueman.presscustomizr.com/wp-content/themes/hueman-pro/assets/front/fonts/titillium-semibold-webfont.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

    *** Cumulative Layout Shift (CLS) is too high

    Lastly, I would like to mention that my website does not pass the Core Web Vitals assessment in PageSpeed Insights because the Cumulative Layout Shift (CLS) is too high, most notably on Desktop.

    Others have the same issue. See this previous post about CLS and Hueman: https://www.ads-software.com/support/topic/cumulative-layout-shift-cls-issue-with-hueman-fonts/

    CLS has been too high with Hueman ever since Google started showing this metric.

    • This topic was modified 3 years, 9 months ago by Yui.
    • This topic was modified 3 years, 9 months ago by Yui. Reason: please use CODE button for code formatting
Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author presscustomizr

    (@nikeo)

    Thanks for this detailed and very useful feedback.
    I’m exploring the preload problem.
    About the CLS issue, yes I know and I did not find the way to really get rid of the problem for the moment. Any insights from the user community would be highly welcome.

    @nikeo

    Can you give us an option to DISABLE all fonts and Font Awesome Hueman loads? I manually load Google Fonts and use icomoon icons to load only the Font Awesome icons I use. The Hueman theme loading all this extra stuff I don’t need or use is slowing my site down. Please consider this.

    Im with you guys. Disabling would be nice!

    Thread Starter yallaman

    (@yallaman)

    For those who use external/Google fonts with Hueman, an option to disable the self-hosted fonts would be welcomed, of course.

    However, most sites running Hueman stick with the standard fonts. With font preload, Hueman loads five Titillium fonts and three Font Awesome fonts (two of which are pretty large/heavy), no matter if the fonts are used or not for a specific page.

    I’m not an expert, so I was wondering if it’s possible to preload only the fonts that are actually used by the page in question, or – even better – to reduce the total number of fonts used by the Hueman theme.

    @yallaman in Customizing > Web Page Design > General Design Options : Font, Colors, …

    Not totally sure if you’re wanting to do this but you can disable the loading of Titillium by choosing Arial as the font, this will make Hueman not load ANY outside fonts. I manually load 2 Google fonts directly from Google so I don’t personally need Titillium or Hueman to load any fonts for me.

    Still haven’t figured out a way to disable Font Awesome besides deleting the code in the main files which I don’t want to do because I’d have to update it manually every time the theme updates.

    • This reply was modified 3 years, 9 months ago by Sho-Down.
    Thread Starter yallaman

    (@yallaman)

    I found a potential bug that may or may not be related to font preload: In Safari, Hueman now loads two versions (woff+svg) of each Titillium font type, while Firefox only loads the woff files. This happens on my site, on Hueman’s official demo site, and on other users’ sites.

    Details can be found in this thread.

    Theme Author presscustomizr

    (@nikeo)

    @yallaman thanks for reporting this issue. I’m exploring it.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Font preload means longer load times and lower speed index’ is closed to new replies.