Openlitespeed 웹서버 설치 및 Nginx 리버스 프록시 서버 설정하기 (3)

1. 워드프레스 접속하기

이제 자신의 주소로 접속해봅니다.

한국어로 설정 후 사이트 제목, 아이디 비번만 설정한 뒤에, 자신의 아이디 비번으로 로그인 하면 끝입니다.

DB는 제일 처음 원클릭으로 설정했기 때문에 따로 넣을 필요가 없습니다 ^^

관리자모드로 들어가서 설정 -> 고유주소에 보면 사용자 정의구조가 이상하게 되어있습니다.

index.php가 중간에 들어가게 되어있는데요. 이렇게 되면 캐시가 제대로 되지 않기 때문에 꼭 바꿔야 합니다.

이것을 자신이 원하는 구조로 바꿉니다. 저장하면 됩니다.

2. Nginx Helper 플러그인 설치 및 설정하기

플러그인 새로 추가를 눌러서 검색창에 Nginx Helper를 설치 후 활성화 해줍니다.

관리자 화면에서 설정에 제일 밑에 보면 Nginx Helper가 있습니다. 그걸 눌러줍니다.

위와 같이 설정 후 제일 밑에 저장을 눌러줍니다.

디버깅에 관심이 있다면

Enable Logging

Enable Nginx Timestamp in HTML

여기에 둘다 체크해주면 좋겠죠? ^^

디버깅에 체크하시면 페이지 소스보기를 눌렀을 때 제일 밑에 언제 캐싱이 되었는지 확인할 수 있습니다.

3. LiteSpeed Cache 활성화 및 Cache 설정해주기

드디어 이 시리즈의 최종 목적지인 LiteSpeed Cache 플러그인 설정에 왔습니다.

사실상 이 시리즈를 기획한 계기이기도 하구요.

관리자 -> 플러그인 -> 설치된 플러그인에 보시면 이미 설치가 되어있습니다.

활성화를 해줍니다. Settings를 누릅니다.

위와 같이 캐시 셋팅이 뜹니다. 그대로 저장해주시면 됩니다.

이제 Object를 클릭합니다.

위와 같이 Redis를 선택 후 포트를 6379로 변경해줍니다.

그리고 밑에 내려보면 Cache Wp-Admin에 OFF 를 누릅니다. ON을 하면 관리자페이지가 깨질수도 있습니다.

Store Transients은 ON으로 하시고 SAVE를 누릅니다.

그러면 Object Cache 부분에

Memcached Extension: Disabled

Redis Extension: Enabled

Connection Test: Passed

연결 테스트가 통과된 것을 볼 수 있습니다.

Object 바로 옆에 Browser가 있는데 클릭 후 Browser Cache ON을 해주고 SAVE를 누릅니다.

4. QUIC cloud와 연결하기

QUIC cloud는 라이트스피드테크 회사가 운영하고 있는 CDN 서비스입니다.

우리는 CDN 서비스를 이용하지는 않고, 중요한 CSS 생성, 이미지 최적화만 이용하려고 해도 연결을 해줘야 됩니다.

위와 같이 General을 누른 후 Request Domain Key를 누릅니다. 조금만 기다리면 자동으로 도메인 키가 입력되고 연결됩니다.

QUIC.cloud에는 접속할 필요도 없습니다. ㅎㅎ

5. Image Optimization 설정하기

Image Optimization을 누르고 Image Optimization Settings를 누릅니다.

위와 같이 셋팅 후 저장해줍니다.

제일 위에 Auto Request Cron은 꼭 On을 해주세요!

Webp도 알아서 만들어주고, 이미지도 최적화 해줍니다.

6. Page Optimization 설정하기

(1) CSS Setting

이제 제일 중요한 Generate Critical CSS가 있는 부분입니다.

사실상 이 플러그인의 핵심 기능이라고 생각합니다. 유료 플러그인의 경우 이 기능 하나 때문에 한달에 $7을 요구하기도 합니다. ㅎㅎ

그런데 CSS 부분은 워낙 테마와 다른 플러그인과의 충돌에 예민한 부분이라, 혹시나 CCSS 기능을 사용했을 때 문제가 생긴다면 과감하게 적용을 해제해야 합니다. ㅠㅠ

아무튼 테마가 간단하다면 아래와 같은 셋팅을 추천드립니다. 혹시나 깨진다면 CSS 셋팅을 하나씩 변경해보면서 정상적으로 변하는지 꼭 확인해야 합니다.

그리고 밑에 Inline CSS Async Lib : ON, Font Display Optimization : Swap 을 추천드립니다.

그리고 Save를 누릅니다.

(2) JS Setting

JS 셋팅도 테마에 따라 호불호가 상당히 갈립니다. 문제가 생겼을 때 CSS와 JS 셋팅을 다 껐다가 하나씩 켜면서 문제가 생기지 않는 범위에서 적용하는 것을 추천드립니다. 일반적인 상황에서는 아래와 같은 설정을 추천드립니다.

(3) Optimization Settings

최적화 셋팅에 관련된 내용입니다. 일반적인 상황에서는 아래와 같이 셋팅을 추천드립니다.

구글 폰트 비동기화 로딩 및 구글 폰트 제거 부분은 자신의 테마에 맞춰서 사용하시기 바랍니다.

개인적으로 구글 폰트 비동기화 로딩은 OFF를 추천드립니다. 

(4) 그외 추천 셋팅

Media Settings 이미지와 동영상 부분인데요. 

전부 ON을 추천드립니다. 이미지 로딩될 때 흐릿하게 나왔다가 이미지를 전부 다운 받으면 제대로 표시되는 기능도 있는데 추천드립니다. ㅎㅎ

Discussion Settings 에서는 둘다 ON을 추천드립니다. 그라바타의 아바타를 바꾼다면 OFF를 한 뒤에 다시 ON을 하면 더 좋겠죠? ^^

이제 페이지 최적화 셋팅은 완료했습니다.

7. Crawler

Crawler는 활성화 해주는 것이 좋습니다. Crawler General Settings에 가서 ON을 누르고 Save 해주시면 됩니다.

나머지 데이터베이스, 툴박스 부분은 딱히 손댈 부분이 없습니다.

8. 사이트 접속해보기

처음에 메인 페이지로 가면 느릴 수 있는데요. 중요한 CSS를 페이지 접속하면 바로 생성되게 만들었기 때문에 느린 것입니다.

CSS를 생성하면 그 뒤엔 빠르므로 걱정 안하셔도 됩니다. ㅎㅎ

그리고 처음에는 Nginx의 proxy cache가 접근하기 때문에 최적화 페이지가 보이지 않습니다. 

Nginx Help 플러그인 설정에 가서 Purge Entire Cache를 누릅니다. 그러면 전체 페이지의 Proxy Cache를 다 지워줍니다. 그러면 새로 접속하는 페이지에서 라이트스피드 캐시가 먼저 생성이 되고, 그 뒤에 Nginx Proxy Cache가 생성될 것입니다.

9. 결론

이제 우리가 생각했던 오픈라이트스피드 웹서버의 LSCACHE 모듈을 활용한 LiteSpeed Cache와, Nginx의 Proxy Cache를 함께 사용할 수 있게 됐습니다. 

웹페이지 최적화는 LiteSpeed Cache가 해주고, Nginx는 그 캐시된 내용을 RAM에 기록하여 바로 전달해주는 기능을 수행하게 됩니다.

캐시가 잘 되었다면 오픈라이트스피드 웹서버는 전혀 움직이지 않고, Nginx가 RAM에서 꺼내기만 하면 되니 완전 빠르겠죠? ^^

DB도 부담이 없구요. 아마 동시접속자 수도 엄청나게 개선되었을 것입니다.

부디 이 글을 보고 워드프레스 최적화 끝판왕 설정을 적용하셨으면 좋겠습니다. 감사합니다.