Mik*_*ike 22 javascript performance jquery pagespeed
我使用谷歌字体和我的网站的排版.看起来很棒,但它增加了很大的开销.有没有办法我可以在不影响网站速度的情况下为我的网站获得相同的外观和感觉？
我在这里分析我的网站https://developers.google.com/speed/pagespeed,当我使用谷歌字体时,我的分数大约为60,但如果我删除这些字体,那么我的分数很高.有没有办法在不影响网页质量的情况下使用这些字体？我的首要任务是页面优化.
igr*_*rik 37
简答:不.稍微长一点的答案:不,你可以试试,但你不可能超越Google WebFonts已经提供给你的东西.现在让我们再解剖一下这个问题......
首先,如果添加一个外部资源(webfont)对你的PageSpeed得分产生负面影响,你必须有一个相当轻的页面 - 可以说,我们应该在PageSpeed方面解决这个问题.现在,回到webfonts!
接地零:向页面添加任何外部资源将对页面的整体性能产生负面影响.使用webfonts,这可能是一个更大的问题,因为CSS被认为是一个"关键资源",它将阻止渲染直到字体到达 - 如果我们跳过这一步,那么用户可能会得到"闪烁的无格式内容"( FOUC),页面用一种字体呈现,然后在字体到达时重新设置.这是一种不和谐的体验 - 你绝对不希望这样.
第二步:使用webfont意味着我们必须包含一个外部CSS文件 - 在这种情况下,由Google服务器提供服务.这些服务器针对低延迟进行了大量优化,但与此同时,这里没有任何魔力 - 它仍然需要一些时间!
第3步:CSS文件中有什么内容？这是很多人批评Google WebFonts的地方..样式表提供url()了对webfont文件的引用.为什么不用base64 /内联字体？好吧,Google WebFonts每天都会在数十亿个页面中呈现,因此我们选择使用URL,因为该字体很可能位于浏览器的缓存中.如果您使用冷缓存刷新页面(如您所愿)以测试第一页加载,那么您将始终获取字体..但这不是我们正在优化的体验.
此外,为什么不将字体内嵌到页面中？好吧,每个平台都有不同的文件格式(woff,eot,ttf等),Google WebFonts 根据您当前的平台动态提供最优化的格式.如果您只是下载WebFont(例如,woff)并内联它,那么它可能适合您,但不适合您在不同平台上的访问者.此外,这些字体背后的压缩总是在不断改进 - 如果您坚持使用Google服务器,您将自动继承这些改进.如果你自己滚动,那么你就被困住了.
简而言之:如果您想自己动手,那么请确保优化每个平台的字体,基于平台提供条件字体,并随着时间的推移跟上压缩改进.如果你可以做到这一切,那么你可能会比提供的更好.:-)
最后但并非最不重要的.不要害怕使用webfonts.是的,他们增加了额外的时间,但演示也很重要.这是你的电话.如果强加的延迟是不可接受的,那么坚持使用默认字体.但试图击败谷歌WebFonts基础设施/ CDN不太可能让你走得太远.
PS最后一个提示:确保您实际使用了所包含的所有重量和字体.许多人选择整个家庭(以防万一),最终根本不使用它们,在某些浏览器上会导致不必要的下载.