网站加载 style.css 需要很长时间

Posted 2023-02-27

【中文标题】网站加载 style.css 需要很长时间

【英文标题】：Website is taking a long time to load style.css

【发布时间】：2015-04-10 05:26:14

【问题描述】：

我网站上的其他所有内容都可以正常加载。

另一方面，我的 style.css 加载大约需要 15 秒。

我之所以花这么长时间，唯一的想法是因为我正在尝试将外部字体加载到 1.7mb 的网页上。然后我下载了 FontForge 并继续删除了所有字体，除了我需要的几个字母。

字体大小现在为 184KB。我刷新了我的网站，style.css 仍然需要大约 15 秒才能加载。

问题是，我怎样才能找出是什么让我的网站需要 15 秒才能加载 style.css

这是我关于字体的 style.css

@font-face 
    font-family: Gabriola;
    src: url('../fonts/gabriola.eot');
    src: url('../fonts/gabriola.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/gabriola.woff') format('woff'), /* Pretty Modern Browsers */
    url('../fonts/gabriola.ttf')  format('truetype'), /* Safari, android, ios */

这是包含字体和大小的文件夹

【问题讨论】：

Gabriola.eot 仍然接近 600KB。你在哪个浏览器/操作系统/设备上，你能确认它确实是现在下载的 184KB 的版本吗？

很少有网站会为您提供信息，说明您网站的哪些部分需要时间。请尝试查看，可能会发现。..

这里是 developers.google.com/speed/pagespeed/service/tryit 和 tools.pingdom.com/fpt 检查一下，你会找到你的解决方案..

您可以使用Microsoft Web Embedding Fonts Tool从剥离的ttf文件中生成一个新的eot。

如果您查看浏览器开发工具的网络选项卡，您应该会看到每个请求（不仅是 html，还有页面加载的其他资源）。您可以查看下载何时开始以及需要多长时间。这是否说明了这 15 秒的确切原因？

【参考方案1】：

打开浏览器的开发工具，打开性能和网络监控，加载您的网站，然后查看这两件事的结果。您也可以尝试在 https://developers.google.com/speed/pagespeed/insights/ 中加载您的网站，看看它告诉您是什么让您的网站变得如此缓慢。