1. 렌더링 차단 리소스 제거하기
렌더링 차단 리소스란, 페이지의 렌더링을 차단하는 리소스를 의미합니다. 이러한 리소스를 최적화하면 페이지의 로딩 속도를 개선할 수 있습니다. Lighthouse를 사용하여 웹 사이트를 테스트할 때, 렌더링 차단 리소스 제거를 제안하는 경우가 있습니다. 이를 위해 WordPress에서는 CSS 로딩 최적화 외에도 더 많은 조치를 취할 수 있습니다.
렌더링 차단 리소스를 제거하기 위해서는 우선 렌더링 차단 URL을 파악해야 합니다. Lighthouse나 Page Speed Index와 같은 사이트 퍼포먼스 테스트 진단 결과를 확인하면 FCP(First Contentful Paint)를 차단하는 모든 URL이 나열됩니다.
렌더링 차단 URL을 파악한 후, 다음과 같은 방법으로 렌더링 차단 리소스를 제거할 수 있습니다.
- 중요한 리소스를 인라인으로 전달하기: 중요한 CSS나 JS 파일을 HTML 문서에 직접 포함시켜 인라인으로 전달합니다. 이를 통해 브라우저가 별도의 리소스를 요청하지 않아도 되므로 로딩 속도를 개선할 수 있습니다. 하지만 이 방법은 HTML 문서의 크기를 증가시키므로, 불필요한 리소스는 인라인으로 전달하지 않는 것이 좋습니다.
- 중요하지 않은 리소스를 지연하기: 중요하지 않은 CSS나 JS 파일은 페이지 로딩이 완료된 후 지연시켜 로딩 속도를 개선합니다. 이를 위해 defer나 async 속성을 사용하거나, JavaScript를 사용하여 리소스를 동적으로 로딩하도록 구현할 수 있습니다.
- 사용되지 않는 리소스 제거하기: 사용되지 않는 CSS나 JS 파일은 제거하여 로딩 속도를 개선합니다. 이를 위해 불필요한 코드를 제거하거나, 사용되지 않는 라이브러리를 제거할 수 있습니다.
위와 같은 방법으로 렌더링 차단 리소스를 제거하면, 페이지의 로딩 속도를 개선할 수 있습니다. 하지만 이러한 방법으로 최적화를 진행할 때, 다음과 같은 주의사항이 있습니다.
- 인라인으로 전달하는 리소스가 너무 많은 경우, HTML 문서의 크기가 커져 로딩 속도가 느려질 수 있습니다.
- 중요하지 않은 리소스를 지연시키는 경우, 페이지의 로딩이 완료되기 전까지 해당 리소스를 사용할 수 없으므로, 페이지의 기능이 동작하지 않거나 깨질 수 있습니다.
- 사용되지 않는 리소스를 제거하는 경우, 코드의 유지보수나 확장성을 고려하여, 필요할 때 다시 추가할 수 있도록 백업을 남겨두는 것이 좋습니다.
2. 차세대 형식을 사용해 이미지 제공하기
3. 콘텐츠가 포함된 최대 페인트 이미지 미리 로드
4. 사용하지 않는 자바스크립트 줄이기
'코드스테이츠' 카테고리의 다른 글
| 네트워크 계층 모델 (0) | 2023.03.06 |
|---|---|
| TCP/IP (0) | 2023.03.06 |
| 코드스테이츠 - 6개월간의 목표 와 스케쥴 관리 (2) | 2022.12.15 |
