通常是 UX 设计师,我目前也是一系列 Web 工具的产品经理,但我的开发技能一点也不强,如果这是一个愚蠢的问题,请原谅我。我们正在为一组企业工具构建一系列 Bootstrap 页面,目前我们正在使用 Google Fonts API 来处理我们的字体。我有点担心加载时间,我们认为这可能是谷歌字体收集数据。在我们取消选择我们当前的设计并在服务器上安装字体文件之前,我想知道是否有其他人在使用 Google 字体时注意到任何加载时间,以及上传字体本身是否是一种解决方案 - 或者这是否只会让它变得更糟?
在 Bootstrap 中使用字体时,使用 Google Fonts API 还是只在服务器上安装字体文件更快?
简短回答:Google 比您自己托管要快得多。
长答案:将它放在您自己的服务器上似乎是改善加载时间的好主意。毕竟,这些文件更靠近您的网页。但不是。毕竟,当用户访问您的网站时,最初他们只会获得一些 HTML。在这里,我们引用了其他文件:图像、JS、CSS,以及在您的情况下的字体。
对于这些外部资源中的每一个,客户端将对提供文件位置的网络服务器进行新的调用。因此,无论您自己托管文件还是参考 google,对该资源的调用都会同时发生。
但是,除非您是一家出色的公司,否则谷歌服务器的响应速度会更快。它还将使用谷歌的带宽,而不是您的带宽,从而为您节省(也许,一点点)钱。
从第三方服务器(谷歌)加载文件会减慢加载时间,因为浏览器必须向另一台机器发出请求。基本上从一个域加载所有内容应该比从不同的网络服务器加载文件更快。
然而——谷歌字体很可能已经在访问者的缓存文件中。这又会加快速度,因为浏览器不必再次加载它。
这同样适用于其他资产,如 jquery 库等,如此处所述:“为什么不应该使用外部 javascript 文件”(http://www.elxis.org/de/blog/external-js-files.html )
当您请求一个网页时,您请求的不仅仅是网页。您正在请求 HTML 文件、所有图像、所有 CSS 文件、所有 JS 文件、所有字体文件等。
您的服务器很少允许您一次请求所有这些项目。相反,它将限制并发请求的数量并要求您将其余请求排队。这不是什么大问题,但是请求越多,排队的可能性就越大。此外,许多服务器会在下载 JS 文件时阻止所有请求。
这就是为什么最好请求 1 100k CSS 文件而不是 10 10k CSS 文件。数据都是一样的,但是你不得不提出所有这些单独的请求,从而降低了效率。
因此,至少对于 CSS,一个建议是简单地将所有 CSS 合并到一个 CSS 文件中。
但是,你不能用字体来做到这一点。
那里的建议是从 3rd 方服务器加载它们。这有几个原因:
- 如果第 3 方服务器很受欢迎并且请求的文件很受欢迎,那么很可能它已经缓存在最终用户的浏览器中
- 如果是大型第三方(又名谷歌),他们可能拥有庞大的基础设施和充足的带宽
- 如果它是 CDN(内容交付网络……我相信 Google 字体是),那么您还有额外的好处,即数据托管在全球多个服务器上,并且请求被路由到最接近请求人的位置。
因此,一般来说,只要可行,请始终从大型 3rd 方加载公共资产。
你应该把它们放在你的服务器上:-)
原因:
1)它会更快,即使他们从使用 Google 的先前站点缓存它,它也会第一次创建缓存,所以它只会影响第一次体验。
2)说谷歌服务器出现故障并且您没有将它们放在您的服务器上..然后这些字体消失并被他们的浏览器默认值所取代。
绝对应该上传到服务器,调用谷歌 API 设置起来更快,但总有可能在你不知道的情况下崩溃。