最近我开始注意到网站在某些时候加载速度非常慢。
我用firebug对此进行了调查,当页面需要很长时间加载时,显示出来了:
它似乎完全随机,但对webfont.woff的请求只是等待并永远等待。如果我尝试手动达到这个资源,它工作正常,并在100毫秒内响应。我正在谈论的页面是http://wtf.maikelzweerink.nl,自定义字体来自主域maikelzweerink.nl。
face-fonts在default.css中声明,也来自主域:
@font-face {
font-family: 'Proximanova Regular';
src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot');
src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot?#iefix') format('embedded-opentype'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.woff') format('woff'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.ttf') format('truetype'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.svg#ProximaNovaRgRegular') format('svg');
}
即使使用正确的HTTP标头
也是如此在Chrome中同样的交易(click for larger):
答案 0 :(得分:6)
MIME类型在字体上设置为text / plain,而不是它们应该是什么。
在你的.htaccess文件中(假设是Apache),添加:
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType font/opentype otf
AddType application/x-font-woff woff
这将解决问题,并确保字体适用于所有浏览器。
答案 1 :(得分:3)
我使用base64 enconding将字体嵌入CSS中以减少请求量。 base64的缺点是花费更多的初始带宽但是嘿,它的工作原理!这解决了它。
当然,我对一个大小为180KB的CSS文件并不满意:/
修改强> 事实证明这是ISP的问题。当我mannualy加载字体时,它从缓存中检索它(该死的铬!)。不知何故,这些字体在ISP服务上没有直接可用,而且从硬盘请求/读取也需要一段时间。
答案 2 :(得分:1)
您需要像这样预加载或预提取字体
<link rel="preload" as="font" href="/fonts/Pacifico-Regular.ttf" type="font/ttf" crossorigin="anonymous">
更多信息How to load web fonts to avoid performance issues and speed up page loading
答案 3 :(得分:0)
这不仅仅是字体...
如果我在Chrome中反复重新加载页面,我会看到图片卡住了
你可以在这里看到瀑布中的图像速度慢 - http://www.webpagetest.org/result/120904_JN_85ef2c2901df72a0b0ec4b3181eeec77/1/details/