useGoogleFontPreconnect
¥Summary
-
规则生效日期：
v2.0.0¥Rule available since:
v2.0.0 -
诊断类别：
lint/performance/useGoogleFontPreconnect¥Diagnostic Category:
lint/performance/useGoogleFontPreconnect -
此规则包含 safe 修复程序。
¥This rule has a safe fix.
-
此规则的默认严重级别为 information。
¥The default severity of this rule is information.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
¥How to configure
{ "linter": { "rules": { "performance": { "useGoogleFontPreconnect": "error" } } }}¥Description
确保在使用 Google Fonts 时使用 preconnect 属性。
¥Ensure the preconnect attribute is used when using Google Fonts.
使用 Google Fonts 时，建议将 rel="preconnect" 属性添加到指向 https://fonts.gstatic.com 的 <link> 标签中，以便尽早建立与字体源的连接。此修复程序通过降低延迟来提高页面加载性能。
¥When using Google Fonts, adding the rel="preconnect" attribute to the <link> tag
that points to https://fonts.gstatic.com is recommended to initiate an early
connection to the font’s origin. This improves page load performance by reducing latency.
未使用 preconnect 可能会导致字体加载速度变慢，从而影响用户体验。
¥Failing to use preconnect may result in slower font loading times, affecting user experience.
注意：从 12.0.1 版本开始，Next.js 会自动添加此预连接链接。但如果手动添加，此规则可确保正确使用 preconnect 属性。
¥Note: Next.js automatically adds this preconnect link starting from version 12.0.1, but in cases
where it’s manually added, this rule ensures the preconnect attribute is properly used.
¥Examples
¥Invalid
<link href="https://fonts.gstatic.com"/>code-block.jsx:1:1 lint/performance/useGoogleFontPreconnect FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ The attribute rel=“preconnect” is missing from the Google Font.
> 1 │ <link href=“https://fonts.gstatic.com"/>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Not using preconnect can cause slower font loading and increase latency.
ℹ Safe fix: Add the rel=“preconnect” attribute.
1 │ <link·href=“https://fonts.gstatic.com”·rel=“preconnect”/>
│ +++++++++++++++++
<link rel="preload" href="https://fonts.gstatic.com"/>code-block.jsx:1:1 lint/performance/useGoogleFontPreconnect ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ The attribute rel=“preconnect” is missing from the Google Font.
> 1 │ <link rel=“preload” href=“https://fonts.gstatic.com"/>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Not using preconnect can cause slower font loading and increase latency.
¥Valid
<link rel="preconnect" href="https://fonts.gstatic.com"/><link href="/logo.svg" rel="icon" />¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号