웹 페이지의 성능을 최적화하는 것은 사용자 경험을 향상하고 검색 엔진 순위에 긍정적인 영향을 미칩니다. 웹 페이지가 빠르다. 느리다. 이 개념은 상대적이라 정량적으로 측정할 수 있는 수치 데이터가 있어야 개선되었는지 판단할 수 있습니다. Google의 PageSpeed Insights는 모바일 환경과 데스크탑 환경에서 웹 사이트의 로딩 속도 및 성능을 평가하고 속도를 개선할 수 있는 구체적인 조언을 제공합니다. 본 글에서는 PageSpeed Insights 분석 결과를 기반으로 웹 페이지 개선 방법에 대해서 설명하겠습니다.
본 글은 워드프레스 기반의 웹 사이트 성능 향상을 목적으로 하기 때문에 nginx 등의 서버 설정 및 Cache 플러그인을 사용한 방법만 가이드 합니다. 직접 JavaScript 또는 CSS 수정하는 것은 가이드 하지 않습니다.
PageSpeed Insights 사용법
PageSpeed Insights 사용법은 간단합니다. PageSpeed Insights 웹 사이트에 접속 후 분석하고 싶은 웹 사이트의 URL을 입력하고 분석 버튼을 클릭하면 몇 초 내로 웹 사이트의 성능 점수와 개선 방법을 확인할 수 있습니다. 이 점수는 0에서 100까지의 범위로 점수가 높을수록 성능이 좋은 것을 의미합니다. 점수는 로딩 시간, 상호작용까지의 시간 등 다양한 요소를 기반으로 합니다.
문제 식별
PageSpeed Insights의 진단 항목에서 웹 페이지의 로딩 속도를 늦추는 요소를 식별하고 각 문제에 대해 구체적인 해결 방안을 제시합니다.
텍스트 압축 사용
압축되지 않은 텍스트 기반 리소스를 나열합니다. 텍스트 기반 리소스를 압축하여 네트워크 구간의 사용량을 줄여 속도를 개선할 수 있습니다. 가능한 절감 효과는 gzip으로 인코딩 할 때 절감되는 효과로 Brotli를 사용하면 더 많은 비용을 절감할 수 있습니다.
페이지가 압축 되었는지 확인하는 방법은 요청 헤더 Content-Encoding 에서 확인할 수 있습니다.
기본 스레드 작업 최소화하기
카테고리 별로 소요 시간이 측정됩니다. 각 카테고리 별로 소요 시간을 줄이는 것을 목표로 하고 있으나 Script 최적화 및 제거와 같이 직접 파일을 수정해야 하기 때문에 크게 권장하지 않습니다. 일부 항목에 대해서 Cache 플러그인에서 축소 등으로 효과를 볼 수 있습니다.
타사 코드의 영향을 줄임
Google API와 같이 서드 파티 스크립트 폰트 등이 포함된 경우 발생합니다.
렌더링 차단 리소스 제거하기
리소스가 화면 그리는 것을 차단하고 있습니다. 중요하지 않는 Script 및 CSS에 대해서 Cache 플러그인을 통해 지연 실행하여 속도를 개선할 수 있습니다.
사용하지 않는 CSS 줄이기
사용하지 않는 CSS를 줄이거나 Cache 플러그인을 통해 지연 실행하여 속도를 개선할 수 있습니다.
콘텐츠가 포함된 최대 페인트 요소
LCP(Largest Contentful Paint) 항목으로 가장 큰 콘텐츠가 화면에 표시되는 데 까지 걸리는 시간입니다. 리소스의 크기를 줄이거나 CDN을 사용하여 네트워크 거리를 줄여 시간을 단축할 수 있습니다.
차세대 형식을 사용해 이미지 제공하기
압축률이 높은 WebP 및 AVIF와 같은 이미지 형식을 사용하여 리소스 크기를 줄여 속도를 개선합니다. 워드프레스 플러그인을 사용하여 이미지 파일을 WebP로 변환할 수 있습니다.
이미지 크기 적절하게 설정하기
적절한 크기의 이미지를 사용하여 모바일 데이터를 절약하고 로드 시간을 단축할 수 있습니다.
효율적인 캐시 정책을 사용하여 정적인 애셋 제공하기
캐시 기간을 적절하게 조정하여 효율적으로 캐시를 사용하도록 합니다. 사실 변경하는 일은 거의 없습니다.
사용하지 않는 자바스크립트 줄이기
사용하지 않는 Script를 줄이거나 Cache 플러그인을 통해 지연 실행하여 속도를 개선할 수 있습니다.
문제 개선
PageSpeed Insights에서 제공하는 권장사항을 적용하여 성능을 개선합니다. 성능을 개선하는 방법은 서버 설정을 변경하는 방법과 W3 Total Cache 등의 캐쉬 플러그인을 사용하는 방법이 있습니다.
개선 사항 적용 후 재 평가
웹 페이지에 개선 사항을 적용한 후에는 변경 사항이 실제로 성능 개선에 긍정적인 영향을 미쳤는지 확인하기 위해 PageSpeed Insights를 다시 사용해 평가해 보아야 합니다. 이 과정에서 성능 점수가 향상되었는지 확인하고, 추가 개선이 필요한 영역이 있는지 검토할 수 있습니다.
결론
PageSpeed Insights를 사용하여 웹 페이지의 성능을 분석하고 개선하는 과정을 지속적으로 해야 합니다. 사용자 경험을 향상시키고, 검색 엔진 최적화(SEO)를 위해서는 웹 페이지의 로딩 속도를 주기적으로 모니터링하고 개선하는 것이 중요합니다. 이러한 노력은 방문자의 만족도를 높이고, 웹사이트의 전반적인 성공에 기여할 것입니다.