클라우드웨이즈(Cloudways)에서 워드프레스 사이트 레이아웃이 깨지는 경우

클라우드웨이즈(Cloudways)는 빠른 속도 때문에 최근 우리나라에서 많이 사용되고 있습니다. 이 워드프레스 블로그도 최근 블루호스트에서 클라우드웨이즈로 서버를 옮겼습니다. 클라우드웨이즈에서는 Breeze라는 캐시 플러그인을 제공하므로 별도의 캐시 플러그인과 최적화 플러그인(예: Autoptimize)을 사용할 필요가 없습니다.

Breeze 캐시 플러그인을 잘못 설정하는 경우 사이트 레이아웃이 깨질 수 있습니다. Breeze 플러그인을 활성화한 후에 사이트가 깨지는 경우 아래 내용을 참고하여 문제가 되는 설정을 특정하여 문제를 해결할 수 있습니다.

• 클라우드웨이즈 가입 방법 (+ Cloudways 프로모 코드, 할인 쿠폰 코드)

클라우드웨이즈(Cloudways)의 Breeze 플러그인

Breeze는 Cloudways 팀이 개발한 심플하면서 강력하고 사용이 편리한 워드프레스 캐싱 플러그인입니다. 현재 이 플러그인은 30만 개가 넘는 사이트에 설치되어 있으며 캐시 기능과 파일 최적화 기능, 데이터베이스 최적화 등 다양한 기능을 제공합니다.

클라우드웨이즈를 이용하는 경우 클라우드웨이즈의 서버 캐시(Varnish 캐시)와 데이터베이스 캐시를 워드프레스 관리자 페이지에서 빠르게 삭제할 수 있습니다.

Breeze 플러그인은 클라우드웨이즈에서 워드프레스 애플리케이션을 생성할 때 자동으로 설치됩니다. 다른 웹호스팅에서 사이트를 이전한 경우에는 플러그인 » 새로 추가에서 breeze를 검색하여 설치할 수 있습니다.

Breeze를 사용하는 경우에는 다른 캐시 플러그인과 Autoptimize, Async Javascript과 같은 플러그인은 삭제하시기 바랍니다.

클라우드웨이즈(Cloudways)에서 워드프레스 사이트 레이아웃이 깨지는 경우

클라우드웨이즈에서 호스팅되는 워드프레스 사이트에서 레이아웃이 깨지는 경우 Breeze가 설치되어 있다면 File Optimization의 설정을 체크하여 문제가 되는 설정을 찾아서 비활성화하면 문제가 해결될 것입니다.

설정 » Breeze » File Optimization에서 파일 최적화 설정을 검토하고 변경할 수 있습니다.

File Optimization에서는 Autopmize나 Clearfy와 같은 최적화 플러그인과 Async Javascript와 같은 자바스크립트 비동기 로딩 플러그인에서 제공하는 최적화 기능을 제공합니다.

Breeze 캐시 플러그인이 설치되어 있고 File Optimization 설정을 활성화한 경우 다른 캐시 플러그인(예: WP Super Cache, WP Rocket 등)이나 다른 최적화 플러그인(예: Autoptimize 등)은 비활성화해야 합니다. 이런 플러그인을 함께 사용하면 오히려 에러가 발생하고 사이트 속도가 느려질 수 있습니다.

File Optimization 탭에서는 다음과 같은 기능을 설정할 수 있습니다.

• HTML Minify
• CSS Minify
• Include Inline CSS
• Combine CSS
• JS Minify
• Include Inline JS
• Combine JS
• Delay JS Inline Scripts
• Delay All JavaScript
• Move JS Files to Footer

HTML, CSS, JS 스크립트를 압축하여 사이트 속도를 높이는 기능을 합니다. 특히 CSS Minify와 JS Minify 관련 설정을 하면 사이트 속도가 크게 개선되지만, 사이트 레이아웃 깨지는 경우가 종종 있습니다.

사이트 레이아웃이 깨지면 활성화된 설정을 하나씩 비활성화하면서 문제를 일으키는 설정을 특정할 수 있습니다.

개인적으로는 다음 옵션을 활성화하여 사용하고 있습니다.

• HTML Minify
• CSS Minify
• Include Inline CSS
• Combine CSS
• JS Minify

속도가 만족스럽지 않다면 Include Inline JS, Combine JS 등과 같은 추가적인 옵션을 활성화하면서 사이트 레이아웃에 문제를 일으키지 않는지 관찰할 수 있습니다.

빨간색으로 경고 표시된 옵션은 특히 사이트에 문제를 일으킬 수 있으므로 세심한 관찰이 필요합니다.

예를 들어, JS Minify 옵션에 대하여 실제 사이트에 적용하기 전에 스테이징 사이트(테스트 사이트)에서 테스트해볼 것을 권장하고 있습니다.

옵션을 변경한 경우 캐시를 삭제하고 로그아웃 상태에서 관찰하시기 바랍니다. 캐시 플러그인은 로그인된 상태에서는 작동하지 않습니다. 그러므로 관리자 페이지에서는 문제가 없지만 비로그인 상태에서는 변경 사항이 적용되지 않거나 사이트가 깨지는 경우가 있습니다.

Breeze 플러그인뿐만 아니라 캐시 플러그인과 Clearfy, Autoptimize와 같은 최적화 플러그인을 사용하는 경우에도 마찬가지로 Minify 관련 설정을 세심하게 지정하면서 사이트에 문제를 일으키지 않는지 관찰해야 합니다.

클라우드웨이즈의 Breeze 플러그인을 사용할 경우 구글 서치 콘솔의 코어 웹 바이탈 섹션에서 "LCP 문제: 2.5초 초과" 경고가 표시되는 경우가 있을 수 있습니다. 그런 경우 Clearfy 플러그인을 설치하여 세팅하면 문제가 해결될 수도 있습니다. 이런 문제가 발생하는 경우 다음 글을 참고하여 LCP를 개선해보시기 바랍니다.

캐시를 삭제해도 프론트엔드에 반영되지 않는 경우

캐시를 삭제해도 프론트엔드에 반영되지 않는 경우가 있을 수 있습니다. 이는 간혹 브라우저 캐싱과 관련될 수 있습니다.

브라우저 캐시의 이점

브라우저 캐시(Browser Cache)를 활성화하는 경우 여러 가지 이점이 있습니다.

1. 로딩 시간 감소: 브라우저 캐시를 활성화하면 웹사이트 리소스(이미지, 스타일시트, 자바스크립트 파일 등)가 사용자의 로컬 시스템(컴퓨터나 모바일 기기 등)에 저장됩니다. 이를 통해 동일한 웹페이지를 재방문할 때 서버로부터 리소스를 다시 다운로드할 필요 없이 즉시 로드할 수 있으므로 페이지 로딩 시간이 크게 줄어듭니다.
2. 데이터 사용량 절감: 모바일 기기 사용자의 경우, 이미 캐싱된 리소스를 다시 다운로드할 필요가 없기 때문에 데이터 사용량이 줄어들어 데이터 요금을 절감할 수 있습니다.
3. 서버 부하 감소: 클라이언트 측에서 자주 요청하는 자원들을 캐시해 두면, 이러한 자원들을 매번 서버에서 전송하지 않아도 되므로 서버 부하가 줄어들고, 이로 인해 서버의 전반적인 성능과 응답 시간이 개선되는 효과가 있습니다.
4. 트래픽(대역폭) 절약: 브라우저 캐시는 반복적으로 동일한 자원을 다운로드하지 않도록 함으로써 네트워크 대역폭을 절약할 수 있습니다. 이는 특히 대규모 접속이 이루어지는 사이트에서 효과적입니다.
5. 사용자 경험(UX) 개선: 빠른 로딩 시간과 효율적인 데이터 사용은 사용자 경험(User Experience)을 개선하고 재방문율이 증가할 수 있습니다.
6. 오프라인 브라우징: 특정 리소스들은 캐싱된 상태로 로컬 시스템에 저장되므로 인터넷 연결이 되지 않을 때에도 사용자가 일부 웹 콘텐츠에 접근할 수 있습니다.

브라우저 캐시 문제

이처럼 브라우저 캐시를 잘 활용하면 사이트 속도 개선과 트래픽 절감 등 긍정적인 효과가 있지만, 한편으로는 최신 콘텐츠가 프론트엔드에 반영되지 않는 문제가 발생하는 경우도 있습니다. 이 사이트에서는 몇 년 전 캐시 플러그인의 브라우저 캐시 설정 때문에 최신 콘텐츠가 몇 달 동안 반영되지 않아서 문제가 된 적이 있습니다.

Breeze 플러그인에서는 Basic Options » Browser Cache 옵션에서 브라우저 캐시를 활성화/비활성활 수 있습니다.

다른 캐시 플러그인과 달리 Breeze의 경우 브라우저 캐시를 활성화해도, 캐시를 삭제하면 프런트엔드에 최신 콘텐츠가 제대로 업데이트가 되는 것 같습니다. 브라우저 캐시 때문에 약간 지연되어 최신 콘텐츠가 업데이트될 수 있습니다. 이 경우는 문제가 되지 않지만, 서너 시간이나 하루가 지나도 새로 발행한 포스트가 전면 페이지에 표시되지 않는 경우에는 Browser Cache 옵션을 비활성화하여 문제가 해결되는지 확인해보시기 바랍니다.

내부 캐시 삭제

새로운 글이 글이 발행될 경우 관리자 페이지에서 캐시를 수동으로 삭제하면 전면 페이지와 블로그 페이지, 아카이브 페이지 등에 새로 발행된 글이 반영됩니다.

예약 발행을 설정한 경우, 새 글이 발행되면 해당 글의 URL을 통해 접근이 가능하지만 곧바로 블로그 페이지나 아카이브 페이지에 반영이 안 될 수 있습니다. 수동으로 캐시를 삭제하면 되지만, 관리자 페이지에 접속할 여건이 안 될 경우 일정 시간이 지나야 내부 캐시가 자동으로 삭제되어 최신 글 페이지 등에서 새로 발행된 글이 표시됩니다.

글을 자주 발행하는 경우 Purge Cache After 설정을 짧게 설정하는 것을 고려할 수 있습니다. 반대로 글을 자주 발행하지 않는 경우에는 이 설정을 길게 설정할 수 있습니다. 기본 설정은 1440으로 1440분(1일)을 의미합니다.

마치며

이상으로 클라우드웨이즈에서 호스팅되는 Breeze 플러그인을 사용할 때 워드프레스 사이트 레이아웃이 깨지는 경우 확인할 사항에 대하여 살펴보았습니다. 다른 캐시 플러그인을 사용하는 경우에도 캐시 설정 때문에 사이트 레이아웃이 깨질 수 있습니다. 구글 크롬의 시크릿 모드에서 사이트가 제대로 작동하는지 체크하시기 바랍니다. 간혹 관리자로 로그인 상태에서 제대로 작동하므로 사이트에 이상이 없는 것으로 생각하여 사이트 오류를 인지하지 못하는 경우도 있습니다.

참고

• 클라우드웨이즈로 워드프레스 시작하기 및 도메인 연결하기
• GeneratePress 테마 사이드바 고정하기
• 9년 간 사용한 블루호스트를 떠난 EU