[개안뽑] ⑧빠른 속도의 비결이 html? 워드프레스는 html 안 만들지 않냐?

워드프레스는 느리지만, 캐싱 플러그인으로 html 파일을 만들고,
그 html 파일들을 바로 Nginx 서버에 물려주니 갑자기 일반 html 웹사이트 속도로 업그레이드
글로벌 최고 개발자들이 만든 서비스를 바로바로 갖다 쓸 수 있는 것이 워드프레스의 장점

워드프레스가 느리다는 욕을 먹는 가장 큰 이유가 뭘까? 사실 하나의 이유를 고를 수 없을만큼 수 많은 문제가 있는 상태고, 그렇다보니 어느 하나에 손을 댄다고 현격하게 빠른 서비스를 만들어 낼 수도 없다. 그냥 무료 솔루션이 그런거지~ 라는 생각으로 참고 쓰는 수밖에 없는 것이 지난 20년 간 워드프레스로 웹페이지를 만들었던 사람들의 불만이었다.

그나마 블로그만 돌아가던 가벼운 시절에는 큰 문제가 아니었던 것이, CMS(Contents Management Service)로 성장하면서 무거워지니까 성능 문제가 본격적으로 대두되었던 것이다.

좀 더 깊은 이야기를 살짝만 간추리면, 단순한 1페이지 서비스라면 굳이 데이터베이스(DB)를 갖추고, 웹페이지 렌더링을 하는 PHP가 붙어야 할 이유가 없다. 그냥 html 파일만 하나 만들고, 이미지와 텍스트가 어디에 배치될지 CSS로 위치만 지정해주고나면, 그걸 Apache가 됐던, Nginx가 됐건, 외부에서 도메인 이름으로 접속하려는 사람들에게 보여줄 수 있도록 서버 셋팅만 하면 된다.

근데 워드프레스는 블로그였던 시절에 html 파일 10개, 100개 정도 서비스하던 구조로 DB에 이미지 파일에 수천 개의 글에, 가입자에, 가입자별 권한에, 그것도 모자라 각종 플러그인들이 덕지덕지 붙어버렸으니, 당연히 감당이 어려운 상황이 되었던 것이다. 쉽게 말하면 뼈 마디 작은 어린아이에게 100kg의 지방이 붙은 셈이 됐다. 그런 아이는 뛰는 건 둘째 문제고, 서 있기도 힘들 것이다.

속도가 빠른 이유가 워드프레스인데 웹페이지 파일이 html로 만들어져서라고?

우리 회사 웹사이트들이 그렇게 악명이 높았던 워드프레스로 만들어졌음에도 불구하고, 심지어 서버도 아직 오락가락하는 조잡한 상황임에도 불구하고 구글 페이지 스피드 성능 점수에서 90점을 쉽게 넘는 상황이 된 것은 아래의 이유들 때문이다.

블록(Block) 기반 테마들이 깃털처럼 가벼우니까
무거운 플러그인들은 모두 백엔드(Back-end)로 돌려버렸으니까
Nginx 서버가 Apache 서버보다 훨씬 빠르고, Nginx의 FastCGI cache가 성능이 좋으니까
성능 좋은 캐싱(Caching) 플러그인을 쓰니까
Varnish cache가 앞에서 받쳐주니까 (솔직히 말해서 2023년 12월 7일 시점에 이건 아직 완성이 안 됐다)

인 부분도 있지만, 아래의 내용이 가장 결정적이라고 생각한다

PHP가 웹페이지를 보여주지 않고 Caching이 된 html 파일을 보여주고 있으니까

이게 무슨 말인지 이해를 해야 뭔가 재밌는 짓을 했기 때문이라는 것을 감을 잡을 수 있을테니까, 개발자들은 저 아래로 스크롤 다운 하시고, 비개발자들끼리 몇 마디 좀 나눠보자.

html이 빠른 이유와 PHP를 거치는 것이 느린 이유

일반적으로 웹사이트들이 우리 눈에 표현될 때는 최종적으로 html이라는 문법의 문서로 구현이 된다.

지금 보고 있는 웹페이지도 어찌됐건 웹브라우저가 html이라는 문서를 눈으로 보기에 좋게 화면으로 구성한 것이다. 그 때 어떻게 보여주라고 각종 문법 지식을 담은 CSS라는 파일이 보조해주기는 하는데, 기본적으로는 html이 우리가 보는 문서, 웹브라우저가 문서를 보여주는, 일종의 워드 파일, 워드 프로그램 관계라고 생각하면 된다.

근데 문제는 모든 내용을 html로 저장해놓을 수가 없다는 것이다.

매일매일 새로운 글이 올라오는 뉴스 서비스 사이트라면, 우측에 신규 뉴스 관련 정보들을 집어넣고, 하단에는 광고도 넣을 수 있다. 뭔가 바뀌는 부분들이 너무 많은데, html로 기사만 저장해놓고 있는 서비스가 아닌이상, 모든 웹사이트 정보를 html형태의 문서로 다 바꿔놓고 있을 수는 없다.

그래서 DB를 갖추고 있는 서비스들은 일반 유저에게 콘텐츠를 보여주기 위해 아래의 과정을 거친다

도메인 연결 – 서버 접속 – 웹 프로그램 동작 – 웹 서비스로 변환 – 서버에 전달 – 접속자 브라우저에 전달

이게 워드프레스의 경우는

도메인 연결 – Apache/Nginx 서버 접속 – PHP에 접속자가 뭐 찾아왔다 전달 – PHP가 워드프레스에 전달 – 워드프레스가 DB에서 자료 찾아오라고 명령 – 받은 자료를 워드프레스에서 화면 구현 – PHP로 전달 – PHP가 Apache/Nginx 서버에 전달 – 접속자 브라우저에 전달

치는데도 매우 힘들었는데, 저 작업을 하루 10만명, 아니 1,000만명에게 하고 있는 서버에는 얼마나 많은 과부하가 걸릴까?

그래서 일반적으로는 Caching 서비스들이 붙어서 사람들이 자주 찾는 웹페이지들을 미리 저장해서 갖고 있다. 이걸 메모리에 올릴 수도 있고, 하드디스크에 저장할 수도 있고, 저장하는 정보가 웹페이지냐, DB의 정보냐, 화면 구성해주는 CSS냐 등등으로 다양한 종류의 Caching 서비스가 있을 수는 있는데, 본질은 동일하다. 서버가 돌아가는 내용 중 반복되는 부분을 피하고, 최종 결과물을 바로 보여주겠다는 것이다.

워드프레스가 또 문제가 되는 것은 PHP가 속도가 느린 것으로 악명이 높은 언어라는 점이다. Nginx가 Apache보다 x100, x1,000배 속도가 난다는 이야기가 나오는 만큼, 예전의 Apache 서버가 속도 문제를 갖고 있는 것도 역시 무시 못하는데, Apache-PHP의 콜라보에 워드프레스 자체가 느린 것, 테마가 느린 것, 플러그인이 느린 것까지 결합되면 결국 사람들이 쓰고 싶지 않은 서비스가 되어버리는 것이다.

워드프레스는 html 안 만들지 않았냐? 어디에서 도대체 어떻게 만든거야?

위의 구성에서 웹브라우저에 보여주는 부분에서는 어찌됐건 html 파일이 임시로 생성은 된다. 이걸 계속 갖고 있지 않는 것이 문제인데, 만약에 중간에 그걸 끊고 저 파일들을 내가 저장해놓을 수 있다면? 그래서 어차피 똑같은 신문 기사 페이지 보고 있는데, 같은 html 파일을 던져줄 수만 있다면?

Top 3 WordPress Cache Plugins and How to Turbocharge Them with Nginx – SpinupWP

실제로 이 아이디어를 구현한 분들이 있다. SpinupWP라고 캐나다에서 워드프레스 호스팅 서비스를 해 주는 기업인데, 워드프레스에서 캐싱 플러그인으로 유명한 3개를 골라 각각들이 어디에 어떻게 캐시 파일들을 저장하고 있는지, 그래서 그 파일들을 바로 Nginx에 물려주는 방식으로 웹서비스 속도를 현격하게 끌어올릴 수 있다는 것을 설명해놨다. 올해 11월 29일에 작성된 이 문서는

GitHub – SatelliteWP/rocket-nginx: Rocket-Nginx is a Nginx configuration that makes WP-Rocket even faster by serving static pages directly without loading WordPress or PHP.

위의 서비스를 바탕으로 설명한 것으로 보이는데, 위의 Github 페이지를 운영하는 SatelliteWP라는 또다른 워드프레스 호스팅 회사는 이미 5년 전부터 이런 서비스를 제공하고 있었다.

이미 버전 3.0.2까지 업그레이드가 된 Rocket-Nginx라는 저 서비스는 WP Rocket이라는 유명 캐시 플러그인이 만든 html 파일을 Nginx가 바로 갖고가도록 Nginx 서버의 설정값(Configuration)을 변경해버렸다.

WP Rocket은 유료 서비스고, 설정할 수 있는 범위도 제한적이라, 무료 버전이 있는 W3 Total Cache(W3TC)라는 또 다른 유명 캐시 플러그인으로 똑같은 설정을 해 보려고 저 위의 Rocket-Nginx를 뜯어고치다가 결국 포기했었다. W3TC가 내가 하고 싶은 다양한 설정을 다 지원해줘서 이것저것 뜯어고쳐보고 싶었는데, 어느 날 밤에 문득 그런 생각이 들더라.

난 개발자 아니잖아? 왜 이걸 새벽까지 붙잡고 있지?

결국 WP Rocket 유료 버전을 구매해서 다음날부터 Rocket-Nginx로 서비스 하는 중이다. 성능 점수가 한 5점은 더 오른 것 같고, 실제 체감은 정말….. 최고야 짜릿해ㅋㅋ (91점에서 97점으로 오른 것을 눈으로 확인하시면 된다.)

그냥 Github 복사해서 내려받기 하고, 파일명 변경하고, Nginx 서버에 맞춰 실행하는 3개 작업만 하면 이렇게 빨라지는데 왜 그렇게 고집을 피웠을까?ㅋ

이제 웹사이트가 어지간히 무거워져도 별로 겁이 안 난다. html로 서비스가 돌아가면 로딩 속도 문제는 둘째고, 우리 서버에 부담이 확 줄어들꺼잖아? 서버 한 대로 접속하는 유저 몇 명까지 버티는지 부하 점검하던 개발자들이 생각나는데, 이렇게 해놓으면 감당할 수 있는 접속자 숫자가 얼마나 더 늘어날까?

이런 식의 효율화를 전세계 30%의 웹사이트를 돌리는 워드프레스, 그 워드프레스에서 가장 성능이 좋다고 소문이 자자한 캐시 플러그인인 WP Rocket이니까 자기네 호스팅 서비스에 붙이겠다고 만든 사람이 나왔지 않을까?

전문 개발자를 뽑아서 html 파일로 저렇게 효율적인 캐싱 서비스를 만들어 달라고 하면 얼마의 기간과 얼마의 비용을 요구했을까? 만들 수 있는 한국인 개발자는 과연 몇 명이나 될까?