- This topic has 13 replies, 4 voices, and was last updated 2 years, 8 months ago by David.
-
AuthorPosts
-
November 17, 2020 at 6:19 am #1534562Julian
Hey there,
I added a local font with this tutorial https://docs.generatepress.com/article/adding-local-fonts/. It works like a charme but unfortunately the PageSpeed Insights keep telling me to use “<link rel=preload>” for the fonts to load.Do you have any idea how to solve this issue for the best pagespeed result?
November 17, 2020 at 6:59 am #1534803DavidStaffCustomer SupportHi there,
you can use a Hook element to add your preload link:
https://docs.generatepress.com/article/hooks-element-overview/
You would select the
wp_head
hook and set your Display Rules to theEntire Site
An example of the preload link looks like this:
<link rel="preload" href="https://your-site/-full-url-to-the-font/font.woff2" as="font" type="font/woff2">
November 17, 2020 at 7:01 am #1534804JulianAre you sure this will work using the @font-face import method in the custom css field? I added the local font using your tutorial.
November 17, 2020 at 7:05 am #1534813DavidStaffCustomer SupportAs long as the URL you specify in the preload link is the same as that in your @font-face then yes.
November 17, 2020 at 7:18 am #1534837JulianSo you mean instead of using @font-face import in custom css I should load it with the hook in the head then?
November 17, 2020 at 7:25 am #1534845DavidStaffCustomer SupportNo – you need both.
The @font-face is required.
And if you want to preload them – then you must ALSO add the preload to the hook i mentioned.November 19, 2020 at 8:04 am #1537825JulianWhen I do that pagespeed insights says that they found a preload element but it is not used in the site. Its marked as error then. Any ideas?
November 19, 2020 at 7:27 pm #1538348TomLead DeveloperLead DeveloperHi there,
Any chance you can link us to the site so we can take a look?
November 23, 2020 at 5:22 pm #1543280JulianHey Tom, I’ve added
crossorigin="anonymous"
and now the error is gone and it works.November 24, 2020 at 10:49 am #1544880TomLead DeveloperLead DeveloperGlad you got it sorted 🙂
August 21, 2021 at 2:30 am #1903363manaadiarGood day, what would be the code to be used in block element for preloading style sheet/js..?? Will what is updated in block elements automatically override the same theme element..?? Can you assist with the preload code for example with below css
<link rel=’stylesheet’ id=’mediaelement-css’ href=’https://c0.wp.com/c/5.8/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css’ media=’all’ />
August 21, 2021 at 6:31 am #1903496DavidStaffCustomer SupportHi there,
if you’re using GenerateBlocks plugin in the Block Element, then its CSS is dynamically generated with ALL GB styles on the currently viewed page. So there isn’t a static style sheet that can be preloaded.
You may find some optimization plugins provide preloading of the combined/cached files they generate.
August 21, 2021 at 9:40 am #1903774manaadiarHi David, as per my plugin screen GenerateBlocks Plugin is active.. But as per the Core Web Vitals of Google, css is not being pre-loaded.. How can I ensure
August 21, 2021 at 5:03 pm #1903998DavidStaffCustomer SupportYou can’t preload the CSS that GenerateBlocks requires at this time.
ITs dynamically created. Preloading will only work with static stylesheets that have a fixed URL and a unique name. -
AuthorPosts
- You must be logged in to reply to this topic.