谷歌推出能自動生成高效能、高可訪問性、高SEO部落格網站的開源生成器

演示站點

生成的部落格網站有以下特點：

1. 在Lighthouse測試中達到完美分數。
2. 符合First Contentful Paint(connection start stalled)低延遲單個HTTP請求
3. 高度最佳化的最大的內容繪圖LCP（具體分數取決於影像使用情況，但是影像已最佳化）
4. 良好的CLS分數（點選一個連結時，連結移動了，很壞的使用者體驗）
5. 良好的首次輸入延遲FID(衡量的是從使用者第一次與頁面進行互動（即當他們單擊連結，點選按鈕）到瀏覽器實際上能夠開始處理事件處理程式的時間)

• 為每個影像生成多種尺寸，並在srcset中使用它們。
• 為每個影像生成一個模糊的佔位符（無需新增HTML元素或使用JS）。
• 將影像轉碼為AVIF（由於編碼器的不穩定，當前預設為關閉）和webp並生成picture元素。
• 延遲載入影像（使用原生的圖片懶載入：loading=lazy）。
• 非同步解碼圖片（使用decoding=async）。
• 透過推斷並提供寬度和高度來避免CLS對影像的影響（Chrome，Firefox和Safari 14+支援）。
• 下載遠端影像並在本地儲存/提供它們。
• 不可變的網址。

• 預設為緊湊的“無類” Bahunya CSS框架。（具有響應式排版，導航欄，語法突出顯示等功能的10KB、 無class的CSS框架。）
• 內聯CSS。
• 使用PurgeCSS在每頁的基礎上消除死程式碼/未使用的CSS 。
• 精縮CSS與CSSO。

• JS的不可變網址。
• 為影像，字型和JS設定不可變的快取頭（內聯CSS）。當前實現Netlify _headers檔案。
• 壓縮HTML並對其進行最佳化以進行壓縮。使用帶有積極選項的html-minifier。
• 使用rollup 將JS捆綁在一起，並用terser最小化。
• 當可能進行導航時，預取同源導航。
• 如果存在AMP檔案，請對其進行最佳化。

• 提供相同來源的字型。
• 製作字型display:swap。

• 支援本地提供Google Analytics（分析）的JS並將其命中請求代理到Netlify代理（可以輕鬆新增其他代理）。
• 支援noscript命中請求。
• 避免阻止分析請求的載入。
• 要啟用此功能，請googleAnalyticsId在中指定metadata.json。

• 用途 作為本地開發過程中的圖示。
• 支援一系列預設測試。
• 在上執行構建並進行測試git push。
• 為JS生成的Sourcemap。

• 共享按鈕優先，navigator.share()並退回到Twitter。使用類似於作業系統的共享圖示。
• 支援OGP後設資料。
• 支援Twitter後設資料。
• 支援schema.org JSON-LD。
• Sitemap.xml生成。