Astro 让我的网站获得了完美的 PageSpeed 评分

Astro 让我的网站获得了完美的 PageSpeed 评分

起初我对 Astro 持怀疑态度。我之前一直使用 React 和 Next.js。后来我构建了 Zimnovate 网站，Google PageSpeed 给它打出了满分。

Astro 默认不发送任何 JavaScript。大多数框架会强制浏览器为静态内容运行代码。而 Astro 会在构建时将组件渲染为 HTML。

它采用了群岛架构 (Islands Architecture)。你的页面是一片静态的海洋，而交互部分则是其中的“岛屿”。海洋是纯 HTML，只有岛屿才会使用 JavaScript。

你可以控制代码的加载时机：

• client:visible 在用户滚动时加载。
• client:load 立即加载。
• client:idle 在浏览器空闲时加载。

我使用了 Astro 4.x、Tailwind CSS 和 Supabase。Supabase 用于存储博客文章。Astro 在构建期间获取这些数据。用户获取的是缓存后的 HTML。它是即时的。

这有助于 SEO。搜索引擎爬虫可以立即看到 HTML，而无需等待 JavaScript。

你可以在同一个项目中使用 React、Vue 或 Svelte。你无需放弃原有的技能，同时还能获得更快的速度。

适合使用 Astro 的场景：

• 代理机构网站
• 落地页
• CMS 博客
• 作品集

避免在以下场景使用 Astro：

• 控制面板
• 实时应用

Web 变得臃肿不堪。Astro 解决了这个问题。它将性能放在首位。

Source: https://dev.to/vincent_mugondora_599ed60/i-built-the-zimnovate-agency-site-with-astro-and-google-pagespeed-gave-it-a-perfect-score-heres-4img

Optional learning community: https://t.me/GyaanSetuAi