令人惊叹的减慢页面加载时间

Question

I have a Wordpress site with the "baskerville 2' theme installed. I've been using google page speed insights to assess my site's loading speed. It tells me that the font awesome Webfont preload request is slowing it down. I've added :

<link rel=”preload” href=”https://dsbaudio.com/wp-content/themes/baskerville-2/fontawesome/fontawesome-webfont.woff2?v=4.3.0” as=”font” crossorigin=”anonymous”>

to the header.php and this has improved things a bit.

If I understand things correctly, would the site load a lot faster if the theme didn't preload web fonts at all?

Is there a way to modify the theme (using a child theme edited offline) to revert it to standard fonts like Arial, Times or Georgia?

Answer 1

Though it is an excellent resource, it is likely that you do not need the entire FontAwesome font file.

I often use maybe 10 of the glyphs available in that file. If you load the entire font – something like 7,000 glyphs – then you are drawing unnecessary system resources to define 6,990 glyphs that you will never use.

The answer:

Subset thy font, good programmer!

To do this, I use a font-subsetting service. They tend to be free, and there are easy-to-follow instructions on their sites. There are several, but you could try fontello: http://fontello.com

I just had a look at a fairly large set of icons that I use on one of my sites, and it was 44KB. Tiny. Fast.

Let me know if you have any questions.

Answer 2

You need to perform two steps process to solve this issue.

Step one: Go to appearance ->theme editor ->framework/dist/css/site/stacks/(yourstacks).css look for @font-face and replace with font-display:swap;

Step two: Go to appearance ->theme editor ->framework->fonts->font_awesome

Insert this line of code inside the font tag font-display=“swap”;

Answer 3

Have you considered placing the code in your footer instead? Some websites claim this increases load times.

Alternatively, with relation to choosing default fonts, yes - either through modifying your CSS, or changing the font within your theme options. You should be able to change it there... I'm not familiar with your theme sorry I could not be more specific.