WordPress 사이트 속도를 높이는 10가지 효과적이고 쉬운 방법

게시 됨: 2016-12-23


10 Effective and Easy Ways to Speed up a WordPress Site

WordPress 사이트 속도를 높이는 10가지 효과적이고 쉬운 방법

현대 시대에 수많은 기업이 유서 깊은 WordPress의 힘에 의존하게 되었습니다. 따라서 WordPress 사이트의 로딩 속도가 비즈니스 성공의 중요한 요소라는 것은 놀라운 일이 아닙니다. 변덕스럽지 않고 당밀처럼 크롤링하는 느린 WordPress 사이트는 비즈니스에 해를 끼칩니다. 그렇기 때문에 이중 SEO와 사용자 친화적이며 귀중한 페이지 조회수와 함께 탁월한 사용자 참여를 이끌어내는 번개같이 빠른 웹사이트를 보장하는 것이 매우 중요합니다.

이 광범위한 연구 기사에서 우리의 성실한 기술 팀은 WordPress 웹 사이트의 속도를 높이고 궁극적으로 가능한 한 SEO 친화적으로 될 수 있는 요소를 결정하기 위해 다양한 사내 테스트를 수행했습니다.

테스트 WordPress 사이트의 속도를 높이기 위해 수행한 세심한 단계는 다음과 같습니다.

  1. WordPress 캐시 플러그인 설치 및 브라우저 캐싱 활용
  2. CSS 및 JavaScript 축소
  3. 이미지 최적화
  4. gzip 압축 활성화 및
  5. CDN(콘텐츠 전송 네트워크) 사용

이러한 단계를 수행한 후 사이트는 이미 속도 향상을 나타내기 시작했지만 필요한 수준까지는 거의 도달하지 못했습니다. 후속 단계에서 우리는 실험이 보다 포괄적이고 무엇보다도 구체적인 결과를 지향하도록 하기 위해 몇 가지 추가 단계를 수행했습니다. 당연히 지침을 따르려면 중급/초보자 WordPress 지식과 문제 해결 기술이 있어야 제안된 각 지침을 즐겁게 따를 수 있습니다.

다양한 실험을 하는 동안 Google Page Speed ​​Insight 도구를 사용하여 100점 만점에서 실제 페이지 속도를 측정했습니다. 점수가 높을수록 웹사이트 속도가 빨라집니다. 이 도구는 또한 WordPress 사이트 속도를 늦추는 몇 가지 부정적인 요인을 표시하고 WordPress 사이트의 속도 향상을 위한 조치를 제안했습니다.

실제 세계에서 실패하는 실험실 테스트로 비난받지 않도록 이러한 도구와 전문 지식을 고객 블로그 중 하나로 전환했습니다. 느린 응답으로 어떤 사용자도 좋은 첫인상을 가질 수 없었으므로 그들의 목표는 긴급하게 WordPress 사이트의 속도를 극적으로 높입니다. 다음의 깔끔하게 나열된 모든 단계를 수행한 후 우리는 고객의 전체 WordPress 속도 문제를 성공적으로 해결하고 Google PageSpeed ​​도구로 모범적인 100/100을 기록했습니다.

워드프레스 호스팅 받기 워드프레스 개발자

WordPress 사이트 속도를 높이는 10가지 쉬운 방법은 다음과 같습니다.

  1. 최고의 웹 호스팅 제공업체 선택
  2. WordPress 캐시 플러그인 설치 및 브라우저 캐싱 활용
  3. CSS 및 JavaScript 축소
  4. 이미지 최적화
  5. Gzip 압축 활성화
  6. 휴지통 비우기 및 WordPress 데이터베이스 최적화
  7. 콘텐츠 전송 네트워크 사용
  8. 포스트 수정을 줄이고 트랙백 및 핑백 비활성화
  9. 댓글 및 긴 게시물을 페이지로 분할
  10. WordPress에 직접 비디오를 업로드하지 마십시오

1. 최고의 웹 호스팅 제공업체 선택

이것은 분명해야 하지만 솔직히 말해서 항상 간단한 것은 아닙니다. 돈을 내려놓기 전에 철저히 조사할 가치가 있으며, 구두쇠가 되기를 원하는 가장 마지막 영역인 집의 기초와 유사합니다. WordPress 사이트 최적화를 시작하기 전에 웹 호스팅 제공업체가 웹사이트 속도를 늦추지 않도록 하십시오. 불행히도 웹 호스팅 제공업체는 서버를 과도하게 판매하는 경우가 많으며 이는 서버의 매우 중요한 응답 시간에 해로운 영향을 미칩니다.

서버의 응답 시간이 200밀리초(ms)를 초과하는 경우 Google PageSpeed ​​테스트는 "서버 응답 시간 감소"를 알리는 빨간색 신호를 보냅니다. 이것은 아마도 웹 호스팅 서버가 느리고 서버의 응답 시간을 개선하기 위해 호스팅 제공업체에 직접 문의해야 함을 나타냅니다. 공급자 간의 차이는 극명할 수 있습니다. 예를 들어 여기에서 고객을 호스팅 환경으로 마이그레이션하기 전에 고객의 WordPress 블로그에 대해 PageSpeed ​​테스트를 수행했습니다. 결과는 그 자체로 말하며 아래의 극적인 테스트 결과에 눈을 던질 수 있습니다.

Google Page Speed Insight Feedback to Reduce Server Response Time

테스트 결과는 앞서 언급한 위험 신호와 함께 표시되어 일반적으로 "서버 응답 시간 단축"에 도움이 됩니다. 고마워 구글! 이 끔찍한 지연은 허용할 수 없는 4.2초 정도의 느린 것으로 측정되었습니다. 따라서 서버의 응답 시간이 좋지 않아 웹 사이트의 PageSpeed ​​점수가 68점으로 줄었습니다. 페이지 로드 시간이 2초 미만인 WordPress 사이트가 좋다는 말에 우리는 훨씬 더 잘할 수 있었습니다. 그러나 이상적으로는 가능한 한 빨리 만들도록 노력해야 합니다. Google은 PageSpeed ​​통찰력에 따라 이상적으로는 서버 응답이 매우 빠르고 200ms 미만으로 유지되어야 한다고 제안합니다.

WordPress 사이트의 PageSpeed ​​점수는 얼마입니까? 여기를 클릭하여 알아보세요.

이 1차 테스트에 이어 자연스럽게 고객의 WordPress 사이트를 최적화된 WordPress 호스팅 플랫폼으로 마이그레이션하고 두 번째 PageSpeed ​​테스트를 수행했습니다. 행복한 녹색 상자를 사용하면 결과가 눈에 띄게 됩니다.

Google Page Speed ​​Insight 서버 응답 시간 피드백 수정됨

Google Page Speed ​​Insight 서버 응답 시간 피드백 수정됨

마이그레이션 후 서버의 응답 시간이 예외적으로 200ms로 줄어들었고 불안한 "서버 응답 시간 줄이기" 오류가 단호하게 해결되어 결코 교활한 반환을 하지 않기를 바랍니다.

물론 호스팅 제공업체가 항상 문제의 원인은 아니기 때문에 항상 호스팅 제공업체를 가리킬 수는 없습니다. 때로는 가장 모범적이고 매끄러운 웹 호스팅 제공 업체에서도 응답 시간이 느리다는 것을 알 수 있습니다. 아마도 귀하의 웹사이트가 이전 하드웨어를 능가하여 우수한 기술을 제공할 것을 조용히 요구하고 있을 것입니다. 이 경우 현재 호스팅 계획은 더 이상 웹 사이트를 최적으로 실행할 수 없습니다.

이러한 경우 WordPress 호스팅 패키지를 더 높은 단계의 다음 계획으로 업그레이드하거나 VPS 와 같이 완전히 새롭고 훨씬 더 강력한 호스팅 옵션으로 업그레이드해야 합니다. 물론 계획 변경 후 실제로 서버 응답 시간이 개선되지 않았다면 우수한 호스팅 제공업체를 조사한 후 전환해야 할 때입니다.

워드프레스 호스팅 받기 워드프레스 개발자

2. WordPress 캐시 플러그인 설치 및 브라우저 캐싱 활용

서버 응답 시간을 최소화한 후에는 항상 중요한 콘텐츠 "캐싱"과 관련된 다음 오류를 해결하는 데 에너지를 쏟을 것입니다. Google은 WordPress 웹사이트의 정적 콘텐츠를 캐싱하여 결과적으로 브라우저의 강력한 캐싱 기능을 활용할 것을 적극 권장합니다. 정적 콘텐츠를 캐싱하면 WordPress 사이트의 속도를 최대 3~7배까지 편안하게 높일 수 있습니다.

WordPress에는 콘텐츠를 캐시할 뿐만 아니라 영구적으로 유용한 CDN 통합, Gzip 압축, CSS/JavaScript 축소 및 기타 다양한 기능을 제공하는 다양한 캐싱 플러그인이 있습니다. 브라우저 캐싱을 활성화하는 것은 어렵지 않습니다. 다른 WordPress 플러그인과 마찬가지로 WordPress 대시보드에서 원하는 캐시 플러그인을 설치하고 구성하기만 하면 됩니다.

캐싱 플러그인 설치 및 브라우저 캐싱 활성화

캐싱 플러그인 설치 및 브라우저 캐싱 활성화

몇 가지 WordPress Caching 플러그인에 대한 광범위한 테스트를 거친 후 나머지 속담 팩에서 눈에 띄는 세 가지 플러그인이 있었습니다. 이것들은:

  • #1 – W3 총 캐시
  • #2 – WP 슈퍼 캐시
  • #3 – WP 가장 빠른 캐시

이제 어떤 이유로든 WordPress 플러그인을 설치하고 싶지 않다면 .htaccess 파일에 Expires 헤더 코드를 추가하여 브라우저 캐싱을 수동으로 활성화할 수 있습니다.

아래에 제시한 바와 같이 WordPress 캐싱 플러그인을 설치하기 전의 Google PageSpeed ​​점수는 64/100에 불과했습니다. 계속해서 지켜보고 계시다면 Google이 이에 대해 생성한 오류에 따라 이 문제를 해결할 수 있는 훌륭한 방법이 있습니다. 나쁜 점수: '브라우저 캐싱 활용'!

Google Page Speed Insight Score Before Enabling Caching Plugin

캐싱 플러그인 활성화 전 Google Page Speed ​​Insight 점수]

이제 분명히 충분하지 않으므로 콘텐츠 캐싱 요구 사항에 맞게 W3 Total Cache 플러그인을 설치하기로 결정했습니다. 설치 후 우리는 열심히 페이지 속도를 다시 테스트했고 결과는 모범적이었습니다.

W3 Total Cache 캐싱 플러그인 설치 후
Google 페이지 속도 점수 : 83 / 100(개선됨)
개선 이유 : 브라우저 캐싱 활용 오류가 95% 수정되었습니다.

WordPress 속도를 높이기 위해 W3 Total Cache 플러그인은 모든 내부 스크립트의 만료 시간을 합리적인 기간으로 유용하고 지능적으로 설정합니다. 예를 들어 CSS 스크립트는 7일 동안 캐시되고 이미지는 30일 동안 캐시되는 식입니다. 이 유용한 내부 캐싱을 설정한 후 '브라우저 캐싱 활용' 경고가 95% 수정되었습니다.

Google Page Speed Insight Score After Enabling Caching Plugin

캐싱 플러그인 활성화 후 Google Page Speed ​​Insight 점수

그런 다음 Leverage 브라우저 캐싱에서 오류의 95%가 수정되었습니다. 추적하는 사람들에게는 5%의 오류가 남아 있습니다. 불행히도, 이는 이 도구가 캐싱을 설정할 수 없는 Facebook 및 Twitter와 같은 타사 스크립트 때문이었습니다. 이러한 제3자 데이터의 캐싱을 제어하지 않기 때문에 이에 대해 수행할 작업이 거의 없습니다. 그러나 걱정하지 마십시오. 영향이 작을 가능성이 있으므로 "브라우저 캐싱 활용" 오류를 완전히 없애는 것에 대해 지나치게 걱정할 필요는 없습니다.

3. CSS 및 JavaScript 축소

축소는 귀여운 단어이지만 HTML, JavaScript 및 CSS 파일의 공백, 줄 바꿈, 주석 및 블록 구분 기호와 같이 텍스트 문서에서 불필요하고 낭비적인 문자를 제거하는 것입니다.

분명히, 이러한 문자는 사람의 가독성을 위해 이러한 파일을 크게 향상시키지만 컴퓨터와 웹 브라우저에서 처리할 필요가 전혀 없습니다. 불필요한 문자와 중복 코드를 제거하면 페이지 크기를 엄청난 킬로바이트로 줄여 WordPress 속도를 크게 높일 수 있습니다.

여기에서는 CSS 및 JS 파일 최소화에 대한 몇 가지 피드백을 보여주는 WordPress 페이지 속도 결과를 제공합니다.

Google Page Speed ​​Insights 축소 경고

Google Page Speed ​​Insights 축소 경고

결과에 따르면 CSS 및 JS에 대한 호출 수를 줄이고 페이지 크기를 최소화하여 속도를 더욱 높일 수 있습니다.

CSS 및 JavaScript를 최소화하는 최고의 WordPress 플러그인

고맙게도 WordPress에는 CSS 및 JavaScript 파일을 빠르게 축소할 수 있는 플러그인이 많이 있습니다. 아래에는 모든 축소 요구 사항을 효과적으로 처리할 인기 있는 5가지 WordPress 플러그인이 나열되어 있습니다.

  • #1 – WP 축소
  • #2 – 자동 최적화
  • #3 – WP 슈퍼 미니파이
  • #4 – WP 축소 수정
  • #5 – 더 나은 WordPress 축소

WP-Minify Plugin Minifies the CSS, HTML & JS

WP-Minify 플러그인은 CSS, HTML 및 JS를 축소합니다.

W3 Total Cache 및 WP Fastest Cache와 같은 일부 캐싱 플러그인은 추가 기능으로 축소를 제공하지만, 우리는 축소를 수행하기 위해 WP Minify 플러그인을 사용하기로 선택했습니다. 활성화된 축소 플러그인/플러그인 옵션은 한 번에 하나만 활성화하십시오. 그렇지 않으면 W3 전체 캐시와 WPMinify 사이와 같은 다양한 음란한 플러그인 충돌이 발생할 가능성이 높습니다.

축소 플러그인을 설치하기 전에
Google 페이지 속도 점수: 83 / 100
이 낮은 점수의 이유: CSS, JS 및 HTML 축소

Google Page Speed Insights Feedback for JS and CSS Minify

JS 및 CSS Minify에 대한 Google Page Speed ​​Insights 피드백

WP Minify를 설치한 후 페이지 속도 테스트를 수행한 결과는 다음과 같습니다.

WP Miniify 플러그인 설치 후
Google 페이지 속도 점수: 84/100 (향상됨)
개선 이유: CSS 축소 및 JavaScript 경고가 수정되었습니다.

WP-Minify 플러그인으로 수정된 Google Page Speed ​​Insight 피드백

WP-Minify 플러그인으로 수정된 Google Page Speed ​​Insight 피드백

엄청난 차이는 아니지만 모든 비트가 중요합니다. 특히 모바일 장치의 경우. 경우에 따라 축소 플러그인을 설치한 후에도 이러한 경고가 부분적으로 해결되지 않고 지속될 수 있습니다.

이 경우 PageSpeed ​​도구 자체는 이미 축소된 CSS 및 JS 파일을 제공할 수 있습니다. 이러한 최적화된 JavaScript 및 CSS 리소스를 직접 다운로드하여 WordPress 웹사이트에서 교체할 수 있습니다(위의 예에서 하단에 강조 표시된 파란색 사각형 참조).

워드프레스 호스팅 받기 워드프레스 개발자

4. 이미지 최적화

정교한 고해상도 이미지가 있는 WordPress 사이트는 놀랍게 보이며 의심할 여지 없이 기존의 텍스트 기반 WordPress 페이지보다 더 많은 독자의 소중한 관심을 사로잡을 것입니다. 그러나 불행한 문제가 있습니다. 더 많은 이미지를 업로드하거나 해상도와 품질을 과도하게 높이면 WordPress의 크기가 커지기 때문에 궁극적으로 웹 사이트 속도가 느려질 수 있습니다.

이러한 문제를 성실히 피하고 최소화하려면 이미지를 게시하기 전에 최적화해야 합니다.

이미지 최적화를 위한 무료 온라인 도구

품질에 해로운 영향을 미치지 않으면서 이미지를 최적화할 수 있는 Optimizer 또는 Image Optimizer와 같은 다양한 강력한 온라인 도구가 있습니다. 이러한 도구는 간단합니다. 이미지를 업로드하고 관련/원하는 옵션을 선택한 다음 최적화된 이미지를 다운로드합니다.

한 번에 20개의 이미지를 일괄 최적화하고 압축률과 이미지 품질을 모두 선택할 수 있는 Optimizer를 특히 좋아합니다.

이미지 최적화를 위한 최고의 WordPress 플러그인

WordPress에는 이미지를 업로드할 때 이미지를 자동으로 최적화하는 수많은 플러그인이 있습니다. 맛은 다음과 같습니다.

  • WP Smush – #1 – 600,000개 이상의 다운로드로 널리 사용됨
  • #2 – Image Optimizer를 이미지화
  • #3 – Optimus – WordPress 이미지 최적화 도구
  • #4 – ShortPixel 이미지 최적화 도구
  • #5 – EWWW 이미지 최적화 도구
  • #6 – CW 이미지 최적화

우리는 가장 인기 있는 옵션을 선택하여 이 목록에서 WP Smush 플러그인을 결정하고 WordPress에 설치하고 성능 테스트를 진행했습니다. Google의 유용한 도구로 돌아가서 이미지 최적화 전후에 다음 테스트 결과를 얻었습니다.

이미지 최적화 플러그인을 설치하기 전에
Google 페이지 속도 점수: 84/100
이 낮은 점수의 이유: 이미지가 최적화되지 않았습니다.

이미지 최적화 전 Google Page Speed ​​Insight 점수

이미지 최적화 전 Google Page Speed ​​Insight 점수

WP Smush Image Optimizer 플러그인을 사용하여 블로그 이미지를 자동으로 최적화했습니다.

WP-Smush Plugin Optimizes the Images

WP-Smush 플러그인은 이미지를 최적화합니다

WP Smush 플러그인 활성화 후 테스트 결과입니다. 이미지 최적화와 관련된 경고가 사라졌습니다.

WP Smush 플러그인 설치 후
Google 페이지 속도 점수: 92/100 (개선됨)
개선 이유: WP Smush 플러그인은 모든 이미지를 최적화했습니다.

Google Page Speed Insight Score After Optimizing the Images

이미지 최적화 후 Google Page Speed ​​Insight 점수

WP Smush Image Optimizer의 무료 버전으로 한 번에 50개의 이미지만 '스무싱'할 수 있다는 점에 유의하십시오. 나머지 이미지는 아래 화면과 같이 WordPress 미디어 라이브러리에서 스무싱할 수 있습니다.

Smush Images From WordPress Media Library

WordPress 미디어 라이브러리에서 이미지 스매시

여전히 만족스럽지 못한 이미지 최적화 경고가 표시되는 경우 과도한 스트레스를 받지 마십시오. Google PageSpeed ​​도구는 이러한 이미지의 최적화된 버전도 유용하게 제공합니다. 3단계와 같이 다운로드할 수 있습니다. 그런 다음 결과적으로 DashBoard의 미디어 라이브러리에서 이러한 이미지를 업데이트하거나 웹호스팅 계정의 파일 관리자에서 업데이트할 수 있습니다. 또한 Xvarnish와 같은 타사 캐싱 도구를 사용하는 경우 웹 서버의 캐시가 지워졌는지 확인하십시오. 이렇게 하지 않으면 Google에서 힘들게 최적화한 후에도 계속 구식 이미지를 표시할 수 있습니다.

워드프레스 호스팅 받기 워드프레스 개발자

5. Gzip 압축 활성화

방문자가 WordPress 사이트를 탐색할 때 브라우저는 웹 페이지를 다운로드하고 콘텐츠 렌더링을 진행합니다. 이것은 압축되지 않은 경우가 많으며 포함된 필수 요소와 풍부한 요소로 인해 WordPress 페이지의 크기가 엄청나면 필연적으로 불행하게도 페이지 로드 시간이 늘어납니다.

이 문제를 해결하는 편리한 방법이 있습니다. 지능형 Gzip 압축을 활성화하면 서버에서 클라이언트 브라우저로 전송되는 응답의 크기를 줄일 수 있습니다. 이렇게 하면 리소스를 다운로드하는 데 필요한 시간(초)이 현저히 줄어들고 데이터 사용량이 최소화되며 클라이언트 브라우저 내에서 아름다운 WordPress 사이트의 렌더링 속도가 향상됩니다.

Gzip 압축을 사용하면 클라이언트에 대해 페이지의 전체 크기를 50%에서 70%까지 줄일 수 있으며, 이는 당연히 WordPress 블로그의 속도를 높이는 역할을 합니다. 물론 Gzip이 활성화되어 있지 않으면 Google의 PageSpeed ​​Insight 도구가 이를 기록하고 압축을 활성화하도록 경고합니다.

1. W3 Total Cache 플러그인을 사용하여 Gzip 압축 활성화

대부분의 작업에는 WordPress 플러그인이 있으며 Gzip 압축도 예외는 아닙니다. 특히 인기 있는 캐싱 플러그인은 앞서 언급한 W3 Total Cache 플러그인으로 WordPress 웹사이트를 Gzip으로 압축할 수 있습니다. Gzip 압축을 활성화하려면 WordPress 대시보드에 로그인하고 성능 → 브라우저 캐시로 이동한 다음 'HTTP(Gzip) 압축 활성화' 확인란에 확인 표시를 합니다.

Enable HTTP GZIP Compression Using W3 Total Cache Plugin

W3 Total Cache 플러그인을 사용하여 HTTP GZIP 압축 활성화

2. .htaccess를 통한 Gzip 압축 활성화

또한 .htaccess 파일에 Gzip 압축 코드를 추가하여 Gzip 압축을 활성화할 수도 있습니다.

3. 압축 플러그인을 통한 Gzip 압축 활성화

전용 플러그인의 경우 다음 WordPress 플러그인 중 하나를 설치하여 Gzip 압축을 활성화하십시오.

  • GZip 닌자 속도 압축 – #1
  • 고급 속도 증가기 – #2
  • GZIP 압축 확인 및 활성화 – #3

이 플러그인은 mod_deflate 모듈을 사용하여 .htaccess 파일에 Gzip 압축 규칙을 자동으로 추가하므로 이러한 파일을 조정하기 위해 직접 들어갈 필요가 없습니다.

웹사이트에서 Gzip 압축이 활성화되어 있는지 여부를 확인하는 훌륭한 방법을 보려면 여기에서 웹사이트를 직접 테스트할 수 있습니다. 이 영구적으로 유용한 도구는 Gzip 압축을 활성화하여 얼마나 많은 귀중한 바이트(따라서 렌더링 속도와 대역폭)가 절약되었는지 구체적으로 보여줄 수 있습니다. 테스트 웹사이트에서 얼마나 많은 바이트를 절약하고 절약했는지에 대한 놀라운 예시를 보려면 아래 스크린샷의 예를 확인하십시오.

URL Compression Test Website

URL 압축 테스트 웹사이트

위 방법 중 하나로 Gzip 압축을 활성화하면 Google PageSpeed ​​Insights의 권장 사항이 '압축 활성화'로 수정됩니다.

압축 플러그인을 설치하기 전에
Google 페이지 속도 점수: 92/100
이 경고의 이유: 압축이 활성화되어 있지 않습니다.

Google Page Speed ​​Insight 압축 피드백

이 예에서는 W3 Total Cache 플러그인을 통해 Gzip 압축을 활성화했으므로 이제 압축 활성화 경고가 제거되었으며 결과는 아래와 같습니다.

압축용 W3 Total Cache 플러그인 설치 후
Google 페이지 속도 점수: 92/100
개선 이유: 압축 활성화 경고가 해결되었습니다.

GZIP 압축 활성화 후 Google Page Speed ​​Insight 점수

GZIP 압축 활성화 후 Google Page Speed ​​Insight 점수

스크롤 없이 볼 수 있는 콘텐츠 경고 수정

92/100이라는 꽤 괜찮은 성능 점수를 달성했음에도 불구하고 Google PageSpeed ​​Insights의 페이지는 스크롤 없이 볼 수 있는 부분에서 렌더링 차단 JavaScript 및 CSS를 수정해야 한다는 경고를 계속 표시하고 있었습니다. 물론 모든 것이 중요하고 우리는 여기서 멈출 사업이 아닙니다. 그래서 우리는 그것을 해결하기로 결정했습니다. 계속 진행하여 테스트 WordPress 블로그에서 이 경고를 수정하는 데 성공한 방법을 살펴보겠습니다.

스크롤 없이 볼 수 있는 JavaScript 차단 제거

이를 위해 WordPress 플러그인 Async JavaScript 플러그인을 사용한 다음 후속 스크린샷과 같이 설정을 조정했습니다. 이 플러그인은 WordPress의 wp_enqueue_script 함수에 의해 로드된 모든 JavaScript에 'async' 또는 'defer' 속성을 추가합니다.

Eliminate Render Blocking JavaScript and CSS in Above The Fold Content Warning Fixed

접는 부분 위의 JavaScript 및 CSS 렌더링 차단 제거 콘텐츠 경고 수정

이제 플러그인에 의존할 필요조차 없습니다. 다른 플러그인을 로드하지 않으려면 functions.php 파일에 다음 코드를 추가하기만 하면 됩니다.

/*Add async to all scripts*/
function js_async_attr($tag)
{
# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

이제 CSS에 대한 동일한 경고를 수정하기 위해 Autooptimize라는 WordPress 플러그인을 사용했습니다. 이 플러그인을 설치한 후 설정 → Autotomize 로 이동합니다 . 자동 최적화 설정에서 오른쪽 상단에 있는 '고급 설정 표시' 버튼을 클릭합니다. 'minify'가 W3 Total Cache 또는 WPminify와 함께 활성화되어 있지 않은지 확인하십시오. Autoptimzer와 충돌을 일으킬 수 있기 때문입니다.

고급 설정이 채워지고 조정되면 CSS 옵션 섹션으로 스크롤하십시오. 인라인 및 CSS 지연 확인란을 선택하고 접기 CSS 코드("렌더링 차단 제거" 섹션에서 Google 페이지 Insight Tool에서 제안한 URL, 브라우저에서 각 URL을 열고 접기 .css 코드 검색)를 붙여넣고 ' 변경 사항 저장 및 캐시 비우기' 버튼을 클릭합니다.

접는 부분 위의 JavaScript 및 CSS 렌더링 차단 제거 콘텐츠 경고 수정

접는 부분 위의 JavaScript 및 CSS 렌더링 차단 제거 콘텐츠 경고 수정

이러한 단계를 세심하게 수행한 후에는 폴드 렌더 차단과 관련된 경고에 대한 언급 없이 Google 도구를 사용할 수 있습니다.

Async JavaScript 및 Autooptimize 플러그인 설치 후
Google 페이지 속도 점수: 100/100
개선 이유: 스크롤 없이 볼 수 있는 콘텐츠 경고에서 렌더링 차단 JavaScript 및 CSS 제거를 수정했습니다.

데스크탑에 대한 모든 경고가 수정되었습니다.

데스크탑에 대한 모든 경고가 수정되었습니다.

All Warnings Are Fixed For Mobile

모든 경고는 모바일에 대해 수정되었습니다.

Google의 PageSpeed ​​Insights는 웹사이트를 최적화하기 위해 노력할 수 있는 다양한 방법을 식별하는 데 도움이 되는 항상 유용한 성능 도구입니다. 그러나 일부 시나리오는 본질적으로 고칠 수 없는 경우가 일반적이므로 완벽한 100/100 득점에 대한 집착을 발전시킬 가치가 거의 없습니다.

워드프레스 호스팅 받기 워드프레스 개발자

6. 휴지통을 비우고 WordPress 데이터베이스를 최적화하십시오.

WordPress를 장기간 사용하면 별로 사용하지 않는 많은 양의 데이터가 포함된 데이터베이스가 제공됩니다. 예를 들어 새 게시물이나 페이지를 저장할 때마다 WordPress는 해당 게시물이나 페이지의 개정판을 기꺼이 만들고 계속해서 확장되는 데이터베이스에 저장합니다.

예를 들어, 게시물을 10번 편집하면 해당 게시물의 개별 사본 9개가 수정본으로 저장될 수 있습니다. 때때로 도움이 되기는 하지만 이러한 데이터 축적은 거의 액세스하지 않는 방대한 양의 데이터를 데이터베이스의 삐걱거리는 테이블에 빠르게 추가하여 불필요하게 부풀려지고 액세스 속도를 저하시킵니다.

원치 않는 수정, 초안, 검토된 댓글, 휴지통 페이지/게시물, 스팸 댓글, 휴지통 댓글, 고아 게시물 메타 및 기타 불필요한 데이터를 신중하게 제거하여 매끄럽고 깨끗하며 최적화된 안전한 데이터베이스를 유지할 수 있습니다. 데이터베이스를 최적화하는 간단한 작업으로 웹사이트의 속도와 결정적으로 효율성을 이중으로 향상시키므로 문제가 될 만한 가치가 있습니다.

Optimize WordPress Database Using WP Optimize

WP-Optimize를 사용하여 WordPress 데이터베이스 최적화

데이터베이스 최적화를 위한 최고의 WordPress 플러그인

아래 목록은 WordPress 데이터베이스를 최적화하는 데 사용되는 즐겨찾는 WordPress 플러그인의 샘플입니다.

  • WP 최적화 – #1
  • WP-스윕 – #2
  • 고급 데이터베이스 클리너 – #3
  • 개정판 삭제 후 데이터베이스 최적화

이 플러그인은 WordPress 데이터베이스에서 원치 않는 모든 것을 제거하고 PHPMyAdmin에 액세스하지 않고도 일반적인 MySQL 데이터베이스 최적화 쿼리를 수행합니다.

WP-DB Manager의 경우와 같은 일부 플러그인을 사용하면 정기적이고 일관된 데이터베이스 최적화를 위한 날짜를 예약할 수 있습니다. 플러그인이 데이터베이스를 만지거나 최적화하도록 허용하기 전에 항상 데이터베이스 백업을 수행하십시오!

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

콘텐츠 전달 네트워크 CDN)은 지리적으로 분산된 서버 클러스터로, 가장 가까운 관련 서버에서 방문자에게 신속하게 정적 콘텐츠를 전달합니다. 방문자가 웹사이트를 탐색할 때 CDN이 가장 가까운 서버를 선택하여 웹사이트에서 사용되는 정적 콘텐츠(이미지, CSS, 라이브러리 및 JavaScript 파일)를 전달하기 위해 더 명확하게 설명합니다.

또한 능숙한 CDN은 더 빠른 페이지 로드를 촉진하여 결과적으로 Google 페이지 순위를 높입니다. 느리게 로드되는 성능이 낮은 웹사이트는 가장 인기 있는 검색 엔진의 순위 알고리즘에 의해 크게 불이익을 받기 때문입니다.

고맙게도 WordPress와 함께 작동하도록 CDN을 설정하는 것은 간단합니다. 실제로 W3 Total Cache와 같은 캐싱 플러그인을 사용하면 5분(!) 이내에 완료할 수 있습니다. CDN을 WordPress 웹 사이트와 통합하려면 친절하고 지식이 풍부한 Tutorial 에 눈을 돌리십시오.

물론 귀하의 WordPress 사이트에 대한 CDN의 이점을 설명하기 위해 당사는 귀하를 위해 당사의 첨단 연구실에서 빠른 테스트를 수행해야 했습니다.

WordPress 웹사이트에서 CDN을 활성화하기 전 평균 응답 시간 은 124.721ms였습니다.

Response Time Of A WordPress Website Before Enabling CDN

CDN을 활성화하기 전 WordPress 웹 사이트의 응답 시간

WordPress 웹 사이트에서 CDN을 활성화한 후 응답 시간이 26.346ms로 감소했습니다.

Response Time Of A WordPress Website After Enabling CDN

CDN 활성화 후 WordPress 웹 사이트의 응답 시간

8. 포스트 수정을 줄이고 트랙백 및 핑백 비활성화

포스트 수정 줄이기

WordPress 개정 시스템은 저장된 각 초안 또는 게시된 업데이트의 기록을 유지하도록 설계되었습니다. 매우 유용하지만(이전 버전의 기사를 탐색하고 필요한 경우 복원할 수 있음) WordPress 데이터베이스의 크기와 볼륨을 엄청나게 증가시킬 수 있습니다.

예를 들어, 기사가 10개 개정판 을 통과했다고 가정하면 WordPress 개정판 시스템은 이러한 개정판을 모두 데이터베이스에 저장하여 데이터 공간을 10배나 증가시킵니다.

기본적으로 WordPress는 무제한의 무제한 수정 버전을 계속 저장하지만 훨씬 더 실용적인 값(예: 4~5개)으로 제한해야 하고 실제로 제한할 수 있습니다. 이를 달성하려면 wp-config.php 파일에 다음 코드를 추가하기만 하면 됩니다.

define( 'WP_POST_REVISIONS', 5 );

List of Post Revisions

게시물 수정 목록

WordPress 사후 개정 시스템을 완전히 비활성화하려면 wp-config.php 파일에 다음 한 줄 코드를 추가하기만 하면 됩니다.

define( 'WP_POST_REVISIONS', false );

WordPress의 게시물 수정은 블로거에게 매우 유용하므로 완전히 비활성화하는 것은 권장하지 않습니다. 마음의 평화를 위해 항상 작업의 일부 수정본을 유지하십시오.

트랙백 및 핑백 비활성화

다른 블로그나 웹사이트가 귀하의 웹사이트에 링크되는 모든 경우, 귀하는 알림을 받게 되며, 이는 이후에 해당 특정 게시물에 대한 데이터베이스를 업데이트하여 궁극적으로 서버 리소스를 복잡하게 만듭니다.

이를 원하지 않으면 WordPress 토론 설정에서 트랙백 및 핑백을 비활성화할 수 있습니다. WordPress 대시보드에 로그인한 후 설정 → 토론으로 이동한 다음 아래 이미지와 같이 처음 두 확인란의 선택을 취소합니다.

Disable Pingback and Trackback

핑백 및 트랙백 비활성화

워드프레스 호스팅 받기 워드프레스 개발자

9. 댓글 및 긴 게시물을 페이지로 분할

질문이 없습니다. 블로그에 댓글을 대량으로 게시하는 참여 청중을 확보하는 것은 정말 우연입니다. 불행히도 그러한 활동은 잠재적인 역효과를 낳습니다. 이러한 댓글을 로드하면 웹사이트의 로드 속도가 크게 느려질 수 있습니다.

WordPress는 이 문제를 해결하기 위해 '중단 주석'이라는 기능을 유용하게 통합했습니다. 설정 → 토론 관리 페이지로 이동하여 '댓글을 페이지로 나누기' 확인란을 선택하기만 하면 됩니다.

Break Comments Into Pages

주석을 페이지로 나누기

게시물이 긴 산문과 예쁜 이미지를 많이 사용하는 경우 웹사이트의 로딩 속도가 저하될 수 있습니다. 간단하고 효과적인 솔루션이 있습니다. 이러한 성가신 게시물을 별도의 페이지로 분할합니다.

페이지 분할을 원하는 지점에 다음 코드 스니펫을 추가하기만 하면 됩니다. Visual 모드가 아닌 Text 모드에서 이 코드 라인을 추가했는지 확인하십시오.

<!--nextpage-->

< !–nextpage–> 아래에 추가된 모든 콘텐츠는 게시물의 다음 페이지에 표시되며 페이지 끝에 아래와 같이 페이지 매김 링크가 표시됩니다.

다음 페이지 옵션

다음 페이지 옵션

10. WordPress에 직접 비디오를 업로드하지 마십시오

비디오 콘텐츠를 직접 업로드하면 웹사이트에 잠재적인 대역폭이 많이 소모될 수 있습니다. 귀하의 웹 호스팅 제공업체는 그러한 사용에 대해 추가 요금을 부과할 수 있으므로 귀하는 그러한 조치를 수행하지 말아야 할 한 가지 이유가 있습니다.

둘째, 길이가 길거나 고해상도의 비디오는 백업 크기를 엄청나게 증가시켜 백업에서 웹사이트를 복원하는 것이 훨씬 더 어려운 작업이 될 수 있는 상황으로 이어질 수 있습니다.

위의 시나리오를 원하지 않을 수 있으므로 다음과 같은 인기 있는 비디오 호스팅 공급자 중 하나에 비디오를 직접 업로드한 다음 포함된 링크를 사용할 수 있습니다.

  • 유튜브
  • 비메오
  • 플리커
  • 데일리모션

WordPress에 YouTube 비디오를 포함하는 것은 고맙게도 기본입니다. 먼저 YouTube에서 포함하려는 비디오를 찾으십시오. 그런 다음 공유 링크를 클릭하고 관련 동영상 URL을 복사합니다.

YouTube에서 비디오 URL 복사

YouTube에서 비디오 URL 복사

마지막으로 동영상의 URL을 게시물에 직접 붙여넣고 업데이트 버튼을 클릭하면 자동으로 삽입됩니다.

WordPress 게시물에 YouTube 동영상 URL 붙여넣기

WodPress Post에 YouTube 비디오 URL 붙여넣기

결론

WordPress 웹사이트의 잠재적인 속도를 끌어내기 위해 가장 효과적이고 인기 있는 10가지 조정을 나열했습니다. 연구실에서 일하는 부지런한 연구원들은 이러한 조정을 효과적으로 구현하면 WordPress 웹 사이트의 로딩 속도를 극적으로 향상시킬 수 있음을 입증했습니다. 하루를 쉬는 달팽이처럼 빠르게 움직이는 것처럼 보이는 WordPress 설치를 만난 적이 있다면 페이지의 속도 점수를 의심할 여지 없이 개선하고 개선할 수 있는 다음과 같은 실용적인 팁을 얻게 될 것입니다.

다음의 예쁜 그래프는 WordPress 블로그에서 구현한 각 조정 후의 Google PageSpeed ​​점수를 나타냅니다.

Google 페이지 점수 대 워드프레스 개조

Google 페이지 점수 대 워드프레스 개조

WordPress 사이트의 속도를 높이고 로딩 시간을 개선할 수 있는 대안적이고 효과적인 방법을 알고 계십니까? 특히 밀리초가 고객에게 중요할 수 있는 경우에는 무엇이든 매우 가치가 있습니다. 다음 의견 섹션에서 성능 아이디어를 공유해 주세요!

Should you require our aid to improve the PageSpeed score of your WordPress website, please also drop your website name in the comment section and we will endeavor to get back to you.

워드프레스 호스팅 받기 워드프레스 개발자