WordPress 웹사이트 성능 향상을 위한 고급 팁(동영상 포함)

최종 업데이트 - 2021년 7월 26일

웹사이트의 성능은 직접 및 간접 요인의 긴 목록에 의해 영향을 받습니다. 이미지 크기에서 캐싱 설정에 이르기까지 각 요소는 핵심 사용자 경험에 기여합니다.

이러한 각 요인의 영향을 분석하는 것은 어렵고 이들 사이의 균형을 맞추는 것은 훨씬 더 어렵습니다. 그러나 고맙게도 온라인 도구를 사용하여 WordPress 웹 사이트의 배후에서 실제로 일어나는 일에 대한 추측을 제거하고 성능을 향상시키기 위한 목표가 있고 효과적인 조치를 취할 수 있습니다.

이 기사에서는 WordPress 웹 사이트 성능을 개선하기 위해 따를 수 있는 다양한 고급 팁에 대해 알아봅니다.

WordPress 웹사이트 성능을 위한 도구

웹 사이트 소유자 또는 관리자가 WordPress 웹 사이트의 성능 감사를 수행하려는 경우 가장 큰 문제는 전체 시스템이 뒤처지는 부분을 감지하는 것입니다. 결국, 모든 단일 플러그인, 테마, WordPress 설정 및 성능 렌즈를 사용하여 코드를 검토하는 것은 시간이 걸리고 비효율적일 수 있습니다.

무엇을 고칠지 모를 때는 고칠 방법도 모릅니다.

그렇기 때문에 Google의 PageSpeed ​​Insights 및 GTmetrix 와 같은 온라인 도구를 사용 하여 웹사이트 성능에 대한 안정적이고 유용한 데이터를 수집하는 것을 고려해야 합니다. 작동 방식은 다음과 같습니다.

1. 이러한 도구는 URL만 사용하여 웹사이트 성능에 기여하는 모든 요소를 ​​분석하고 점수 또는 등급을 지정합니다.

2. 이 두 도구 모두 3가지 주요 측면(또는 핵심 웹 필수 요소)에서 WordPress 웹 사이트 성능을 테스트합니다.

• 가장 큰 콘텐츠가 포함된 페인트 – 뷰포트 내에서 볼 수 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고하여 로딩 성능을 측정합니다. 이것은 처음 2.5초 이내에 이상적으로 발생해야 합니다.
• 첫 번째 입력 지연 – 사용자의 첫 번째 상호 작용과 브라우저의 첫 번째 이벤트 처리기 처리 사이의 시간을 측정하여 상호 작용성을 측정합니다. 이 메트릭은 이상적으로는 100밀리초 미만이어야 합니다.
• 누적 레이아웃 이동 – 페이지 수명 동안 발생하는 예기치 않은 레이아웃 이동을 고려하여 시각적 안정성을 측정합니다. 귀하의 페이지는 0.1 미만의 CLS 점수를 얻기 위해 노력해야 합니다.

3. 세 가지 핵심 웹 바이탈은 몇 가지 요인에 의해 직간접적으로 영향을 받습니다. 따라서 이 도구는 웹사이트 성능을 개선하기 위해 집중할 수 있는 요소도 제안합니다.

물론 이러한 제안은 웹사이트마다 다릅니다. 그러나 웹 사이트 성능에 큰 영향을 미치는 몇 가지 자주 나타나는 요소를 항상 알 수 있습니다. 살펴보겠습니다.

키 요청 미리 로드

사전 로드는 웹 페이지를 로드하는 데 곧 필요할 리소스 또는 파일에 대한 힌트를 웹 브라우저에 제공하는 시스템입니다. 키 요청을 미리 로드하면 브라우저가 다른 작업을 수행하는 동안 이러한 파일과 리소스가 동시에 다운로드됩니다.

이것은 페이지 헤더의 <link> 요소에 rel=”preload” 속성을 추가하여 수행됩니다. Pre* Party Resource Hint 와 같은 플러그인 을 사용하면 주요 요청을 쉽게 미리 로드할 수 있습니다.

PageSpeed ​​Insights 보고서 페이지에서 "키 요청 미리 로드" 제안을 확장합니다. 그런 다음 제공된 리소스에 대한 링크를 복사합니다.

다음으로 WordPress 대시보드에서 Pre* Party > Insert Hint로 이동합니다. 복사한 링크를 URL 필드에 붙여넣고 "미리 로드" 옵션을 활성화합니다. 그런 다음 리소스 힌트 삽입을 클릭합니다.

PageSpeed ​​Insights 보고서에 표시되는 모든 리소스에 대해 프로세스를 반복합니다.

JavaScript 및 CSS 최적화

JavaScript와 CSS는 웹 페이지 구조의 중요한 부분을 구성합니다. 따라서 웹 페이지를 렌더링하는 데 필요한 만큼 웹 페이지 속도를 줄이는 데에도 기여할 수 있습니다. 따라서 가능한 한 사용을 최적화하는 것이 중요합니다.

PageSpeed ​​Insights에서 일반적으로 다음 4가지 JavaScript 및 CSS 최적화 제안을 볼 수 있습니다.

• 사용하지 않는 JavaScript 제거 – 사용하지 않는 JavaScript를 제거하여 네트워크 활동에 사용되는 바이트를 줄입니다.
• 사용하지 않는 CSS 제거 – 스타일시트에서 죽은 규칙을 제거하고 스크롤 없이 볼 수 있는 콘텐츠에 사용되지 않는 CSS 로드를 연기하여 네트워크 활동에 사용되는 불필요한 바이트를 줄입니다.
• JavaScript 축소 – JavaScript 파일을 축소하면 페이로드 크기와 스크립트 구문 분석 시간을 줄일 수 있습니다.
• CSS 축소 – CSS 파일을 축소하면 네트워크 페이로드 크기를 줄일 수 있습니다.
• 렌더링 차단 리소스 제거 – 리소스가 페이지의 첫 번째 페인트를 차단하고 있습니다. 중요한 JS/CSS를 인라인으로 제공하고 중요하지 않은 모든 JS/스타일을 연기하는 것을 고려하십시오.

Asset Cleanup 플러그인 을 사용하여 이러한 문제를 쉽게 해결할 수 있습니다. 설치 후 Asset Cleanup > CSS/JS Manager 섹션으로 이동합니다. 여기에서 특정 페이지 또는 전체 웹사이트에서 특정 CSS 및 JavaScript 파일을 제거하도록 선택할 수 있습니다. 플러그인을 사용하면 개별 테마, 플러그인, WordPress 코어 및 타사 소스의 스크립트를 최적화할 수 있습니다.

"설정" 섹션에서 CSS 및 JavaScript를 축소하는 추가 옵션을 찾을 수 있습니다. 또한 아래로 스크롤하여 인라인 및 연기 옵션을 활성화하여 렌더링 차단 리소스를 제거할 수 있습니다.

초기 서버 응답 시간 단축

사용자가 브라우저의 URL로 이동하면 해당 콘텐츠를 가져오기 위해 브라우저에서 네트워크 요청이 전송됩니다. 서버가 요청을 수신하고 페이지 콘텐츠를 반환합니다.

이 단계에서 서버는 요청된 모든 콘텐츠가 포함된 페이지를 반환할 수 있도록 많은 시간이 소요되는 기능을 수행해야 할 수 있습니다. 사용자가 페이지 로드를 기다리는 데 소비하는 시간을 줄이는 한 가지 방법은 이 프로세스가 가능한 한 빨리 완료되도록 서버를 최적화하는 것입니다.

PageSpeed ​​Insights는 다음을 제안합니다.

• Astra 및 GeneratePress와 같은 최적화된 테마 사용.
• W3 Total Cache와 같은 최적화된 플러그인 사용.
• 서버 업그레이드.

이미지 최적화

이미지는 평균 WordPress 페이지의 페이지 무게의 절반 이상을 차지합니다. 게다가 수백 개의 최적화되지 않은 이미지가 게시물과 페이지에 퍼져 있으면 웹사이트 속도가 느려질 수 있습니다.

크기, 크기, 제공 위치 및 형식과 같은 다양한 이미지 속성을 조작하여 이미지가 WordPress 웹 사이트 성능에 미치는 부정적인 영향을 최소화할 수 있습니다. 또한 이미지를 업로드하기 전에 이러한 변경 사항 중 일부를 수행하거나 플러그인을 사용하여 프로세스를 자동화할 수 있습니다.

다음과 같이 이미지 최적화 기술 중 일부를 사용할 수 있습니다.

• 이미지 압축 – 카메라 세부 정보 및 메타데이터와 같은 불필요한 정보를 제거하여 품질에 영향을 주지 않고 파일 크기를 줄입니다.
• 이미지 크기 조정 – 웹 페이지에 필요한 이미지 해상도로 줄입니다.
• 이미지 CDN – 서버-사용자 간극을 줄여 이미지를 더 빠르게 제공합니다.
• 최적의 이미지 형식 - 투명 배경, 불투명도, 로고 및 아이콘의 경우 PNG를 선택하십시오. 다른 모든 작업에는 JPEG를 사용하세요.

자세한 내용은 해당 주제에 대한 심도 있는 이미지 최적화 기사 를 참조하세요.

브라우저 캐싱

브라우저 캐싱은 페이지당 요청 수를 줄여 서버 부하를 줄이는 데 도움이 될 수 있습니다. 따라서 이미지, CSS, JavaScript 등과 같은 캐시 가능한 리소스를 매번 다운로드할 필요가 없습니다. W3 Total Cache 와 같은 브라우저 캐싱 플러그인을 사용 하여 WordPress 웹사이트에서 브라우저 캐싱을 활용할 수 있습니다.

플러그인을 설치한 후 설정 페이지로 이동합니다. 여기에서 브라우저 캐시에 대한 옵션을 활성화해야 합니다. 다음으로 사이드바에서 브라우저 캐시 설정으로 이동합니다. 그리고 만료 헤더, 캐시 제어 헤더를 활성화하고 e-태그 옵션을 설정해야 합니다.

변경한 경우 설정을 저장합니다.

주제에 대해 자세히 알아보려면 WordPress 브라우저 캐싱 에 대한 기사를 확인하십시오 .

결론

이 외에도 웹사이트의 PageSpeed ​​Insights 보고서에는 개선을 위한 다른 제안이 많이 있을 수 있습니다. 그러나 보고서 페이지에서 제안을 확장하여 구현에 대해 자세히 알아볼 수 있습니다. 여전히 질문이 있는 경우 아래 의견을 통해 언제든지 문의해 주세요.

비디오 버전을 선호하는 경우 아래 비디오를 확인하십시오.

추가 읽기:

• 지금 WooCommerce 웹사이트의 속도를 높이는 5가지 간단한 단계(동영상 포함)
• 사이트 성능 향상을 위한 최고의 무료 CDN 서비스
• 7단계로 WordPress 웹사이트를 구축하는 방법
• GTmetrix를 사용하는 방법?