CODEWITHSUNDEEP
wordpressfontspreloadwoff
Jaka Oferta
Jaka Oferta

Reputation: 1

Newspaper Wordpress theme page insights preload problem

This is my first qeuestion here.

I have searched for a solution to this, but whatever I've tried did not work.

I use Newspaper theme on my website and one of the problems which causes around 6 seconds of delay of mobile website loading is the problem with the newspaper.woff fond preloading.

I have added the following code to functions.php for both mobile and desktop version:

// Preload Newspaper fonts for responsive theme (main theme)

function dns_prefetch_responsive() {
    
    echo "<link href='https://jakaoferta.pl/wp-content/themes/Newspaper/images/icons/newspaper.woff?19' rel='preload' as='font' type='font/woff' crossorigin>";
}
add_action( 'wp_head', 'dns_prefetch_responsive', 0 );

Also, added this to header.php:

<link rel="preload" href="/wp-content/themes/Newspaper/images/icons/newspaper.woff?19" as="font" crossorigin>

However, Google PageSpeed does not understand this has been done and still shows the issue. On GtMetrix it is shown I load the font from two sources now.

What should I do so that this will start working properly?

Upvotes: 0

Views: 1576

Answers (1)

amarinediary
amarinediary

Reputation: 5459

when trying to preload font crossorigin should be set to anonymous (eg: crossorigin="anonymous") fonts are expected to be fetched anonymously, without this attribute, the preloaded font is ignored by the browser, and a new fetch takes place.

You should also use direct pathing instead of url pathing. This is ok /wp-content/themes/Newspaper/images/icons/newspaper.woff?19 ... This is not ok https://jakaoferta.pl/wp-content/themes/Newspaper/images/icons/newspaper.woff?19

<link rel="preload" as="font" type="font/woff" href="/wp-content/themes/Newspaper/images/icons/newspaper.woff" crossorigin="anonymous">

You can instead use the rel="prefetch" attribute to tell the browser to prepare the download of the resources that may be required later during page load or user actions so it will assign a low priority to those resources. This will result in a default load font then a switch to the custom one later on. (we're not waiting on the font to load before showing the content, which is I think default behaviour).

Stuff to know regarding font loading and browser default behaviours... Edge (even tho nobody use it) uses a system font until the custom font is ready, then swaps out fonts. Chrome will hide text for up to 3 seconds. If text is still not ready, it will use a system font until the custom font is ready. Firefox will hide text for up to 3 seconds. If text is still not ready, it will use a system font until the custom font is ready. Safari hides text until the custom font is ready.

Taking a look at your website page-source I can see that you're currently loading your font 3 times (probably once in style.css, once in function.php and once in header.php), which is probably causing major performances loss. loading it only once is sufficient. Loading through cc is the least recommended regarding performances. Best practice is to register and enqueue from function.php

Following is the output from your website source code:

<link href='https://jakaoferta.pl/core/assets/13c402efbe/images/icons/newspaper.woff?19' rel='preload' as='font' type='font/woff' crossorigin='anonymous'>

<link rel="preload" as="font" href="https://jakaoferta.pl/core/assets/13c402efbe/images/icons/newspaper.woff?19" data-wpacu-preload-font="1" crossorigin>

<link rel="preload" as="font" href="https://jakaoferta.pl/core/assets/13c402efbe/images/icons/newspaper.woff?19" data-wpacu-preload-font="1" crossorigin>

Finally i would highly suggest using Google Fonts https://fonts.google.com/ for future projects. Google Fonts makes product and web pages run faster by safely caching fonts without compromising users’ privacy or security. Cross-site caching is designed so that you only need to load a font once, with any website, and we'll use that same cached font on any other website that uses Google Fonts. In short, if somebody visit a website that uses the same Goole font, upon visiting your website that person wont have to download it nor cache it again.

Upvotes: 1

Related Questions