报纸Wordpress主题页面洞察预加载问题

Question

这是我在这里的第一个问题。

我已经在寻找解决方案，但我尝试过的任何方法都不起作用。

我在我的网站上使用报纸主题，导致移动网站加载延迟大约 6 秒的问题之一是报纸的问题。woff 喜欢预加载。

我已将以下代码添加到移动版和桌面版的functions.php：

// 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 );

另外，将这个添加到 header.php：

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

但是，Google PageSpeed 不明白这已经完成，并且仍然显示问题。 在 GtMetrix 上显示我现在从两个来源加载字体。

我应该怎么做才能开始正常工作？

Answer 1

当尝试预加载字体时，crossorigin 应设置为 anonymous（例如：crossorigin="anonymous"）字体预计会被匿名获取，如果没有此属性，预加载的字体将被浏览器忽略，并重新获取发生。

您还应该使用直接路径而不是 url 路径。这没关系/wp-content/themes/Newspaper/images/icons/newspaper.woff?19 ...这不行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">

您可以改为使用rel="prefetch" 属性来告诉浏览器准备下载稍后在页面加载或用户操作期间可能需要的资源，以便为这些资源分配低优先级。这将导致默认加载字体，然后切换到自定义字体。 （我们不会在显示内容之前等待字体加载，我认为这是默认行为）。

关于字体加载和浏览器默认行为的知识... Edge（即使没有人使用它）在自定义字体准备好之前使用系统字体，然后换出字体。 Chrome 将隐藏文本最多 3 秒。如果文本还没有准备好，它将使用系统字体，直到自定义字体准备好。 Firefox 将隐藏文本最多 3 秒。如果文本还没有准备好，它将使用系统字体，直到自定义字体准备好。 Safari 在自定义字体准备好之前隐藏文本。

查看您的网站页面源，我可以看到您当前正在加载字体 3 次（可能一次在 style.css，一次在 function.php 和一次在 header.php），这可能是导致重大业绩损失。只加载一次就足够了。关于性能，最不推荐通过 cc 加载。最佳做法是从 function.php 注册和入队

以下是您网站源代码的输出：

<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>

最后，我强烈建议在未来的项目中使用 Google 字体 https://fonts.google.com/。 Google Fonts 通过安全缓存字体使产品和网页运行得更快，而不会损害用户的隐私或安全。跨站点缓存旨在让您只需在任何网站上加载一次字体，我们将在使用 Google 字体的任何其他网站上使用相同的缓存字体。 简而言之，如果有人访问使用相同 Goole 字体的网站，则在访问您的网站时，该人无需下载或再次缓存。