웹 바이탈
참고:-
누적 레이아웃 이동
벤치마크
LCP:
좋아요 < 2.5초 < 개선 필요 < 4.0초 < 나쁨
FID:
좋아요 < 100M.초 < 개선 필요 < 300M.초 < 나쁨
CLS:-
좋아요 < 0.1초 < 개선 필요 < 0.25초 < 나쁨
*도구:- *
애플리케이션 성능 모니터링을 위한 필드 데이터(실제 사용자 데이터)
FCP 개선:
LCP 개선
<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 개선
FID 개선
아. 모든 것을 끝까지 미루지 마십시오. LCP가 완료되고 사용자가 UI와 상호 작용하려고 한다고 가정해 봅시다. 그러나 우리가 모든 작업을 수행한 것처럼 백그라운드에서 로드할 때까지 브라우저를 미루하므로 좋은 아이디어는 아닙니다. 모두 연기하세요.
즉시 필요하지 않은 js 파일만 연기할 수 있습니다.
참고:-
https://frontendmasters.com/courses/web-perf
위 내용은 웹 애플리케이션 성능 개선의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!