Solved ttf Module is slowing down the page

Hi bro. I have the same troubles with these fonts/GTMetrix.. Any luck with speed up Mate?

 

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.

 

This is exactly what I was looking for! 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.

Thanks again!

 

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.

 

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!

 

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.

 

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
https://www.personaldronerepair.com

 

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

 

GENIUS! GENIUS! GENIUS!
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
https://www.personaldronerepair.com/

 

You are welcome! I'm just glad it helped.

 

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
https://www.personaldronerepair.com/

 

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.

 

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

 

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.

 

Awesome!
I will do that now.
Thank you again!

 

Testing now.
Site visual is perfect !
Using CloudFlare so I am caching out the server now.
Will update you on the final results.

 

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