워드프레스 페이지 속도를 향상시키는 방법 13가지

마지막으로 앉아서 웹사이트가 로드되기까지 몇 초 이상 기다린 것은 언제였습니까? 기억이 안 나죠? 걱정하지 마십시오. 주의 집중 시간이 짧아지는 것이 아닙니다. 뭐, 그 이유만 은 아닙니다 . 그것은 또한 더 빠른 페이지 속도가 지난 20여 년 동안 단순히 좋은 기능 이상으로 자리 잡았기 때문입니다. 사용자의 기대입니다.

앉아서 이미지를 한 줄 한 줄, 픽셀 단위로 보는 것이 표준이던 시절이 있었습니다. 웹사이트가 완전히 로드되는 데 몇 초, 심지어 1분 이상이 걸렸던 곳. 그리고 인터넷이 새롭고 모든 것이 느려서 모두의 사이트 가 느려서 괜찮았습니다. 더 이상 그렇지 않습니다. 사이트를 로드하는 데 시간이 너무 오래 걸리면 더 빠른 사이트로 방문자를 잃을 위험이 있으며 트래픽 손실로 인해 충돌이 발생할 수도 있습니다. 웹 페이지 로드 시간을 단축하는 방법을 배우면 이를 방지할 수 있습니다.

이 글 아래에서 워드프레스 페이지 속도를 향상시키는 방법 13가지를 설명하고 있습니다. 계속 스크롤하여 확인해보세요.

콘텐츠 요약: 보이기

페이지 속도가 중요한 이유

당연히 주목해야 할 부분이라면 순위 요인이겠죠? 그 정도는 아닙니다. Google에 관한 한 페이지 속도는 실제로 작은 순위 요소에 불과합니다. 얼마나 작습니까? Google 웹마스터 트렌드 분석가인 Gary Illyes는 이를 “위대한 사람”이라고 부르기까지 했습니다.

그러나 순위는 제쳐두고 페이지 속도는 사용자 경험의 중요한 부분이므로 느린 페이지는 이탈률을 높이고 전환을 줄일 수 있습니다.

이는 단순한 추측이 아닙니다. Portent는 10개 사이트에 걸쳐 26,000개의 방문 페이지를 분석한 결과 0초에서 5초 사이에서 로드 시간이 1초 추가될 때마다 전환율이 평균 4.42%씩 떨어지는 것을 발견했습니다.

이제 나는 당신이 무슨 생각을 하는지 압니다. 좋은 페이지 로드 속도란 무엇입니까? Google은 사이트가 3G 연결에서 5초 이내에 로드되어야 한다고 말합니다.

또한 Google은 방문자 유지 측면에서 빠를수록 좋다는 것을 발견했습니다. 페이지 로딩 시간이 1초에서 3초로 늘어남에 따라 방문자가 이탈할 확률은 32% 증가합니다.

마찬가지로, Portent의 데이터에 따르면 로드 시간의 처음 5초가 전환율에 가장 큰 영향을 미쳤습니다.

즉, 5초 이하가 좋지만 3초 이하가 우수 합니다.

사이트를 Google 추천으로 가져와 사용자 경험을 개선하고 방문자 및 가장 중요한 전환을 잃지 않도록 할 수 있습니다. 웹 페이지 로드 시간을 단축하는 방법을 배우기만 하면 됩니다.

워드프레스 웹 페이지 로드 시간을 단축하는 방법 13가지

1. W3C 마크업 검증 서비스로 코드 검증

인코딩은 웹 페이지의 순위에 직접적인 영향을 미치지 않지만 사용자가 다른 브라우저와 플랫폼에서 페이지를 보는 것이 얼마나 쉬운지에 영향을 미칩니다.

이를 브라우저 호환성 이라고 하며 이를 개선하면 속도와 사용자 경험에 긍정적인 영향을 미칠 수 있습니다.

Google 웹마스터 가이드라인에서도 유효한 코드 사용을 권장합니다.

W3C 유효성 검사기가 작동하는 곳입니다. 웹 페이지의 URL을 입력하면 HTML 코드에서 오류와 개선의 여지를 볼 수 있습니다.

예를 들어 YouTube 홈페이지의 URL을 입력하면 다음 결과가 반환됩니다.

페이지에 대해 나열된 오류를 수정하면 여러 브라우저와 플랫폼에서 페이지를 더 빠르게 로드하는 데 도움이 되는 고품질의 유효한 코드를 얻을 수 있습니다.

Google은 브라우저 호환성을 개선하고 페이지 속도를 높이는 것 외에도 유효한 인코딩을 사용하면 다음을 수행할 수 있다고 말합니다.

Google이 색인 생성 가능한 콘텐츠를 위해 웹사이트를 크롤링하는 속도를 높입니다.
사이트에서 사용자 경험을 개선합니다.
브라우저 호환성을 보장합니다.
Googlebot이 사이트의 hreflang(언어) 태그를 인식할 수 있는지 확인합니다. 그리고
Google 판매자 센터에 제출된 제품이 계속 승인되는지 확인합니다.

2. WordPress 캐싱 플러그인 사용

캐싱 은 최근에 액세스한 파일의 복사본을 캐시 라고 하는 임시 저장소에 저장하는 프로세스입니다 . 사이트는 사용자 캐시에 액세스하여 원본 서버에서 다운로드하지 않고 필요한 파일을 업로드할 수 있습니다.

사용자의 경우 페이지가 로드될 때까지 기다리는 시간이 줄어들 것입니다. 당신에게 그것은 더 나은 페이지 속도와 더 행복한 방문자를 의미합니다.

좋은 소식은 사이트가 WordPress에 구축된 경우 플랫폼에 일부 캐싱 기능이 내장되어 있다는 것입니다. 가장 좋은 소식은 캐싱 플러그인을 설치하여 WordPress 사이트에서 웹 페이지 로드 시간을 더욱 단축할 수 있다는 것입니다.

몇 가지 무료 옵션은 W3 Total Cache 및 WP Fastest Cache입니다. 무엇을 선택하든 선택한 플러그인에서 최적의 성능을 얻을 수 있도록 도와줄 대규모 사용자 커뮤니티에 액세스할 수 있습니다.

더 좋은 점은 두 플러그인 모두 사용자의 브라우저에 파일을 저장하고 재사용하도록 지시하는 브라우저 캐싱이 포함되어 있다는 점입니다.

WP Rocket과 같은 유료 옵션을 선택할 수도 있습니다. 유료 캐싱 플러그인은 일반적으로 무료 캐싱 플러그인보다 더 많은 고객 지원과 더 긴 기능 목록을 제공합니다.

3. 콘텐츠 전송 네트워크 사용

CDN(콘텐츠 전송 네트워크)은 여러 물리적 위치에 분산된 서버 네트워크입니다. 이러한 서버를 함께 사용하면 웹 기반 콘텐츠를 전 세계 사용자에게 빠르게 전달할 수 있습니다.

페이지 속도를 높이는 것 외에도 CDN은 다음과 같은 다른 성능 이점을 제공합니다.

서버 부하 감소;
증가된 저장 용량;
DDoS(분산 서비스 거부) 공격에 대한 더 나은 보호
대역폭 소비 및 비용 감소; 그리고
더 낮은 네트워크 대기 시간.

CDN 조사를 시작할 준비가 되었다면 가장 일반적으로 사용되는 옵션부터 시작하세요. 여기에는 Cloudflare CDN, StackPath CDN, 저렴한 KeyCDN, Google Cloud CDN 및 Microsoft Azure가 포함됩니다.

CDN을 구현하기 전에 몇 가지 주요 예방 조치를 취하지 않으면 SEO에 부정적인 영향을 줄 수 있다는 점을 아는 것이 중요합니다.

CDN 공급자의 사이트 대신 사이트에 연결된 사용자 지정 하위 도메인을 만듭니다.
페이지 로드 시간을 줄이기 위해 지연 로드를 구현합니다.
중복 콘텐츠를 피하기 위해 CDN이 표준 태그를 사용하는지 확인하십시오.
보안 문제를 방지하려면 CDN 및 사이트에서 SSL(Secure Sockets Layer) 보안 프로토콜을 사용해야 합니다.

4. 이미지 및 비디오 최적화

많은 대형 고해상도 이미지는 사이트의 서버에 과부하를 주어 로드 시간을 증가시킬 수 있습니다. 이미지와 비디오를 최적화하면 긴장이 줄어들고 결과적으로 페이지 속도가 빨라집니다.

이미지 크기 및 해상도 외에도 몇 가지 다른 요인이 페이지 로드 시간을 길게 할 수 있습니다.

동기 로딩(즉, 페이지 구성 요소가 동시에 로드되지 않고 차례로 로드됨)
TIFF와 같은 크거나 복잡하거나 오래된 파일 형식 사용
지정되지 않은 치수
누락된 캐싱 정보

다행히도 이러한 모든 문제는 기본 이미지 최적화 전략으로 해결할 수 있습니다.

이미지의 크기와 해상도를 조정합니다. 무손실 압축을 사용하여 품질 저하 없이 이미지 크기를 줄이면 페이지 로드 시간을 줄이고 사용자 경험을 개선하는 데 도움이 됩니다.
PNG, JPG 및 GIF와 같은 가벼운 파일 형식을 사용하십시오.
각 이미지의 크기를 지정합니다.
캐싱 플러그인을 사용합니다.

최적화 프로세스의 속도를 더욱 높이고 싶다면 일부 WordPress 플러그인이 대부분의 힘든 작업을 대신할 수 있습니다. Smush 압축 도구, EWWW Image Optimizer 및 Optimole 최적화 서비스는 무손실 압축을 허용합니다.

일부 이미지 최적화 원칙은 동영상에도 적용된다는 점을 기억하세요. 예를 들어, WMV(Windows Media Video)와 같은 오래된 비디오 파일 형식을 사용하는 경우 사이트를 로드하는 데 시간이 더 오래 걸릴 수 있습니다. 속도를 높이려면 MP4와 같은 무손실 압축 파일 형식으로 전환할 수 있습니다.

일을 더 간단하게 하기 위해 비디오 호스팅을 완전히 포기할 수 있습니다. YouTube 또는 Vimeo와 같은 타사 호스팅 서비스에 동영상을 업로드하고 내장 코드를 복사하여 사이트 페이지에 붙여넣기만 하면 됩니다.

5. 비동기 로딩 사용

특히 이미지 최적화에 이점이 있지만 비동기식 로드는 페이지의 모든 요소가 로드되는 속도에도 영향을 미칩니다.

페이지 요소는 태그(메타데이터, 링크 등이 포함됨), 스니펫(텍스트 또는 소스 코드의 작은 세그먼트) 및 A/B 테스트 스크립트(페이지의 두 버전을 비교함)를 비롯한 여러 범주로 나눌 수 있습니다. 한 페이지).

동기 로딩을 사용하면 웹 페이지의 모든 요소가 강제로 특정 순서로 로드됩니다. 이것은 모든 요소가 로드될 때까지 사용자가 페이지의 어떤 부분도 볼 수 없음을 의미합니다.

비동기식 로드를 사용하면 해당 페이지 요소를 동시에 다운로드하고 사용 가능한 경우 로드할 수 있으므로 사용자가 페이지를 보는 데 걸리는 시간을 줄일 수 있습니다. 보너스로, 비동기식 로딩을 통해 페이지의 어느 부분을 먼저 로드할지 선택할 수도 있습니다. 예를 들어 페이지 상단(사용자가 스크롤하지 않고 처음으로 보는 콘텐츠)에 콘텐츠를 즉시 로드하도록 선택할 수 있습니다.

동기식 로드 대신 비동기식을 사용하면 페이지 로드 시간을 크게 줄이고 각 페이지가 원하는 방식으로 로드되도록 할 수 있습니다.

CSS에서 비동기 로딩을 구현하는 것은 약간 복잡하지만 JavaScript에서는 async 함수를 사용하고 HTML에서는 async 속성을 사용하여 쉽게 설정할 수 있습니다.

페이지 코드에 직접 뛰어드는 것을 피하고 싶다면 Async JavaScript, Asset CleanUp 및 Autooptimize와 같은 WordPress 플러그인이 도움이 될 수 있습니다.

6. 서버 요청 줄이기

웹 사이트가 서버에 너무 많은 HTTP 요청을 하면 서버의 용량을 압도하고 웹 사이트가 지연되어 페이지 로드 속도가 느려집니다.

웹사이트가 너무 많은 요청을 보내고 있는지 확인하려면 URL을 GTMetrix 도구에 입력하십시오.

결과 페이지에서 사이트에 대한 PageSpeed 성능 점수와 YSlow 점수를 볼 수 있습니다. 둘 다 사이트가 얼마나 잘 수행되고 있는지 알려주고 그에 따라 권장 사항을 제시할 수 있지만 YSlow는 사이트에서 수행하는 HTTP 요청 수를 표시하는 고유한 기능을 가지고 있습니다.

요청이 적을수록 페이지가 더 빨라집니다. YSlow가 조언하는 것처럼 요청을 줄이는 한 가지 방법은 여러 Javascript 스크립트를 하나로 결합하는 것입니다.

KeyCDN은 Javascript를 빠르고 효율적으로 결합하는 방법을 설명하는 간단한 자습서를 제공합니다. 더 나은 성능을 위해 외부 CSS 파일을 결합하는 데 사용할 수도 있습니다.

7. 스크립트 파일 축소

축소는 기능을 손상시키지 않으면서 스크립트 파일에서 중요하지 않은 코드를 제거하는 프로세스입니다. 비필수 코드는 공백, 주석 및 사용하지 않는 요소로 구성될 수 있습니다.

사이트의 JavaScript, HTML 및 CSS 파일을 최소화하여 페이지 속도를 높이고 대역폭 사용량을 줄일 수 있습니다.

코드 파일을 수동으로 수정할 수도 있지만 다음과 같이 작업을 수행할 수 있는 도구에 코드를 붙여넣는 것이 더 효율적입니다.

HTML 축소(HTML, JavaScript, CSS)
최소화(JavaScript, CSS)
JS 압축(자바스크립트)
미니피카도르 CSS(CSS)

WordPress 사이트의 경우 축소 플러그인을 사용할 수도 있습니다. W3 Total Cache 및 WP Fastest Cache의 두 가지 플러그인이 축소 및 캐싱 도구로 작동합니다. 고려해야 할 다른 플러그인에는 Autooptimize, Fast Velocity Minify 및 Hummingbird Optimizer가 있습니다.

8. 핑백 및 트랙백 비활성화

WordPress에서 핑백 및 트랙백은 다른 사이트가 콘텐츠에 링크될 때 사이트 소유자에게 알리는 링크 알림입니다.

WordPress 초기에는 유용했을 수 있지만 핑백 및 트랙백은 이제 링크를 퍼뜨리려는 스패머에 의해 자주 남용됩니다. 결과적으로 핑백과 트랙백은 WordPress 사이트의 서버 요청을 빠르게 방해하여 속도를 늦출 수 있습니다.

해결책은 WordPress 사이트의 토론 설정에서 핑백 및 트랙백을 비활성화하는 것입니다.

9. 서버 응답 시간 개선

페이지가 다른 모든 면에서 엄청나게 빠르더라도 느린 서버 응답 시간은 여전히 로딩 속도를 방해할 수 있습니다.

사용자가 페이지를 탐색할 때 해당 브라우저는 페이지의 서버에 요청을 보냅니다. 요청을 받으면 서버는 브라우저에서 페이지의 콘텐츠를 로드하여 응답합니다. 서버가 응답하는 데 시간이 오래 걸릴수록 페이지를 로드하는 데 더 오래 걸립니다.

서버 응답 시간은 첫 번째 바이트 또는 TTFB까지의 시간이라고도 합니다. 이것은 클라이언트가 요청을 한 후 정보의 첫 번째 바이트를 수신하는 데 걸리는 시간을 나타냅니다.

느린 서버 응답 시간은 200밀리초 이상으로 분류됩니다.

사이트의 서버 응답 시간을 확인하려면 Bitcatcha와 같은 서버 속도 검사기에 해당 URL을 입력합니다.

테스트 결과가 이상적이지 않으면 여러 가지 방법으로 개선할 수 있습니다.

PageSpeed Insights 성능 테스트를 통해 타겟 추천을 받으세요.
사이트가 현재 웹 호스팅 계획을 초과한 경우 더 나은 계획으로 업그레이드하는 것을 고려하십시오.
더 빠른 서비스를 제공하는 호스팅 제공업체로 전환하는 것을 고려하십시오.
사이트가 공유 서버에서 호스팅되는 경우 가상 사설 서버(VPS), 전용 또는 클라우드 호스팅과 같은 다른 유형의 호스팅으로 전환하는 것이 좋습니다.
서버 로그 파일을 드릴다운하여 병목 현상을 수동으로 찾습니다.

10. GZIP 압축 활성화

GNU zip 또는 줄여서 GZIP은 무손실 압축 프로그램 및 아카이브 형식입니다. 원래 1980년대에 시작된 자유 소프트웨어 이니셔티브인 GNU 프로젝트의 일부로 만들어졌지만 GZIP은 여전히 널리 사용되는 압축 도구입니다.

GZIP 압축은 웹 페이지의 파일 크기를 줄여 작동합니다. 페이지 파일이 이전보다 작기 때문에 파일을 더 빨리 로드할 수 있습니다.

Pingdom 페이지 속도 테스트에서 GZIP 압축은 페이지 로드 시간을 48밀리초로 줄였습니다.

압축하지 않은 경우 총 페이지 크기는 445.6킬로바이트였으며 로드하는 데 329밀리초가 걸렸습니다.

GZIP 압축이 활성화된 경우 총 페이지 크기는 197.6킬로바이트에 불과했고 로드하는 데 281밀리초가 걸렸습니다.

이러한 결과를 염두에 두고 모든 사이트의 80% 이상이 GZIP을 사용하는 이유를 이해하는 것은 어렵지 않습니다.

페이지에서 GZIP 사용을 시작하려면 사이트의 서버 설정을 구성해야 합니다. 서버 구성 파일을 수정하거나 WordPress 플러그인을 사용하여 이 작업을 수행할 수 있습니다.

WP Fastest Cache 및 Hummingbird는 WP-Optimize와 마찬가지로 GZIP 압축을 지원합니다.

사이트에 GZIP 압축이 활성화되어 있는지 테스트하려면 GiftofSpeed의 압축 테스트를 사용해 보십시오.

11. 플러그인을 효율적으로 사용

WordPress 플러그인은 사전 코딩 지식 없이도 시간을 절약하고 복잡한 작업을 단순화하며 사이트 기능을 추가할 수 있습니다. 또한 공식 WordPress 플러그인 라이브러리에서 사용할 수 있는 것들은 무료입니다.

그러나 플러그인에도 단점이 없는 것은 아닙니다. 하나 이상의 플러그인이 너무 많은 리소스를 요구하면 페이지 속도가 저하됩니다. 이는 분석에서 광고에 이르기까지 모든 종류의 외부 스크립트에 해당됩니다.

페이지 속도를 희생하지 않고 플러그인의 이점을 즐기려면 사용 중인 플러그인을 평가하고 로드 시간에 명백한 사용이 없거나 부정적인 영향을 미치지 않으면서 플러그인을 제거하십시오.

플러그인이 필요한지 결정할 때 다양한 도구와 리소스를 사용하여 플러그인이 사이트 성능에 도움이 되는지 또는 방해하는지 확인할 수 있습니다.

플러그인을 사용하여 플러그인을 테스트할 수도 있습니다. Query Monitor와 같은 플러그인을 사용하면 페이지에서 데이터베이스 쿼리를 보고 플러그인별로 필터링할 수 있습니다. 플러그인이 쿼리를 많이 할수록 페이지 속도가 느려집니다.

가장 느린 WordPress 플러그인 목록을 보고 최적화하려는 사이트에서 찾은 플러그인을 제거하는 것도 도움이 될 수 있습니다.

또는 GTMetrix에 사이트 URL을 입력하고 캐스케이드 탭을 클릭할 수 있습니다. 폭포형 차트는 플러그인에서 수행한 요청을 포함하여 로드된 페이지에서 수행한 모든 요청을 보여줍니다.

BBC America 사이트의 결과에 따르면 세 번째 요청은 WordPress 플러그인에 의해 이루어졌습니다.

특정 플러그인이 많은 수의 요청을 하는 경우 페이지 속도가 느려질 수 있습니다.

원하는 결과를 얻으려면 플러그인을 제거하기 전후에 페이지 속도 테스트를 실행하는 것을 잊지 마십시오.

12. 반응형 웹 디자인 구현

2019년 말 기준 52억 명(세계 인구의 약 70%)이 모바일 서비스에 가입했습니다. 이는 웹 기반 콘텐츠에 액세스하는 데 사용할 수 있는 엄청난 수의 연결된 모바일 장치입니다.

SEO 전문가에게 이는 사이트가 사용자와 검색 엔진 알고리즘을 모두 만족시키기 위해 모든 모바일 장치에서 잘 작동하고 멋지게 보일 수 있는 기능이 필요함을 의미합니다.

빠르고 매끄럽고 개인화된 경험을 제공하기 위해 각 사용자의 기기에 자동으로 반응하는 반응 형 웹 디자인 을 사용하면 SEO 전문가가 모바일 및 데스크톱 플랫폼용으로 콘텐츠를 최적화하는 데 도움이 될 수 있습니다.

반응형 웹 디자인 은 동일한 사이트의 여러 버전을 만드는 것과 관련된 적응형 웹 디자인 의 보다 민첩한 버전입니다 . 각 버전에는 정적 기본 레이아웃이 있으며 로드되는 버전은 사용자의 장치에 따라 다릅니다.

화면 크기는 항상 변하기 때문에 반응형 웹 디자인은 최적화되지 않고 페이지가 잘못 표시될 수 있습니다. 또한 사이트가 사용자의 장치를 감지하고 적절한 버전을 로드하는 데 걸리는 시간이 페이지 속도를 저하시킬 수 있습니다.

반응형 웹 디자인은 각 유형의 장치에 대한 고유한 정적 페이지가 아니라 모든 장치에 맞게 즉시 조정되는 동적 웹 페이지로 이러한 제한을 피합니다.

반응형 웹 디자인은 사이트 성능과 사용자 경험을 모두 향상시키는 가장 안전한 옵션입니다.

WordPress 웹 사이트를 반응형으로 만들려면 반응형 테마를 선택할 수 있습니다.

또는 반응형 웹 사이트를 처음부터 구축하는 방법을 배우고 싶다면 Google의 무료 디자인 과정인 반응형 웹 디자인 기본 사항을 확인하십시오.

13. 항상 최적화 하기

페이지 속도를 개선하는 방법을 배우고 이를 위한 단계를 따르는 것은 첫 번째 단계일 뿐입니다. 이러한 속도 향상을 유지하는 것은 시간이 지남에 따라 사이트 성능과 사용자 경험을 보호하고 개선하는 데에도 중요합니다.

사이트에 콘텐츠를 업데이트하거나 추가할 때:

새 코드의 유효성을 검사하고 축소합니다.
새로운 이미지 및/또는 비디오를 최적화합니다.
사이트의 플러그인을 모니터링하고 느리거나 오래되거나 사용되지 않는 플러그인을 제거하거나 교체합니다.
그리고 사이트 및 해당 페이지에 대한 액세스 권한이 있는 모든 사람이 콘텐츠 최적화, 반응형 디자인 등에 대한 모범 사례를 알고 있는지 확인하십시오.