WordPress 웹사이트 향상 및 최적화
WordPress는 가장 인기 있고 다재다능한 콘텐츠 관리 시스템(CMS) 중 하나입니다. 하지만 기본 설정에서는 사이트에 트래픽이 많거나, 대용량 미디어가 포함되어 있거나, 기능이 많은 테마를 사용할 경우 항상 빠르지는 않습니다. 2010년부터 Google은 페이지 속도를 검색 순위에 반영하고 있으므로, 느린 사이트는 사용자 경험과 검색 결과 노출 모두에 악영향을 줄 수 있습니다.
좋은 소식은 WordPress가 다양한 방식으로 최적화할 수 있을 만큼 유연하다는 점입니다. 이를 통해 로딩 시간을 눈에 띄게 줄일 수 있습니다. 각 변경 후에는 다음과 같은 온라인 도구를 사용해 속도 테스트를 실행하여 진행 상황을 측정할 수 있습니다.
Google PageSpeed Insights – 초보자에게 적합하며, 따라하기 쉬운 최적화 제안을 제공합니다.
GTmetrix – 성능 점수와 실질적인 팁을 모두 제공합니다.
Pingdom – 자세한 로딩 시간 분석을 제공하지만, 약간의 기술 지식이 필요할 수 있습니다.
이 도구들은 사이트의 어느 부분이 느려지는지 알려주어, 우선적으로 무엇을 고쳐야 할지 쉽게 파악할 수 있습니다.
아래에서는 WordPress 사이트를 더 빠르게 만드는 데 도움이 되는 실용적인 단계를 안내합니다. 웹사이트를 처음 만들 때부터 적용할 가치가 있는 팁입니다.
참고: 변경 전 사이트를 반드시 백업하세요.
웹사이트 속도 향상 팁
올바른 테마 선택하기
WordPress 테마는 단순히 외관만을 위한 것이 아니라 사이트 로딩 속도에 직접적인 영향을 미칩니다. 트래픽이 많은 블로그나 콘텐츠가 많은 사이트를 운영할 계획이라면, 연구와 테스트에 시간을 투자하는 것이 큰 도움이 됩니다. 잘 최적화된 경량 테마는 사용자 경험과 검색 순위 모두를 크게 향상시킬 수 있습니다.
테마를 선택할 때의 황금률은 디자인을 콘텐츠에 맞추는 것입니다. 먼저 웹사이트의 중점과 게시할 콘텐츠 유형을 결정하세요. 그런 다음 해당 목표를 지원하는 테마를 선택해야 합니다.
대부분의 WordPress 테마는 광범위한 커스터마이징을 허용하지만, 코드가 부실한 옵션은 나중에 테마를 변경할 경우 문제를 일으킬 수 있습니다. 시각적으로 매력적인 디자인도 처음에는 좋아 보일 수 있지만, 불필요한 기능이 많아 사이트 속도를 크게 저하시킬 수 있습니다.
스타일과 속도를 모두 갖춘 테마를 고르는 데 도움이 되는 몇 가지 팁을 소개합니다.
단순함 유지 – 지나치게 복잡한 레이아웃과 무거운 애니메이션은 피하세요.
반응형 디자인 선택 – 모바일, 태블릿, 데스크톱 화면에 자연스럽게 적응하는 테마를 선택하세요.
플러그인 호환성 확인 – 필수 플러그인, 평점이 좋은 플러그인, 현재 WordPress 버전과 잘 작동하는지 확인하세요.
페이지 빌더 평가 – 내장 페이지 빌더가 있는 테마는 편리할 수 있지만, 불필요한 용량이 추가될 수 있습니다. 선택 전 성능을 테스트하세요.
SEO 친화적 코드 확인 – 깔끔하고 의미 있는 코드 구조는 검색 엔진이 사이트를 더 잘 이해하는 데 도움이 됩니다.
대부분의 테마 개발자는 제품의 라이브 데모를 제공합니다. 구매 전 데모 사이트를 속도 테스트 도구로 점검해 보세요. 이를 통해 실제 환경에서 테마가 어떻게 작동하는지 현실적으로 파악할 수 있습니다.
이미지 최적화
크고 압축되지 않은 이미지는 페이지 로딩이 느려지는 가장 흔한 원인 중 하나입니다. 플러그인과 온라인 서비스 등 다양한 도구를 사용하면 품질 저하 없이 파일 크기를 줄일 수 있습니다.
자동화된 방식을 선호한다면 EWWW Image Optimizer 등의 플러그인을 통해 WordPress 내에서 직접 압축을 처리할 수 있습니다. EWWW Image Optimizer는 자체 기능 세트와 유연한 설정, 대량 최적화 기능을 제공합니다.
참고: 이 플러그인은 exec() 함수가 필요합니다.
설치 및 활성화 후 미디어 > 대량 최적화로 이동할 수 있습니다.
최적화되지 않은 이미지 스캔을 클릭하여 압축 가능한 모든 이미지를 찾으세요.
스캔 후 최적화 시작을 눌러 대량으로 크기를 줄이세요.
플러그인에서 "고급 설정" 메뉴를 통해 예약 최적화를 실행하도록 설정할 수도 있습니다.
유의하세요:
대량 최적화는 일시적으로 많은 서버 리소스를 사용할 수 있으며, CPU 한도에 도달할 수 있습니다.
압축률이 높을수록 파일 크기는 작아지지만, 과도한 압축은 특히 사진이 많은 사이트에서 눈에 띄는 품질 저하를 일으킬 수 있습니다.
플러그인은 빠르고 편리하지만 항상 최고의 압축률을 제공하지는 않습니다. 최대 효과를 원한다면 업로드 전에 온라인 도구를 사용해 이미지를 수동으로 처리할 수 있습니다.
TinyPNG – PNG 및 JPEG 압축에 탁월합니다.
Compressor.io – 다양한 포맷을 지원하며 강력한 최적화를 제공합니다.
수동 압축은 시간이 더 걸리지만, 더 선명하고 가벼운 이미지를 제공하여 방문자에게 품질 저하 없이 더 나은 경험을 선사할 수 있습니다.
캐싱 플러그인
캐싱 플러그인은 WordPress 웹사이트 속도를 높이는 가장 효과적인 방법 중 하나입니다. 미리 생성된 페이지 버전을 저장하고 제공함으로써, 각 방문자마다 서버가 해야 할 작업을 줄여 로딩 시간을 크게 단축합니다.
가장 인기 있고 신뢰할 수 있는 옵션은 다음과 같습니다.
브라우저 캐싱
브라우저 캐싱은 방문자의 브라우저가 이미지, 스타일시트, 스크립트 등 특정 웹사이트 파일을 일정 기간 로컬에 저장하도록 지시합니다. 이렇게 하면 재방문 시 브라우저가 해당 파일을 다시 다운로드하지 않고 자신의 기기에서 불러올 수 있습니다. 서버 부하가 줄고, 반복 방문 시 속도가 빨라지며, 전반적인 브라우징 경험이 향상됩니다.
브라우저 캐싱은 여러 가지 방법으로 설정할 수 있습니다.
1. W3 Total Cache 사용
이미 W3 Total Cache를 사용 중이라면, 브라우저 캐싱 활성화는 간단합니다.
WordPress 대시보드에서 Performance > Browser Cache로 이동하세요.
다음과 같은 옵션의 체크박스를 선택하세요.
Last-Modified 헤더 설정.
expires 헤더 설정.
HTTP(gzip) 압축 활성화.
설정을 저장하세요.
W3TC는 필요한 규칙을 .htaccess 파일에 자동으로 추가합니다.
2. 수동 규칙 추가
플러그인을 사용하지 않으려면 .htaccess 파일을 직접 편집하여(아파치 서버 기준) 브라우저 캐싱을 활성화할 수 있습니다. 아래와 같은 코드를 추가하면 파일 유형별로 "만료" 시간을 설정할 수 있습니다.
ExpiresActive on
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days"
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpeg "access plus 60 days"
ExpiresByType text/css "access plus 2 weeks"
ExpiresByType image/x-icon "access plus 2 weeks"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType audio/x-wav "access plus 1 month"
ExpiresByType audio/mpeg "access plus 1 month"
ExpiresByType video/mpeg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/quicktime "access plus 1 month"
ExpiresByType video/x-ms-wmv "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType text/javascript "access plus 2 weeks"
ExpiresByType application/x-javascript "access plus 2 weeks"
ExpiresByType application/javascript "access plus 2 weeks"
파일을 얼마나 자주 업데이트하는지에 따라 시간 값을 조정할 수 있습니다.
웹사이트 최적화 팁
홈페이지 최적화
홈페이지는 방문자가 가장 먼저 보는 페이지이자, 사이트에서 가장 무거운 페이지인 경우가 많습니다. 잘 최적화된 홈페이지는 좋은 첫인상을 줄 뿐만 아니라 더 빠르게 로딩되어 방문자를 유지할 수 있습니다.
홈페이지 속도의 핵심 요소 중 하나는 사이트가 생성하는 HTTP 요청 수입니다. 페이지에 로드되는 모든 이미지, 스크립트, 스타일, 위젯마다 서버에 별도의 요청이 필요합니다. 요청이 적을수록 페이지가 더 빨리 표시됩니다.
요청 수를 줄이고 로딩 속도를 높이는 도구
WP Asset Clean Up
이 플러그인은 페이지를 스캔하여 불필요한 스크립트와 스타일을 찾아, 필요하지 않은 곳에서는 로딩을 방지합니다. 또한 HTML 코드를 최소화하여 더 깔끔하고 가벼운 페이지를 만듭니다.JavaScript to Footer
는 JavaScript 파일을 헤더에서 푸터로 이동시켜 초기 페이지 렌더링을 지연시키지 않도록 합니다. 이를 통해 페이지의 보이는 부분이 먼저 로드되어 체감 속도가 향상됩니다.
빠른 홈페이지를 위한 모범 사례
위젯 과다 사용 피하기 – 예를 들어 소셜 공유 버튼은 홈페이지보다는 개별 블로그 게시글에 배치하는 것이 좋습니다.
전체 게시글 대신 요약 표시 – 한 번에 로드되는 콘텐츠 양이 줄어들어 페이지를 더 쉽게 훑어볼 수 있습니다.
게시글 표시 개수 제한 – 최적의 속도와 가독성을 위해 최근 게시글 5개 정도로 유지하세요.
렌더링 차단 JavaScript 및 CSS 수정
Google PageSpeed Insights에서 사이트를 테스트할 때 다음과 같은 경고가 표시될 수 있습니다.
"위쪽(above-the-fold) 콘텐츠에서 렌더링을 차단하는 JavaScript 및 CSS 제거"
이는 일부 JavaScript 또는 CSS 파일이 페이지의 보이는(above-the-fold) 부분 렌더링을 지연시키고 있다는 의미입니다. 즉, 방문자의 브라우저가 이러한 파일을 모두 불러올 때까지 페이지 콘텐츠를 표시할 수 없어 속도가 느려집니다.
W3 Total Cache(W3TC)로 해결
Minify 설정을 조정하여 이 문제를 해결할 수 있습니다.
WordPress 대시보드에서 Performance > 일반 설정으로 이동하세요.
Minify 섹션에서 Minify 모드를 수동으로 설정하고 변경 사항을 저장하세요.
그런 다음 Performance > Minify 메뉴를 열고 JavaScript minify 설정이 권장 구성과 일치하는지 확인하세요:
Google PageSpeed에서 표시한 JavaScript 파일 URL을 JS 파일 관리 섹션에 추가하세요:
CSS 파일도 동일한 과정을 반복하세요. 표시된 CSS URL을 CSS 파일 관리 섹션에 추가하세요:
이 작업이 완료되면 PageSpeed Insights에서 사이트를 다시 테스트하세요. 모든 설정이 올바르면 렌더링 차단 경고가 사라집니다.
대안: Autoptimize 플러그인
더 간단한 도구를 원한다면 Autoptimize도 렌더링 차단 리소스를 줄이는 훌륭한 옵션입니다. 이 플러그인은 다음과 같은 기능을 제공합니다:
JavaScript 및 CSS 파일을 결합하고 최소화합니다
CSS와 JS를 이동하여 로딩 순서를 개선합니다
더 가벼운 페이지를 위해 HTML을 최소화합니다
WP Super Cache와 같은 캐싱 플러그인과 함께 사용할 수 있어 더욱 뛰어난 결과를 얻을 수 있습니다.
Autoptimize의 주요 설정은 다음과 같습니다:
JavaScript 옵션 – 여러 JS 파일을 하나로 결합하여 요청 수를 줄입니다
CSS 옵션 – 중요한 CSS를 인라인 처리하고, 작은 이미지를 CSS에 직접 인코딩하는 등 다양한 기능을 제공합니다
HTML 옵션 – 주석을 유지하면서 HTML을 최소화할 수 있습니다
CDN 옵션 – 정적 파일을 더 빠르게 로드할 수 있도록 CDN 기본 URL을 설정합니다
이미지 탭 – 이미지를 자동으로 압축 및 최적화합니다
추가 / 더 최적화하기 – 고급 사용자를 위한 추가 고급 설정입니다.
모든 기능을 사용하려면:
설정 > Autoptimize > 고급 설정 표시를 클릭하세요:
사이트에 맞게 옵션을 조정하세요:
변경 사항 저장 및 캐시 비우기를 클릭하여 최적화를 적용하세요:
핫링크 보호 활성화
다른 웹사이트가 귀하의 서버에 호스팅된 이미지를 직접 링크(예: 실제로 이미지를 호스팅하지 않고 자신의 페이지에 표시)하는 경우 이를 핫링크라고 합니다.
겉보기에는 무해해 보일 수 있지만, 방문자가 이미지를 불러올 때마다 귀하의 서버가 작업을 수행하고 대역폭을 사용하여 사이트 속도가 느려지고 호스팅 비용이 증가합니다.
핫링크를 차단하는 가장 쉬운 방법은 cPanel에서 핫링크 보호를 활성화하는 것입니다. Hotlink Protection 메뉴에서 설정할 수 있습니다:
활성화하면 다른 웹사이트에서 더 이상 귀하의 서버에서 이미지를 직접 불러올 수 없으므로, 리소스를 보호하고 방문자에게 사이트 속도를 유지할 수 있습니다.
데이터베이스 최적화
시간이 지남에 따라 WordPress 데이터베이스에는 오래된 수정본, 스팸 댓글, 플러그인에서 남은 설정 등 불필요한 데이터가 쌓여 웹사이트 속도를 저하시킬 수 있습니다.
기본적으로 WordPress는 11개의 핵심 테이블을 사용하지만, 대부분의 사이트에는 플러그인과 테마로 인해 추가 테이블이 생성됩니다. 정기적인 데이터베이스 최적화는 데이터 정리와 효율성, 속도 유지에 도움이 됩니다.
WordPress 데이터베이스를 최적화하려면:
안전하게 삭제할 수 있는 항목만 제거하도록 데이터베이스 최적화 가이드를 따르세요
빠르고 안전한 최적화를 위해 다음과 같은 전문 플러그인을 사용할 수 있습니다.
WP-Optimize – 정리 작업을 위해 직접 SQL 쿼리를 실행합니다(빠르지만 고아 데이터가 남을 수 있음).
Optimize Database after Deleting Revisions – 게시물 수정본 정리에 중점을 둡니다.
WP-Sweep – 공식 WordPress 삭제 기능을 사용하여 고아 데이터가 남을 위험을 줄입니다.
WP-DB Manager – 최적화 및 백업 기능을 제공합니다.
WordPress 웹사이트 성능 평가
플러그인은 WordPress 사이트에 추가 기능과 맞춤 옵션을 제공하지만, 일부 플러그인은 과도한 CPU 및 I/O 리소스를 사용해 성능에 악영향을 줄 수 있습니다.
웹사이트가 효율적으로 작동하도록 하려면 플러그인과 테마가 미치는 영향을 측정하는 것이 중요합니다.
1단계 – 리소스 사용량 분석
PHP 수준에서 웹사이트를 스캔하려면 Code Profiler 플러그인을 사용하세요. 이 플러그인은 다음과 같은 내용을 차트와 표로 명확하게 보고합니다.
어떤 플러그인 또는 테마가 사이트를 느리게 하는지;
가장 많은 리소스를 사용하는 특정 PHP 스크립트, 클래스, 메서드, 함수.
2단계 – 플러그인 로딩 제어
Plugin Organizer 플러그인을 설치하여 다음을 수행하세요.
특정 페이지나 게시글에서 특정 플러그인 비활성화
플러그인 로딩 순서 변경
필요한 곳에서만 필요한 플러그인만 실행되도록 하여 성능을 향상시킵니다.
3단계 – 전체 웹사이트 최적화 점검
위의 개선 사항을 적용한 후에는 GTmetrix for WordPress 플러그인을 사용해 최적화 점수를 측정하세요. 이 도구는 웹사이트의 속도와 성능을 평가하여 진행 상황을 명확하게 파악할 수 있도록 도와줍니다.