[Resolved] Improving First Contentful Paint & First Meaningful Paint

[Cynthia]

I use GP for all of my WP sites. I am experiencing slow page load times for several of my sites:
and so I did some speed tests using Google PageSpeed Insights to see a few suggestions to increase speed load time.

Here is the results for one of my websites: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Faurorasecurityinc.com%2F

I’m focusing on improving First Contentful Paint & First Meaningful Paint

This article suggests Adding font-display: swap; to your @font-face rule but I’m not sure how to add it since I use the Customizer to apply my font styles.

ref: https://medium.com/@santhoshsundar/speeding-up-first-contentful-paint-while-loading-web-fonts-using-font-face-d7106abe664a

This is the css they’ve provided:

@font-face {
font-family: ‘WildCoorg’;
font-style: normal;
font-weight: 400;
font-display: swap; /* Add this to your @font-face rule */
src: url(‘path/to/your/custom/font/WildCoorg.woff’) format(‘woff2’),
url(‘path/to/your/custom/font/WildCoorg.woff’) format(‘woff’),
url(‘path/to/your/custom/font/WildCoorg.eot’) format(‘eot’);
}

.content {
font-family: ‘WildCoorg’, sans-serif; /* sans-serif will be used as temporary font until WildCoorg is available */
}

Can you make a suggestion about how to go about applying this resolution so I can improve First Contentful Paint & First Meaningful Paint ?

[David]

Hi there,

you would need to server the font locally and then you can include the font-display property. This article explains how:

https://docs.generatepress.com/article/adding-local-fonts/

[Author]

Posts