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

nwo49xxi  于 2023-08-04  发布在  jQuery
关注(0)|答案(3)|浏览(112)

我使用谷歌字体和我的网站的排版。看起来很棒,但它增加了很大的开销。有没有一种方法,我仍然可以得到相同的外观和感觉,为我的网站,而不损害网站的速度?
我在这里分析我的网站https://developers.google.com/speed/pagespeed,当我使用谷歌字体时,我得到了一个非常低的分数,大约60,但如果我删除这些字体,那么我有一个很好的分数。有没有一种方法可以使用这些字体而不影响网页质量?我的首要任务是页面优化。

iq3niunx

iq3niunx1#

简短回答:不,稍微长一点的回答:不,你可以尝试,但它是极不可能的,你会击败什么谷歌WebFonts提供给你已经。现在让我们更深入地剖析这个问题。
首先,如果添加一个外部资源(webfont)对PageSpeed得分有如此负面的影响,那么您必须有一个相当轻的页面-可以说,我们应该在PageSpeed方面解决这个问题。现在,回到WebFonts!
地面零点:添加 * 任何 * 外部资源到您的页面将对您的页面的整体性能产生负面影响。对于webfonts,这可能是一个更大的问题,因为CSS被认为是一个“关键资源”,它将在字体到达之前保持渲染-如果我们跳过这一步,那么用户可能会得到“未样式化内容的flash”(FOUC),其中页面使用一种字体渲染,然后在字体到达时重新样式化。这是一个不和谐的经验-你肯定不想这样。
第二步:使用webfont意味着我们必须包含一个外部CSS文件-在这种情况下,由Google服务器提供。这些服务器针对低延迟进行了 * 重度 * 优化,但同时,这里没有魔法-它仍然需要一些时间!
步骤3:CSS文件中有什么?这就是很多人批评Google WebFonts的地方。样式表提供了对webfont文件的url()引用。为什么不使用base64 / inline字体?好吧,Google WebFonts每天都会在数十亿个页面上呈现,所以我们选择使用URL,因为字体很可能在浏览器的缓存中。如果你用冷缓存刷新你的页面(你应该这样做)来测试第一个页面的加载,那么你总是会获取字体。但这不是我们优化的体验。
此外,为什么不直接将字体内联到页面中呢?好吧,每个平台都有不同的文件格式,它接受(woff,eot,ttf等),和谷歌WebFonts动态服务的 * 最优化的格式 * 基于您当前的平台。如果你只是简单地下载WebFont(例如,woff),并将其内联,那么它可能对你很好,但对不同平台上的访问者来说却不是。此外,这些字体背后的压缩一直在改进-如果您坚持使用Google服务器,您将自动继承这些改进。如果你自己卷,那你就卡住了。
简而言之:如果你想推出自己的字体,那么请确保你为每个平台优化字体,基于平台提供条件字体,并随着时间的推移保持压缩改进。如果你能做到这一切,那么你可能会做得比提供的更好。:-)
最后但并非最不重要。不要害怕使用webfonts。是的,他们增加了额外的时间,但演示也很重要。你说了算如果强加的延迟是不可接受的,那么坚持使用默认字体。但是试图击败Google WebFonts基础设施/ CDN不太可能让你走得很远。
P.S.最后一个提示:确保你实际上使用了所有的权重和字体。许多人选择整个家庭(以防万一),并最终不使用它们,这在某些浏览器上导致不必要的下载。

0g0grzrc

0g0grzrc2#

你可以的
1.下载你的谷歌网页字体文件
1.上传到字体松鼠网页生成器
1.选择Maven设置并勾选:Base64 CSS。
1.当通过base64加载字体时,您不需要等待外部http调用完成。
1.这将删除无样式内容闪光(FOUC)
参考:https://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/,你可以在网上查找许多其他文章。我也在我的网站上试过,它很有效。

qlfbtfca

qlfbtfca3#

是的,有可能。
这是一个解决方案,包括打印字体与“媒体”属性。并在页面加载JS后删除该属性。因此,字体适用于所有场景。

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL here)">

字符串
https://www.w3schools.com/tags/att_link_media.asp
https://pagespeedchecklist.com/asynchronous-google-fonts

相关问题