SEO 속도 최적화를 위한 워드프레스 커스터마이징

by

워드프레스 최적화를 위해 빠른 속도가 필요한 이유

웹사이트의 속도는 사용자 경험, 검색 엔진 최적화(SEO), 전환율에 큰 영향을 미칩니다. 사이트 속도가 느리면 사용자 이탈률이 높아지고, 검색 엔진에서도 불리한 평가를 받을 수 있습니다. 워드프레스는 강력한 테마와 플러그인으로 다양한 기능과 유연성을 제공하는 플랫폼입니다. 하지만 제대로 관리하지 않으면 사이트 속도가 저하될 수 있습니다. 이를 해결하기 위해 워드프레스 사이트 속도 최적화에 대한 커스터마이징 팁 10가지를 소개하겠습니다.

1. 최적화된 호스팅 선택하기

워드프레스 사이트의 속도는 서버 성능에 크게 의존합니다. 공유 웹 호스팅은 저렴하지만, 트래픽이 많아지면 속도가 저하될 수 있습니다. 그뿐만 아니라 서비스를 이용하는 사이트 중 하나만 디도스 공격을 받아도 전체가 다운되어 SEO에 악영향을 미칩니다. 이를 방지하기 위해서는 워드프레스 전용 호스팅이나 클라우드 기반 호스팅을 고려하는 것이 좋습니다. 이들 호스팅은 서버 자원을 효과적으로 분배하고, 캐싱과 콘텐츠 전송 네트워크(CDN) 등을 제공하여 사이트 속도를 최적화하는 데 도움을 줍니다.

미국 호스팅 업체 해킹 관련 기사

2. 가벼운 테마 사용

복잡한 코드와 과도한 기능이 포함된 테마는 사이트의 속도를 저하할 수 있습니다. 속도 최적화를 위해서는 경량화된 테마를 사용하는 것이 중요합니다. 너무 많은 불필요한 기능, 불필요한 애니메이션, 고해상도 이미지 등이 있는 테마는 피하고, 코드가 효율적으로 작성된 테마를 선택해야 합니다. 예를 들어, GeneratePress, Astra와 같은 경량 테마는 속도 최적화에 적합합니다.

3. 불필요한 플러그인 제거

워드프레스의 강력한 기능은 다양한 플러그인에서 나옵니다. 그러나 너무 많은 플러그인은 서버 자원을 낭비하고, 사이트 속도를 저하하는 원인이 될 수 있습니다. 사용하지 않는 플러그인은 비활성화하고 삭제하는 것이 좋습니다. 또한, 기능이 중복되는 플러그인은 하나로 통합하고, 가능한 경우 직접 코딩하여 불필요한 플러그인 의존을 줄이는 것이 효율적입니다.

직접 코딩을 하기 위한 방법은 여기를 통해 확인하실 수 있습니다.

4. 이미지 최적화

이미지는 웹사이트 속도에 큰 영향을 미치는 요소 중 하나입니다. 고해상도 이미지를 압축하지 않고 사용하면 페이지 로딩 속도가 크게 느려질 수 있습니다. 이미지를 업로드할 때는 압축 기술을 사용하여 파일 크기를 줄이는 것이 중요합니다. 이를 위해 TinyPNG, JPEG-Optimizer 같은 온라인 도구나 워드프레스 플러그인인 Converter for Media, Smush, Imagify를 사용할 수 있습니다. 또한, 웹피(WebP)와 같은 최신 이미지 포맷을 사용하면 더 작은 파일 크기로 고품질 이미지를 제공할 수 있습니다.

// functions.php에 WebP 지원 추가
function add_webp_upload_mime( $mimes ) {
    $mimes['webp'] = 'image/webp';
    return $mimes;
}
add_filter( 'mime_types', 'add_webp_upload_mime' );
PHP

Converter for Media은 제가 사용하는 플러그인으로 설치하고 세팅만 해놓으면 업로드할때 자동으로 압축이 되므로 편리합니다.

플러그인 설치를 원하시면 다음의 링크를 통해 확인하실 수 있습니다.

Converter for Media – Optimize images | Convert WebP & AVIF
Converter for Media 플러그인

5. 서버에서 슈퍼캐시 적용 및 캐싱 플러그인 사용

캐싱은 사용자가 동일한 페이지를 다시 방문할 때 서버 부하를 줄이고 로딩 속도를 크게 향상하는 데 중요한 역할을 합니다. 캐싱하는 방법은 크게 2가지가 있습니다.

  • 서버 설정을 직접 추가하여 적용하는 방법
  • 플러그인을 설치하여 쉽게 적용하는 방법

서버를 직접 관리할 수 있는 운영자라면 서버 설정 파일 추가를 통해서 파일 로딩 시간을 줄일 수 있습니다. 다음은 nginx 서버에서의 슈퍼 캐시 설정 예제입니다. 상황에 따라 캐싱을 적용하지 않아야 하는 경우가 있기 때문에 다음과 같은 예외 적용이 필요합니다.

# WP Super Cache 설정 시작.
set $cache_uri $request_uri;

# POST 요청시 Super Cache 작동하지 않도록 예외 적용
if ($request_method = POST) {
    set $cache_uri 'null cache';
}

# Get 요청시에 인수가 존재할 경우 Super Cache 작동하지않도록 예외 적용
if ($query_string != "") {
    set $cache_uri 'null cache';
}

# 다음의 주소로 시작할 경우 Super Cache 작동하지 않도록 예외 적용
# wp-admin, xmlrpc 등을 포함함
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
    set $cache_uri 'null cache';
}

# 로그인한 사용자나 최근에 댓글을 달았던 사람 상대로 Super Cache 작동하지 않도록 예외 적용
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
    set $cache_uri 'null cache';
}

# 1. 고유 주소가 작동하도록 설정
# 2. 주소가 요청할 때 슈퍼 캐시가 가지고 있는 파일이 존재할 경우
# PHP를 거치지 않고 바로 캐시를 전송
location / {
    root   /volume1/web/wordpress;
    index  index.php index.html index.htm;
    try_files /wp-content/cache/supercache/$http_host/$cache_uri/index-https.html $uri $uri/ /index.php?$args;
}
ShellScript

WP-Optimize, LiteSpeed Cache와 같은 캐싱 플러그인은 데이터베이스 쿼리 및 파일 로딩 시간을 줄여 페이지 로딩을 빠르게 만듭니다. 캐시 된 페이지는 서버에서 미리 준비된 HTML 파일로 제공되므로 페이지 생성 시간을 줄일 수 있습니다.

특히 WP-Optimize는 캐싱뿐만 아니라 이미지, CSS, JS파일 압축도 간단하게 해주기 때문에 속도 최적화 플러그인으로 추천할 만합니다.
WP-Optimize를 이용하여 구글 페이지 성능개선 사이트에서 속도 측정을 한 결과입니다.

SEO 속도 최적화를 위한 워드프레스 커스터마이징 - 구글 Page Insights에서 측정한 결과값
구글 Page Insights에서 측정한 결괏값

구글 Page Insights 웹페이지 속도 개선 사이트 : https://pagespeed.web.dev

6. 콘텐츠 전송 네트워크(CDN) 사용

CDN은 사이트의 정적 콘텐츠(이미지, CSS, JavaScript 등)를 전 세계 여러 서버에 분산 배포하여 사용자에게 가장 가까운 서버에서 콘텐츠를 로드합니다. 이를 통해 페이지 로딩 속도가 빨라지고, 서버 부하도 줄어듭니다. 대표적인 CDN 서비스로는 Cloudflare, MaxCDN 등이 있으며, 워드프레스와 쉽게 통합할 수 있습니다. 하지만 CDN이라고 모두 속도가 다 빠른 것은 아닙니다. 어느 지역의 서버를 사용하는지, 서버의 사용자 경험은 어떤지 등을 충분히 분석해 본 후 가장 맞는 서비스를 선택해야 불필요한 비용 지출을 줄일 수 있을 것입니다. 특히 대한민국에서 서비스하는 CDN 업체가 많지 않으므로 적은 비용이 든다고 저품질 서버를 사용하고 외국에 서버를 둔 업체를 이용하면 속도가 오히려 떨어질 수 있습니다.
CDN을 선택하기에 앞서 무료 체험 기간을 활용하시길 추천해 드립니다. 그동안 구글의 웹페이지 속도 개선 사이트를 통해 속도 측정 테스트를 하실 것을 권장해 드립니다.

7. 데이터베이스 최적화

워드프레스는 게시물, 페이지, 코멘트, 플러그인 설정 등 다양한 데이터를 데이터베이스에 저장합니다. 시간이 지남에 따라 데이터베이스에는 필요 없는 정보(예: 초안, 삭제된 항목 등)가 쌓일 수 있으며, 이는 사이트 속도를 저하할 수 있습니다. 이를 방지하기 위해 자녀 테마(Child Theme) 내부의 functions.php 파일 설정으로 자동으로 불필요한 내용을 삭제하거나, WP-Optimize와 같은 플러그인을 사용해 데이터베이스를 정기적으로 청소하고 최적화하는 것이 좋습니다.

// functions.php에서 자동으로 오래된 게시물 리비전 삭제
function delete_old_post_revisions() {
    global $wpdb;
    $wpdb->query( "DELETE FROM $wpdb->posts WHERE post_type = 'revision' AND post_date < NOW() - INTERVAL 30 DAY" );
}
add_action( 'wp_scheduled_delete', 'delete_old_post_revisions' );
PHP

자녀 테마(Child Theme) 설치에 대한 자세한 설명은 여기를 통해 확인 하실 수 있습니다.

8. CSS 및 JavaScript 파일 최소화 및 병합

워드프레스 테마와 플러그인에서 불필요하게 많은 CSS와 JavaScript 파일이 로드되면 페이지 로딩 속도가 느려질 수 있습니다. 이 문제를 해결하기 위해 Fast Velocity Minify, Autoptimize 같은 플러그인을 사용해 CSS와 JavaScript 파일을 최소화(minify)하고, 여러 파일을 하나로 병합하는 방법을 사용할 수 있습니다. 이 과정에서 공백과 불필요한 주석을 제거하여 파일 크기를 줄이고 로딩 시간을 단축할 수 있습니다.

9. 지연 로딩(Lazy Loading) 사용

이미지나 동영상과 같은 미디어 파일은 페이지 로딩 속도에 영향을 미칩니다. 지연 로딩(Lazy Loading) 기법은 사용자가 실제로 스크롤 하여 해당 콘텐츠를 볼 때까지 미디어 파일을 로드하지 않게 해줍니다. 이를 통해 초기 페이지 로딩 속도를 크게 개선할 수 있습니다. 워드프레스 5.5 이상 버전에서는 지연 로딩이 기본적으로 지원되며, 이를 보다 세밀하게 관리하기 위해 Lazy Load by WP Rocket 같은 플러그인을 사용할 수 있습니다.

10. Gzip 압축 활성화

Gzip 압축은 서버에서 브라우저로 전송되는 파일 크기를 줄이는 방법의 하나로, 이를 통해 전송 속도를 높일 수 있습니다. 워드프레스 사이트에서 Gzip 압축을 활성화하려면 서버에서 관련 설정을 하거나, 캐싱 플러그인에서 Gzip 기능을 켜는 방법을 사용할 수 있습니다. 앞서 설명했던 WP-Optimize에 Gzip 압축 기능도 포함되어 있습니다. 다음은 NGINX 서버에서 설정하는 방법에 대한 예시입니다.

# GZIP 전송 활성화
gzip on;
gzip_disable "msie6";

gzip_static on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 9;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types
    text/plain
    text/css
    text/js
    text/xml
    text/javascript
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml;
ShellScript

11. 외부 스크립트 및 폰트 최적화

Google Fonts, 외부 JavaScript 라이브러리와 같은 외부 자원은 전 세계의 많은 사용자들이 동시에 접속하기 때문에 사이트 로딩 속도에 영향을 미칠 수 있습니다. 외부 자원을 사용해야 하는 경우, 가능한 경우 폰트 파일을 로컬에 호스팅하거나, 외부 스크립트를 비동기적으로 로드하여 로딩 속도를 개선할 것을 권장합니다.

로컬 파일에 접속하는 방법은 크게 자녀 테마의 functions.php파일 수정이나 style.css파일을 수정하는 두 가지 방법이 있습니다.

// 자녀 테마(Child Theme)의 functions.php
// 구글 폰트를 로컬에서 불러오기
function load_local_google_fonts() {
    wp_enqueue_style('local-google-fonts', get_template_directory_uri() . '/fonts/custom-fonts.css');
}
add_action('wp_enqueue_scripts', 'load_local_google_fonts');
PHP
/* 자녀 테마(Child Theme)의 style.css */
@import url("../generatepress/style.css");
@import url("./fonts/custom-font.css");
CSS

비동기적 로드는 WP-Optimize 등의 플러그인을 통해서 간단하게 설정 할 수 있습니다.

12. 마무리하며

워드프레스 사이트의 속도 최적화는 사용자 경험을 개선하고 SEO 성과를 높이는 중요한 요소입니다. 위에서 소개한 커스터마이징 팁을 활용하면 사이트 성능을 효과적으로 개선하고, 사용자들에게 빠르고 원활한 브라우징 경험을 제공할 수 있습니다. 최적화 과정에서 캐싱, 이미지 최적화, 외부 자원 관리 등 다양한 방법을 병행하면 사이트 로딩 시간을 획기적으로 줄일 수 있습니다.

댓글 남기기