“ Jamstack是Slowwwww?！蹦苌俾?tīng)到這一點(diǎn)，尤其是考慮到Jamstack的速度聲譽(yù)。但是，即使是jamstack網(wǎng)站也可能遭受性能問(wèn)題。不要以為jamstack會(huì)自動(dòng)等于燃燒的性能；明智的選擇至關(guān)重要。讓我們探索不當(dāng)?shù)臎Q定如何削弱jamstack網(wǎng)站的速度。

我們將有意建立一個(gè)緩慢的蓋茨比網(wǎng)站，以了解性能瓶頸。使用持續(xù)的性能測(cè)試和Google燈塔，我們將跟蹤每一個(gè)變化，從完美的燈塔得分為100的得分開(kāi)始，并故意將其降低到令人沮喪的17。

建立我們慢速掃蕩的網(wǎng)站

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

 NPM安裝-G Gatsby -CLI

創(chuàng)建一個(gè)新的蓋茨比網(wǎng)站：

蓋茨比新的慢速jamstack

導(dǎo)航到項(xiàng)目目錄并啟動(dòng)開(kāi)發(fā)服務(wù)器：

 CD慢速jamstack
蓋茨比發(fā)展

對(duì)于燈塔測(cè)試，我們需要制作生產(chǎn)。 Vercel提供了方便的托管解決方案。安裝并登錄到Vercel CLI：

 NPM安裝-G vercel -cli
動(dòng)詞

這將站點(diǎn)部署到Vercel。默認(rèn)的蓋茨比網(wǎng)站通常很快，在燈塔上得分100。讓我們看看我們?nèi)绾纹茐倪@一點(diǎn)。

CSS放慢速度

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

我們將做出一個(gè)糟糕的選擇：將整個(gè)semanticui框架（包括jQuery（依賴））直接加載到我們的html。這需要復(fù)制默認(rèn)的<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）的時(shí)間大大增加。

營(yíng)銷依賴性放緩

讓我們?cè)?code>src/html.js中添加Google Analytics（分析）和Facebook跟蹤腳本：

 

<img  src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="讓jamstack慢嗎？已接受的挑戰(zhàn)。" >

再次部署：

 vercel- prod

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

放慢圖像

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

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

  返回 （
    <layout>
      {項(xiàng)目}
    </layout>
  ）；
};

再次部署會(huì)導(dǎo)致一個(gè)慢速的站點(diǎn)，燈塔得分為17，TTI為16.5秒。

重點(diǎn)？每個(gè)決定都會(huì)影響績(jī)效。即使在Jamstack上，性能也不是免費(fèi)的。

恢復(fù)速度

Jamstack的主要性能優(yōu)勢(shì)是靜態(tài)文件的邊緣緩存，從而減少了第一個(gè)字節(jié)（TTFB）的時(shí)間。這比服務(wù)器端渲染快。但是，客戶端的優(yōu)化仍然至關(guān)重要。雖然高燈塔得分是可取的，但請(qǐng)記住，它們并不總是完美地反映用戶體驗(yàn)。這項(xiàng)練習(xí)表明，即使有了Jamstack，也需要勤奮的關(guān)注表現(xiàn)。

以上是讓jamstack慢嗎？已接受的挑戰(zhàn)。的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！