WordPress는 세계에서 가장 많이 사용되는 콘텐츠 관리 시스템(CMS)입니다. 사실, 그것은 현재 인터넷에 있는 모든 웹사이트의 42% 이상을 차지하며, 해마다 시장 점유율은 계속 높아지고 있습니다. 유명 대기업 브래드 사이트 및 관공서에서도 WordPress 를 사용하여 사이트를 만들고 있습니다.
20년 넘게 인터넷 시장이 활발하게 증가되면서 WordPress와 같은 유형의 플랫폼(Drupal, Joomla, Ghost, Medium)들이 있습니다.
저는 WordPress가 SMB, 교육 기관, 트래픽이 많은 블로그, 기업 사이트 등 모든 분야에 단연코 최고의 설루션이라고 생각합니다.
왜냐면, WordPress는 웹사이트를 구축, 관리 및 마케팅하는 데 있어 가장 많은 속성 컨트롤과 유연성을 제공하기 때문입니다. 그러나 WordPress를 사용하는 것만으로는 충분하지 않습니다. 사이트 운영에 있어 사이트 속도 또한 중요시하고 있기 때문입니다. 아래에서 자세히 살펴보겠습니다.
느린 웹사이트는 No!
WordPress는 엄청나게 인기가 있지만, 무엇을 하고 있는지 모르는 경우 이를 사용하면 성능 비용이 발생할 수도 있습니다. 처음에 WordPress는 주로 블로그 플랫폼이었습니다. 그러나 수년에 걸쳐 더 많은 기능이 추가되면서 그 이상으로 발전했습니다. 이제 문제는 다양한 구성과 옵션으로 인해 WordPress가 올바르게 설정되지 않거나 최적화되지 않으면 느리게 실행될 수 있다는 것입니다.
웹사이트의 속도가 왜 중요할까요?
방문자의 경험과 첫인상에 매우 해로울 것이기 때문입니다. 사이트 속도는 이탈률과 전환율에 매우 중요한 역할을 합니다. 인터넷이 발전함에 따라 사람들은 예전처럼 사이트가 열리기를 기다려 주지 않습니다. 페이지가 로드될 때까지 오랜 시간을 기다려야 할 경우 "뒤로 가기" 버튼을 누르고 다음 검색 엔진 결과를 선택할 가능성이 높습니다.
간단히 말하자면 콘텐츠의 양은 사이트 속도에 중요한 역할을 하지만 이제 웹사이트에서 콘텐츠를 로드하는 방법도 고려해야 합니다.
어디서부터 시작해야 하나요?
워드프레스 사이트 속도 높이는 방법으로 가장 먼저 해야 할 일은 WordPress 웹사이트의 속도를 테스트하는 것입니다. 이렇게 하면 기준으로 사용할 수 있는 밴치마크가 생깁니다. 무료 PageSpeed Insights 도구를 사용하는 것이 좋습니다. 접근성, SEO 등에 관한 데이터가 조금 더 필요하면 web.dev Measure tool을 사용할 수 있습니다. 둘 다 Google에서 개발하고 Lighthouse에서 제공하며 점수를 매기기 위해 Core Web Vitals를 사용합니다.
GTmetrix는 많은 성능 매트릭에서 Core Web Vitals를 사용하는 또 다른 편리한 도구입니다. 또한 자산의 Waterfall를 볼 수 있도록 해 주므로 상황을 더 잘 파악하는데 도움이 됩니다. 그러나 무료 버전은 데스크톱에서만 점수를 보여줍니다.
caching, CNDs 및 기타 타사 스크립트로 인해 정확한 결과를 얻으려면 속도 테스트를 항상 3번 이상 실행해야 합니다. 그리고 사용하는 도구에 관계없이 하나를 선택하여 지속적으로 사용하는 것이 중요합니다. 각 도구는 속도를 다르게 측정하므로 성능 향상을 모니터링하기 위해서는 정확한 기준이 필요합니다.
쿼리 및 데이터베이스 로드 성능을 측정해야 하는 경우 Query Monitor 및 New Relic APM을 사용하시면 됩니다.
WordPress 속도 향상 시키기(프론트엔드, 백엔드)
이 게시물은 트래픽이 많은 블로그와 전자상거래 사이트가 혼합된 ㅗ든 WordPress 사이트를 정확하게 구성하는 방법을 단계별로 설명합니다. 여기에는 프로트엔드와 백엔드(WordPress 관리 대시보드) 모두에 적용되는 권장 사항과 Google 핵심 성과 보고서에 특별히 맞춤화된 최적화가 포함되어 있습니다.
WordPresss는 제게 놀라운 일을 성취하는데 큰 도움이 되었으며 여러분에게도 도움이 될 수 있습니다. WordPress 웹사이트 속도를 즉시 높이려면 아래 단계를 따르면 됩니다.
배경이나 전문 지식 주준에 관계없이 이 게시물을 통해 유용한 정보를 찾을 수 있었으면 합니다.
- 워드프레스 호스팅(WordPress hosting)
- 캐싱(Caching)
- 워드프레스 테마(WordPress theme)
- CDN
- 이미지 최적화(Image optimization)
- 데이터베이스 및 디스크 공간(Database and disk space)
- 웹 글꼴(Web fonts)
- 글꼴 아이콘(Font icons)
- 자바스크립트 최적화(Optimize JavaScript)
- CSS 최적화(Optimize CSS)
- HTML 최적화(Optimize HTML)
- 기타 최적화, 리소스 및 팁(Misc. optimizations, resources, and tips)
- 속도 테스트 결과(Speed test results)
- 웹 성능 감사(Web performance audit)
1. 워드프레스 호스팅 - WordPress 호스트 빠른 호스팅에 투자하세요.
워드프레스 웹사이트 속도를 높이는 가장 쉽고 중요한 방법 중 하나는 성능 좋은 웹호스팅을 사용하는 것입니다. 많은 사람들은 웹사이트 속도를 높이는데 웹호스팅을 생각하지 않고 단순하게 저렴한 호스팅만 찾는 경우가 많습니다. 소규모 웹사이트 같은 경우 저렴한 공유 웹호스팅을 많이 사용하는데 "공유"라는 말은 말 그대로 한 호스팅의 자원을 여러 사이트가 나누어 사용한다는 말입니다.
사이트 응답 속도를 높이기 위해서는 보다 빠른 웹호스팅이 필요합니다.
자세한 내용은 "WordPress 호스트 빠른 호스팅에 투자하세요"를 참고 바랍니다.
2. 캐싱
사용자가 처음으로 사이트를 방문하면 서버는 페이지를 렌더링 하는 데 필요한 모든 데이터베이스 쿼리를 포함하여 요청을 처리합니다. 그런 다음 페이지가 사용자의 브라우저에 전달하는데 초기 처리 기간 때문에 빠른 호스팅 제공업체를 확보하는 것이 중요합니다.
캐시는 서버 사이에 있는 레이어입니다. 캐시는 초기 요청 동안 RAM 또는 디스크에 구축 및 저장되며 후속 요청은 서버 대신 캐시 레이어에 도달합니다. 이는 본질적으로 서버 처리 단계를 우회하기 때문에 사용자에게 번개처럼 빠른 속도를 제공합니다. 또 다른 이점은 서버의 로드도 줄일 수 있다는 것입니다.
캐싱이 올바르게 설정되지 않은 경우 대기시간(TTFB = Time-To-First-Byte)이 증가하게 됩니다. Google Core Web Vitals와 관련하여 "초기 서버 응답 시간 단축" 경고가 생성됩니다. TTFB가 600ms 보다 높으면 경고가 트리거 됩니다.
앞서 언급했듯이 캐싱으로 인해 정확한 결과를 얻으려면 최소 3번 이상의 속도 테스트를 실행해야 합니다. 사이트의 캐시가 만료된 경우 처음 테스트를 실행할 때 위의 경고가 표시됩니다.
캐싱은 일반적으로 두 가지 방식으로 구현됩니다. "Server Level Caching", "WordPress Caching Plugin"
Server Level Caching
서버 레벨 캐싱은 빠르고 쉽기 때문에 추천하는 방법입니다. 고급 WordPress 호스팅 제공업체의 경우 이미 서버 수준 캐시를 보유하고 있으며 플러그인이나 설정이 번거롭지 않습니다. 트래픽이 많은 블로그든 더 역동적인 전자상거래 사이트든 상관없이 모든 것이 즉시 작동됩니다.
WordPress Caching Plugin
호스팅 제공업체에 Server Level Caching이 없는 경우 WordPress Caching Plugin을 설치해야 하는데 아래 3가지 캐싱 플러그인을 소개합니다. 다음 중 하나를 선택하여 사용하시면 됩니다.
캐싱 개선
캐싱을 개선하는 쉬운 방법은 WordPress 사이트에서 캐시 만료 시간을 늘리는 것입니다. 캐시 시간이 길수록 사이트 성능이 향상되고 캐시 HIT 비율이 향상됩니다. 또한 "Serve static assets with an efficient cache policy"라는 Google의 경고 메시지를 해결할 수 있습니다.
WordPress 호스팅 제공업체 또는 캐싱 플러그인을 사용하는 경우 해당 문서를 확인하거나 지원팀에 문의하여 WordPress 사이트의 캐싱 만료 시간을 늘리는 방법을 알아보세요.
3. 워드프레스 테마
WordPress 테마는 사이트를 만드는데 외모를 담당하고 있는 중요한 부분입니다. 사이트를 다방면으로 만들 수 있도록 부풀려진 테마가 많이 있습니다. 빠른 WordPress 호스팅 및 캐싱이 구현된 경우라도 특히 Google Core Web Vitals와 관련하여 코드 소스 요청의 양은 여전히 중요합니다.
WordPress 테마를 찾을 때 좋은 개발자와 지원을 제공하는 평판 좋은 회사에서 구매하고 있는지도 확인하고 싶을 것입니다.
속도 빠른다는 평판 좋은 테마는 많이 있지만 여기서는 "GeneratePress WordPress"를 소개합니다.
GeneratePress는 가볍고 많은 기능을 포함하고 있습니다.
GeneratePress WordPress 테마의 기본 설치는 경우에 따라 100/100점을 받는 경우도 있습니다. 그리고 이 테스트는 모바일 장치용으로 에뮬레이트 됩니다. 매우 인상적입니다!
페이지 빌더는 과연 좋은 플러그인일까요?
수년간 워드프레스로 웹사이트를 만들면서 정말 느린 사이트들의 한 가지 공통점이 있었습니다. 바로 무거운 페이지 빌더를 사용하고 있었다는 것입니다. 빠른 사이트를 원한다면 페이지 빌더의 존속 관계에서 벗어나야 합니다.
페이지 빌더는 원래 코드 없이 웹사이트를 쉽게 디자인할 수 없기 때문에 개발되었습니다. 5년 전만 해도 코딩을 할 줄 모른다면 워드프레스 사이트를 구축하는 것이 어려웠습니다. 많은 WordPress 사용자가 코더가 아니라 "웹사이트 초보자"이기 때문에 페이지 빌더는 목적을 달성했습니다. 이것이 많은 페이지 빌더가 급격하게 성장을 하게 된 이유입니다.
하지만 요즘은 상황이 많이 달라졌습니다. 이제 코드 양의 1/10로 웹사이트를 디자인할 수 있는 GenerateBlocks와 같은 놀라운 플러그인이 있기 때문입니다.
Elementor, Oxygen 및 Divi와 비교하여 GenerateBlocks의 전체 용량의 크기를 살펴볼 필요가 있습니다.
Oxygen 보다 87% 작고, Elementor 보다 93% 작으며, Divi Builder보다 무려 96%가 작습니다.
물론, 모든 것은 내가 원하는 데로 기능을 가지고 있지는 않지만 이것의 핵심은 Web Vitals로 더 높은 순위를 얻으려는 문제를 해결하고자 하는 것입니다. 슬라이드를 예로 들어 보겠습니다. 저는 슬라이드를 많이 사용하지 않는 편입니다. 하지만 클라이언트는 홈페이지 메인에서 역동적인 움직임을 주기를 원합니다. 이로 인해 CLS(Cumulative Layout Shift) 경고가 발생합니다. 그러한 이유로 정적 헤더를 디자인하는 것을 적극 추천드립니다. 애니메이션을 버리고 움직이는 것을 버린다면 보다 좋은 사이트가 될 것입니다.
그런 다음 DOM(문서 개체 모델)이 있습니다. 간단히 말해서 페이지가 로드될 때마다 브라우저는 페이지의 HTML을 구문 분석하고 DOM을 렌더링 합니다. 어떤 의미에서 이것을 구조화된 트리로 생각하십시오. 그러나 JavaScript가 이를 조작할 수 있으므로 이것은 HTML 소스 코드만이 아닙니다.
DOM을 완전히 이해할 필요는 없습니다. 단, 코드 레이어가 많을수록 페이지에 더 많은 DOM 요소가 포함될 것입니다. 페이지 빌더 사이의 일반적인 문제는 과도한 DOM 크기입니다. 이는 본질적으로 더 큰 DOM을 생성하는 중첩 Div와 같은 추가 코드를 추가하기 때문입니다. DOM이 클수록 성능 면에서는 더 많은 불이익을 받게 됩니다.
GenerateBlocks와 같은 플러그인은 약간 다르게 작동합니다. 여전히 코드를 추가하는 동안 WordPress 코어의 기존 코드 매개변수 내에서 더 밀접하게 작동합니다. 또한 처음부터 성능을 염두에 두고 개발되었기 때문에 일반적으로 코드를 더 적게 추가합니다. 그렇기 때문에 많은 핵심 성능 평가 경고가 절대 나타나지 않습니다.
GenerateBlocks는 옵션에 의해 생성된 모든 CSS를 포함하는 페이지당 하나의 CSS 파일만 추가합니다. JavaScript 또는 인라인 CSS가 없습니다. 모든 것이 깔끔하게 개발되어 있습니다. 반면에 페이지 빌더는 일반적으로 각 페이지에 수십 개의 파일을 로드합니다.
많은 사람들은 모든 것이 성능이나 디자인 사이의 균형에 달려 있다고 생각합니다. 그러나 더 이상 그렇지 않습니다. 내가 페이지 빌더로 작업한 많은 사이트는 GenerateBlocks와 같은 플러그인을 사용하여 쉽게 다시 만들 수 있습니다.
GeneratePress + GenerateBlocks가 현재 사이트에 가장 적합한 조합인 이유입니다. 말 그대로 원하는 유형의 사이트를 구축할 수 있으므로 이 두 솔루션을 모두 사용하는 것이 좋습니다. 귀하의 사이트는 성능 및 Google Core Web Vitals에 대해 미래를 대비할 것입니다.
4. CDN
WordPress 호스팅 공급자가 아무리 빨라도 네트워크 대기 시간문제를 이실 수는 없습니다. 귀하의 데이터는 테이터 서버에 물리적으로 저장되며, 먼 거리에서 귀하의 웹사이트를 다운로드해야 하므로 사용자가 멀수록 속도가 느려집니다.
CDN(콘텐츠 전송 네트워크)은 자산(이미지, CSS, JS 및 HTML)의 복사본을 전 세계의 에지 서버에 저장하여 이 문제를 해결합니다. 또한 캐시 하여 방문자가 웹사이트를 조회하면 웹서버가 아닌 가장 가까운 지리적 에지 서버(캐시)에서 콘텐츠가 전달됩니다.
CDN은 얼마나 도움이 되나요? CDN이 WordPress 사이트의 속도를 최대 68%까지 높이는 것을 보았습니다. 많은 부분이 거리에 따라 달라집니다.
또한 이것이 호스팅 제공업체와 함께 강력한 캐싱 솔루션을 설정하는 것의 중요성을 부정하지 않는다는 점을 언급하는 것도 중요합니다. 그 이유는 CDN의 캐시가 만료되기 때문입니다. 그럴 때 빠른 대체 레이아가 필요합니다.
내가 추천하는 두 개의 CDN 제공업체가 있으며, 각각 약간 다른 접근 방식을 취할 수 있습니다.
Cloudflare with APO
Cloudflare with APO는 전 세계에 200개 이상의 엣지 로케이션을 보유한 가장 인기 있고 저명한 CDN 제공업체입니다. 그러나 그들은 전통적인 CDN이 아닙니다. 기존 CDN은 전 세계에 자산(이미지, CSS, JS)만 캐시 하고 제공하는 애드온에 가깝습니다. Cloudflare는 역방향 프락시입니다.
역방향 프록시는 웹사이트(DNS)가 Cloudflare를 가리키도록 하고 모든 트래픽을 Cloudflare를 통해 라우팅함을 의미합니다. 그들은 귀하의 웹사이트와 공용 인터넷 사이에 있습니다.
전체 프록시 서비스의 단점은 라우팅에 시간이 걸린다는 것입니다. 과거에 Cloudflare에는 이 오버헤드가 대기 시간(TTFB)을 증가시킬 수 있는 문제가 있었습니다. 그러나 그 시절은 지났습니다. 이제 자산뿐만 아니라 HTML도 에지 서버에서 전체 사이트를 캐시 하는 APO(자동 플랫폼 최적화)라는 서비스가 있습니다.
이게 왜 그렇게 큰일일까요? 과거에는 요청이 HTML을 다운로드하기 위해 호스팅 제공업체의 서버로 이동하고 자산(이미지, CSS, JS)을 다운로드하기 위해 CDN으로 이동했기 때문입니다. APO를 사용하면 모든 요청이 사용자와 가장 가까운 Cloudflare 에지 서버(이미지, CSS, JS 및 HTML)로 직접 이동합니다.
이것은 대기 시간(TTFB) 문제를 제거하고 엄청나게 빠릅니다. 또한 기존 CDN과 같이 에지 서버별로 캐시를 미리 로드할 필요가 없습니다. APO는 KV를 사용하여 캐시를 저장하고 처음 방문하면 모든 에지 서버에 즉시 배포됩니다. 대부분의 사이트에서는 전 세계에 웹사이트의 별도 사본을 자동으로 호스팅 하는 것으로 생각할 수 있습니다. 또한 혼한스러운 페이지 규칙을 어지럽힐 필요가 없습니다.
Cloudflare의 CDN 서비스는 무료이며 APO 서비스는 트래픽 양에 관계없이 도메인당 월 $5입니다. 따라서 매우 비용 대비 효율이 좋습니다. APO를 사용하고 싶다면 APO에 가입하고 무료 Cloudflare 워드 프레스 플러그인을 설치합니다.
Cloudflare 대체 솔루션
사용자 정의가 가능한 완전 무료 솔루션을 원한다면 WP Cloudflare Super Page Cache 플러그인도 추천합니다. 이는 동일한 유형의 전체 페이지 에지 캐시 및 낮은 대기 시간(TTFB)을 달성합니다. 유일한 차이점은 에지 서버당 캐시를 미리 로드해야 한다는 것입니다. 이 플러그인의 개발자는 매우 유용하고 신속하게 응답합니다.
KeyCDN
KeyCDN은 전통적인 CDN을 찾고 있는 여러분에게 강력히 추천합니다. $0.04/GB로 가격이 매우 저렴하고 속도가 엄청나게 빠릅니다. 적절한 양의 트래픽이 있는 블로그는 일반적으로 20~25GB 대역폭 범위에 있으며 KeyCDN을 사용하면 월 5달러 미만의 비용이 듭니다.
KeyCDN은 수년 동안 사용되어 왔으며 서비스는 매우 안정적이며(Cloudflare 보다 훨씬 높음) 이는 CDN 공급자에게 매우 중요합니다. 40개 이상의 엣지 로케이션, Let's Encrypt SSL, 오리진 쉴드 및 보안 토큰을 무료로 제공합니다. WebP 캐싱도 제공합니다.
또한 Perfmatters 플러그인을 사용하여 WordPress 사이트에 KeyCDN을 배포할 수 있습니다.
5. 이미지 최적화
이미지 크기와 이미지 로딩 속도 최적화하는 것을 무시할 수 없는 일입니다. HTTP 아카이브에 따르면 2021년 2월 기준으로 이미지는 모바일 장치에서 전체 웹사이트 페이지 무게의 평균 48%를 차지합니다. 이는 브라우저가 다운로드하여 사용자에게 전달해야 하는 데이터의 절반에 가깝습니다.
데이터 용량을 줄이고 페이지 로딩 속도를 높이기 위해서는 압축 이미지를 사용해야 합니다.
이미지 압축
압축은 데이터를 제거하여 이미지 파일을 더 작게 만드는 방법입니다. 이것은 웹사이트의 전체 크기를 줄이는 가장 쉬운 방법 중 하나입니다. 소규모 공유 웹 호스팅에 전체 해상도의 이미지를 업로드하면 웹사이트의 로드 시간이 즉시 느려집니다. 일부 이미지를 품질 저하 없이 압축하여 사용할 수 있다는 이미지 용량과 로딩 속도에 놀랄 것입니다.
ShortPixel WordPress 플러그인으로 손실 압축을 사용하여 모든 이미지를 압축합니다. 이것은 작은 페이지 무게 크기와 빠른 로딩 이미지를 보장합니다. 페이지나 게시물에 추가하는 모든 이미지는 미디어 라이브러리의 뒤에서 자동으로 압축됩니다. 권장 사항은 항상 이미지를 100KB 미만으로 유지하는 것이 좋습니다.
또한 WebP 이미지 형식을 활용합니다. PNG 또는 JPG보다 훨씬 작은 Google에서 개발한 이미지 형식입니다. 이제 모든 최신 브라우저에서 지원됩니다. 웹사이트 제작 시 WebP 이미지 사용을 적극 권장합니다. ShortPixel 플러그인도 자동으로 이 작업을 수행할 수 있습니다.
WebP 파일 형식은 얼마나 작을까요? PNG 이미지 크기가 약 60KB를 WebP로 변환했을 경우 약 73% 크기인 약 16KB 정도의 파일크기로 감소하게 됩니다. 물론 용량과 사진 형태에 따라 압축 비율은 달라질 수 있습니다.
Google은 WebP 이미지 사용을 적극 권장하고 있습니다. 이렇게 하면 "차세대 형식으로 이미지 제공" 경고가 메시지가 뜨지 않을 겁니다.
ShortPixel 플러그인 설정에서 사용하지 않는 축소판 크기의 이미지를 제외하는 것도 중요합니다. 이렇게 하면 크레딧이 절약되고 이미지 압축 속도가 빨라집니다. 아래에서 볼 수 있듯이 이 사이트에서는 medium, medium_large, large를 제외한 모든 항목을 제외합니다.
다른 추천 이미지 압축 플러그인도 있으니 확인 후 자신에게 맞는 플러그인을 사용해 보세요.
이미지 로드 지연
이미지 압축 외에도 지연 로드를 사용하여 이미지 전달을 최적화할 수도 있습니다. 이것은 사용자가 페이지를 아래로 스크롤할 때까지 이미지 로드를 지연시키거나 연기하는 방법입니다(이미지가 뷰포트(Viewport) 내에 들어올 때).
예로 50개의 이미지가 있는 긴 형식의 블로그 게시물이 있다고 가정해 보겠습니다. 기본적으로 브라우저는 누군가가 사이트를 방문할 때 해당 이미지 50개를 모두 로드합니다. 최적화된 이미지를 사용하더라도 특히 모바일에서는 시간이 걸릴 수 있습니다.
이미지를 지연 로드하면 사용자가 브라우저에서 보는 페이지 위쪽으로만 이미지가 로드됩니다. 이미지 수는 브라우저 유형, 지연 로딩 방식, 뷰포트 크기 등에 따라 다릅니다. 그러나 그럼에도 불구하고 일반적으로 이미지 요청의 85% 이상을 줄입니다.
Google은 실제로 지연 로딩을 권장합니다. 구현하지 않으면 "Defer offscreen images(오프스크린 이미지 연기)"에 대한 다음 경고가 표시됩니다.
WordPress 5.5+에는 기본적으로 기본 지연 로딩이 있습니다. 그러나 Perfmatters에서 지연 로딩 솔루션을 사용하는 것이 좋습니다. Perfmatters 솔루션이 네이티브 지연 로딩보다 빠르고 좋기 때문입니다. 다음은 Perfmatters에서 지연 로딩에 대해 자세히 읽을 수 있습니다.
Perfmatters에서 지연 로딩을 활성화하려면 다음과 같이 간단히 토글 하면 됩니다.
이미지 너비 및 높이
비교적 간단하게 들릴 수 있지만 CLS를 개선하고 레이아웃 이동을 줄이는 쉬운 방법은 모든 이미지에 너비 및 높이 속성이 설정되어 있는지 확인하는 것입니다. 이미지에 이러한 속성이 없으면 Google에서 "Image elements do not have explicit width and height(이미지 요소에 명시적 너비와 높이가 없습니다)"라는 경고가 표시될 가능성이 큽니다.
GeneratePress와 같이 잘 코딩된 테마는 이러한 속성에서 추가하면 됩니다. 테마가 아닌 경우 소스에서 직접 해결해야 하거나 개발자에게 문의하여 해결하는 것이 좋습니다.
적절한 크기의 이미지
표시되는 또 다른 일반적인 경고는 이미지의 크기를 적절하게 조정하는 것입니다. 특정 시점에 새로운 WordPress 테마로 이동했다면 아마도 이것을 보게 될 것입니다.
이 경고는 브라우저에서 제공하는 이미지가 컨테이너보다 큰 경우 트리거 됩니다. 이 문제를 해결하는 두 가지 방법이 있습니다.
이미지 축소판을 재생성합니다. 꽤 빠르고 쉽습니다.
더 작은 화면에서 더 작은 이미지를 강제 실행합니다. 약간의 코드가 필요합니다. 테마 개발자가 이를 제공할 수 있습니다.
적절한 크기의 이미지 경고를 수정하는 방법에 대한 자세한 내용을 확인하세요.
6. 데이터베이스 최적화 및 디스크 공간 줄이기
다음으로 할 일은 WordPress 데이터베이스가 최적화되어 있고 디스크 공간을 낭비하고 있지 않은지 확인하는 것입니다.
계속하기 전에 항상 WordPress 사이트를 백업하는 것이 좋습니다. 호스트에서 제공하는 백업 솔루션이나 WordPress 백업 플러그인을 사용할 수 있습니다.
InnoDB 데이터베이스 테이블
이전에 데이터베이스 최적화를 한 번도 해본 적이 없다면 가장 먼저 확인하고 싶은 것은 MyISAM과 InnoDB 테이블이 혼합되어 있지 않다는 것입니다.
오랫동안 MyISAM과 InnoDB라는 두 가지 유형의 스토리지 엔진이 있었습니다. MyISAM은 이제 더 이상 사용되지 않으며 InnoDB는 MySQL 5.5 릴리스 이후 기본 스토리지 엔진이 되었습니다. 오늘날까지 나는 여전히 오래된 MyISAM 테이블이 있는 사이트를 봅니다. InnoDB는 훨씬 더 빠른 것으로 입증되었으며, 이것이 바로 데이터베이스 테이블에 사용해야 하는 것입니다.
MyISAM과 InnoDB 인지 확인하는 방법은 아래 이미지를 참고하시기 바랍니다. WordPress 속도를 높이는 쉬운 방법과 관련하여 이것은 종종 간과되는 최적화입니다.
페이지 및 게시물 수정
기본적으로 WordPress는 변경 사항을 적용할 때 게시물 및 페이지의 개정판을 저장합니다. 이전 버전으로 되돌려야 하는 경우에 유용합니다. 나쁜 소식은 저장되는 수정본 수에 제한이 없다는 것입니다. 대규모 사이트에서는 데이터베이스가 빠르게 중단될 수 있습니다. 실제로 얼마나 많은 수정이 필요합니까?
가장 먼저 해야 할 일은 이전 개정판을 정리 한 다음 앞으로 제한을 두는 것입니다.
Perfmatters 플러그인은 게시물, 페이지 및 사용자 정의 게시물 유형에 대한 개정판을 정리하고 삭제할 수 있는 쉬운 방법을 제공합니다. 무료 솔루션을 찾고 있다면 WP-Optimize 플러그인도 관심을 가져 보시기 바랍니다.
아래에서 볼 수 있듯이 630개의 수정본이 데이터베이스에 있었습니다. 이들 중 어느 것도 사용되지 않을 것이므로 이를 정리하는 것이 좋습니다.
오래된 게시물 수정본을 정리한 후 수정본 수를 제한할 때입니다. 이렇게 하면 나중에 데이터베이스를 다시 채우기 시작하지 않습니다. 이 작업을 수행할 수 있는 몇 가지 방법이 있습니다. Perfmatters 플러그인을 사용하는 것이 좋습니다. 아래와 같이 클릭 한 번으로 제한하거나 비활성화할 수 있습니다.
또는 wp-config.php 파일에 다음 코드를 추가하여 수동으로 수행할 수 있습니다. 이 예에서는 3개로 개정판을 제한합니다.
define('AUTOSAVE_INTERVAL', 300); // seconds
define('WP_POST_REVISIONS', 3);'ABSPATH' 위에 코드를 추가하는 것이 중요합니다. 그렇지 않으면 작동하지 않을 것입니다.
개정판을 완전히 비활성화할 수도 있습니다.
define('WP_POST_REVISIONS', false);
오래되거나 사용하지 않는 이미지 삭제
시간이 지남에 따라 서버의 디스크 공간을 차지하는 사용되지 않은 이미지가 있을 수 있습니다. 이는 사이트를 백업하는 경우에도 여러 위치에서 성능 문제를 일으킬 수 있습니다.
Media Cleaner 플러그인을 사용하는 것이 좋습니다. 이렇게 하면 WordPress 사이트에서 사용되지 않는 미디어 라이브러리를 정리하는 데 도움이 됩니다. 이것을 실행하기 전에 반드시 백업을 하십시오.
주의해야 할 또 다른 사항은 이전에 한 이미지 최적화 플러그인에서 다른 플러그인으로 마이그레이션 한 적이 있는지 여부입니다. 일부는 다른 파일 확장자를 사용합니다. 플러그인으로 정리 후에도 일부 파일이 남아 있을 수 있습니다. 그런 경우 FTP를 이용하여 사이트에 연결하고 남아 있는 파일들을 삭제합니다. 현재 이미지 최적화 솔루션에 어떤 확장 프로그램을 사용하고 있는지 확인이 필요합니다.
자동 초안, 스팸 댓글, 임시 항목 등을 정리합니다.
주변에 있을 수 있는 다른 오래된 데이터를 정리하는 것도 중요합니다. 여기에는 자동 초안, 스팸 댓글, 휴지통에 있는 댓글, 휴지통에 있는 게시물 및 페이지, 만료된 임시 항목 등이 포함됩니다. 이러한 모든 사항은 더 큰 WordPress 데이터베이스 크기에 도움이 됩니다.
Perfmatters 플러그인이 제공하는 데이터베이스 최적화 기능은 이를 위한 쉽고 빠른 솔루션입니다. 몇 번만 클릭하면 바로 사용할 수 있습니다.
wp_options 테이블 확인(자동 로드된 데이터)
자동 로드된 데이터는 wp_options 테이블에 누적되는 필드입니다. 시간이 지남에 따라 WordPress 사이트를 빠르게 크롤링할 수 있습니다. 이 데이터는 사이트의 모든 페이지에 있는 플러그인에 의해 로드됩니다. 이 필드의 총크기를 5MB 또는 가능한 경우 1MB 미만으로 유지하는 것이 좋습니다. 사이트에서 자동 로드된 데이터의 크기를 확인하려면 호스팅 공급자의 제어판에서 phpMyAdmin을 열고 다음 쿼리를 사용합니다.
SELECT SUM(LENGTH(option_value)) as autoload_size FROM wp_options WHERE autoload='yes';
이전 플러그인에서 데이터 삭제
몇 년 동안 플러그인을 설치하고 제거한 플러그인이 몇 개입니까? 아마 불행히도 많은 플러그인을 제거할 때 모든 데이터를 제거하지 않으므로 데이터베이스가 계속 증가했을 겁니다.
잘 개발된 플러그인이라면 깨끗한 제거 옵션이 있어야 합니다. 플러그인이 있는 경우 일시적으로 플러그인을 다시 설치하고 올바른 방법으로 제거 프로그램을 실행하는 것이 좋습니다.
완전한 제거 옵션이 없는 경우 데이터베이스에서 테이블을 수동으로 삭제할 수 있습니다. 이 점에 유의하고 먼저 백업을 수행하십시오.
7. 올바른 웹폰트 사용 방법
HTTP 아카이브에 따르면 2021년 2월 기준으로 글꼴은 모바일 장치에서 전체 웹사이트 페이지 무게의 평균 6%를 차지한다고 합니다. 작게 보일 수 있지만 여전히 사이트 로드 방식에 영향을 미치는 건 사실입니다. 성능과 관련하여 사이트에서 수정할 수 없는 영역이 있으므로 가능한 한 최선을 다해야 할 것입니다.
첫째, Adobe Fonts(이전 Typekit)와 같은 타사 글꼴 서비스를 사용하지 않는 것이 좋습니다. 내 테스트에서 추가로 300ms 지연이 발생했습니다. Adobe Fonts는 두 개의 외부 HTTP 요청을 추가하고 모든 글꼴 형식을 base64로 인코딩합니다. 더 이상 모든 글꼴 형식을 제공할 필요가 없습니다. 추가 압축을 원할 경우 WOFF2만 사용하면 됩니다. WOFF2는 모든 브라우저의 95% 이상에서 지원됩니다.
둘째, 많은 웹사이트에서 필요한 것보다 더 많은 글꼴을 사용합니다. 로드하고 있는 글꼴의 수를 확인하십시오. GTmetrix에서 이것을 쉽게 검색해 볼 수 있습니다.
다음은 더 나은 성능의 글꼴을 위해 권장하는 몇 가지 방법이 있습니다.
1) 시스템 폰트 스택(내가 하는 일)
웹폰트에 대해 내가 가장 좋아하는 가장 빠른 옵션부터 시작하겠습니다. 그들은 시스템 폰트 스택이라고 부르는 것으로 이동하고 있습니다.
GitHub, Bootstrap, Medium, Ghost, 심지어 WordPress 관리 대시보드와 같은 유명 브랜드는 모두 시스템 글꼴 스택(System Stack)이라고 하는 것을 사용합니다. 이것은 그들이 컴퓨터의 글꼴을 사용한다는 것을 의미합니다. 몇 년 전만 해도 이것은 그다지 좋아 보이지 않았을 것입니다. 그러나 오늘날의 최신 운영 체제에는 더 멋진 글꼴이 미리 설치되어 있습니다.
시스템 폰트 스택을 사용할 때 페이지에 폰트를 로드할 필요가 없습니다! 이 설정은 FOUT(스타일이 지정되지 않은 텍스트의 깜박임) 또는 FOIT(보이지 않는 텍스트의 깜박임)을 제거합니다.
여전히 찬반양론을 저울질하고 싶을 수도 있습니다. 화려해 보이는 것을 선택할 것인가? 아니면 빠르게 로딩되는 사이트를 선택할 것인가? GeneratePress와 같은 테마를 사용하는 경우 시스템 스택 폰트를 사용할 수 있는 옵션을 제공하고 있습니다. 시스템 폰트 스택으로 선택하는 방법에 대해서는 아래 이미지를 참조하시면 됩니다.
2) 자체 호스팅에 Google 폰트 올려 사용하기
Google Font는 무료이며 매우 인기가 있으며 전 세계적으로 4,200만 개 이상의 웹사이트에서 사용됩니다. 그들은 과거에 한 가지 성능 이점이 있었는데, 그것은 글꼴이 사용자 브라우저의 Google CDN에서 이미 캐시 되었을 수 있다는 것입니다. 그러나 그 시절은 지났습니다.
Chrome 86(2020년 10월)부터 HTTP 캐시 파티셔닝으로 이동했기 때문입니다. 즉, 사용자 브라우저에 캐시 된 폰트에 관계없이 모든 웹사이트에 대해 Google 폰트는 다시 다운로드됩니다. Safari는 수년 동안 이 작업을 수행했으며 Firefox는 버전 85(2021년 1월)에서 이를 구현했습니다.
해결책은 서버 또는 CDN에서 Google 폰트를 자체 호스팅 하는 것입니다. 이렇게 하면 Google DNS 연결도 제거되고 서버의 캐싱 HTTP 헤더가 자동으로 적용됩니다.
이렇게 하려면 Google 폰트를 다운로드하여 서버에 업로드하고 적절한 HTML 및 CSS를 추가하면 됩니다. 그러나 훨씬 쉬운 방법은 다음 플러그인 중 하나를 사용하여 프로세스를 자동화하는 것입니다.
설정해야 하는 두 가지 중요한 사항이 있습니다.
첫째, font-display 속성에 스왑을 사용하십시오. 이것은 모든 최신 브라우저에서 지원되며 폰트 렌더링 차단은 되지 않도록 합니다. 또한 Google의 "웹폰트 로드 중에 텍스트가 계속 표시되는지 확인" 경고를 해결합니다.
둘째, 폰트를 미리 로드하여 페이지 로드 중에 즉시 또는 곧 필요하도록 지정합니다. OMGF 또는 Perfmatters 플러그인을 사용하여 글꼴을 미리 로드할 수 있습니다.
프리미엄 사용자 정의 글꼴을 사용하는 경우에도 위에서 언급한 동일한 기술을 적용할 수 있습니다.
GeneratePress 사용자
여전히 외부에서 Google 폰트를 호스팅 하려는 GeneratePress 테마 사용자의 경우 다음을 수행하여 핵심 성능 향상에 대한 모든 경고를 수정할 수 있습니다.
- 사이트에 글꼴 표시 교체 필터를 추가합니다.
- 사이트의 소스 코드에서 Google 스타일시트 URL을 가져와 Perfmatters 플러그인 사전 로드 섹션에 추가합니다. "스타일"을 선택해야 합니다.
예시 URL:
https://fonts.googleapis.com/css?family=Roboto:regular,500,700&display=swa
- Perfmatters에서 Preconnect에 다음 URL을 추가하고 "CrossOrigin"를 선택합니다.
https://fonts.gstatic.com위의 내용은 "렌더링 차단 리소스 제거" 경고와 "웹폰트 로드 중에 텍스트가 계속 표시되는지 확인" 경고를 모두 수정합니다.
8. 아이콘 폰트
Font Awesome은 훌륭하며 수백만 개의 사이트가 웹에서 이를 사용하여 매일 보는 아이콘을 표시합니다. 그러나 기본적으로 사이트의 전체 아이콘 라이브러리를 로드합니다.
성능 면에서 Font Awesome에 접근하는 가장 좋은 방법은 사이트에서 사용 중인 아이콘만 패키지하는 것입니다. 아이콘 폰트도 로컬에 업로드 후 사용하는 것을 추천합니다.
또는 GenerateBlocks와 함께 GeneratePress와 같은 테마를 사용하는 경우 원하는 아이콘의 SVG 코드를 붙여 넣을 수 있습니다. 아이콘을 패키징 할 필요가 없다는 의미입니다. 필요한 것만 쉽게 추가할 수 있습니다.
아이콘 폰트도 미리 로드해야 합니다. 그렇지 않으면 "Preload key requests"해야 한다는 Google의 다음 경고가 표시됩니다.
WordPress 사이트 헤더에 preload 태그를 추가하여 웹 글꼴을 미리 로드할 수 있습니다. 다음은 예입니다.
<link rel='preload' href='font-icon.ttf' as='font' type='font/ttf' crossorigin>또한 Perfmatters 플러그인에서 이 작업을 쉽게 수행할 수 있습니다.
9. 자바스크립트 최적화
The HTTP Archive에 따르면 2021년 현재 JavaScript는 모바일 장치에서 전체 웹사이트 페이지 무게의 평균 22%를 차지합니다. 이미지와 비디오 다음으로 JavaScript는 페이지 무게의 세 번째로 큰 소스입니다.
아래에서는 WordPress 사이트에서 JavaScript를 최적화할 수 있는 몇 가지 다른 방법에 대해 설명합니다.
플러그인 감사
JavaScript의 대부분은 어디에서 왔습니까? 두 곳: 테마와 플러그인. 따라서 첫 번째 권장 사항은 플러그인을 감사하고 없이도 사용할 수 있는 플러그인을 제거하는 것입니다.
이것이 내가 WordPress를 사용하는 것을 좋아하는 한 가지 이유입니다. 일을 성취하는 방법은 매우 다양합니다. Shopify 또는 Wix와 같은 다른 플랫폼을 사용하는 경우 한 가지 또는 더 나쁜 방법으로 수행하는 데 어려움을 겪을 수 있습니다. 당신은 그것을 고칠 방법이 전혀 없습니다.
아래는 몇 년 동안 사이트 속도를 위해서 제거한 몇 가지 플러그인들입니다.
- Scroll to Top Button
- Bloom
- TablePress
- TweetDis
- Crayon Syntax Highlighter
- Mango Buttons
- Table of Contents Plus
보시다시피 필요하지 않은 플러그인이 있거나 더 나은 대안이 있습니다. 이를 제거함으로써 내 사이트의 요청과 전체 페이지 크기를 크게 줄였습니다. 즉시 사이트에 대한 플러그인 감사 및 평가를 수행하는 것이 좋습니다!
로컬 구글 애널리틱스
아이러니하게도 Google Analytics에는 성능과 관련된 자체 문제가 있습니다. 첫째, 즉각적인 타사 DNS 요청이 있습니다. 둘째, 더 심각한 문제는 캐시 만료 시간입니다. Google은 캐시 만료를 매우 짧게 설정하므로 경고가 표시될 수 있습니다.
이러한 문제를 해결하는 쉬운 방법은 서버 또는 CDN에서 로컬로 Google Analytics를 호스팅 하는 것입니다. 여기에는 몇 가지 장점이 있습니다.
- 단일 HTTP/3 연결을 활용합니다.
- Google Analytics 스크립트는 서버 및/또는 CDN에서 캐싱 헤더를 가져옵니다.
- 덜 즉각적인 제3자 요청이 하나 있습니다.
로컬에서 분석을 호스팅 하는 것은 Google에서 공식적으로 지원하지 않지만 많은 사람들이 수년 동안 이 작업을 수행해 왔습니다. Perfmatters 플러그인을 사용하여 로컬에서 Google Analytics를 쉽게 호스팅 할 수 있습니다.
자바스크립트 연기
JavaScript 작동 방식의 특성으로 인해 Google에서 "렌더링 차단 리소스 제거" 경고를 볼 가능성이 큽니다. 즉, JavaScript 파일이 로드될 때 WordPress 사이트 페이지의 첫 번째 페인트 속도가 느려집니다.
페이지 그리기 속도를 높이는 쉬운 방법은 중요하지 않은 모든 JavaScript를 로드 연기하는 것입니다. 이는 페이지의 나머지 부분이 로드된 후 스크립트가 로드됨을 의미합니다. 이는 각 JavaScript 파일에 defer 속성을 추가하여 수행됩니다.
Perfmatters 플러그인에서 JavaScript를 쉽게 연기할 수 있습니다.
jquery.js 대부분의 사이트, 특히 더 큰 사이트에서 jQuery 코어(jquery.js)를 연기할 수 없다는 점에 유의하는 것이 중요합니다. 그것은 모두 JavaScript의 로딩 순서에 달려 있습니다. 무언가를 즉시 로드해야 하는 경우 계단식 오류가 발생합니다.
자바스크립트 결합
특히 대규모 사이트에서 JavaScript를 최적화하는 또 다른 방법은 JavaScript 파일을 결합하는 것입니다. 이것은 HTTP/2(현재 HTTP/3/QUIC) 이후로 기술적으로 더 이상 사용되지 않는 기술입니다. 그러나 Core Web Vitals로 점수를 향상시키는 데 여전히 도움이 될 수 있습니다. 주로 "렌더링 차단 리소스 제거" 경고에 관한 것입니다.
JavaScript 파일을 결합하려면 무료 Autoptomize 플러그인을 사용하는 것이 좋습니다. 그러나 모든 사이트에 대해 맹목적으로 이 작업을 수행하는 것은 권장하지 않습니다. 결합되지 않은 파일과 결합된 파일 중 어느 것이 더 나은 성능을 보이는지 테스트해야 합니다.
자바스크립트 축소
Minification는 코드에서 모든 공백을 제거하는 프로세스입니다. 많은 개발자가 미리 스크립트를 축소합니다. 스크립트 .min.js 끝에 있는 경우 이를 빠르게 확인할 수 있습니다. (예: file.min.js) 따라서 JavaScript의 90%가 이미 축소되어 있기 때문에 이것은 큰 우선순위가 아닙니다.
하지만 여전히 JavaScript를 축소할 수 있습니다. 이를 위해 무료 Autooptimize 플러그인을 추천합니다. 또는 Cloudflare를 사용하는 경우 "속도 → 최적화" 탭에서 JavaScript에 대한 축소를 쉽게 활성화할 수 있습니다.
자바스크립트 지연
JavaScript를 연기하면 스크립트가 페이지 로드의 맨 아래로 푸시되지만 사용자 상호 작용에 따라 JavaScript를 지연시킬 수도 있습니다. 이것은 무언가가 당장 필요하지 않을 때 핵심 성능 향상 페이지의 페인팅 속도를 높이는 좋은 방법이 될 수 있습니다. 특히 Google Adsense, Google Analytics, 전환 픽셀(FB, Google Ads) 등과 같은 무거운 타사 스크립트 또한 일반적인 WooCommerce 성능 문제인 장바구니 조각과 같은 작업에도 유용합니다.
사용하지 않는 자바스크립트 제거
다음으로 "사용하지 않는 JavaScript를 제거하십시오"라는 Google의 경고가 표시됩니다. 이는 로드된 JavaScript 파일(워드프레스 테마 또는 플러그인에서)의 모든 코드가 테스트 중인 페이지에서 사용되지 않는다는 것을 의미합니다.
이 문제를 해결하는 몇 가지 방법이 있습니다. 그러나 이것이 얼마나 중요한지는 말로 표현할 수 없습니다. 가벼운 WordPress 테마에 대한 위의 모든 조언을 따르고 GenerateBlocks와 같은 대안을 위해 페이지 빌더를 버린다면 사용하지 않는 JavaScript는 큰 문제가 되지 않을 것입니다.
Google은 먼저 위에서 다룬 내용을 권장합니다. 즉, 사용하지 않는 JavaScript를 로드하는 WordPress 플러그인의 수를 줄이거나 전환하는 것입니다. 플러그인의 수는 얼마나 잘 코딩되었는지만큼 중요하지 않습니다.
Chrome DevTools에서 Google의 코드 검사 기능을 사용하여 관련 없는 JavaScript를 추가하는 테마 또는 플러그인을 식별할 수 있습니다. 코드 범위에 빨간색이 많이 포함된 목록에서 스크립트를 찾으십시오. 테마 또는 플러그인은 실제로 페이지에서 사용되는 경우에만 스크립트를 대기열에 넣어야 합니다.
바로 여기에서 Perfmatters Script Manager가 작동합니다. 버튼 클릭으로 포스트/페이지 또는 사이트 전체에서 스크립트, 쿼리 및 인라인 CSS/JS를 비활성화할 수 있습니다. 전체 플러그인을 비활성화할 수도 있습니다. 이것은 매우 강력하며 사이트(특히 홈페이지)의 속도를 크게 높일 수 있습니다.
스크립트 관리자는 정규식도 지원합니다. 이를 통해 동적으로 생성된 아카이브 페이지, 검색 결과 등에서 스크립트를 비활성화할 수 있습니다. 기본적으로 생각할 수 있는 모든 스크립트 조합을 비활성화하거나 활성화할 수 있습니다.
사이트를 검토하고 최적화하면 JavaScript 로드량을 크게 줄일 수 있습니다. 이것은 사용하지 않는 JavaScript 경고를 완전히 수정하지는 않지만 많은 도움이 될 것입니다.
Perfmatters 플러그인의 지연 JavaScript 기능을 사용하여 사용하지 않는 JavaScript 경고를 해결할 수도 있습니다.
10. CSS 최적화
The HTTP Archive에 따르면 2021년 기준으로 CSS는 모바일 장치에서 전체 웹사이트 페이지 무게의 평균 4%를 차지합니다. 이미지, 비디오, 자바스크립트에 이어 CSS는 페이지 무게의 네 번째로 큰 소스입니다.
아래에서는 WordPress 사이트에서 CSS를 최적화할 수 있는 몇 가지 다른 방법에 대해 설명합니다.
맞춤 CSS 줄이기
가장 먼저 해야 할 일은 WordPress 사이트에서 사용자 정의 CSS를 줄이는 것입니다.
워드프레스 커스터 마이저에 CSS를 추가하고 급할 때 다음 문제로 넘어가는 것은 당연합니다. 그러나 이것은 시간이 지남에 따라 필요하지 않은 추가 CSS를 축적했을 수 있음을 의미합니다. 또는 테마나 플러그인을 변경했는데 CSS가 더 이상 적용되지 않습니다. 이제 돌아가서 청소할 시간입니다.
또한 CSS용 타사 플러그인을 사용하지 않는 것이 좋습니다. Simple Custom CSS와 같은 플러그인은 훌륭하지만 WordPress Customizer는 수년에 걸쳐 상당히 향상되었으며 이제 기본 구문 색상 지정 및 오류 수정을 수행합니다.
필요한 경우에만 맞춤 CSS 로드
사이트에 사용자 정의 CSS를 추가해야 하는 경우가 있지만 반드시 모든 곳에서 로드할 필요는 없습니다. 워드프레스 커스터 마이저에 떨어뜨리면 이것은 나쁩니다! 전체 사이트에 로드되기 때문입니다.
이것은 GeneratePress와 후크가 구출되는 곳입니다. GeneratePress로 후크를 만들고 사용자 정의 CSS를 추가하고 로드할 위치를 선택할 수 있습니다.
예를 들어 내 연락처 페이지에는 NinjaForms 연락처 플러그인에 대한 몇 가지 사용자 지정 CSS가 있습니다. 내 연락처 페이지에만 이 코드를 로드하는 GeneratePress 후크가 있습니다. 이것은 사용자 정의 CSS를 로드하는 가장 최적의 방법입니다.
CSS 결합
JavaScript와 마찬가지로 특히 대규모 사이트에서 CSS를 최적화하는 또 다른 방법은 CSS 파일을 결합하는 것입니다. 이것은 HTTP/2(현재 HTTP/3/QUIC) 이후로 기술적으로 더 이상 사용되지 않는 기술입니다. 그러나 Core Web Vitals로 점수를 향상시키는 데 여전히 도움이 될 수 있습니다. 주로 "렌더링 차단 리소스 제거" 경고에 관한 것입니다.
CSS 파일을 결합하려면 무료 Autoptomize 플러그인을 사용하는 것이 좋습니다. 그러나 모든 사이트에 대해 맹목적으로 이 작업을 수행하는 것은 권장하지 않습니다. 결합되지 않은 파일과 결합된 파일 중 어느 것이 더 나은 성능을 보이는지 테스트해야 합니다. 궁금하시다면 저희 사이트에서는 CSS를 결합하지 않습니다.
필요한 경우 CSS 스타일시트를 미리 로드할 수도 있습니다.
CSS 축소
JavaScript와 마찬가지로 많은 개발자가 미리 스타일시트를 축소합니다. 파일 .min.css끝에 가 있는 경우 이를 빠르게 찾을 수 있습니다. (예: file.min.css) 따라서 CSS의 90%가 이미 축소되어 있기 때문에 이것은 큰 우선순위가 아닙니다.
즉, 여전히 CSS를 축소할 수 있습니다. 이를 위해 무료 Autooptimize 플러그인을 추천합니다. 또는 Cloudflare를 사용하는 경우 "속도 → 최적화" 탭에서 CSS에 대한 축소를 쉽게 활성화할 수 있습니다.
사용하지 않는 CSS 제거
JavaScript와 마찬가지로 Google에서 "사용하지 않는 CSS를 제거하십시오"라는 경고를 받을 수 있습니다. 이것은 로드된 CSS 파일의 모든 코드(워드프레스 테마 또는 플러그인에서)가 테스트 중인 페이지에서 사용되지 않는다는 것을 의미합니다.
이 문제를 해결하는 몇 가지 방법이 있습니다. 그러나 이것이 얼마나 중요한지는 말로 표현할 수 없습니다. 가벼운 WordPress 테마에 관한 위의 모든 조언을 따르고 GenerateBlocks와 같은 대안을 위해 페이지 빌더를 버린다면 사용하지 않는 CSS는 큰 문제가 되지 않을 것입니다.
Google은 먼저 사용하지 않는 CSS를 로드하는 WordPress 플러그인의 수를 줄이거나 전환할 것을 권장합니다. 플러그인의 수는 얼마나 잘 코딩되었는지만큼 중요하지 않습니다.
Chrome DevTools에서 Google의 코드 적용 범위 기능을 사용하여 관련 없는 CSS를 추가하는 테마 또는 플러그인을 식별할 수 있습니다. 코드 범위에 빨간색이 많이 포함된 목록에서 스크립트를 찾으십시오. 테마 또는 플러그인은 실제로 페이지에서 사용되는 경우에만 스타일시트를 대기열에 넣어야 합니다.
여기서도 Perfmatters Script Manager 가 작동합니다. 버튼 클릭으로 포스트/페이지 또는 사이트 전체에서 스크립트, 쿼리 및 인라인 CSS/JS를 비활성화할 수 있습니다. 전체 플러그인을 비활성화할 수도 있습니다.
사이트를 살펴보고 최적화하면 CSS 로딩량을 크게 줄일 수 있습니다. 이것은 사용하지 않는 CSS 경고를 완전히 수정하지는 않지만 많은 도움이 될 것입니다. CSS 전달을 최적화하기 위해 WP Rocket과 같은 프리미엄 플러그인을 사용할 수도 있습니다.
11. HTML 최적화
The HTTP Archive에 따르면 2021년 현재 HTML은 모바일 장치에서 전체 웹사이트 페이지 무게의 평균 1.5%를 차지합니다. 이것은 많은 양은 아니지만 여전히 중요합니다.
아래에서는 WordPress 사이트에서 HTML을 최적화할 수 있는 몇 가지 다른 방법에 대해 설명합니다.
Cloudflare 에지에서 HTML 제공
나는 위에서 이것을 만졌다. Cloudflare APO를 사용하는 것이 좋습니다. 기존 CDN을 사용하면 HTML이 원본 서버에서 제공되는 반면 자산은 CDN에서 제공됩니다. Cloudflare APO를 사용하면 자산과 HTML 이 CDN에서 제공됩니다. WordPress 사이트를 정적 HTML 사이트로 변환하는 것과 비슷하다고 생각하십시오. 그 결과 엄청나게 빠른 속도와 낮은 TTFB가 발생합니다.
HTML 축소
JavaScript 및 CSS와 마찬가지로 HTML을 축소할 수 있습니다. 이를 위해 무료 Autooptimize 플러그인을 추천합니다. 또는 Cloudflare를 사용하는 경우 "속도 → 최적화" 탭에서 HTML에 대한 축소를 쉽게 활성화할 수 있습니다.
12. 기타 최적화, 리소스 및 팁
저는 수년에 걸쳐 수천 개의 WordPress 사이트를 최적화했기 때문에 기타 최적화, 팁 및 리소스가 포함된 다른 섹션을 포함하는 것이 도움이 될 것이라고 생각했습니다. 이들 중 많은 것들이 내가 매일 클라이언트와 함께 일하는 것을 봅니다.
Google AMP를 사용하지 마세요.
우선, Google AMP를 사용하면 어떤 면에서는 기본 사이트의 사일로처럼 문제를 해결하기가 더 어려워집니다. 둘째, Google AMP는 생태계에 사용자를 가두기 때문에 마이그레이션 하기 어렵습니다. 그 여분의 시간을 보내고 모바일 및 데스크톱 사용자를 위해 반응형 사이트를 빠르게 만드는 데 집중하십시오. 그것은 장기적으로 대가를 치르게 될 것입니다. 2021년부터 Google은 더 이상 AMP를 사용하는 사람들에게 우대를 제공하지 않습니다.
Google 지도에 각별히 주의하고 이를 사이트 바닥글에 놓기만 하면 됩니다.
전송 크기가 크기 때문에 성능이 끔찍합니다. 한 맵이 최대 26개의 HTTP 요청을 생성하는 것을 보았습니다(오타가 아님). Google 지도가 로드되어서는 안 되는 위치를 비활성화하려면 Perfmatters 플러그인을 사용하는 것이 좋습니다. 또는 더 창의적이고 CTA와 Google 지도에 대한 외부 링크가 포함된 잘 디자인된 이미지로 교체합니다.
슬라이더를 버리고 대신 정적 헤더를 사용하십시오.
슬라이더는 특히 모바일에서 Core Web Vitals에 대해 끔찍한 레이아웃 이동(CLS)을 유발합니다. 또한 전환에 부정적인 영향을 미칩니다.
작은 것이 중요합니다.
예를 들어, "맨 위로 스크롤" 버튼을 끄기로 결정했습니다. 즉, JavaScript 파일 로드가 하나 줄어듭니다. 나는 사용자로서 깨달았다. 나는 이것들을 절대 클릭하지 않는다.
Yellow Labs 도구와 Waterfaller를 사용하여 사이트 코드를 감사합니다.
이는 Core Web Vitals 또는 GTmetrix와 달리 사이트에서 최적화할 항목에 대한 훌륭한 대안 보기가 될 수 있습니다.
CDN에서 Gravatar를 로드하고 지연 로드를 사용하십시오.
Google의 reCAPTCHA는 성능 킬러입니다.
나는 그것이 그 자체로 30 포인트 이상 모바일 점수를 떨어 뜨리는 것을 보았습니다. 중요한 것은 사이트 전체에서 사용하지 않는 것입니다. 기껏해야 연락처 페이지에만 로드됩니다. 그러나 대부분의 문의 양식 플러그인에는 스팸 방지 및 허니팟 조치가 이미 내장되어 있습니다. 그렇지 않은 경우 WP Armor와 같은 무료 플러그인을 사용할 수 있습니다. 따라서 reCAPTCHA를 전혀 사용하지 않는 것이 좋습니다.
Cloudflare를 사용하는 경우 로켓 로더를 끕니다.
이 기능은 모바일 사이트의 속도를 높이는 데 도움이 되지만 내가 본 것은 속도를 늦추고 문제를 일으키는 것뿐입니다. 이 기능을 끄면 사이트( rocket-loader.min.js)의 요청도 제거됩니다.
Cloudflare를 사용하는 경우 이메일 주소 난독화를 끕니다.
첫째, 이메일 주소를 눈에 잘 띄는 곳에 두어서는 안 됩니다. 스팸을 요구하는 것뿐입니다. 연락 양식은 이유가 있습니다. 둘째, 이 기능을 끄면 사이트( email-decode.min.js)에 대한 요청도 제거됩니다.
Perfmatters 플러그인 활용
당사의 Perfmatters 플러그인은 많은 핵심 웹 바이탈 경고를 해결하는 데 도움이 될 수 있습니다. 여기에는 경쟁 우위를 확보하기 위해 사이트에서 사용하는 모든 조정도 포함됩니다. 위에서 설명한 기능 중 일부는 다음과 같습니다.
- 데이터베이스(개정판, 스팸, 휴지통, 임시 항목 등)를 최적화합니다.
- 이미지, iframe, YouTube 동영상 등을 지연 로드합니다.
- 즉각적인 로드 시간을 위해 리소스를 미리 로드하고 링크를 미리 가져옵니다.
- 렌더링 차단 리소스를 수정하려면 JavaScript를 연기하세요.
- 스크립트, 쿼리 및 인라인 CSS/JS를 포스트/페이지 기준으로 또는 Script Manager를 사용하여 사이트 전체를 기준으로 비활성화합니다.
- 이모티콘, 자체 핑백, XML-RPC, 포함 등을 비활성화합니다.
- Google Analytics를 로컬로 호스팅 합니다.
- CDN 재작성(좋아하는 CDN 제공업체 연결).
- WordPress 로그인 URL을 변경합니다(봇 트래픽 감소 및 사이트 보호).
- WordPress 개정판을 비활성화하거나 제한하십시오.
- 빈도를 변경하거나 Heartbeat API를 비활성화합니다. 이것은 admin-ajax.php 속도 저하 문제를 해결하는 데 도움이 될 수 있습니다.
- 자동 저장 간격을 변경합니다.
리디렉션 방지
사이트에 추가하는 모든 리디렉션은 약간이라도 성능에 영향을 미칩니다. 많은 인기 있는 WordPress 플러그인의 가장 큰 문제는 wp_redirect 기능 (특히 Nginx에서 실행되는 플러그인)을 사용한다는 것입니다.
이는 들어오는 모든 리디렉션이 요청을 처리하고 전달하기 위해 서버에서 PHP 코드를 실행해야 함을 의미합니다. 나쁘지 않게 들릴지 모르지만 2,000개의 리디렉션(매우 일반적임)이 있고 사이트에 매월 500,000명의 방문자가 있다고 상상해 보십시오. 리디렉션을 치는 사용자가 많이 있을 것입니다.
WordPress 리디렉션을 처리하는 더 좋은 방법은 서버 수준입니다. 이렇게 하면 계층을 우회할 수 있고 서버에서 코드를 실행할 필요가 없습니다.
Kinsta와 같은 WordPress 호스팅 제공업체를 사용하면 MyKinsta 대시보드에서 모든 리디렉션을 관리할 수 있습니다. 모든 것이 서버 수준에서 수행되며 WordPress 데이터베이스의 팽창이 적습니다.
WP-CRON 비활성화
WP-CRON 은 WordPress용 작업 스케줄러입니다. 문제는 페이지를 로드할 때마다 실행해야 하는 예약된 작업 목록을 확인한다는 것입니다. 트래픽이 많은 사이트에서 이는 빠르게 성능 문제가 될 수 있습니다. 고맙게도 WP-CRON을 비활성화하고 대신 서버 수준(시스템) cron을 사용할 수 있습니다.
참고: 모든 WordPress 사이트에 대해 권장하지 않습니다. 그러나 높은 cron 활동을 보고 사이트 속도가 느려질 수 있다고 생각되면 시도해 보는 것이 좋습니다.
WP-CRON을 비활성화하려면 wp-config.php 파일에 다음을 추가하십시오.
define('DISABLE_WP_CRON', true);비활성화된 후에는 예약된 작업이 WordPress 사이트에서 제대로 실행되도록 서버 또는 타사 서비스에서 wp-cron.php를 호출해야 합니다. 이점은 항상 실행하는 대신 일정에 따라 실행할 수 있다는 것입니다.
Kinsta와 같은 공급자와 호스팅하고 WP-CRON을 비활성화한 경우 서버 측 cron은 15분마다 자동으로 wp-cron.php를 트리거합니다. 추가 설정이 필요하지 않습니다.
자세한 내용은 Tom Mcfarlin에게 WordPress cron 작업을 올바르게 설정하는 방법에 대한 좋은 기사가 있습니다.
13. 속도 테스트 결과
이제 재미있는 부분을 위해 GeneratePress 및 GenerateBlocks를 사용하여 완전히 블록으로 구축한 사이트에 대한 속도 테스트 결과입니다.
아래 이미지는 Google Core Web Vital 결과 화면입니다.
완벽한 100점을 쫓는 데 시간을 낭비하지 마세요
몇 년 전만 해도 나는 PageSpeed 점수가 중요하지 않다고 생각했습니다. 그 당시에는 그것은 그리 중요하지 않았습니다. 그러나 이제는 시대가 바뀌었습니다. 인터넷 사용자가 늘어나고 수 많은 사이트가 만들어 지면서 많은 사람들은 자료를 인터넷에서 찾아 보는 일이 자연스러워 졌습니다. 그로 인해 속도가 떨어지는 사이트는 외면 당하는 일이 생겨나고 있습니다.
Google Core Web Vitals은 이러한 사용자 환경 까지도 고려하여 순위 요소를 포함하여 점수에 어느 정도 중요한 요소를 포함시키고 있습니다. 총 로드 시간에 대한 생각에서 벗어나 페이지가 로드되는 방식에 초점을 맞춰야 합니다.
좋은 소식은 점수가 일반적으로 과거보다 총 로드 시간과 훨씬 더 나은 상관 관계를 갖는다는 것입니다. 더 높은 점수를 얻으면 더 빠른 로드 시간을 얻을 수 있습니다. 그리고 Google이 핵심 Web Vitals에 사용하고 있는 모바일에 대해 항상 이야기하고 있음을 기억하십시오.
즉, 완벽한 100점을 쫓는 데 너무 많은 시간을 낭비하지 말 것을 촉구합니다. 나는 완벽한 100점을 받겠다는 생각은 버렸습니다.
귀하의 사이트를 과도하게 최적화하는 것이 아닌지 생각해 볼 필요가 있습니다. 당신의 사이트가 녹색에 들어 왔다면, 다음은 당신의 사업을 구축하는 데 시간을 할애하십시오.
끔찍한 콘텐츠가 있다면 버리고, 완벽한 점수를 쫓는 것은 피하십시요.
점수 이상을 생각하면서 인지된 성과도 염두에 두어야 합니다. 인지된 성능은 사이트를 방문하는 사람에게 사이트가 느끼는 속도입니다. 사이트의 인지된 성능이 좋지 않으면 이탈률과 사이트에 머문 시간에 직접적인 영향을 줄 수 있습니다. 그리고 이것들은 또한 Google이 사용하는 요소입니다.
14. 웹 성능 감사 받기
여전히 속도에 만족하지 않는다면 항상 전문가를 고용하고 전체 WordPress 사이트에 대한 감사를 받는 것이 좋습니다.
요약
WordPress 속도를 높이는 것은 정규직처럼 느껴질 수 있습니다. 하지만 그럴 필요는 없습니다. 호스팅에서 테마 및 플러그인, 모범적인 최적화 사례에 이르기까지 처음부터 올바른 솔루션을 선택하면 원하는 속도를 얻을 수 있습니다. 그러나 이러한 단계 중 하나를 건너뛰려고 하면 결과가 만족스럽지 않을 수 있습니다.
이쪽 일을 하다 보면 모든 일을 제대로 하는 많은 고객들을 봅니다. 그러나 그들은 제대로 코딩되지 않은 테마 또는 페이지 빌더로 인해 성능을 저하시킵니다. 또는 품질 좋은 테마를 선택했지만 저렴한 호스팅 제공업체로 인해 높은 점수를 받지 못하는 경우를 종종 봅니다. WordPress 웹사이트 속도를 높이기 위해서는 위의 모든 조언을 따라야 합니다.
WordPress 웹사이트의 성능은 오케스트라와 같습니다. 한 쪽만 잘 한다고 해서 전체적인 성능이 좋아지지는 않습니다. 전체적으로 균형을 이루어져야 합니다.
그리고 거기에 도달하는 데 약간의 노력이 필요할 수 있습니다. 좋은 소식은 위의 모든 것이 앞으로 모든 WordPress 사이트에 쉽게 적용할 수 있다는 것입니다. 결국 사이트 성능 평가 점수를 얻는 것이 그다지 중요하지 않은 지점에 도달하게 될 것입니다.
또한 고객과 함께 일하는 것이 어려울 수 있음을 이해합니다. 그들이 걱정하는 것은 더 빠른 사이트와 높은 점수입니다. 그들은 사이트 최적화가 필요하다는 것을 이해하지 못할 수 있습니다.
WordPress 속도를 높이는 방법에 대한 몇 가지 팁과 권장 사항이 도움이 되었거나 눈을 뜨게 되었기를 바랍니다.
'WordPress' 카테고리의 다른 글
| WordPress를 위한 최고의 이미지 압축 플러그인 (0) | 2021.09.30 |
|---|
댓글