SEB_25_Optimization

Notice

Recent Posts

Tags more

Archives

관리 메뉴

FE

SEB_FE

zizonemoi 2022. 10. 7. 14:15

✔️ Lighthouse 사용해서 Performance의 Opportunities 항목 확인 후 해결 방안을 확인

사이트 : 시몬스

모바일로 검사했을 때의 모습이다.

Opportunities : 이 제안들은 페이지를 더 빠르게 로드하는 방법을 제시한다.

🔴 Serve images in next-gen formats ➡ 차세대 형식의 이미지 제공

🔴 Efficiently encode images ➡ 이미지를 효율적으로 인코딩

🔴 Reduce unused JavaScript ➡ 안쓰는 JS 줄이기

🔴 Eliminate render-blocking resources ➡ 랜더링 방해되는 자원 제거

🟠 Preconnect to required origins ➡ 필요한 원본에 미리 연결

🟠 Minify JavaScript ➡ JS 경량화

🟠 Reduce unused CSS ➡ 안쓰는 CSS 줄이기

🔴 해결법

🔴 Serve images in next-gen formats ➡ 차세대 형식의 이미지 제공

JPEG 또는 PNG 형식의 이미지를 WebP등의 차세대 이미지 처리 및 압축 형식으로 이미지를 제공
대부분의 경우 WebP 이미지를 제공하면 이미지 파일 크기를 25-50% 줄일 수 있다
WebP 이미지를 제공하는 방법
1. 수동으로 이미지를 WebP 형식으로 변환
2. Photoshop 플러그인 사용
3. 자바스크립트 사용 (Node.js 같은 JavaScript 런타임 환경 이용 JPEG, PNG 이미지를 WebP로 변환 가능)
출처 : https://gtmetrix.com/serve-images-in-next-gen-formats.html

🔴 Efficiently encode images ➡ 이미지를 효율적으로 인코딩

🔴 Reduce unused JavaScript ➡ 안쓰는 JS 줄이기

🔴 Eliminate render-blocking resources ➡ 랜더링 방해되는 자원 제거

렌더링 차단 리소스로 지정되는 URL
- <script>태그
  1. <head>문서에 있을 때
  2. defer 속성이 없을 때
  3. async 속성이 없을 때
- <link rel ="stylesheet">태그
  1. disabled 속성이 없는 경우
  2. media 속성이 사용자의 기기와 구체적으로 일치하지 않을 때
렌더링 차단 리소스 제거하는 방법
- Render-blocking scripts 제거
  1. 필수적인 코드는 HTML 내부의 inline script 태그에 넣기
  2. 필수적이지 않은 URL은 script 태그에 async 또는 defer속성 넣기
  3. 사용되지 않는 코드라면 삭제
- Render-blocking stylesheets 제거
  1. first paint에 필수적인 스타일을 HTML head 태그 내부에 style 태그를 생성하고 넣기
  2. 나머지 스타일 요소를 link태그에 preload를 사용하여 비동기적으로 불러오기
출처 1 : https://polarb-raf.dev/%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0-1-eliminate-render-blocking-resources
출처 2 : https://web.dev/render-blocking-resources/

'SEB_FE' Related Articles

Comments