讓jamstack慢嗎？已接受的挑戰。

“ Jamstack是Slowwwww。”您很少聽到這一點，尤其是考慮到Jamstack的速度聲譽。但是，即使是jamstack網站也可能遭受性能問題。不要以為jamstack會自動等於燃燒的性能；明智的選擇至關重要。讓我們探索不當的決定如何削弱jamstack網站的速度。

我們將有意建立一個緩慢的蓋茨比網站，以了解性能瓶頸。使用持續的性能測試和Google燈塔，我們將跟踪每一個變化，從完美的燈塔得分為100的得分開始，並故意將其降低到令人沮喪的17。

建立我們慢速掃蕩的網站

我們將使用蓋茨比。首先，安裝Gatsby CLI：

 NPM安裝-G Gatsby -CLI

創建一個新的蓋茨比網站：

蓋茨比新的慢速jamstack

導航到項目目錄並啟動開發服務器：

 CD慢速jamstack
蓋茨比發展

對於燈塔測試，我們需要製作生產。 Vercel提供了方便的託管解決方案。安裝並登錄到Vercel CLI：

 NPM安裝-G vercel -cli
動詞

這將站點部署到Vercel。默認的蓋茨比網站通常很快，在燈塔上得分100。讓我們看看我們如何破壞這一點。

CSS放慢速度

CSS框架很強大，但是選擇錯誤的框架或使用效率低下會損害性能。選擇模塊化框架或CSS-IN-JS僅加載必要的樣式。

我們將做出一個糟糕的選擇：將整個semanticui框架（包括jQuery（依賴））直接加載到我們的html。這需要復制默認的<code>html.js文件：

 cp .cache/default-html.js src/html.js

然後，將semanticui樣式表和jQuery添加到src/html.js ：

<link href="https://cdn.jsdelivr.net/npm/%5Bemail%C2%A0protected%5D/dist/semantic.css" rel="stylesheet">

部署更改：

 vercel- prod

燈塔得分降至66，僅僅與加載不必要的CSS相比，大幅下降。交互式（TTI）的時間大大增加。

營銷依賴性放緩

讓我們在src/html.js中添加Google Analytics（分析）和Facebook跟踪腳本：

 

<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="讓jamstack慢嗎？已接受的挑戰。" >

再次部署：

 vercel- prod

得分暴跌至51。這些看似很小的腳本具有很大的性能影響。

放慢圖像

我們將在https://placeimg.com中添加100張圖像到index.js ，直接加載它們而無需優化：

 const indexpage =（）=> {
  const項目= array.from（{長度：100}，（_，i）=>（
    <img key="{i}" src="%7B%60https://placeimg.com/200/200/%24%7Bi%7D%60%7D" alt="讓jamstack慢嗎？已接受的挑戰。">
  ）;

  返回 （
    <layout>
      {專案}
    </layout>
  ）；
};

再次部署會導致一個慢速的站點，燈塔得分為17，TTI為16.5秒。

重點？每個決定都會影響績效。即使在Jamstack上，性能也不是免費的。

恢復速度

Jamstack的主要性能優勢是靜態文件的邊緣緩存，從而減少了第一個字節（TTFB）的時間。這比服務器端渲染快。但是，客戶端的優化仍然至關重要。雖然高燈塔得分是可取的，但請記住，它們並不總是完美地反映用戶體驗。這項練習表明，即使有了Jamstack，也需要勤奮的關注表現。

以上是讓jamstack慢嗎？已接受的挑戰。的詳細內容。更多資訊請關注PHP中文網其他相關文章！