如何在我的网站上使用Google字体而不影响网站的页面速度

2021/01/31 03:31 · jquery ·  · 0评论

我使用Google字体和网站的字体。看起来不错,但会增加很多开销。有什么办法可以使我的网站保持相同的外观和感觉,而又不影响网站的速度?

我正在这里https://developers.google.com/speed/pagespeed分析我的网站,当我使用Google字体时,我的得分很低,大约60,但是如果我删除这些字体,那么我的得分就很高。有没有一种方法可以使用这些字体而不影响网页质量?我的首要任务是页面优化。

简短的回答:不。稍长的答案:不,您可以尝试,但极不可能击败Google WebFonts已经提供给您的东西。现在让我们进一步剖析问题...

首先,如果添加单个外部资源(webfont)对您的PageSpeed得分产生了如此负面的影响,那么您的页面就必须相当轻巧-可以说,我们应该将其固定在PageSpeed方面。现在,回到webfonts!

零地面:将任何外部资源添加到页面将对页面的整体性能产生负面影响。使用webfonts,这可能是一个更大的问题,因为CSS被认为是“关键资源”,它将在字体到达之前一直保持渲染-如果我们跳过此步骤,则用户可能会得到“未样式化内容的闪光”( FOUC),其中页面以一种字体呈现,然后在字体到达时重新设置样式。这是一次令人不快的经历-您绝对不希望这样。

第二步:使用网络字体意味着我们必须包括一个外部CSS文件-在这种情况下,由Google服务器提供。这些服务器已针对低延迟进行优化,但与此同时,这里没有神奇之处-仍然需要一些时间!

步骤3:CSS文件中包含什么?这是很多人批评Google WebFonts的地方。样式表提供url()对Webfont文件的引用。为什么不使用base64 /内联字体?嗯,每天都会在数十亿个页面上呈现Google WebFonts,所以我们选择使用URL是专门因为URL字体很可能位于浏览器的缓存中如果您要使用冷缓存刷新页面(如您应该的那样)以测试第一页加载,那么您将始终获取字体..但这不是我们正在优化的体验。

此外,为什么不只是将字体内联到您的页面中呢?嗯,每个平台都接受不同的文件格式(woff,eot,ttf等),并且Google WebFonts根据您当前的平台动态提供最优化的格式如果仅下载WebFont(例如,woff)并内联,则它可能对您有效,但不适用于不同平台上的访问者。此外,这些字体背后的压缩总是在不断改进-如果您坚持使用Google服务器,则会自动继承这些改进。如果你自己滚,那你就被困住了。

简而言之:如果您想自己动手,请确保为每个平台优化字体,基于平台提供条件字体,并随着时间的推移紧跟压缩方面的改进。如果您能做到所有这些,那么您可能会比所提供的做得更好。:-)


最后但并非最不重要的。不要害怕使用webfonts是的,它们增加了额外的时间,但演示文稿也很重要。是你的电话。如果施加的延迟是不可接受的,请坚持使用默认字体。但是,试图超越Google WebFonts基础设施/ CDN不可能使您走得很远。

PS最后一个提示:确保您实际上使用了包括的所有粗细和字体。许多人选择整个家族(以防万一),最终根本不使用它们,这在某些浏览器上会导致不必要的下载。

是的你可以。

  1. 下载您的Google网络字体文件
  2. 将它们上传到字体松鼠网络生成器
  3. 选择专家设置,然后勾选:Base64 CSS。
  4. 通过base64加载字体时,您不必等待外部http调用完成。
  5. 这将删除未样式化内容的内容(FOUC)

参考:https : //robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/,您可以在线查找许多其他文章。我也在我的网站上尝试过,并且可以使用。

本文地址:http://jquery.askforanswer.com/ruhezaiwodewangzhanshangshiyonggooglezitierbuyingxiangwangzhandeyemiansudu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:
  • 评论已关闭!