1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Solved ttf Module is slowing down the page

Discussion in 'Free Divi Community Forum' started by MateIT, Sep 6, 2019.

  1. BetweenAI

    BetweenAI New Member

    That's right approach, such skills are never a waste of time.
    If there's anything that you need, I always glad to help. And thank you, Michael, for your words and wishes. I wish you the best too.
    Pavel
     
    1. AD Replace all Divi-related branding with your own for your Divi site: https://divi.help/link-forums/divi-ghoster.161/
  2. Andre Medinaw

    Andre Medinaw New Member

    Hi, I´m following that post, thank you so much for the help
    I did follow the steps and the results on PageSpeed insights is 95 on mobile and 100 on Desktop "it is amazing"
    the only think I´m getting a warning (the lighthouse was not able to verify automatically the value font...modules.woff2) is it normal? wondering if I realy did everything right here.
    I´ve place all codes and file (modules.woff2) on child-theme
    Thanks in advance
     
  3. BetweenAI

    BetweenAI New Member

    Hi.
    You're welcome.
    If the fonts are displayed normally, then everything is in order. It is likely that the font-display property itself and the loading methods are quite new. As for me, I didn’t get any warnings/errors. But if you’are very worried, you can send the site's link in PM I'll look the other day.
    Pavel.
     
    Andre Medinaw likes this.
    1. AD Access 2000 icons from Font Awesome & Material Icon set in Divi: https://divi.help/link-forums/divi-icon-king.154/
  4. Andre Medinaw

    Andre Medinaw New Member

    Thanks, I´m trying to find a way to PM you but...I´m lost here
     
    BetweenAI likes this.
  5. BetweenAI

    BetweenAI New Member

    r35fdd.png
     
    1. AD Tons of premade layout & section designs + functionalities for your Divi site: https://diviultimate.com/
  6. Chip

    Chip New Member

  7. Senne Trenson

    Senne Trenson New Member

    Hey everyone, I'm new here. I found this post because I, too, am looking for a solution to the ttf module which is seriously slowing down all Divi sites... I've become quite handy with even the more technical side of WP/Divi optimisation, however the explanation here is not 100% clear (I'm sure it's just me!).

    BetweenAI, the code you provided, does this need to be altered? If so, then how?

    You said the first step is to convert ttf to woff2, but I have no idea how to do that... Also, woff2 has very limited browser support. Will it automatically convert to ttf, otf or woff depending on the browser?

    I would absolutely LOVE if this process could be made into a lightweight plugin, like Chip mentioned... I would DEFINITELY be willing to pay for that! :)

    Thanks in advance, looking forward to finally fixing this annoying speed-hurting issue.

    Kind regards
    Senne
     
    1. AD Use modules from the Extra theme with the Divi Builder: https://divi.help/link-forums/divi-extra.163/
  8. Andre Medinaw

    Andre Medinaw New Member

    Hi Senne, I´ll try to help becouse form me its all fresh and I´m still updating my sites...
    About the convertion I´ve downloaded the font from Divi/core/admin/fonts/modules.ttf and fontsquirrel/Generator is a good way to convert and download free to all formats
     
  9. Marion Luxem

    Marion Luxem New Member

    Thanks so much for this! I followed your steps exactly, but didn't see any change in Page Insights - is there a delay?
    I tried again without converting the ttf to woff2, but kept all of the font-display settings in the three files above, as well add the preloading in the header - still no change. Any ideas?
     
    1. AD Speed up your Divi site with Divi specific cache plugin: https://divi.help/link-forums/divi-rocket.160/
  10. Dan1

    Dan1 New Member

    Thank you for this thread - I was able to successfully speed up my page by changing ttf to woff2. However, I am also getting the Warning message in Page Insights.

    "Warnings: Lighthouse was unable to automatically check the font-display value for the following URL: https://example.com/wp-content/themes/Divi/core/admin/fonts/modules.woff2."

    Does anyone know if there is a fix for this?

    Thank you!
     
  11. Dan1

    Dan1 New Member

    I do not believe that you can preload ttf fonts. I also tried the same thing before converting to WOFF2
     
    1. AD Power up your Divi sites with tons of new functionalities: https://divipowerful.divi.help/
  12. Dan1

    Dan1 New Member

    Hi Andrew, were you ever able to solve this particular issue?
     
  13. DrewDownz

    DrewDownz New Member

    What's the difference of Gonzalez Plugin or Clearfy which is free?
     
    1. AD Add tons of new icons for your Divi site. Free version available: https://divi.help/link-forums/divi-icons-pro.147/
  14. DrewDownz

    DrewDownz New Member

     
  15. DrewDownz

    DrewDownz New Member

    I have my "Toggle" icons aren't working correctly. Did i do something wrong?
     
    1. AD Create gorgeous Divi slide-in promo bars, notification bars, etc: https://divi.help/link-forums/divi-bars.150/
  16. mezvin

    mezvin New Member

    Hi,

    To apply your solution on a parent theme it's ok. But modifications will be delete after Divi update.
    How to apply them on a child theme ?

    Thanks for your help.
     
  17. Tom Tolkien

    Tom Tolkien New Member

    This looks really promising, but when I tried it with the latest version of Divi (4.5.6) it doesn't seem to work. Is there an updated version, or can anyone provide some screenshots of working:

    Divi: core.css (core/admin/css/core.css), Divi: library_menu.css (includes/builder/styles/library_menu.css) and Divi: style.dev.css alterations?
     
    1. AD Create gorgeous Divi slide-in promo bars, notification bars, etc: https://divi.help/link-forums/divi-bars.150/
  18. Simon K

    Simon K New Member

    I am a bit baffled about the situation. Google Page Insights telling me that not preloading the modules.ttf is slowing down my page by more than 2 seconds.

    Adding the preloading modules line into the header.php results still in the 2 second delay analysis, but also now Page Insights tells me that I have a preloading element which is never used / called. Are there any news on the situation since the last post?
     
  19. webfed

    webfed New Member

    I am trying to help a friend optimise her site for speed and found this interesting thread. I am surprised you are doing all this yourself. As I understand it you pay for the theme. It is not an open source project. Shouldn't Elegant Themes optimise the theme?
     
    Simon K likes this.
    1. AD Awesome ways to display testimonials in your Divi site: https://divi.help/link-forums/testimonial-slider.148/
  20. David Lars

    David Lars New Member

    Hey I followed BetweenAI tips and did it with FTP transfer. I have a converted my .ttf to woff2 that is just 9KB instead of 90.
    I have located all of 3 the directories that you mentioned :
    1) Divi: core.css (core/admin/css/core.css),
    2) Divi: library_menu.css (includes/builder/styles/library_menu.css)
    3) Divi: style.dev.css.

    The minified version of this was pasted in all three css mentioned above:

    @font-face {
    font-display: swap;
    font-family: ETmodules;
    src: url(core/admin/fonts/modules.eot);
    src: url(core/admin/fonts/modules.eot?#iefix)
    format("embedded-opentype"), url(core/admin/fonts/modules.woff2)
    format("woff2"), url(core/admin/fonts/modules.woff)
    format("woff"), url(core/admin/fonts/modules.svg#ETmodules)
    format("svg");
    font-weight: 400;
    font-style: normal
    }


    Then located header.php and pasted:

    <link rel="preload" href="/wp-content/themes/Divi/style.dev.css" as="style">
    <link rel="preload" href="/wp-content/themes/Divi/core/admin/fonts/modules.woff2" as="font" type="font/woff2" crossorigin>


    But lighthouse still complains about modules.ttf is taking sometimes up to 3 seconds to load on mobile. Any Tips?

    Im on DiviVersion: 4.7.3