무료로 WordPress 사이트 속도를 높이는 방법
게시 됨: 2020-07-22음, 워드프레스, 이걸 어떻게 말해야 할지 모르겠지만... 당신은 너무 느립니다!
저는 7년 넘게 워드프레스를 매일 사용해 왔으며 정말 좋아하지만 가끔은 페이지를 빨리 로드 하기 위해 코끼리를 계단 위로 밀어 올리는 것 같은 느낌이 들 때가 있습니다.
누가 그것을 탓할 수 있겠습니까? WordPress는 강력한 콘텐츠 관리 시스템 이지만 플러그인, 이미지, 스크립트로 로드하고 저렴한 호스팅을 구입한 다음 로드하는 데 시간이 오래 걸리는 이유가 궁금합니다.
하지만 워드프레스에는 희망이 있습니다! 완벽한 속도 감사를 통해 호스팅이나 플러그인에 많은 돈을 쓰지 않고 WordPress 속도를 높이는 방법을 배웠습니다.
사실, 나는 $0 을 썼고 내 사이트는 거의 10초 만에 로딩에서 1초 미만 으로 바뀌었습니다. 그것은 10배 더 빠르며 시작하기 전에 이미 일부 캐싱과 CDN을 사용하고 있었습니다.
전에:
페이지를 완전히 로드하는 데 거의 10초가 걸립니다.
후에:
이제 페이지가 1초 이내에 로드됩니다.
꽤 멋지죠?!
나처럼 WordPress 웹 사이트의 속도 를 높이고 싶습니까? WordPress를 더 빠르게 로드 하기 위해 취한 모든 단계를 안내해 드리겠습니다.
목차
WordPress 속도 플러그인을 구입할 필요가 없습니다.
온라인에서 찾은 다른 모든 WordPress 속도 자습서와 달리 이 실험 을 단 한 푼도 지출하지 않고 실행했습니다. a) WordPress 사이트가 있는 모든 사람이 결과를 사용할 수 있기를 원하고 b) 비용이 저렴하기 때문입니다. 또한 c) 호스팅에 많은 돈을 쓰는 WordPress 사이트가 여전히 느려지는 것을 보았습니다.
물론, 내 속도 트릭 중 일부는 perfmatters 및 WP Rocket과 같은 프리미엄 플러그인으로 수행할 수 있지만 약간의 시간과 인내심이 있다면 몇 가지 무료 플러그인과 약간의 코드 편집 으로 동일한 결과를 무료로 얻을 수 있습니다.
WordPress 속도가 중요한 이유는 무엇입니까?
당신의 웹사이트는 실제 사람들이 사용하고 사람들은 빠르게 로드되는 웹사이트를 선호하기 때문에 WordPress 속도가 중요합니다. 안 그래?
빠른 WordPress 사이트는 사람들이 사용하기를 원할 것이기 때문에 다른 느린 웹사이트에 비해 경쟁 우위를 제공 합니다. 그리고 구글도 그것을 알아차렸을 것이다.
네, SEO. WordPress는 모든 웹사이트에서 SEO를 위한 훌륭한 출발점이지만 속도는 유기적 검색 엔진의 성공에 큰 역할을 합니다. 내가 작업한 프로젝트에서 사이트 속도를 개선한 결과 이탈률 및 더 강력한 순위와 관련된 기타 지표가 감소했습니다.
2018년부터 Google은 페이지 속도를 모바일 검색의 공식 순위 요소로 사용했습니다. 이는 2019년부터 모바일 우선 인덱싱을 사용한 이후의 모든 검색을 의미합니다. 또한 Google은 핵심 웹 바이탈(Core Web Vitals) 속도 벤치마크를 사용하여 가까운 사이트 순위를 매기기 시작할 것입니다. 미래.
Facebook 또는 Google 광고에서 웹사이트로 유입되는 트래픽에 대해 비용을 지불하는 것이 로딩 속도가 느린 사이트에서 벗어날 수 있음을 의미한다고 생각한다면 다시 생각해 보십시오. 반송될 수 있는 클릭에 대해 비용을 지불하고 있습니다!
WordPress를 사용하든 다른 CMS(콘텐츠 관리 시스템)를 사용하든 웹사이트를 최대한 빠르게 만들 려고 노력해야 합니다. 로드 시간을 1000분의 1초로 줄이는 것만으로도 트래픽과 전환, 특히 모바일에서 엄청난 이득을 얻을 수 있습니다.
요약하자면 , 더 빠른 WordPress 웹사이트의 이점은 다음과 같습니다.
- 더 나은 UX(사용자 경험)
- 낮은 이탈률
- SEO(검색 엔진 최적화)
- 모바일 및 음성 검색에 최적화
- 관리 대시보드를 사용하여 웹사이트를 업데이트할 때마다 시간을 절약하세요!
WordPress 속도 테스트를 수행하는 방법
빠른 수정 플러그인 구매를 시작하기 전에 WordPress 웹 사이트의 내부를 살펴보고 속도를 느리게 만드는 원인을 찾고 사이트 속도 감사를 수행해야 합니다 .
과거에는 Google의 Page Speed Insights 및 Pingdom과 같은 도구를 사용하여 WordPress 웹사이트의 속도를 테스트했습니다. 이러한 도구는 사이트 성능의 기본 개요에 적합하지만 실행 가능한 통찰력을 얻으려면 더 큰 보트가 필요합니다. 또는 적어도 WebPageTest.
이상한 이유로 대부분의 사람들은 홈페이지를 사용하여 웹사이트의 속도를 테스트합니다. 홈페이지가 주요 방문 페이지가 아니라면 걱정하지 마십시오. 대표적인 결과를 얻으 려면 가장 중요한 페이지 유형(저의 경우 블로그 게시물)에서 테스트를 실행하는 것이 좋습니다.
WebPageTest를 사용하여 WordPress 성능을 테스트하는 방법
WebPageTest를 사용하면 테스트를 실행하기 전에 여러 변수를 선택할 수 있습니다. 표준 고급 테스트 구성은 대부분의 사이트에 적합하지만 사용자에게 더 잘 맞도록 테스트 위치를 New York으로 변경하고 브라우저를 Chrome으로 변경합니다(Google Analytics를 확인하여 사용자의 기기/위치를 찾으십시오).
인내심 을 갖고 테스트를 완료하는 데 몇 분이 걸립니다. 커피를 마시거나 이메일을 확인할 시간입니다!
많은 이미지가 포함된 긴 형식의 블로그 게시물(Cryptocurrency SEO에 대한 게시물)에서 테스트를 실행했습니다.
기본적으로 WebPageTest는 페이지에 대해 3가지 다른 부하 테스트를 차례로 실행합니다. 첫 번째 실행 테스트 에 초점을 맞추는 이유는 페이지가 새로운 방문자(대부분의 청중)에 대해 수행하는 방식을 나타내기 때문입니다. 후속 실행은 브라우저가 이미 페이지를 방문했을 때 페이지의 성능을 보여줍니다. 브라우저가 자산을 얼마나 잘 캐시하는지 확인하는 데 유용하며 웹사이트에 방문자당 페이지 뷰가 많은 경우(특히 전자상거래의 경우) 중요합니다.
테스트가 완료되면 볼 수 있는 속도 데이터 테이블은 다음과 같습니다.
몇 가지 주요 사이트 속도 측정항목에 관심이 있습니다.
로드 시간 – 페이지가 문서 완료 상태로 완전히 로드되는 데 걸리는 총 시간입니다.
내 로드 시간은 9.933초입니다. 그렇지 않으면 정말 느립니다. 2.5초 미만을 권장합니다.
첫 번째 바이트 – TTFB(Time to First Byte)라고도 하며 데이터의 첫 번째 바이트가 전송되기까지 걸리는 시간입니다.
내 TTFB는 3.371초입니다. 정말, 정말 느립니다. 500ms(0.5초) 미만이어야 하지만 Google에서는 200ms를 이상적으로 권장합니다. 그렇군요.
바이트 인 – 페이지가 완전히 로드/문서 완료되면 '바이트 인'은 웹 페이지의 전체 크기입니다.
내 블로그 게시물은 2,532KB 또는 문서 완료 단계에서 약 2.5MB였습니다. 꽤 커서 1MB 미만으로 만들고 싶습니다.
요청 – 총 http(s) 요청 수입니다. 문서 완료 요청은 모든 웹페이지 콘텐츠를 완전히 로드하는 데 필요한 요청 수이고 완전히 로드된 요청은 도메인 및 제3자(Google Analytics 스크립트 등)의 총 요청 수입니다.
내 페이지는 47개를 요청했고 완전히 로드되면 232개를 요청했습니다. 느린 것은 당연합니다! 일반적으로 요청 수가 적을수록 페이지가 더 빨리 로드됩니다.
"도메인" 탭을 클릭하면 더 많은 통계를 볼 수 있습니다.
도메인별 콘텐츠 분석 – 각 도메인의 요청 및 바이트 수입니다.
대부분의 요청이 Google Analytics에서 발생했고 약 0.5MB의 데이터가 외부 스크립트에서 발생했음을 알 수 있습니다.
더 많은 것을 보려면 "콘텐츠 분류" 탭을 클릭하십시오:
유형별 콘텐츠 분석 – 각 MIME( Multipurpose Internet Mail Extensions ) 유형의 바이트 요청 수입니다.
내 페이지는 이미지가 매우 많습니다. 이미지는 158개의 요청과 2.5MB 크기를 구성합니다. 하지만 자바도 많이 있습니다. 이것은 이미지의 크기/로드를 줄이고 JavaScript를 결합/제거하면 페이지를 더 빨리 로드하는 데 도움이 된다는 것을 알려줍니다.
"요약" 탭 에서 속도 감사의 가장 중요한 부분인 폭포 보기를 찾을 수 있습니다.
폭포 보기 – 페이지에서 요청이 이루어진 순서와 로드하는 데 걸린 시간을 보여줍니다.
폭포식 뷰의 각 항목은 요청을 나타냅니다. 각 막대의 색상은 MIME 유형 (이미지, 자바스크립트 등)을 나타내며 막대의 길이는 로드하는 데 걸린 시간을 나타냅니다 . 밀리초 단위의 로딩 시간도 표시됩니다.
파란색 실선은 "문서 완료" 단계를 나타냅니다. 즉 , 페이지 콘텐츠가 완전히 로드되지만 추가 스크립트(예: 분석)가 백그라운드에서 로드될 수 있는 시간입니다.
파란색 선 앞에 오는 요청에 집중 하십시오. 이러한 요청의 로드 시간을 줄이면 페이지를 더 빠르게 사용할 수 있습니다. 자세한 내용을 보려면 요청을 클릭하십시오. 파란색 선보다 먼저 로드되고 시간이 오래 걸리는 요청으로 시작합니다(가장 넓은 막대). 상세 보기를 통해 요청이 어디에서 왔는지 알 수 있습니다.
이제 웹 사이트가 로드되는 방식에 대한 모든 데이터를 얻었습니다. 이제 세부 정보를 조사하고 속도를 높이기 위해 WordPress를 변경할 차례입니다.
너무 많은 플러그인에 대한 신화
"WordPress 속도를 높이는 방법"에 대한 목록 게시물을 읽은 경우 사람들이 플러그인이 너무 많으면 WordPress 사이트 속도가 느려지고 속도를 다시 높이려면 플러그인을 삭제해야 한다고 말합니다. .
그것은 단지 명백한 잘못입니다.
플러그인이 항상 WordPress 사이트 속도를 늦추는 것은 아닙니다. 플러그인이 1개 있는 사이트가 플러그인이 25개 있는 사이트보다 항상 빠르지는 않습니다. 이 사이트의 플러그인 수를 늘리고 10배 빠르게 만들었습니다.
잘못 코딩되었거나 많은 서버 성능 또는 MySQL 쿼리를 사용하는 플러그인(및 테마)은 WordPress 사이트를 느리게 만들 수 있습니다. 따라서 WebPageTest로 철저한 사이트 속도 테스트 를 실행하면 플러그인이 부담을 주는지 알려줍니다.
피해야 할 플러그인
WordPress 사이트를 느리게 만드는 것으로 알려진 몇 가지 인기 있는 플러그인이 있습니다(특히 저렴한 공유 호스팅을 사용하는 경우). 볼 것은 관련 게시물 플러그인, 게시물 통계 플러그인 및 현장 백업 플러그인입니다. Broken Link Checker와 같이 사이트를 지속적으로 스캔해야 하는 플러그인도 널리 비난을 받고 있습니다.
최적화된 WordPress 호스트에서 교훈을 얻을 수 있습니다. 웹사이트 성능에 부정적인 영향을 미치기 때문에 플러그인을 전면 금지한다면 직접 사용하고 싶지 않을 것입니다.
다음은 주요 웹 호스트(WP Engine, Kinsta 및 Hostgator)에서 금지된 모든 플러그인 목록입니다.
전력 소모가 많은 플러그인이 속도를 늦추는 경우 동일한 결과를 얻기 위해 다른 플러그인으로 전환하거나 타사 서비스를 사용하여 교체할 수 있습니다. 예를 들어 Broken Link Checker 플러그인을 사용하는 대신 Screaming Frog를 사용하여 사이트에서 깨진 링크를 검색할 수 있습니다.
빠른 승리: 필요하지 않은 플러그인 및 스크립트 삭제
WordPress 웹사이트의 속도를 높이기 위해 누구나 할 수 있는 가장 쉽고 저렴하며 빠른 방법은 페이지에 많은 바이트 또는 요청을 추가하는 플러그인과 스크립트를 삭제하는 것입니다.
위의 속도 감사에서 댓글 플러그인 Disqus가 내 사이트 로드 시간을 크게 늘리고 있음을 알 수 있습니다.
플러그인을 비활성화한 다음 사이트의 로드 시간, 바이트 크기 및 요청 수를 다시 테스트하여 플러그인의 영향을 테스트하십시오.
내 사이트에 대한 Disqus의 영향은 다음과 같습니다.
이전(Disqus 사용):
Disqus 플러그인을 삭제한 후:
Disqus를 삭제하여 페이지 로딩 시간을 2초 단축하고 요청 수와 크기를 줄인 것을 확인할 수 있습니다.
스크립트는 또한 Google Analytics 스크립트 및 Google Fonts 스크립트와 같은 WordPress 속도를 늦출 수 있습니다 . WebPageTest의 폭포 보기에서 WordPress 사이트에 로드되는 스크립트를 확인할 수 있습니다.
Google 글꼴은 문서 완료 단계 이전에 일찍 로드되므로 제거하면 사이트 속도가 빨라집니다. 현재 Montserrat(Google 글꼴)를 사용하고 있지만 Waterfall 보기에서 내 페이지가 더 이상 사용하지 않는 Lora용 스크립트도 로드하고 있는 것을 보았습니다. 불필요한 Google 글꼴 스크립트를 삭제하면 내 페이지 로드 시간이 330ms 단축됩니다. 모든 작은 비트가 중요합니다!
이미지 크기 및 로딩 방법을 최적화하는 방법
대부분의 WordPress 사이트에서 이미지는 각 페이지에 로드해야 하는 가장 큰 파일 중 일부입니다.
가능한 한 빨리 로드되도록 WordPress에서 이미지를 최적화하려면 몇 가지 작업을 수행해야 합니다.
1. 이미지를 가능한 한 작게(바이트 단위로) 압축합니다.
이미지가 작을수록(바이트 단위) 더 빨리 로드됩니다. 이미지를 WordPress에 업로드하는 경우 업로드하기 전에 크기를 조정하여 필요한 것보다 크지 않도록 합니다. 더 나은 압축을 위해 PNG 이미지를 JPEG로 변환하십시오.
기존 이미지 라이브러리가 있는 경우 Smush(무료)와 같은 이미지 플러그인을 사용하여 업로드할 때 기존 이미지와 새 이미지를 압축합니다. 저는 수년 동안 Smush를 사용해 왔기 때문에 제 이미지가 이미 아주 작습니다. 개선의 여지가 많지 않지만 아직 개선할 가치가 없다면 할 가치가 있습니다.
최근에 ShortPixel을 사용하여 이미지를 압축하고 WebP 형식으로 제공하는 것으로 전환했습니다. WebP 파일은 비교 가능한 JPEG 이미지보다 25-34% 작으며 Google에서 권장합니다. 다음은 WordPress에서 WebP 이미지를 사용하는 방법에 대한 자습서입니다.
ShortPixel은 매월 100개의 이미지 크레딧을 무료로 제공하며, 이는 대부분의 소규모 웹사이트에서 시작할 수 있을 만큼 충분합니다. 기존 이미지 라이브러리가 크거나 많은 콘텐츠를 업로드하는 경우 저렴한 추가 이미지 크레딧을 구입할 수 있습니다. ShortPixel WordPress 플러그인이 모든 설정을 도와드립니다.
2. 긴 페이지의 지연 로드 이미지
지연 로딩은 사용자가 페이지를 아래로 스크롤할 때까지 이미지 로딩을 연기하는 프로세스입니다.
예를 들어 내 Cryptocurrency SEO 블로그 게시물에는 23개의 이미지가 있습니다. 이러한 이미지의 결합 크기는 2.5MB입니다. 그것은 긴 페이지(3000단어 이상)이므로 독자가 페이지 아래 이미지에 도달하는 데 시간이 걸립니다. 그러나 결정적으로 사용자는 아무 것도 읽기 전에 모든 이미지가 로드될 때까지 기다려야 합니다 .
시간 낭비입니다!
사용자가 모든 이미지가 로드될 때까지 기다리게 하는 대신 지연 로드를 사용하면 스크롤 없이 볼 수 있는 이미지(페이지의 보이지 않는 부분)보다 먼저 다른 페이지 자산을 로드할 수 있습니다. 사용자가 스크롤하면 이미지가 로드되어 나타납니다.
지연 로딩을 설정하기 위해 JavaScript를 사용하여 이미지 로딩을 연기하는 BJ Lazy Load 플러그인(무료)을 설치했습니다. 예, 이것은 WordPress 사이트에 대한 추가 스크립트이지만 이미지가 페이지 크기의 많은 부분을 차지하기 때문에 그만한 가치가 있습니다.
지연 로딩이 활성화된 내 블로그 게시물이 얼마나 빨리 로드되는지는 다음과 같습니다.
참고: 지연 로드를 사용하는 경우 문서 완료 및 전체 로드 시간은 페이지 아래의 이미지를 고려하지 않습니다.
지연 로딩을 사용하기 전에는 페이지를 로드하는 데 거의 10초가 걸렸습니다. 지연 로딩을 사용하면 사이트 로드가 2배 빨라 졌습니다.
WebPageTest의 콘텐츠 분석을 보면 그 이유를 알 수 있습니다.
지연 로딩이 활성화되면 이미지 요청 수가 158에서 134로 줄어듭니다. 이미지 크기는 2,523,665바이트(2.5MB)에서 116,319바이트(0.12MB)로 줄어듭니다.
BJ Lazy Load 플러그인은 사이트에 JavaScript 및 기타 스크립트를 추가했지만 로딩 시간에는 영향을 미치지 않는 것 같습니다.
무료 Autooptimize 플러그인을 사용하여 이미지를 지연 로드할 수도 있습니다. 이 플러그인은 이 기사에서 논의된 다른 속도 최적화도 수행합니다. 대시보드 > 설정 > 자동 최적화 > 이미지 로 이동하여 "이미지 로드 지연" 옵션을 확인합니다.
속도 최적화를 위해 JavaScript를 사용한 지연 로딩에만 의존하지 마십시오. 사용자가 자바를 차단하는 경우 지연 로딩을 수신하지 않기 때문입니다. 최대 이점을 위해 이미지도 압축해야 합니다.
기억해야 할 한 가지 중요한 사항은 이미지 클래스를 추가하여 필수 이미지가 즉시 로드되도록 할 수 있습니다(예: 스크롤 없이 볼 수 있는 부분). BJ Lazy Load에서 "not-lazy="1"과 같은 태그를 구성하고 지연 로드를 건너뛰려면 이미지에 추가하기만 하면 됩니다. 자동 최적화를 사용하면 지연 로드 제외를 추가할 수 있습니다.
참고: 워드프레스는 워드프레스 코어에 지연 로딩을 추가하기 위해 노력하고 있습니다. 즉, 향후 추가 코드나 플러그인 없이 사용할 수 있습니다.
CDN이 이미지를 더 빠르게 로드할 것이라고 가정하지 마십시오.
WordPress 속도에 대한 많은 조언을 읽었으며 대부분 KeyCDN(내가 테스트함) 또는 StackPath(이전 MaxCDN)와 같은 유료 CDN 서비스를 사용하여 이미지를 호스팅할 것을 권장합니다.
이미지 CDN을 사용하는 경우 웹페이지가 로드될 때 이루어진 요청은 yourdomainname.com/image-name 대신 cdn.yourdomainname.com/image-name 과 같은 URL에서 나옵니다. 이는 요청이 다른 서버에서 웹사이트 콘텐츠의 나머지 부분으로 전달되고 있음을 의미하지만 더 빠를 것이라는 의미는 아닙니다.
예를 들어 WordPress 사이트 WPBeginner에서 임의 페이지의 로드 시간을 확인합니다.
CDN(MaxCDN 사용)의 이미지를 로드하는 데 시간이 오래 걸리고 크기도 크지 않습니다. 위의 세부 정보 창은 로드하는 데 거의 3/4초가 걸리는 9.3KB 이미지를 보여줍니다. 느린 속도입니다!
CDN이 항상 이미지를 빠르게 로드하는 것은 아닙니다. 좋은 이미지 압축과 지연 로딩은 페이지를 더 빠르게 로드할 수 있는 훨씬 더 안정적인 방법입니다.
JavaScript를 비동기적으로 로드
스크립트로 인해 사이트 속도가 느려질 수 있지만 스크립트와 해당 기능도 필요합니다. 예를 들어 저는 Google Analytics를 사용하는 것을 좋아하므로 내 사이트를 더 빠르게 만들기 위해 Google Analytics를 제거하고 싶지 않습니다. 그러나 Analytics 및 기타 스크립트를 더 빠르게 로드할 수 있는 방법이 있습니다. 바로 비동기 로드 입니다.
비동기식 JavaScript는 동시에 여러 스크립트를 로드합니다. 동기식 로드의 반대입니다. 즉, 한 번에 하나씩 순서대로 스크립트를 로드하는 것을 의미합니다.
모든 스크립트를 동시에 로드하면 대기 시간이 없기 때문에 훨씬 더 빨리 로드됩니다. 이것은 특히 WordPress 사이트가 Google Analytics 또는 Google Fonts와 같은 다양한 외부 소스에서 javascript를 호출하는 경우입니다.
Google Page Speed Insights에서 웹사이트 속도 테스트를 실행한 경우 " 렌더링 차단 JavaScript를 제거 "해야 함을 알 수 있습니다.
렌더링 차단 JavaScript를 제거하면 JavaScript를 기다리지 않고 스크롤 없이 볼 수 있는 페이지 콘텐츠(예: 이미지 및 텍스트)를 로드할 수 있습니다. WordPress 사이트가 작동하기 전에 로드할 JavaScript가 필요한 경우 렌더링 차단 JavaScript는 괜찮습니다. 그러나 나처럼 웹 사이트에서 추가 기능에만 JavaScript를 사용하는 경우 렌더링 차단 Java를 차단하는 것이 웹 사이트 속도를 높이는 좋은 방법입니다.
무료 플러그인 Async JavaScript를 사용하여 JavaScript를 쉽게 최적화했습니다. 빠른 "비동기 적용" 설정을 선택합니다.
추가 속도 포인트의 경우 Google Analytics 추적 코드를 비동기 버전으로 변경할 수도 있습니다. Google에서는 사이트 속도를 높이는 데 도움이 된다고 명시합니다.
아래의 대체 비동기 추적 스니펫은 사전 로드에 대한 지원을 추가하여 최신 브라우저에서 약간의 성능 향상을 제공합니다.
<!-- 구글 애널리틱스 --> <스크립트> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(인수)};ga.l=+new 날짜; ga('만들기', ' UA-XXXXX-Y ', '자동'); ga('보내기', '페이지뷰'); </스크립트> <스크립트 비동기 src='https://www.google-analytics.com/analytics.js'></script> <!-- Google Analytics 종료 -->
gzip 압축 사용
Gzip 압축은 파일을 축소하고 더 작은 크기로 인해 더 빨리 로드할 수 있도록 하는 무손실 압축 방법입니다.
텍스트, HTML, JavaScript 및 CSS는 모두 gzip 압축을 사용하여 압축할 수 있습니다.
다양한 WordPress 플러그인을 사용하여 gzip 압축을 적용할 수 있습니다. CloudFlare와 같은 서비스도 이를 수행할 수 있습니다. 가능 하면 서버에 직접 압축을 적용 하는 것을 좋아합니다.
호스팅 패키지가 cPanel 액세스를 제공하는 경우 서버에 직접 gzip 압축을 추가할 수 있습니다. cPanel 홈페이지에서 "웹사이트 최적화" 아이콘으로 이동합니다. "모든 콘텐츠 압축"을 선택하고 "설정 업데이트"를 클릭합니다.
웹사이트에서 gzip 압축이 활성화되어 있는지 확인하려면 간단한 테스트를 실행하세요.
쿼리 문자열 제거
일부 CSS 파일에는 "css/screen.min.css?ver=1.7" 과 같이 끝에 버전 번호가 있습니다. "?" 뒤에 약간 파일이 캐시되지 않으므로 모든 페이지에 로드됩니다. 즉, 사용자가 웹사이트의 여러 페이지를 방문하더라도 로딩 시간이 계속 느려집니다.
이 코드를 WordPress 테마의 functions.php 파일 끝에 추가하면 쿼리 문자열이 제거됩니다. cPanel의 파일 관리자나 FileZilla와 같은 FTP 클라이언트를 통해 이 작업을 수행할 수 있습니다.
/**쿼리 문자열 제거 함수 rb_remove_script_version( $src ){ $parts = 폭발( '?', $src ); $parts[0] 반환; } add_filter( 'script_loader_src', 'rb_remove_script_version', 15, 1 ); add_filter( '스타일 로더_src', 'rb_remove_script_version', 15, 1 );
99robots, 그 코드에 감사드립니다.
참고: 시스템 파일을 엉망으로 만들기 전에 항상 백업을 만드십시오!
워드프레스 메모리 늘리기
WordPress의 기본 메모리 제한은 32MB로 사이트를 제한할 수 있습니다.
wp-config.php 파일에 다음 코드를 추가하십시오.
/** 워드프레스 메모리 늘리기 정의( 'WP_MEMORY_LIMIT', '128M' );
이 무료 플러그인을 사용하여 WordPress 사이트에서 사용 중인 메모리 양을 확인할 수 있습니다.
DNS 프리페칭 추가
DNS는 도메인 이름 서버입니다. Google.com과 같이 단어 이름으로 도메인(웹사이트라고도 함)을 알고 있지만 컴퓨터는 도메인을 IP 주소(예: 12.345.678)라는 숫자로 알고 있습니다. 도메인에서 리소스를 가져오려면 DNS 조회가 발생해야 합니다. 단어 이름을 IP 주소로. 시간이 걸립니다.
DNS 프리페칭은 링크를 클릭하거나 리소스를 로드하기 전에 도메인 조회를 확인하고 단어 이름을 IP 주소로 변환하려고 시도합니다.
Google Analytics 또는 글꼴과 같은 WordPress 사이트의 일반 스크립트에 대한 DNS 프리페치를 추가하면 로드 시간이 몇 밀리초 단축됩니다.
WebPageTest에서 테스트를 실행하고 프리페치해야 하는 외부 리소스를 확인합니다.
WordPress 테마의 functions.php 파일에 이 코드를 추가하세요.
//* DNS 프리페칭 추가 함수 dns_prefetching() {echo ' ';}add_action('wp_head', 'dns_prefetching', 0);
WebPageTest의 "도메인" 탭으로 이동하여 미리 가져올 외부 도메인을 찾으십시오.
브라우저 캐싱 활용
브라우저(예: Chrome, Firefox 등)가 웹 페이지를 로드할 때마다 페이지의 모든 파일(HTML, CSS, JavaScript, 이미지 등)을 다운로드해야 합니다. 브라우저 캐싱이 없으면 사람이 한 시간 안에 동일한 웹 페이지를 다시 방문하면 모든 페이지 자산을 다시 다운로드합니다.
브라우저 캐싱은 설정된 기간 동안 사용자의 브라우저에 웹사이트 자산을 저장하므로 사용자가 계속 탐색할 때 페이지가 더 빨리 로드됩니다.
브라우저 캐싱을 활용하려면 아래 코드를 .htaccess 파일에 추가하세요.
## 브라우저 캐싱 활용 시작 ## 만료일 활성 ExpiresByType 이미지/jpg "액세스 1년" ExpiresByType 이미지/jpeg "액세스 1년" ExpiresByType image/gif "액세스 1년" ExpiresByType image/png "액세스 1년" ExpiresByType 텍스트/css "액세스 1개월" ExpiresByType text/html "1개월 액세스" ExpiresByType application/pdf "액세스 1개월" ExpiresByType text/x-javascript "액세스 1개월" ExpiresByType 응용 프로그램/x-shockwave-flash "액세스 1개월" ExpiresByType 이미지/x-icon "액세스 1년" Expires기본값 "1개월 액세스" Leverage 브라우저 캐싱 종료 ##
더 빠른 로딩을 위해 캐싱 및 CDN 사용
캐싱은 방문자에게 빠르게 제공될 수 있도록 웹사이트 페이지의 HTML 버전을 서버의 RAM에 저장하는 빠른 데이터 저장 방법입니다.
캐싱이 없으면 방문자가 웹사이트의 페이지에 액세스할 때마다 서버에서 새 HTML 버전을 만들어야 하므로 시간이 걸립니다.
좋은 소식은 도움이 되는 무료 WordPress 캐싱 플러그인이 많이 있다는 것입니다.
저는 WP Super Cache를 사용하고 있습니다. WordPress 뒤에 있는 회사인 Automattic에서 만들었기 때문입니다.
CDN(콘텐츠 전달 네트워크)은 웹사이트의 버전을 저장하는 다양한 글로벌 위치에 있는 서버 네트워크입니다. 방문자가 웹사이트의 페이지에 액세스하면 가장 가까운 CDN 위치에서 가져옵니다. 이 위치는 실제 서버 위치보다 더 가깝습니다. CDN은 또한 빠른 검색을 위해 웹사이트 이미지 및 대용량 파일 버전을 저장하여 서버의 부하를 줄입니다.
CDN이 없으면 서버는 단일 위치에만 기반하고 데이터는 매번 해당 서버에서 방문자에게 로드 및 전송되어야 합니다.
KeyCDN, StackPath(이전 MaxCDN) 및 Cloudflare와 같은 많은 CDN이 있습니다. 무료이고 설정이 쉽기 때문에 CDN을 처음 사용하는 경우 Cloudflare를 사용하는 것이 좋습니다.
깨진 요청 수정
WebPageTest의 폭포 보기는 요청 오류 또는 리디렉션을 강조 표시합니다(노란색). 이는 표준 http 상태 코드(301, 404 등)를 사용하여 제공되며 문제를 찾는 데 도움이 됩니다.
먼저 404 오류 를 찾으십시오. 내 사이트에서 테마의 일부로 누락된 이미지 자산을 로드하려고 했습니다. 삭제하고 로드 시간을 몇 밀리초 단축했습니다. 쉬운.
사용하지 않는 WordPress 기능 비활성화
WordPress는 다양한 유형의 웹사이트에서 사용되는 매우 강력하고 다재다능한 CMS입니다. 귀하의 웹사이트가 WordPress의 일부 기능을 사용하지 않을 가능성이 높지만 여전히 모든 기능을 로드하고 있습니다.
다음은 해제를 고려할 수 있는 일반적으로 잘 사용되지 않는 WordPress 기능입니다.
- 이모티콘
- REST API
- RSD 링크
- 대시콘
- jQuery 마이그레이션
- 바로가기
- XML-RPC
- 하트비트 API
Clearfy(무료 플러그인)를 사용하여 사이트에서 불필요한 WordPress 팽창을 쉽게 제거할 수 있습니다.
특정 페이지에만 스크립트/플러그인 로드
WordPress는 웹사이트의 모든 페이지에 있는 모든 플러그인과 스크립트를 로드하려고 시도합니다. 그러나 모든 페이지에서 모두 사용하지는 않을 것입니다. 이에 대한 일반적인 예는 문의 양식 플러그인입니다. 문의 양식을 사용하는 경우 아마도 귀하의 연락처 페이지에만 있을 것이지만 플러그인 스크립트는 모든 페이지에 로드되어 리소스를 낭비하게 됩니다.
물론 아이러니하게도 플러그인 과부하 문제를 해결하는 데 도움이 되는 플러그인이 있습니다!
MySQL 데이터베이스 최적화
MySQL을 사용하든 MariaDB를 WordPress 데이터베이스로 사용하든 빠른 웹사이트 로딩 속도를 유지하려면 최적화된 상태를 유지해야 합니다. WordPress 사이트에서 작업을 수행할 때마다 데이터베이스 레코드가 저장됩니다. 커질 수 있습니다!
다음과 같은 팽창을 제거하기 위해 WordPress 데이터베이스를 최적화하십시오.
- 오래된 게시물 수정
- 삭제된 플러그인 테이블
- 휴지통에 버린 게시물, 페이지 및 댓글
ManageWP(무료)와 같은 WordPress 관리 대시보드를 사용하면 클릭 한 번으로 WordPress 데이터베이스를 최적화할 수 있습니다. WP DB Manager와 같은 무료 데이터베이스 최적화 플러그인을 사용하거나 cPanel 또는 웹사이트 호스트에서 phpMyAdmin을 통해 정리할 수도 있습니다.
WordPress 테마가 느린지 확인하는 방법
모든 WordPress 테마가 동일하게 생성되는 것은 아닙니다.
속도를 위해 얼마나 잘 코딩되고 최적화되었는지에 따라 WordPress 테마가 매우 빠르거나 끌릴 수 있습니다. 더 자세히 알고 싶다면 가장 빠른 WordPress 테마에 대한 전체 테스트를 읽어보세요.
WebPageTest 속도 감사 결과를 보면 알 수 있습니다.
폭포 보기를 보고 지연되는 것처럼 보이는 파란색 실선 문서 완료 선 앞의 결과를 클릭합니다(느린 항목은 더 긴 막대를 가짐). URL을 검사하십시오. /wp-content/themes/theme-name-here 로 시작하는 모든 항목은 테마 파일입니다.
1초 이상의 지연을 일으키는 성가신 테마 파일을 하나 찾았습니다. Eleven40 테마에서 누락된 배경 질감 .png 이미지입니다. 창세기에 공평하게 말하면, 나는 몇 년 전에 테마를 얻었고 그 이후로 수정하고 있습니다. 그래서 가난한 코딩은 내 것이지 자식 테마가 아닌 내 것이라고 생각합니다. 어느 쪽이든, 그것은 나를 늦추고 있습니다. 내 코드의 테마를 보고 약간의 조정을 하거나 새 테마로 전환을 시도할 수 있습니다(아래 테마 속도 비교 참조). 문제를 해결하기 위해 테마의 style.css 스타일시트를 보고 문제 .png 파일을 찾아 CSS 명령에서 흰색을 선택하도록 코드를 변경했습니다.
이 간단한 CSS 수정으로 WordPress 로드가 훨씬 빨라졌고 로드 시간은 1초 미만이었습니다!
결국 나는 내가 찾을 수 있는 가장 빠른 테마인 GeneratePress 테마로 전환했습니다(이유는 아래 참조!).
인기있는 WordPress 테마 속도 테스트
실험의 정신으로 10가지 인기 있는 테마를 테스트하여 속도 향상을 얻을 수 있는지 확인했습니다. 여기에서 전체 결과를 읽을 수 있습니다.
주제 | PageSpeed 모바일 | 로드 시간 | PageSpeed 데스크톱 | 테마 파일 크기 | 가격 | 현재 사용자 |
---|---|---|---|---|---|---|
생성프레스(프리미엄) | 61/100 | 1.576초 | 97/100 | 882KB(+809KB 플러그인) | $59 | 89,046 |
생성프레스(무료) | 63/100 | 2.143초 | 97/100 | 882KB | $0 | 375,504 |
아스트라 | 63/100 | 2.148초 | 98/100 | 925KB | $0 | 359,575 |
스물 스물 | 68/100 | 2.218초 | 98/100 | 698KB | $0 | 19,973 |
창세기 | 53/100 | 2.305초 | 95/100 | 329KB | $59.95 | 303,811 |
X 테마 | 49/100 | 2.4초 | 89/100 | 5.6MB | $59 | 200,000+ |
오션WP | 49/100 | 2.582초 | 89/100 | 3.2MB | $0 | 322,365 |
디비 | 46/100 | 2.648초 | 90/100 | 6.6MB | $89 | 1,362,180 |
싸다 | 43/100 | 2.810초 | 84/100 | 19.2MB | $59 | 359,345 |
아바다 | 100분의 34 | 2.854초 | 83/100 | 5.4MB | $60 | 623,527 |
TL;DR : GeneratePress Premium은 지금 구입할 수 있는 가장 빠른 WordPress 테마입니다. 그리고 이 웹사이트를 GeneratePress로 옮겼습니다.
다음은 업데이트된 속도 테스트이므로 얼마나 빠른지 확인할 수 있습니다. 결과는 내 perfmatters 리뷰 페이지에 대한 것입니다:
이는 총 로드 시간이 1초 미만 이고 PageSpeed Insights에서 모바일 속도 점수가 91/100 입니다.
이 페이지는 데스크톱에서 Google의 핵심 성능 평가 테스트도 통과했습니다.
느린 호스팅 문제를 발견하는 방법
호스트를 전환하거나 더 빠른 호스팅 패키지로 업그레이드하여 WordPress의 모든 사이트 속도 문제를 마술처럼 개선할 수 있는 것은 아니지만 WebPageTest를 사용하여 호스팅이 얼마나 느려지는지 정확히 식별할 수 있습니다.
간단한 index.html 파일을 호스팅하고 로딩 시간을 확인해보세요. 간단한 html 페이지에서 빠른 TTFB를 얻을 수 없다면 호스팅 속도가 느려집니다.
이미지가 있는 간단한 HTML 페이지를 업로드했고 0.221초의 TTFB를 얻었습니다. 이는 저렴한 호스팅에 좋습니다! 그래서 내 호스팅 공급자는 느리지 않지만 내 WordPress 사이트는 확실합니다! 이제 WordPress를 최적화할 때까지 호스팅에 더 많은 돈을 쓰는 것이 의미가 없다는 것을 압니다.
그 이후로 WordPress 웹사이트를 Cloudways로 옮겼습니다. Cloudways는 월 10달러의 비용이 들지만 환상적인 속도를 제공합니다. 이제 매우 빠른 0.092초의 TTFB를 얻습니다. 자세한 내용은 내 Cloudways 리뷰를 읽을 수 있습니다.
WordPress 속도 플러그인
내 웹 사이트에서 WordPress 속도 개선 및 테스트 방법을 연구하는 데 오랜 시간을 보낸 후 perfmatters 플러그인(여기에서 검토)이 많은 작업을 수행한다는 것을 알았습니다. 25달러 미만의 비용으로 간단하게 해결할 수 있습니다.
WordPress 사이트 속도를 높이는 데 큰 역할을 하는 WP Rocket(여기에서 검토)도 있습니다.
또한 서버 및 cPanel 설정을 직접 조정하는 데 관심이 없다면 Kinsta와 같은 관리형 WordPress 호스팅을 사용하고 작업을 아웃소싱할 수도 있습니다. 저렴한 호스팅보다 비용이 많이 들지만 최소한 잊어버리고 전문가에게 맡길 수 있습니다.
개인적으로 저는 직접 작업을 하는 것을 좋아하는데, 워드프레스 사이트의 속도를 늦추는 것이 무엇인지 이해하는 것이 중요하다고 생각합니다. 즉, 클라이언트, 기술에 익숙하지 않은 WordPress 사용자 또는 시간을 소중히 여기는 사람들에게 타사 서비스를 사용하는 것이 좋습니다.
느린 WordPress 웹 사이트를 빠르게 수정하려면 다음 플러그인 및 서비스를 사용하는 것이 좋습니다.
- 수행자
- WP 로켓
Nitropack에 대한 좋은 소식도 들었지만 아직 테스트하지 않았습니다.