speed up network dependencies (improvement with gfont?) #340
Description
i ran this new thing https://developer.chrome.com/blog/new-in-devtools-141/?utm_source=devtools&utm_campaign=stable#ai-insight
Analysis:
The network dependency tree analysis highlights a maximum critical path latency of 754.8 ms, indicating a significant delay in loading essential resources required for rendering the page. The critical chain is as follows:
- The initial HTML document (
https://_REDACTED_.app/p/U4fa9MhP) took 493.6 ms to load. - This document depended on a CSS file (
https://_REDACTED_.app/_next/static/css/bc89fb44eaa31ac2.css), which took 502.5 ms. - The CSS file, in turn, depended on a Google Fonts CSS file (
https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap) with a load time of 680.7 ms. - Finally, the Google Fonts CSS file required three WOFF2 font files from
https://fonts.gstatic.com, with the longest taking 754.8 ms (https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3pQPwlBFgsAXHNk.woff2).
This dependency chain, particularly the font loading, is blocking the rendering of the page, contributing to the high critical path latency. The analysis also suggests adding a preconnect hint for https://fonts.googleapis.com to potentially save 93.5 ms.
Optimization Recommendations:
- Add a
<link rel="preconnect" href="https://fonts.googleapis.com">tag in your HTML's<head>to establish an early connection to the Google Fonts origin and reduce the time spent on DNS lookups, TCP handshakes, and TLS negotiations. - Consider self-hosting your web fonts to eliminate the dependency on a third-party origin and potentially improve loading times.
- Evaluate if all three font weights (400, 500, 700) are necessary and only load the ones that are used on the page to reduce the number of font files downloaded.