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. MateIT

    MateIT New Member

    Hi There,

    following module is slowing down my page:

    Will it effect any issue with my site if I delete it?
    1. AD Easily add Mega Menu for your Divi site: https://divi.help/link-forums/divi-mega-pro.149/
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    neha lewis likes this.
  3. BetweenAI

    BetweenAI New Member

    Hi bro. I have the same troubles with these fonts/GTMetrix.. Any luck with speed up Mate?
    1. AD Feature-rich Divi eCommerce Child Theme for WooCommerce: https://divi.help/link-forums/royalcommerce.151/
  4. MateIT

    MateIT New Member

    Hi Mate,
    I'm sorry for the delay. Well this is the answer I have received from Elegant Themes:

    "Hello Matthias [​IMG]
    Hope you're doing well.

    I've just inspected your site and it seems that modules.ttf are loading moderately fine as you can see on this waterfall: https://gtmetrix.com/reports/www.mateit.de/mMxVmOQT

    Your site also overal load very quickly. Modules.ttf is used for mulltiple things and in the UI of the builder so it is necessary for it to work fine.

    Let me know if you have any further questions, and I'll be happy to help. "

    I have optimized my site with WP Rocket and a CDN. But the Problem is Y-Slow for Mobile.
    Now I try more Optimization Options.

    The actual best solution seems to be, to make a AMP Version of the Site for Mobile Devices.
    Also I will convert all my Images to .webp Format.

    The Video I have included will be uploaded on YouTube and just embeded on the site.
    So hopefully I will receive a better score :).
    neha lewis and BetweenAI like this.
  5. BetweenAI

    BetweenAI New Member

    Hey! Thanks for your reply! I got to reduce the font loading to 15-20 ms.

    I converted the ttf to woff2 format, then i've added font-display: swap and /woff2 into @font-face directive at:

    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.

    And the last thing I added is css and font 'preloading' in header.php of child theme for preliminary accelerated loading:

    1) <link rel="preload" href="....modules.woff2" as="font">
    2) <link rel="preload" href="....style.dev.css" as="style">

    PS: And now I'm experimenting with http/2 server push and QUIC. Although already managed 97% on mobiles and 100% on desktop.
    #5 BetweenAI, Sep 15, 2019
    Last edited: Sep 15, 2019
    1. AD Instantly add 30+ custom Divi Modules. Free version available: https://divi.help/link-forums/divi-supreme.143/
  6. Daniel Beack

    Daniel Beack New Member

    This is exactly what I was looking for! :D Finally I found other users with the same performance issues.

    BetweenAI, do you mind sharing the css code you used to add the font-display: swap ?
    And how do you go about to protect these custom lines when there is an update of DIVI?

    I have managed to get good speed on my DIVI site but the ttf issue is still something I want to resolve. The second part is Unused CSS, but that is a completely different conversation. :D

    Thanks again!
  7. BetweenAI

    BetweenAI New Member

    Hi, below complete compressed css with display property:

    @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}

    Of course, different files have different font paths. You just need to observe connection order of different font formats.
    After DIVI updating you have to make these changes manually again, but this is not so long, around 5 minutes:)
    By the way, there is no need to use 'preload' if you host support http2/3 thanks to multiplexing. But this is a separate and big topic.
    To solve the problem with unused css, you can use the Gonzales plugin. Other methods are a waste of time.
    #7 BetweenAI, Oct 21, 2019
    Last edited: Oct 21, 2019
    Michael Starley and Daniel Beack like this.
    1. AD Add more variety for your Divi header (12 premade styles): https://header.diviultimate.com/
  8. Daniel Beack

    Daniel Beack New Member

    You are a freaking hero BetweenAI! :) Thanks for your input and feedback.
    I will give this a go and post my feedback when all is tested. And the multiplexing subject was very interesting and I will get up to date with that.
    Aswell for the Gonzales Plugin. Have you tried it with DIVI?
    Thanks again for all your help!
  9. BetweenAI

    BetweenAI New Member

    You're welcome.
    Of course I tried)) There you will have to play a little with disabling some "extra" css/js files, as some ruin the design.
    1. AD Power up your Divi sites with tons of new functionalities: https://divipowerful.divi.help/
  10. Michael Starley

    Michael Starley New Member

    Hello BetweenAl , I have studied this method that is referenced above.
    I too would like to change my .ttf file to woff2. I have a converted my .ttf to woff2.
    I have located all of 3 the directories that you mention above.
    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.
    It is my understanding that after loading and unzipping the woff2 into the .ttf file directory, I can then add the above css script into each one of the 3 files mentioned above.
    Am I understanding correctly? I am not a web designer by trade just severely determined when it comes to my website.
    I have put in my due diligence and the site is loading great.
    I am dying to solve this .ttf issue.
    I am kind of a perfectionist and want my site to load to the best of it's capabilities.
    I want to thank you for your above post and any help or advice will be greatly appreciated.
    Thank You
    Michael Starley
  11. BetweenAI

    BetweenAI New Member

    Hello Michael,
    i think so yes. It's not that complicated.
    Yes. This can be done either inside your panel or on a hosting. The second option is needed in case changes are not saved.
    If you have questions/difficulties do not hesitate to ask.
    With respect
    Michael Starley likes this.
    1. AD Easily add Mega Menu for your Divi site: https://divi.help/link-forums/divi-mega-pro.149/
  12. Michael Starley

    Michael Starley New Member

    I Cannot Thank You Enough !!!
    Your code and guidance are priceless!
    Successfully converted .ttf Module to woff2 and Cloud Flare is now compressing the woff2.
    Web Page Test
    TTF 0.183s
    Document Complete 1.27s
    Requests 14
    Page Size 556kb
    Now it is time to Preload.
    I am not using a child theme. Will it be good practice to use the above preload script in my header php?
    If so, where is the best line to place it in?
    Please forgive all of the questions.
    Thank you again for the help.
    Michael Starley
    BetweenAI likes this.
  13. BetweenAI

    BetweenAI New Member

    You are welcome! I'm just glad it helped.
    Michael Starley likes this.
    1. AD Instantly add 30+ custom Divi Modules. Free version available: https://divi.help/link-forums/divi-supreme.143/
  14. Michael Starley

    Michael Starley New Member

    I do have a question regarding the placement of the preload script in my header php.
    Where in the header php will be the best placement of your code?
    Thank You
    Michael Starley
  15. BetweenAI

    BetweenAI New Member

    There are two ways to edit this file: through parent theme (by defaut) and/or via child theme, second way is better. I recommend you to install https://wordpress.org/plugins/orbisius-child-theme-creator/ - it will come in handy.

    Below is a video if you don't want to mess with a child theme

    And, this one is a screenshot from my Wordpress panel. WP -> Appearance -> Theme Editor -> header.php. Pay attention to the third point, I have a child theme installed.


    Html of 4rd point

    <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>

    Make sure that your font paths are correct.
    Michael Starley likes this.
    1. AD Custom global Divi footer (20 premade styles) + Revealing footer effect: https://footer.diviultimate.com/
  16. Michael Starley

    Michael Starley New Member

    Apologies for the late reply.
    This is an awesome guide!
    Thank You.
    Unfortunately when I implemented the preload it caused a visual load issue in Firefox.
    The header of my site performs a slide in effect.
    My belief is that the slide in code is not playing well with the preload command.A non styled version of my site blinks first, for just a visible instant and then the styled page loads.
    I found the exact same issue after attempting to server push my JavaScript.
    Only in Firefox though. Chrome worked great.
    I am now looking in to creating a fixed header and attempting the above steps once again.
    I sincerely thank you for your time and help.
    Michael Starley
  17. BetweenAI

    BetweenAI New Member

    Hello Michael,
    You can just remove the first line code from your header.php.
    <link rel="preload" href="/wp-content/themes/Divi/style.dev.css" as="style">
    This is an optional string and does not affect fonts, but may affect design.
    Michael Starley likes this.
    1. AD 50+ switches to fully customize your Divi website: https://divi.help/link-forums/divi-switch.162/
  18. Michael Starley

    Michael Starley New Member

    I will do that now.
    Thank you again!
    BetweenAI likes this.
  19. Michael Starley

    Michael Starley New Member

    Testing now.
    Site visual is perfect !
    Using CloudFlare so I am caching out the server now.
    Will update you on the final results.
    BetweenAI likes this.
    1. AD Set awesome default design for your Divi single blog page: https://blog.diviultimate.com/
  20. Michael Starley

    Michael Starley New Member

    Fantastic Results !
    Now I am even more motivated to study and implement server push.
    Finding these performance gains makes me feel like the old timers panning for gold.
    Now I am even more motivated to study server push.

    Will post all final results after testing.
    The holidays are going to grab a lot of my attention soon.
    Will hopefully be posting results sooner than later .
    I sincerely thank you for your help in this matter.
    I hope that the holidays find you happy, well, and full of good food.:)
    Michael Starley
    BetweenAI likes this.