웹 애플리케이션 성능 개선

웹 바이탈

1. FCP(First Contentful Paint)(빠른 응답)
2. LCP(콘텐츠가 포함된 최대 페인트) (요점 파악) 빅이미지/기사
3. CLS(누적 레이아웃 이동) (요소 이동 안 함)
4. 첫 번째 입력 지연(너무 많은 데이터를 로드하지 마세요) 백그라운드에서 브라우저가 Asyc 작업을 처리하므로 지연이 발생합니다

참고:-

누적 레이아웃 이동

1. 사용자가 보는 문서의 전체 수명 동안 페이지 요소에 영향을 미치는 움직임.
2. 또한 레이아웃이 변경되고 레이아웃, 페인트 및 합성을 다시 수행하므로 비용이 많이 듭니다. 또한 손상된 픽셀이 있으면 다시 렌더링될 것이라고 게시하세요

벤치마크

LCP:

좋아요 < 2.5초 < 개선 필요 < 4.0초 < 나쁨

FID:

좋아요 < 100M.초 < 개선 필요 < 300M.초 < 나쁨

CLS:-

좋아요 < 0.1초 < 개선 필요 < 0.25초 < 나쁨

*도구:- *

애플리케이션 성능 모니터링을 위한 필드 데이터(실제 사용자 데이터)

1. Light House(로컬 성능 모니터링은 시스템 기본 설정에 따라 다릅니다)
2. https://developer.chrome.com/docs/crux/dashboard/
3. https://www.lightest.app/ (유사 애플리케이션과 비교)
4. https://www.performancebudget.io/

FCP 개선:

1. 사용자가 서버에서 멀리 떨어져 있다면 CDNS를 사용하는 것이 좋습니다.
2. 효과가 크다(gzip도 고려할 수 있음)

LCP 개선

1. 나중에 리소스 연기(스크립트에서 연기/비동기)

<script src="/assets/js/abc.js" defer></script>
// For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element.





</p>
<p><strong>2. 이미지 최적화(매우 중요)</strong><br>
  이와 함께 위에서 언급한 것처럼 우리는 조금 후자를 로드하지만 일부 이미지는 2Mb 크기이므로 필요하지 않습니다. </p>

<p>두 가지 접근 방식이 있습니다</p>

<p>아. 이미지 압축기(tinyPng) 사용(imagemin npm 패키지)<br>
비. 아래에서 언급한 것처럼 다양한 반응형 디자인을 위해 일종의 srcset을 사용하세요<br>
</p>

<pre class="brush:php;toolbar:false"><img
data-src="pic-1200.min.png"
src="" 
data-srcset=""
data-srcset="pic-600.png 600w, pic-900.png 900w, pic-1200.png 1200w"
sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, 1200px"
/>

3. 요청 오버헤드 감소

사전 로드 및 사전 연결

<link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preload" href="/assets/css/index.css" />

CLS 개선

1. 요소를 이동하지 마세요. 즉, 경험칙
2. 광고를 위해 이것이 할당된 div의 최대 높이임을 언급해야 합니다.
3. 하단에 고정할 수 있는 쿠키 배너를 가정해 보겠습니다. 그러면 상단에 표시하는 것에 비해 크게 향상될 것이며 사용자가 수락을 클릭하고 사라질 때 레이아웃 구조는 영향을 받지 않습니다.
4. 0.01(0.059)(CLS)(LightBox)를 타겟팅할 수 있습니다
5. 이미지 태그의 경우 너비 및 높이 속성을 지정할 수 있습니다.

FID 개선

아. 모든 것을 끝까지 미루지 마십시오. LCP가 완료되고 사용자가 UI와 상호 작용하려고 한다고 가정해 봅시다. 그러나 우리가 모든 작업을 수행한 것처럼 백그라운드에서 로드할 때까지 브라우저를 미루하므로 좋은 아이디어는 아닙니다. 모두 연기하세요.

즉시 필요하지 않은 js 파일만 연기할 수 있습니다.

참고:-
https://frontendmasters.com/courses/web-perf

위 내용은 웹 애플리케이션 성능 개선의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!