大港企业网站制作:在WordPress中加速Google字体

2019.06.17 大港企业网站制作

87

今天,大港企业网站制作将介绍几种优化和加速WordPress中Google字体的方法。当然,图片是并且将永远是网页中最重的部分,但根据HTTPArchive的数据,截至2016年10月,网页字体仅占平均页面总重量的3%多一点。

尽管网页字体的重量只占整个网页的一小部分,但您所做的每一次优化都有助于加快加载时间。看看下面的一些方法,以加快这些字体!

谷歌字体是什么?

首先,对于那些可能不知道的人来说,谷歌字体是一个开放源码(免费)目录的800多个网页字体系列,您可以使用在您的网站。它们也可在本地下载,以供印刷和其他用途。数百万的WordPress网站使用谷歌字体,因为它是一个伟大的免费方式,以提高您的网站的外观和可用性。

如果你追求的是纯粹的性能,系统字体将永远获胜,但没有什么能比得上专业精神和良好的网页字体的美学。事实上,印刷术已经被证明影响转换以积极的方式。但一切都有代价。因此,了解将Google字体添加到WordPress站点是如何影响速度和性能的,这一点很重要。

如何在WordPress中使用Google字体

有几种方法可以将Google字体添加到WordPress站点。第一种也是默认的方法是直接从Google抓取它们。该方法使用它们的全局CDN从来自全球各地的不同服务器快速传递字体。

当您将它们添加到您的站点时,将有一个外部请求fonts.googleapis.com.

googleapis

也是外部请求fonts.gstatic.com对于WOFF或WOFF 2版本,取决于浏览器的支持。

gstatic

WordPress插件

如果你是WordPress的初学者,向你的网站添加Google字体的最简单的方法可能是一个免费的插件。这个简单的Google字体插件是一个很受欢迎的例子。到目前为止,它已经有超过300,000活跃安装与4.9的五星级评级.

大港企业网站制作

从Google字体中添加嵌入代码

值得注意的是,大多数WordPress插件都会增加一些开销,所以我更喜欢使用更简单的嵌入代码来添加Google字体。所以,转到谷歌字体,选择你想要的字体,在这个例子中,我使用的是Roboto。

点击“自定义“选项。这是一个重要的步骤,因为每个字体系列都有不同的字体权重。通常,您需要常规的、中等的和粗体的。

注:您所包含的每个字体都会增加字体的加载时间,所以不要只选择所有字体。越少越好。

4 roboto google fonts

然后单击“嵌入“选项。这就是您想要复制它提供的嵌入代码的地方。

google fonts embed

大港企业网站制作把这段代码放进<head>部分您的WordPress网站。有不同的方法可以做到这一点,有些人可能更喜欢排列字体,但是在这个示例中,我只是简单地将代码添加到header.php档案。注:根据所使用的主题,这可能略有不同。

header font embed

然后,要真正使WordPress主题使用Google字体,您必须添加一些CSS样式。下面是我使用的例子。如果您的主题管理面板没有自定义CSS编辑器,则可以始终使用以下免费插件定制CSS和JS.

body {font-family:roboto; font-size:18px;}h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}h1 {font-size:28px;}h2 {font-size:26px;}h3 {font-size:24px;}h4 {font-size:20px;}h5 {font-size:18px;}h6 {font-size:16px;}

现在您已经知道了将Google字体添加到WordPress站点的一些快速方法,现在我将进行一些快速测试,以了解加速它们的其他方法。我首先使用上面的设置运行了一些测试,平均速度在418毫秒的时候出来了。注:每次测试运行5次,并进行平均结果。

google fonts cdn speed test

本地托管Google字体

在WordPress站点上提供Google字体的另一种方法是在Web服务器上本地托管它们。如果您的受众位于特定的地理位置,并且靠近您的服务器,那么在本地托管它们的速度实际上要比使用Google字体的速度要快。Google字体CDN很棒,但是添加这些额外的外部请求和DNS查找会导致延迟。

只有在使用快速托管时,此方法才能正常工作。在这个例子中,我使用来自Kinsta的托管WordPress主机,具有讽刺意味的是,Kinsta是由GoogleCloud平台驱动的。

大港企业网站制作为了在本地托管,我实际上使用了一个名为Google-webfonts-助手..这使您可以更容易地在本地下载Google字体,并为您提供所有的CSS。下面是我们最后的一个例子。您将需要上传您下载的字体到您的Web服务器。在本例中,我将它们放在一个名为“字体”的文件夹中。

/* roboto-regular - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-500 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-700 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

然后,我们需要确保从头中的Google字体中删除嵌入代码,这样您就不再有那些外部调用了。然后,我再次使用上面的设置运行一些测试,平均速度到了386毫秒。

大港企业网站制作

注:Web服务器位于爱荷华州,从德克萨斯州达拉斯运行来自Pingdom的速度测试。因此,正如您所看到的,即使服务器位于美国的其他地方,在服务器上本地加载Google字体仍然要稍微快一些。当然,你会想要自己测试不同的位置,根据你自己的观众。

在您自己的CDN上托管Google字体

接下来是第三种情况。在上面的站点上,我已经使用了第三方CDN提供商(KeyCDN)托管所有其他资产(图像、CSS、Javascript等)。如果我们现在把字体放在同一个CDN上,而不是Google的CDN上,会发生什么呢?

我用的是免费的CDN促成器WordPress插件。这实际上是将字体从Web服务器上的“字体”文件夹自动复制到KeyCDN。然后,我们必须稍微修改代码,以便字体的路径现在指向CDN(例如cdn.domain.com)。

/* roboto-regular - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-500 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}/* roboto-700 - latin */@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

然后,我再次使用上面的设置运行一些测试,平均速度达到了384毫秒。

正如您所看到的,使用CDN再次稍微快一些。没有多少,但如果你把它与谷歌的CDN测试相比较,它肯定会更快。这部分是因为它可以利用相同的HTTP/2连接,而且它仍然减少外部调用和DNS查找,就像本地托管一样。当然,这种方法的一个优点是它将在全球范围内更快。

摘要

正如您可以从上面的测试中看到的,Google字体CDN是伟大的,但它可能并不总是最快的。当然,它将始终取决于您自己的环境和您所服务的流量,无论是本地观众或全球。

大港企业网站制作建议你自己测试上面的每一种方法,看看哪一种是最快的,哪一种对你的WordPress站点最有效。记住,只加载你真正需要的字体权重!


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP