✍️ 목차
1. 랜더링 차단 리소스를 제거하면 페이지 성능에 미치는 영향
2. 랜더링 차단 리소스 제고하는 방법
2-1 리소스 최소화
2-2 비동기 및 지연 로딩
2-3 리소스 조건부 로딩
2-4 리소스 결합 및 최적화
2-5 서버 압축 및 CDN 사용
3. Wordpress(또는 기타 CMS) 사용자의 경우
3-1 플러그인 설치 및 활성화
3-2 CSS 및 Javascript 최적화
3-3 랜더링 차단 리소스 관리
3-4 특별한 설정 활성화
3-5 사용자 지정 및 테스트
렌더링 차단 리소스는 온라인 쇼핑몰의 로딩 속도를 저하시키는 주요 요인입니다. 이는 고객이 쇼핑몰을 빠르게 로드하지 못하게 하며, 반응성이 느려짐으로써 사용자 경험을 저하시킵니다. 따라서, 웹성능을 향상시키기 위해 필요하지 않은 리소스를 제거하는 것이 중요합니다.
온라인 쇼핑몰 페이지를 열 때, 페이지의 내용과 디자인을 표시하기 위해 여러 요소(이미지, 스타일 시트, 스크립트 등)를 다운로드해야 합니다. 하지만 이 중에서도 페이지 표시에 직접적으로 필요하지 않거나 로딩 속도를 느리게 하는 리소스가 있을 수 있습니다.
예를 들어, 사용자가 현재 보고 있는 화면에 나타나지 않는 이미지나 스크립트 파일은 로딩되지 않아도 되는데도 불구하고 불필요하게 다운로드될 수 있습니다. 이러한 불필요한 리소스를 제거하면 웹 페이지가 더 빨리 표시되며, 쇼핑몰 속도를 향상시키고 사용자 경험을 개선할 수 있습니다.
이를 실현하기 위해 웹 개발자는 페이지에서 사용되는 리소스를 분석하고, 필요하지 않은 것들을 삭제하거나 최적화하는 작업을 수행합니다. 이러한 최적화 작업은 온라인 쇼핑몰의 웹성능을 향상시키는 데 큰 도움이 됩니다.
💡 렌더링 차단 리소스를 제거하면 페이지 성능에 어떤 영향을 줍니까?
브라우저가 페이지를 로드할 때마다 페이지의 HTML 코드를 한 줄씩 구문 분석합니다.
그렇게 하는 동안, 달리 지정되지 않는 한, HTML 코드의 나머지 부분으로 이동하기 전에 다운로드, 구문 분석 및 실행되는 다양한 스크립트와 태그가 나타날 수 있습니다.
렌더링 차단 리소스는 브라우저가 렌더 프로세스를 시작하는 것을 지연시켜 페이지의 첫 번째 페인트를 늦출 수 있습니다.
여러 개의 렌더링 차단 리소스는 방문자가 페이지에서 의미 있는 내용(빈 페이지 또는 적게 채워진 페이지와 같은)을 보기까지 오랜 시간을 기다려야 한다는 것을 의미합니다.
이로 인해 방문자는 페이지가 너무 오래 걸린다는 인상을 받아 새로 고침, 뒤로 가기 버튼 누르기 또는 전체 종료를 할 가능성이 있습니다.
페이지 시작 부분에 배치된 스크립트 및 태그는 지연/비동기식으로 로드되거나 방문자가 페이지에서 로드되는 내용을 더 빨리 볼수록 성능(또는 대부분의 경우 성능 인식)이 향상되므로 모두 제거해야 합니다.
렌더링 차단 리소스를 최대한 최소화하면 점진적 로딩을 촉진 하여 첫 번째 페인트가 더 빨리 발생하도록 하고 방문자가 사이트에서 무언가를 하고 있다는 것을 인식할 수 있습니다.
많은 경우에, 점진적 로딩은 방문자들이 페이지에 머무를 수 있도록 도움이 되는 시각적 피드백을 제공합니다.
추가적으로 렌더링 차단 리소스를 제거하면 웹 페이지의 성능에 다음과 같은 긍정적인 영향을 미칩니다.
● 빠른 로딩 속도
렌더링 차단 리소스를 제거하면 웹 페이지가 더 빠르게 로드됩니다. 이는 사용자가 페이지를 더 빨리 볼 수 있게 해주며, 웹 페이지의 초기 로딩 시간을 단축합니다.
● 개선된 사용자 경험
웹 페이지가 빠르게 로드되면 사용자는 페이지가 더 빨리 반응하고 내용을 쉽게 볼 수 있습니다. 이는 사용자의 만족도를 높이고 이탈률을 줄여줍니다.
● 검색 엔진 최적화(SEO)
렌더링 차단 리소스를 최적화하면 웹 페이지의 성능이 향상되어 검색 엔진 순위에도 긍정적인 영향을 미칠 수 있습니다. 검색 엔진은 빠른 페이지를 선호하며, 더 높은 순위를 부여할 가능성이 있습니다.
● 절약된 대역폭
렌더링 차단 리소스를 최적화하면 대역폭을 절약할 수 있습니다. 더 빨리 로딩되는 페이지는 사용자의 인터넷 연결 비용을 절약하고 모바일 기기에서도 더 빠르게 로드됩니다.
● 높은 이용률
웹 페이지의 성능이 향상되면 사용자가 웹 사이트를 더 오래 이용할 가능성이 높아집니다. 이는 사용자가 더 많은 콘텐츠를 소비하고 서비스를 이용하게 할 수 있습니다.
💡 렌더링 차단 리소스를 제거하는 방법은 무엇입니까?
1. 리소스 최소화
캐싱 활용 : 이미지, 스타일 시트, 스크립트 등의 리소스를 브라우저에 캐싱하고, 캐시를 활용하여 페이지 재방문 시 리소스를 다시 다운로드하지 않도록 설정합니다.
CSS 및 JavaScript 최소화 : 불필요한 줄바꿈, 공백, 주석 등을 제거하고, 코드를 압축하여 파일 크기를 줄입니다.
2. 비동기 및 지연 로딩
비동기 로딩 : 스크립트 파일을 비동기로 로드하여 다운로드와 페이지 렌더링이 병렬로 진행되도록 합니다.
지연 로딩 : 페이지 상의 필수적이지 않은 리소스(예: 아래쪽에 위치한 이미지)를 게으르게 로딩하도록 설정합니다.
3. 리소스 조건부 로딩
미디어 쿼리 : 특정 미디어 쿼리를 사용하여 필요한 스타일 시트를 로드하거나 제거합니다.
4. 리소스 결합 및 최적화
리소스 결합 : 여러 CSS 및 JavaScript 파일을 하나로 결합하여 파일 요청 수를 줄이고 다운로드 시간을 단축합니다.
이미지 스프라이트 : 여러 이미지를 하나의 이미지 스프라이트로 결합하여 이미지 다운로드를 최적화합니다.
5. 서버 압축 및 CDN 사용
서버 압축 : 웹 서버에서 리소스를 압축하여 파일 크기를 줄입니다.
CDN 사용 : 이미지 및 스타일 시트와 같은 리소스를 CDN(Content Delivery Network)을 통해 전송하여 빠르게 제공합니다.
💡 WordPress(또는 기타 CMS) 사용자의 경우
WordPress나 기타 CMS 사용자는 렌더링 차단 리소스를 효과적으로 제거하고 페이지 성능을 최적화하기 위해 플러그인 또는 확장 프로그램을 사용할 수 있습니다. 이러한 플러그인은 렌더링 차단 문제를 해결하는 데 도움이 되며, 사용자에게 페이지 로딩 속도를 빠르게 제공합니다.
예시: WP Rocket 플러그인을 사용한 WordPress 최적화
1) 플러그인 설치 및 활성화
먼저 WordPress 대시보드로 이동하여 WP Rocket 플러그인을 설치하고 활성화합니다.
2) CSS 및 JavaScript 최적화
WP Rocket은 CSS와 JavaScript 파일을 압축하고, 필요한 경우 비동기식으로 로드하거나 연기합니다. 이렇게 하면 렌더링 차단 리소스를 최소화할 수 있습니다.
3) 렌더링 차단 리소스 관리
WP Rocket과 같은 플러그인은 특정 리소스에 대한 defer 또는 async 속성을 설정하고, 페이지의 script 및 link 태그를 최적화합니다.
4) 특별한 설정 활성화
웹 성능을 향상시키기 위해 WP Rocket과 같은 플러그인의 특별한 설정을 활성화합니다. 이러한 설정은 웹 성능 모범 사례를 따라갈 수 있도록 도와줍니다.
5) 사용자 지정 및 테스트
플러그인을 사용할 때, 웹 사이트의 기능이 영향을 받지 않았는지 확인하고 테스트합니다. 또한, defer 또는 async 태그를 특별히 필요한 리소스에 적용해야 할 수 있으므로 관련 설정을 조정하고 테스트합니다.
플러그인을 사용하면 웹 사이트의 렌더링 차단 리소스를 효과적으로 관리하고 최적화할 수 있습니다. 이는 웹 페이지의 성능을 향상시키고 사용자에게 더 나은 경험을 제공하는 데 도움이 됩니다
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] JavaScript 축소 (0) | 2024.02.28 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] 사용하지 않는 CSS 줄이기 (0) | 2024.02.28 |
| [온라인 쇼핑몰 속도 최적화] 오프스크린 이미지 지연 (0) | 2024.02.28 |
| [온라인 쇼핑몰 속도 최적화] 효율적인 캐시 정책으로 정적 자산 제공 (0) | 2024.02.17 |
| [온라인 쇼핑몰 속도 최적화] CDN(콘텐츠 전송 네트워크) 사용 (0) | 2024.02.17 |