Jamstack을 느리게 만드시겠습니까? 도전이 받아 들여졌습니다.

"Jamstack은 Slowwwww입니다." 당신은 특히 Jamstack의 속도에 대한 명성을 감안할 때 거의 듣지 않습니다. 그러나 Jamstack 사이트조차도 성능 문제를 겪을 수 있습니다. Jamstack이 자동으로 타오르는 성능과 동일하다고 가정하지 마십시오. 현명한 선택은 중요합니다. 잘못된 결정이 Jamstack 사이트의 속도를 무너 뜨릴 수있는 방법을 살펴 보겠습니다.

우리는 의도적으로 성능 병목 현상을 이해하기 위해 느린 개츠비 사이트를 구축 할 것입니다. 지속적인 성능 테스트와 Google Lighthouse를 사용하여 완벽한 등대 점수 100으로 시작하여 의도적으로 Dismal 17로 저하하는 모든 변경 사항을 추적합니다.

느린 Jamstack 사이트 구축

우리는 Gatsby를 사용할 것입니다. 먼저 Gatsby Cli를 설치하십시오.

 NPM 설치 -G 개츠비 클리

새로운 Gatsby 사이트 만들기 :

 개츠비 새로운 슬로우 jamstack

프로젝트 디렉토리로 이동하여 개발 서버를 시작하십시오.

 CD 슬로우 jamstack
개츠비가 개발

등대 테스트의 경우 생산 구축이 필요합니다. Vercel은 편리한 호스팅 솔루션을 제공합니다. Vercel Cli에 설치하고 로그인하십시오.

 NPM 설치 -G vercel -cli
Vercel

이것은 사이트를 Vercel에 배포합니다. 기본 Gatsby 사이트는 일반적으로 등대에서 100 점을 얻습니다. 우리가 어떻게 그것을 방해 할 수 있는지 봅시다.

CS로 속도가 느려집니다

CSS 프레임 워크는 강력하지만 잘못된 프레임 워크를 선택하거나 비효율적으로 사용하면 성능을 상하게 할 수 있습니다. 필요한 스타일 만로드하기 위해 모듈 식 프레임 워크 또는 CSS-in-JS를 선택하십시오.

우리는 불쌍한 선택을 할 것입니다 : jQuery (종속성)를 포함한 전체 Semanticui 프레임 워크를 직접로드합니다. 우리의 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 웹 로그 분석 및 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 에서 index.js 에 100 개의 이미지를 추가하여 최적화없이 직접로드합니다.

 const indexpage = () => {
  const items = array.from ({length : 100}, (_, i) => (
    <img key="{i}" src="%7B%60https://placeimg.com/200/200/%24%7Bi%7D%60%7D" alt="Jamstack을 느리게 만드시겠습니까? 도전이 받아 들여졌습니다.">
  ));

  반품 (
    <layout>
      {항목}
    </layout>
  );
};

다시 배치하면 등대 점수는 17 점, 16.5 초입니다.

요점? 모든 결정은 성과에 영향을 미칩니다. Jamstack에서도 성능은 무료가 아닙니다.

회복 속도

Jamstack의 주요 성능 장점은 정적 파일의 Edge 캐싱으로서 첫 바이트 (TTFB)로 시간을 줄입니다. 이것은 서버 측 렌더링보다 빠릅니다. 그러나 클라이언트 측 최적화는 여전히 필수적입니다. 높은 등대 점수가 바람직하지만 항상 사용자 경험을 완벽하게 반영하지는 않습니다. 이 연습은 Jamstack에서도 성능에 대한 부지런한주의가 필요하다는 것을 보여줍니다.

위 내용은 Jamstack을 느리게 만드시겠습니까? 도전이 받아 들여졌습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!