报纸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 Fonts https://fonts.google.com/。 Google Fonts 通过安全缓存字体使产品和网页运行得更快，而不会损害用户的隐私或安全。跨站点缓存的设计使您只需在任何网站上加载一次字体，我们将在使用 Google Fonts 的任何其他网站上使用相同的缓存字体。 简而言之，如果有人访问使用相同 Goole 字体的网站，则在访问您的网站时，该人将不必下载它或再次缓存它。

Answer 2

与网站有同样的问题，缓存插件解决了这个问题。

但是你可以尝试