让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中文网其他相关文章！