워드프레스 페이지 랜덤 분기 처리: 속도 저하 없이 A/B 테스트하기

0

랜딩 페이지에 유입되는 방문자를 여러 페이지로 랜덤하게 분산시키고 싶을 때가 있습니다. A/B 테스트를 진행하거나, 트래픽을 균등하게 배분하거나, 사용자 경험을 다양화하고 싶을 때 랜덤 리디렉션은 유용한 기능입니다.

하지만 워드프레스에서 랜덤 리디렉션을 구현할 때 캐싱 문제로 어려움을 겪을 수 있습니다. PHP로 서버 사이드 리디렉션을 구현하면 캐시 플러그인이나 CDN에 의해 항상 같은 페이지로만 리디렉션되는 문제가 발생할 수 있습니다. 그렇다고 해당 페이지에 대하여 캐싱 제외 설정을 하면 페이지 로딩 속도가 현저히 느려집니다.

워드프레스 사이트에서 캐싱을 유지하여 페이지 로딩 속도를 저하시키기 않으면서 방문자가 해당 랜딩 페이지에 접속할 때마다 매번 다른 페이지로 랜덤하게 리디렉션하는 방법에 대하여 살펴보겠습니다.

워드프레스 페이지 랜덤 분기 처리: 속도 저하 없이 A/B 테스트하기

워드프레스 페이지 랜덤 분기 처리: 캐싱을 유지하여 속도 저하 없이 A/B 테스트하기

워드프레스에서 랜덤 리디렉션이 필요한 이유

홈페이지를 운영하다 보면 하나의 URL을 여러 페이지로 분산시켜야 하는 상황이 종종 발생합니다. 특히 다음과 같은 경우에 특정 페이지를 방문하는 방문자를 랜덤하게 여러 페이지 중 하나로 리디렉션랜시키는 것을 고려할 수 있습니다.

  • A/B 테스트 구현:
    • 랜딩 페이지의 효과를 비교하기 위해 동일한 트래픽을 여러 버전의 페이지로 균등하게 분산시키려는 경우. 어떤 디자인, 카피, 레이아웃이 더 높은 전환율을 보이는지 테스트할 때 랜덤 리디렉션 방식을 활용할 수 있습니다.
  • 트래픽 분산:
    • 특정 페이지에 트래픽이 집중될 때 비슷한 내용의 여러 페이지로 방문자를 분산시켜 서버 부하를 줄일 수 있습니다.
  • 사용자 경험(UX) 다양화:
    • 동일한 주제에 대해 다양한 접근 방식의 콘텐츠를 제공하여 사용자마다 다른 경험을 제공하는 것이 가능합니다.

일반적인 PHP 리디렉션의 문제점

워드프레스에서 특정 페이지로 유입하는 방문자를 여러 페이지로 랜덤하게 리디렉션시키려는 경우 다음과 같은 PHP 코드를 사용하여 서버 사이드 리디렉션을 시도할 수 있습니다.

add_action('template_redirect', function() {
    if (is_page(12345)) {
        $urls = [
            'https://example.com/page-a/',
            'https://example.com/page-b/',
            'https://example.com/page-c/'
        ];
        wp_redirect($urls[array_rand($urls)], 301);
        exit;
    }
});

캐싱 문제

이 방법은 관리자로 로그인하여 테스트할 때에는 잘 작동하지만 캐시 플러그인이 설치되었거나 서버 캐시가 적용되어 있는 경우 캐싱 때문에 (캐시가 삭제되기 전까지) 동일 페이지로 리디렉션될 수 있습니다.

워드프레스 캐시 플러그인(LiteSpeed Cache, Breeze, WP Super Cache, W3 Total Cache, WP Rocket 등)이나 CDN(Cloudflare, CloudFront 등)이 리디렉션 응답을 캐싱하면, 모든 방문자가 동일한 페이지로만 리다이렉트될 수 있습니다.

캐싱 제외 설정 시 문제

저는 상기 코드를 응용하여 적용하니 캐시 플러그인 때문에 방문 시 동일한 페이지로 리디렉션되는 문제가 발생했습니다.

캐싱 문제가 의심되어 캐싱 제외 설정을 해보았습니다.

LiteSpeed Cache 플러그인을 사용하는 경우 설정 » LiteSpeed Cache » 제외 탭으로 이동하여 설정 제외에서 페이지 URL을 입력하여 캐싱이 되지 않도록 지정할 수 있습니다.

LiteSpeed Cache 캐싱 제외 설정

클라우드웨이즈(Cloudways)의 Breeze 캐시 플러그인을 사용하는 경우에는 설정 » Breeze » Advanced Options (고급 옵션) » Never Cache URL(s)에서 페이지 URL을 입력하여 캐싱 제외 요청을 할 수 있습니다.

클라우드웨이즈 Breeze 캐시 플러그인 캐싱 제외 설정

다른 캐시 플러그이을 사용하는 경우에도 비슷한 방법으로 가능합니다.

👉 참고로 캐시 플러그인을 사용하는 경우 위의 그림과 같이 사이트맵, 피드, ads.txt, robots.txt 파일에 대하여 캐싱 제외 설정을 하는 것이 좋습니다.

해당 페이지를 캐시에서 제외하면 랜덤 리디렉션은 작동하지만, 매번 서버에서 PHP를 실행해야 하므로 페이지 로딩 속도가 현저히 느려집니다. 특히 트래픽이 많은 사이트에서는 서버 부하도 증가합니다.

저는 특히 방문자 수가 많고 많은 기능 때문에 사이트 최적화가 제대로 안 되어 속도가 다소 느린 사이트에 위와 같은 코드를 적용하여 해당 랜딩 페이지에 대하여 캐싱 제외 설정을 하니 페이지를 방문할 때마다 약간의 지연이 체감될 정도였습니다.

사이트가 가볍고 빨라서 캐시 플러그인을 활성화하지 않고도 페이지 로딩 속도가 괜찮다면 이 상태로 이용할 수 있을 것입니다. 하지만 캐싱이 적용되지 않을 경우 페이지 로딩 속도가 느려진다면 이탈률이 증가하여 SEO 문제가 발생할 수 있습니다.

해결책: 자바스크립트 클라이언트 사이드 리디렉션 (캐싱 제외 설정을 하지 않음)

이 문제를 해결하는 효과적인 방법 중 하나는 자바스크립트를 사용한 클라이언트 사이드 리디렉션입니다. 서버는 항상 동일한 HTML을 반환하고(캐싱 가능), 브라우저에서 자바스크립트가 실행되면서 랜덤하게 URL을 선택하여 리디렉션되도록 합니다.

👉 이 방법을 이용하는 경우 캐시 플러그인의 설정에서 해당 페이지에 대한 캐싱 제외 설정을 했다면 캐싱 제외 섹션에서 해당 페이지의 URL을 삭제하시기 바랍니다.

이 방법의 장점

  1. 캐싱 유지: 서버가 반환하는 HTML은 항상 동일하므로 캐시 플러그인과 CDN이 정상적으로 작동합니다.
  2. 빠른 속도: 페이지가 캐싱되므로 서버 처리 시간이 최소화되고 TTFB(Time To First Byte)가 빠릅니다.
  3. 랜덤 기능 작동: 자바스크립트의 Math.random() 함수가 브라우저에서 실행되므로 사용자들이 해당 페이지를 방문할 때마다 새롭게 랜덤 선택이 이루어집니다.
  4. 서버 부하 감소: PHP 실행 없이 정적 파일만 제공하므로 서버 리소스 절감 효과가 있습니다.

예시 코드:

add_action('template_redirect', function() {
	if (is_page(1234)) {
		?>
		<!DOCTYPE html>
		<html>
		<head>
			<meta charset="UTF-8">
			<title>Redirecting...</title>
			<script>
				(function() {
					var urls = [
						'https://example.co.kr/page-a/',
						'https://example.co.kr/page-b/',
						'https://example.co.kr/page-c/'
					];
					var randomUrl = urls[Math.floor(Math.random() * urls.length)];
					window.location.replace(randomUrl);
				})();
			</script>
		</head>
		<body></body>
		</html>
		<?php
		exit;
	}
}, 1);

코드 설명

  • add_action('template_redirect', …): 워드프레스 템플릿이 로드되기 전에 실행
  • 우선순위 1: 다른 플러그인보다 먼저 실행되도록 설정
  • is_page(1234): 특정 페이지에서만 적용되도록 페이지 ID 체크
  • 즉시 실행 함수: (function() { … })()로 페이지 로드와 동시에 실행
  • Math.random(): 브라우저에서 랜덤 숫자 생성
  • window.location.replace(): 히스토리에 남기지 않고 리디렉션 (뒤로가기 버튼 문제 방지)

상기 코드를 차일드 테마의 함수 파일(functions.php)에 추가하면 테마가 업데이트되더라도 코드가 유지됩니다.

FTP/SFTP에 접속할 수 없거나 FTP 사용에 어려움을 느끼는 경우 WPCode와 같은 플러그인을 사용하여 PHP 코드 스니펫을 추가할 수 있습니다. WPCode 플러그인에서 PHP 코드를 추가하는 자세한 방법은 다음 글을 참고해보세요. 가입형 워드프레스(워드프레스닷컴)를 기준으로 설명했지만, 설치형 워드프레스에서도 동일하게 적용이 가능합니다.

상기 코드를 추가한 후에 원하는 대로 잘 작동하는지 테스트해보시기 바랍니다. 코드를 추가하고 캐시 플러그인의 캐시를 지운 후에 (캐시가 쌓이도록) 잠시 기다린 후에 테스트해 보면 페이지 로딩 속도 저하 없이 잘 작동할 것입니다. (참고로 로그인 상태에서는 캐시 플러그인이 보통 작동하지 않으므로 페이지 로딩이 느릴 수 있습니다.)

마치며

이상으로 워드프레스에서 캐싱을 유지하여 페이지 로딩 속도를 저하시키기 않고 랜덤하게 리디렉션시키는 방법에 대하여 살펴보았습니다.

검색 엔진 봇은 JavaScript를 실행하지만, 랜덤 리디렉션 페이지가 검색 결과에 노출되는 것은 바람직하지 않으므로 랜딩 페이지에 noindex 메타 태그를 추가하는 것을 고려하시기 바랍니다. Rank Math나 Yoast SEO를 설치한 경우 해당 페이지 편집 화면에서 noindex 설정이 가능합니다.

참고

댓글 남기기

댓글 남기기