워드프레스 호스팅 및 속도 최적화 – 22가지 체크 사항

워드프레스 속도 최적화 방법을 찾아보면 여러 내용들이 있는데 그 방법을 다 적용하기가 현실적으로 어렵습니다. 쓰는 테마도 다르고, 사용하는 플러그인도 다르고, 미디어 파일 업로드 하는 방법도, 사이트를 운영하는 방법도 사람마다 전부 다르기 때문입니다. 유튜브에서 이 플러그인 추천해서 쓰던 거 지우고 바꿨는데 또 다른 영상을 보니 다른 플러그인과 다른 방법을 쓰니까 ‘아 저게 더 좋은가?’ 고민하게 됩니다.

그 과정에서 사이트가 망가지기도 하고, 서버에 찌꺼기도 쌓이고, 분명히 플러그인을 삭제했음에도 서버 데이터베이스에 그대로 남아서 용량을 차지하는 경우도 있습니다. 중요한 건 내 사이트에 맞는 방법을 찾는 겁니다. 워드프레스 속도 최적화라고 해서 따라했는데 그 사람의 사이트만큼 속도가 높아지지 않으면 시간 날리고 헛짓한 게 되니까요.

1. 워드프레스 속도 최적화 – 최우선 순위는 서버 호스팅

이게 가장 중요하고 기본입니다. 왜 서버에 돈 쓰는 걸 사람들은 그렇게 아까워할까요? 공유 서버 저렴한 거 쓰면서 워드프레스 속도 높이겠다고 온갖 방법을 다 찾아서 적용해도 결과는 미미합니다. 마티즈랑 벤츠랑 경쟁이 되나요? 애초부터 불가능합니다.

그냥 벤츠로 바꾸면 되는데 마티즈 튜닝해서 벤츠 이겨보겠다고 하는 것과 똑같습니다. 구글이 속도 빠른 사이트에 고점을 준다는 건 사실입니다. 그런데 사이트 속도가 빠르다고 해서 무조건 고점 주나요? 그건 아니죠. 구글 검색에 최적화되는 조건 중에 하나가 사이트 속도인 것 뿐입니다.

하지만 이게 단지 점수로 1~2점 차이밖에 안 난다고 했을 때, 나와 비슷한 조건을 가진 동일한 점수의 사이트라면 그 사이트보다 속도라도 더 빨라야 내 사이트가 좀 더 좋은 점수를 받고 노출에서 유리하게 됩니다. 초반에 블로그 만들고 글을 열심히 써서 애드센스까지 승인받았다고 칩시다.

검색해서 노출은 됐는데 사이트가 늦게 열리거나 작동을 안 하면 아무 소용이 없습니다. 서버는 무한정 가동되는 게 아닙니다. 아마존이 운영하는 AWS는 세계 최고지만 100%의 가동률을 보장하지 못합니다.

블로그만 하면 그나마 다행이지요. 페이지가 가벼우니까요. 그런데 블로그가 아닌 우커머스 쇼핑몰이나, 여러 플러그인을 사용하거나, 데이터가 방대한 웹사이트라면 호스팅 품질이 나쁜 경우 반드시 문제가 생길 수밖에 없습니다. 제가 네이버 블로그에 블루호스트 욕을 한 바가지 했었지만 분명 저와 다르게 문제없이 사용하는 사람도 있습니다.

잘 사용중인 사람들은 이해를 못 합니다. 하지만 “나는 문제없는데 너는 왜 나쁘게 말하냐?”라고 말하면 안 됩니다. 최소한 호스팅은 모든 사용자에게 동일하고 일관된 가용성을 제공해야 하는 게 지극히 정상임에도 불구하고 사람마다 사용자 경험이 다르면 그건 그냥 나쁜 호스팅입니다. 구글은 검색 엔진입니다. 검색 엔진 입장에서 검색 결과로 내보낸 사이트가 안 열리면 SEO 지수를 낮출 수밖에 없습니다. 구글봇을 엿먹인거니까요.

이런 것들은 워드프레스 자체에 문제가 생길 확률보다 호스팅 때문에 발생하는 경우가 더 많습니다. 그래서 내가 호스팅은 비용 절충의 대상이 아니라고 말하는 것입니다. 좋은 콘텐츠를 조금이라도 더 노출을 시키려면 처음부터 서버에 투자하세요. 많이 비싸지도 않잖아요. 5달러는 저렴하고 10달러는 비싼가요?

 

무슨 호스팅이던 클라우드나, VPS 쓰세요. 그리고 가능하면 국내에 있는 서버 쓰세요. 서버의 거리가 물리적으로 가까워야 빨라지는 건 당연한 겁니다. 그게 길게 보면 시간 아끼고 이득입니다. 느린 서버를 써도 큰 문제가 없으려면 두 가지 방법밖에 없습니다.

내가 쓰는 글의 콘텐츠가 정말 정보나 경쟁자가 거의 없는 분야거나, 내 사이트에 들어와서 사람들이 글을 읽을 때 이탈률을 20% 미만으로 유지할 능력이 있다면 아무거나 써도 됩니다. 어차피 정보가 거의 없기 때문에 내 사이트가 느리든 말든 구글은 검색 결과에 내 글이 뜨게 해줄테니까요. 그런데 그런 사람이 과연 얼마나 될까요?

 

2. 워드프레스 속도 최적화 – 플러그인

플러그인이 많으면 안 된다, 플러그인 수를 15개 이하로 유지해라 이런 글 보신 적 있나요? 이건 사이트별 특성을 정확히 모르고 하는 말입니다. 15개 이하로 플러그인을 유지하라는 말은 단순 블로그 사이트일 경우에나 적용되는 말입니다.

사진 집어넣고 텍스트만 있는 사이트는 플러그인 많이 설치할 필요가 없습니다. 제가 운영하는 효가드 사이트에 설치된 플러그인이 몇 갠 줄 아시나요? 38개입니다. 저라고 38개 플러그인을 깔고 싶어서 깔았을까요? 그 기능이 필요하니까 어쩔 수 없이 설치하다 보니 그렇게 된 거지요.

개발? 진짜 워드프레스는 전부 만든다고요? 인정합니다. 그런데 그건 돈 많은 기업이나 가능한거지 개인은 애초부터 해당사항이 없습니다. 이런 말 하는 것 자체가 기만입니다. 개발을 못해도 개인이 만들어 사용할 수 있게 만든 게 워드프레스인데 테마랑 플러그인 사용해서 사이트를 만드는 건 실력이 없다라고 홈페이지에 떡~하니 써 놓은 워드프레스 사이트가 있는데 그냥 웃겠습니다.

저는 한국형이라는 말을 싫어합니다. 그러나 한국에서 워드프레스 특히 쇼핑몰을 하려면 어쩔 수 없이 국내에 맞는 플러그인을 따로 쓸 수밖에 없을만큼 제약이 너무 많습니다. stripe 결제도 사용 못하는데 뭘 어쩌겠습니까? 플러그인 많으면 느려지는 건 사실입니다. 불러와야 할 데이터가 증가하니까요. 게다가 애니메이션도 많이 쓰면 CSS도 커질 수밖에 없고, 쇼핑몰 특성상 상세페이지의 용량도 크기때문에 더 느립니다.

그래도 많이 안 느려지고 돌아가는 이유는 서버 때문입니다. 워드프레스 속도 최적화의 고민이 필요한 건 이런 환경의 사이트 소유자가 고민해야 하는 것입니다. 우커머스에서 상세페이지 이미지를 올렸는데 이미지가 작아지는 경우 보신 적 있나요? 상세페이지를 한 페이지로 만들어서 올리면 세로 해상도가 10,000PX이 넘어가는 경우가 많습니다.

그런데 이걸 미디어에 업로드하면 해상도가 반 토막이 납니다. 그 이유는 확장자가 PNG가 아니고 JPG 때문입니다. 상세페이지 원본을 그대로 보여주려면 미디어에 업로드를 할 때 PNG로 올려야 합니다. PNG는 파일 크기가 크죠. 의류, 악세서리같이 디테일이 중요한 제품은 해상도를 줄이면 안 됩니다.

이런 사이트 특성의 이해 없이 플러그인 개수가 문제라고 말하면 안 되는 것입니다. 반드시 필요한 건 설치해서 써야죠. 쓰되, 이 상태에서 어떻게 최대한 최적화시킬지 고민해야 합니다. 플러그인을 선택할 때도 무료 플러그인의 경우 주기적으로 업데이트가 되는 플러그인인지 확인이 필요합니다.

이보다 더 좋은 방법은 무료와 유료 버전을 함께 제공하는 플러그인을 사용하는 것입니다. 플러그인의 유료 버전은 무료의 확장 형태로 무료 버전이 베이스가 되기 때문에 무료 버전을 먼저 업데이트해야 유료 버전을 업데이트 할 수 있습니다. 이런 플러그인은 업데이트의 문제에서 자유롭습니다.

 

3. 워드프레스 속도 최적화 – 스테이징

스테이징 사이트를 사용하는 이유는 여러 가지가 있지만 그중에 하나는 깨끗한 라이브 사이트를 위해서입니다. 플러그인 테스트한다고 운영중인 라이브 사이트에 플러그인 이것저것 깔아서 설치했는데 문제가 생겼다면 당연히 플러그인을 제거하겠죠. 허나 몇몇 플러그인은 비활성화 후 제거를 하면 사이트의 레이아웃을 깨트리는 것들이 있습니다. 플러그인 삭제했는데 사이트가 망가졌으면 뭘 하죠? 최근 백업 데이터로 복구하겠죠.

여기에서 마지막 데이터의 백업 시간이 오전 10시이고 내가 10시부터 오후 3시까지 작업을 한 다음 3시부터 플러그인을 설치하다가 문제가 생겼는데 해결을 못해서 복원해야 한다면 마지막 백업본이 10시이므로 10시부터 3시까지 작업한 거 다 날아갑니다. 트래픽이 많은 사이트는 손해가 엄청나죠.

백업 플러그인으로 실시간 증분 백업이 되도록 설정했거나 3시까지 작업한 걸 백업해놓고 플러그인을 설치했다면 문제가 되지 않겠지만 플러그인 설치 전에 습관적으로 백업하는 사람들이 과연 얼마나 될까요? 게다가 실시간 증분 백업되는 UPDRAFT PLUS는 유료라서 사용하는 사람 별로 없습니다.

플러그인을 테스트할 때는 스테이징 사이트의 데이터베이스를 라이브 사이트의 최신 데이터베이스로 업데이트하고 나서 플러그인을 설치 테스트합니다. 문제가 있는지, 작동은 잘 되는지 확인하고, 작동이 잘 되는 것 같으면 플러그인을 비활성화 후 삭제를 해봅니다.

삭제를 했을 때 사이트가 깨지지 않는지까지 확인해야 하며, 이 테스트를 안 하면 플러그인 설치하고 신나게 사용하다가 어떠한 문제가 생겼거나 플러그인을 다른 걸로 변경하려고 지웠는데 사이트가 깨진다면 그걸 일일이 다 수정해야 합니다.

또 있습니다. 워드프레스나 테마, 플러그인이 업데이트가 되면 워드프레스 관리자 대시보드에 표시되는데 그걸 보고 업데이트 페이지에서 무작정 업데이트를 해서도 안 됩니다. 업데이트는 메이저 업데이트와 마이너 업데이트가 있습니다. 예시로 사용 중인 워드프레스의 버전이 5.6인데 업데이트 알림이 떠서 봤더니 6.0입니다. 5에서 6으로 앞자리 숫자가 바뀌었죠?

업체에 따라서 다르고 아닌 경우도 있지만 보통은 앞자리 숫자가 바뀌는 업데이트가 대규모 메이저 업데이트인 케이스가 많습니다. 업데이트의 상세 내역을 확인하면 변경, 수정, 추가, 삭제된 내용이 상당히 많은 걸 알 수 있지요. 이런 메이저 업데이트는 먼저 스테이징에서 문제가 없는지 확인해야 합니다.

그러니 워드프레스는 새 버전의 자동 업데이트가 되지 않도록 설정을 변경해야 하고, 플러그인도 자동 업데이트 활성화를 사용하지 말고, 업데이트 전 플러그인에 어떠한 변경사항이 있는지 확인하고 나서 수동으로 업데이트해야 합니다.

 

 

마이너 업데이트는 6.0에서 6.1 혹은 6.1.1처럼 앞자리 숫자가 바뀌지 않고 뒤에. 을 사용해서 숫자가 추가되는 케이스가 일반적이고 마이너의 경우 보안이나 수정 위주의 내역만 증분 방식으로 기존 데이터에 추가된 업데이트이기 때문에 별 문제를 일으키지 않습니다. 포인트는 업데이트가 메이저건 마이너건 어떠한 내용이 업데이트가 된 건지 확인이 필요하다는 것입니다.

스테이징이 싫으면 업데이트하기 전에 무조건 즉시 백업을 하는 습관을 들이세요. 이것도 서버 용량이 충분해야 스트레스 안 받습니다. (그래서 클라우드웨이스) 이런 과정이 중요하기 때문에 호스팅 업체들이 스테이징을 지원하는 것이고, 스테이징 사이트에서 테스트하다가 문제가 생기면 라이브 사이트의 데이터베이스를 다시 덮어 씌워 무한으로 테스트를 할 수 있습니다. 그게 싫으면 로컬에서 하세요.

플러그인을 설치했다면 속도 측정 사이트에서 설치 전 라이브 사이트와 플러그인을 설치한 스테이징 사이트를 측정해서 비교해 보고 속도의 변화가 큰지 미미한지 확인할 수 있습니다. 이걸 바탕으로 스테이징에서 테스트한 플러그인이 너무 느리다면 더 빠른 동일한 다른 플러그인을 찾아야 합니다.

*스테이징과 클론 복제는 다릅니다.

 

4. 워드프레스 속도 최적화 – 이미지

사이트의 속도를 최적화하는 가장 쉬운 방법 중에 하나가 업로드한 이미지의 파일 크기를 최대한으로 줄이는 것입니다. 단, 무작정 줄이면 사진의 화질이 너무 안 좋아지기 때문에 큰 화질의 저하없이 최대한으로 압축하는 방법을 사용해야 합니다. 보통 이미지 최적화 플러그인을 설치하는 경우가 많은데 이건 귀찮고 신경 쓰기 싫은 사람들이 하면 좋겠죠.

이미지의 확장자를 WEBP로 변환해주는 플러그인이면 더 좋습니다. 이미지 확장자 중 가장 파일 사이즈가 작은 게 WEBP이기 때문입니다. 저는 워낙 플러그인이 많아서 이미지 최적화 플러그인은 설치하지 않았습니다. 그래서 다음과 같은 방법을 씁니다.

우선 사용할 이미지의 원본을 다운로드 받습니다. 특성 이미지라면 테마에서 권장하는 해상도로 사진을 줄입니다. 테마 별로 권장하는 특성 이미지 크기가 다르니 확인하세요. 아스트라 테마의 경우 특성 이미지 권장 사이즈는 1200X628 픽셀입니다. 포토스케이프X는 WEBP 변환을 지원하므로 해상도를 먼저 줄인 후 파일을 저장할 때 확장자를 WEBP 품질 70%~80% 정도로 저장하거나 이미지 압축 사이트를 사용해서 줄이세요.

 

이미지스몰러

Image Compressor Online, Reduce Image File Size | ImageSmaller

포토스케이프x

PhotoScape X for Mac and Windows 10

 

5. 워드프레스 속도 최적화 – SVG, LAZYLOAD, 이미지 슬라이더

픽셀로 이루어진 사진이 아닌 단순한 벡터 그래픽이나 로고 같은 것들은 이미지보다 SVG 파일로 바꾸는 게 좋습니다. 사진의 픽셀은 점으로 이루어져 있지만 SVG는 점이 아닌 선으로 구성된 파일로 크기가 엄청나게 작습니다. 사진과 다르게 확대해도 깨지지 않고 선명하게 보이는 장점도 있지요. 또한 사이트의 이미지를 LAZY LOAD 시키는 것도 필요합니다.

워드프레스 5.5버전부터 LAZY LOAD를 기본으로 지원하기 시작했고 완벽하게 적용되지는 않기 때문에 사용 중인 캐시나 최적화 플러그인에서 이미지 LAZY LOAD 설정이 있는지 찾아보고 있다면 사용하세요.

포스트의 특성 이미지는 LAZY LOAD가 적용되지 않습니다. 또한 일부 엘레멘토 확장 애드온에서는 LAZY LOAD를 켜면 애니메이션을 사용하지 못하거나 이미지가 안 보이는 문제를 발생시키기 때문에 사용하는 애드온의 요소별 메뉴얼을 자세히 살펴볼 필요가 있습니다.

이미지를 나열할 때 슬라이더를 사용하는 경우가 많은데 슬라이더는 사이트의 속도를 느리게 만드는 중요한 원인 중에 하나이므로 랜딩 페이지에서는 최소한으로 쓰거나 다른 나열 방식으로 대체하도록 합니다.

 

6. 워드프레스 속도 최적화 – 동영상은 최소화

로드 시간을 가장 늦추는 요소 중 하나가 동영상입니다. 끝판왕입니다. 내 미디어에 동영상을 업로드하고 미디어 링크를 불러와서 재생하는 경우 서버 로드는 무조건 증가합니다. 게다가 내 서버에서 업로드되기 때문에 대역폭의 사용량도 늘어날 수밖에 없습니다. 당연히 사이트 방문자가 소비하는 데이터도 늘어나게 됩니다.

미디어에 직접 업로드하지 않고 유튜브나 비메오 같은 외부 동영상 호스팅 업체에 업로드한 후 동영상의 링크를 거는 임베드 방식도 사이트 로드 시 평균 5개~7개 정도의 추가 호출을 발생시키기 때문에 약간 느려지긴 합니다. 테마에서 홈페이지로 설정한 랜딩 페이지에는 무의미한 동영상은 삽입하지 않는 게 좋습니다.

서버가 국내에 있고 국내 사용자가 대상이라면 랜딩 페이지에 1~2개 정도의 동영상은 걸어도 됩니다. 단, 동영상도 적절하게 압축해서 업로드해야 하며, 강의 영상처럼 파일 사이즈가 큰 경우에는 무조건 외부 호스팅을 사용합니다. 유튜브 링크를 임베드 할 때도 LAZY LOAD를 사용하고 유튜브 LAZY LOAD을 썸네일 이미지로 대체하면 로드 속도가 빨라집니다.

 

비디오스몰러 (한글지원)

Reduce Video File Size Online, Make Video Smaller (MP4, AVI, MOV, MPEG) | VideoSmaller

EZGIF (동영상 압축, 편집, WEBP변환)

Animated GIF editor and GIF maker

 

7. 워드프레스 속도 최적화 – 구글맵

꼭 필요하지 않으면 구글맵을 사용하지 마세요. 구글맵을 사용하면 동영상보다 더 많은 요청을 서버에 하게 됩니다. 구글맵 API를 사용하는 대신, 지도를 사진으로 올려놓고 주소를 텍스트로 표기하던지, 구글맵이나 네이버 지도를 바로 검색할 수 있는 링크를 버튼 형식으로 첨부하고 새 창이나 새 탭에서 열리도록 하면 사이트 이탈을 막으면서 지도 검색을 할 수 있기 때문에 좋습니다.

 

8. 워드프레스 속도 최적화 – 소셜 미디어 실시간 피드

인스타그램을 실시간으로 사이트에 피드하면 엄청 많은 로드 요청을 합니다. 로드 시간을 1초 이상 지연시킬 수 있습니다. 소셜 미디어를 실시간으로 공유하는 건 자제하고 소셜 아이콘에 링크를 첨부하는 고전방식을 쓰던지 수동으로 업데이트 하세요. 소셜 미디어를 통해 사이트 유입이 되어야지 사이트에서 실시간 피드를 보고 소셜 미디어로 이동하게 만들면 홈페이지를 만든 의미가 없습니다.

 

9. 워드프레스 속도 최적화 – 외부 스크립트

애드센스도 사이트 속도를 느리게 만드는 원인 중 하나지만 수익과 직결되기 때문에 필수불가결합니다. 애드센스를 제외한 다른 서비스들 특히 통계와 추적 기능이 있는 스크립트나 API를 사용하는 플러그인들은 로드 속도에서 손해를 봅니다. 트위터 같은 소셜 미디어 및 구글 애널리틱스나 핫자르 같은 외부 스크립트는 최소한으로 사용하세요.

 

10. 워드프레스 속도 최적화 – 페이지 크기는 3MB 이하

블로그만 운영하는 사이트가 로드 속도에서 유리한 건 단순한 페이지 구성 때문입니다. 이미지, 텍스트, 링크 이게 거의 전부니까요. 페이지의 크기는 로드하는 페이지에 사용된 HTML, CSS, 사진, 동영상, API, 스크립트까지 모든 걸 포함한 크기를 말합니다. HTML 아카이브에서 발표한 전 세계 평균 웹사이트 페이지의 크기는 3.7MB입니다. 그렇기에 평균 이하인 3MB를 넘지 않도록 합니다. PINGDOM을 사용하면 사이트의 속도와 페이지의 크기를 동시에 확인할 수 있습니다.

이런 사이트는 측정 위치가 거리상 멀리 떨어진 해외이므로 서버가 국내 클라우드 SSD라면 속도 점수가 낮아도 너무 민감하게 받아드리지 말고 개선할 사항이 무엇인지만 확인하고 수정하는데 참고하는 정도로만 활용하세요. 단, 트래픽이 해외라면 얘기가 달라지겠죠.

 

PINGDOM

Website Performance and Availability Monitoring - Pingdom

 

11. 워드프레스 속도 최적화 – 테마

테마는 사이트의 뼈대입니다. 그만큼 중요합니다. 테마에 여러 가지를 추가하다 보면 로드가 느려질 수 있지만 기본 상태의 테마는 빨라야 합니다. 속도 다음으로 중요한 건 확장성과 호환성이구요. 2022년을 기준으로 PAGE SPEED ​​INSIGHT (모바일), GT METRIX (데스크탑), WEB PAGE TEST (9가지 개별 테스트)를 했을 때 WP-ROCKET에서 발표한 상위 7개의 테마를 보면 다음과 같습니다.

 

테마	모바일	가장 큰 페이지 로드 시간	페이지 크기	HTTP 요청수	활성 사용자수	가격
GeneratePress	100	1.2s	26KB	7	50만	무료
Astra	100	1.4s	44KB	9	100만	무료
Neve	100	1.2s	32KB	8	30만	무료
Kadence	100	1.4s	40KB	10	30만	무료
Hello(엘레멘토)	100	1.3s	20KB	7	100만	무료
OceanWP	88	2.9s	166KB	18	70만	무료

 

12. 워드프레스 속도 최적화 – CDN

CDN은 글로벌 서비스입니다. 해외 사용자의 유입이 필요한 경우라면 CDN 사용은 필수 요소가 됩니다. 그리고 서비스는 클라우드플레어를 선택할 확률이 크고요. 클라우드플레어가 사용자 수 1위인 이유 중에 하나는 DNS 속도가 가장 빠르기 때문입니다.

웹사이트 주소인 도메인은 원래 숫자 IP주소로 되어 있습니다. 웹사이트의 IP주소가 121.125.63.67이라고 가정하면 원래는 사이트 주소창에 121.125.63.67를 입력해야 하지만 기억하기가 쉽지 않아 PETABIT.KR처럼 문자로 된 도메인을 사용합니다.

문자로 PETABIT.KR을 검색하면 중간에서 무언가가 121.125.63.67을 찾아 매칭해서 다시 변환해줘야 하는데 이걸 DNS라고 하며, DNS 변환은 도메인 등록기관에서 제공하지만 응답 속도가 빠른 편이 아닙니다. 그래서 사이트 로드 속도가 느려지는걸 클라우드플레어는 더 빠른 속도로 변환해줍니다.

 

13. 워드프레스 속도 최적화 – 게시물 리비전과 댓글 나열

워드프레스로 글을 작성하면 주기적으로 게시물이 임시저장이 되고 리비전이 쌓이게 됩니다. 매일 백업을 한다면 리비전은 쌓이기 전에 자주 삭제하는 것이 좋습니다. 수동 삭제가 귀찮다면 wp-config.php에 아래 코드를 복사해서 추가하면 됩니다. 뒤에 3는 3개 이상의 리비전을 생성하지 못하도록 제한을 건 것이며, 숫자는 변경해도 됩니다. wp-config.php에 직접 삽입하는 게 어렵다면 코드 스니펫 플러그인을 설치해서 PHP 영역에 삽입하세요.

 

define( ‘WP_POST_REVISIONS’, 3 );

 

코드 스니펫 플러그인

Code Snippets

 

댓글은 무한 스크롤 방식을 사용하지 말고, 한 페이지에 보이는 댓글의 개수에 제한을 걸어두고, 페이지 번호를 매기거나 더보기 방식을 사용하세요. 워드프레스 댓글과 테마에서 설정할 수 있습니다. 댓글이 많이 달리는 워드프레스 사이트를 거의 본 적이 없지만 댓글은 개인적으로 사용하는 게 좋다는 입장이기 때문에 워드프레스 기본 댓글을 사용하거나 더 편리한 댓글을 찾고 싶다면 제가 사용하는 wpDiscuz를 쓰세요. 제가 번역한 번역파일 있습니다.

 

14. 워드프레스 속도 최적화 – 페이지 빌더와 블록 에디터

솔직히 엘레멘토 정말 편하고 디자인하기 너무 좋습니다. 2개의 사이트중 하나는 엘레멘토 프로와 더 플러스 애드온 프로까지 사용하고 있고 저는 더 플러스 애드온 한국 테스터라서 버그 보고를 하기 때문에 모든 기능을 자주 테스트 합니다. 반면에 이 사이트는 메인이 될텐데 페이지 빌더 없는 오리지널 워드프레스입니다. 케이던스 테마 (KADENCE THEME)와 케이던스 블록(KADENCE BLOCKS)이 전부지만 페이지 빌더 없어도 어지간한 사이트 디자인과 기능 구현을 다 할 수 있습니다. 아스트라와 스펙트라도 훌륭하지요.

세밀한 디자인이 필요한 사이트가 아니라면 기본 워드프레스 블록 에디터에 추가 확장 애드온 1~2개만 설치해서 사이트를 만드세요. 엘레멘토보다 작업 속도가 느리고 드래그&드롭이 제한적이라 불편한 건 사실이지만 단순 블로그 사이트에 엘레멘토를 사용할 필요가 없습니다. 엘레멘토가 계속해서 최적화를 하고 있지만 페이지 빌더의 특성상 비슷해질 수는 있어도 블록의 속도를 뛰어넘을 수는 없습니다.

추천하는 무료 확장 블록 애드온의 끝판왕은 MOTOPRESS의 GETWID로 프로 버전이 아예 없습니다. 사용하지 않는 블록은 꺼버릴 수 있고, 요소 애니메이션을 지원하며, 충분히 검증되었고, 사용자도 많습니다. 써보면 알아요. 단, 엘레멘토를 사용해야 한다면 아스트라 테마를 사용하세요. 테마는 플러그인의 범용성과 호환성이 정말 중요한데 괜히 아스트라가 아닙니다. 국내 사용자가 얻을 수 있는 정보도 아스트라가 압도적으로 많습니다.

 

그러나 이제 워드프레스의 방향은 FSE방식으로 갈 것이고 그렇게 변하고 있습니다. GREENSHIFT의 FSE 기반 테마를 보면 왜 FSE를 지향하는지 알 수 있습니다. 나도 FSE기반의 테마로 변경할 생각이니까요. 속도 정말 빠릅니다.

 

GETWID

Getwid – WordPress Blocks

 

15. 워드프레스 속도 최적화 – 캐싱 플러그인

캐싱 플러그인은 대표적인 유료 플러그인으로 WP ROCKET이 있고, 무료는 많은 플러그인이 있지만 카페24 호스팅에서는 WP-OPTIMIZE를 썼습니다. 캐싱도 어떤 면에서 CDN과 비슷한 방식이라고 볼 수 있는데 메모리에 사이트 페이지의 사본을 저장하기 때문에 정적인 페이지를 캐싱하면 빠르게 사이트 사본을 불러올 수 있습니다. HDD보다 SSD가 더 빠른 것처럼요.

워드프레스에서 캐싱은 필수지만 클라우드웨이스의 브리즈처럼 자신이 사용하는 호스팅에서 워드프레스 애플리케이션에 기본으로 제공하는 캐싱 플러그인이 있다면 그걸 사용하는 게 좋습니다. 만약 따로 제공하는 캐싱 플러그인이 없다면 WP-OPTIMIZE을 사용하거나 유료인 WP-ROCKET을 쓰세요.

 

WP-OPTIMIZE

WP-Optimize – Cache, Clean, Compress.

WP-ROCKET

#1 WordPress Caching Plugin | WP Rocket

 

16. 워드프레스 속도 최적화 – 코드 최적화

HTML, CSS, JS의 코드를 축소하는 건 공백과 주석을 제거하기 때문에 로드 속도를 높일 수 있습니다. 축소한 후 결합하는 과정도 최적화에 사용하는데 자신이 사용하는 서버가 파일을 제공하는 HTTP의 버전이 무엇이냐에 따라서 효과는 달라집니다.

HTTP1.1은 파일이 순차적으로 로드됩니다. 하나의 파일이 100% 로드가 끝나야만 그 다음 파일의 로드가 시작되기 때문에 HTTP1.1에서는 코드를 결합해서 사이트의 로드 속도를 높이는 게 의미가 있습니다. 그러나 HTTP2의 경우는 CSS 파일이 여러 개가 있어도 동시에 로드가 가능해서 코드 결합으로 인한 사이트의 속도 향상이 높지 않습니다. 따라서 코드를 축소하고 결합하기 전에 내 서버에서 어떤 HTTP 방식을 사용하고 있는지 확인하고 1.1인 경우에만 실행하는 게 좋습니다.

코드 최적화중에는 JAVA SCRIPT 로딩을 지연시키는 방법도 있습니다. JAVA SCRIPT보다 HTML이나 CSS가 더 중요한 경우가 대부분이기 때문에 방문자에게 보여줄 HTML과 CSS를 먼저 로드한 뒤, 나중에 JAVA SCRIPT 로드를 실행하도록 만들면 GOOGLE PAGE SPEED INSIGHT에서 사이트 속도를 측정했을 때 항상 문제 요소로 나오는 ‘렌더링 차단 JS 제거’의 문제를 해결할 수 있습니다.

이런 코드 최적화는 캐싱이나 최적화 플러그인에서 대부분 지원하지만 코드의 축소, 결합, JS 지연 로딩을 사용하면 일부 기능이 동작을 안 하거나 프론트엔드 레이아웃과 디자인이 깨지는 경우가 많으므로 라이브 사이트에서 시도하려면 반드시 백업을 하고 스테이징 사이트에서 테스트하는 게 좋습니다. 10WEB을 이용하는 경우도 백업 필수!

스테이징에서 테스트를 할 때 복잡하지 않은 사이트라면 코드 최적화 후 체크해야 할 것들이 많지 않아 괜찮지만 우커머스 쇼핑몰이나 여러 가지 플러그인을 사용하는 사이트의 경우는 로그인, 회원가입, 결제같은 기능적인 부분이 제대로 작동하는지 전부 확인해야 하고, 상품 페이지를 포함해서 모든 페이지를 전부 확인해야 하기 때문에 일이 많아지게 됩니다.

스테이징이 아닌 라이브 사이트에서 시도한 경우 하나라도 문제가 생겼다면 전문가가 아닌 이상 어디에서 문제가 생겼는지 모르기 때문에 다시 복원해야 하므로 복잡합니다. 그래서 코드 최적화 부분은 크몽 같은 곳에서 전문가를 찾아 의뢰하는 게 속이 편할 수 있습니다. 중요한 사이트라면 전문가 의뢰를 고민하세요.

 

17. 워드프레스 속도 최적화 – 핑백과 트랙백

워드프레스에는 핑백과 트랙백 설정이 있습니다. 이것은 내 사이트가 외부의 다른 사이트에 연결(링크)이 되었을 때 사이트 소유자인 나에게 알리는 기능입니다. 내 사이트가 다른 곳에서 링크되면 백링크가 걸린 것이니 SEO측면에서는 장점이나 스팸, 디도스 공격을 받을 수 있습니다. 설정은 워드프레스 관리자 대시보드 > 설정 > 토론에서 두 가지 옵션에 체크를 해제하면 됩니다.

 

 

18. 워드프레스 속도 최적화 – 핫링크

누군가 내 사이트에 방문해서 좋은 사진을 발견했다고 할게요. 보통의 경우는 사진을 우클릭해서 다운로드하거나 스크린샷 캡쳐를 해서 자신의 사이트에 직접 업로드하고 출처를 밝히거나 인용하는 방법을 사용합니다. 그런데 그게 아니라 내 이미지에 마우스 우클릭을 해서 이미지의 주소만 복사한 다음 이미지 호스팅처럼 자신의 사이트에 이미지 주소만 그대로 붙여넣었다면 어떻게 될까요?

이미지 주소를 클릭할 때마다 내 서버의 대역폭 사용량이 증가하게 됩니다. 이미지 주소를 복사해간 방문자의 서버가 아니라 내 서버의 트래픽이 갉아먹히는 골 때리는 일이 생깁니다. 유입이 증가하면 트래픽이 높아지는 만큼 이점이 생겨야 하는데 핫링크는 트래픽 이점은 없고 대역폭만 낭비시킵니다. 모르고 사용하는 경우야 그렇다쳐도 알면서 사용한다면 문제죠. 핫링크는 이미지뿐만 아니라 동영상 및 다른 파일에도 똑같이 적용할 수 있습니다.

 

● 하나, 클라우드플레어 CDN을 사용하면 옵션에서 핫링크 보호 기능(HOTLINK PROTECTION)제공
● 둘, 플러그인을 사용해서 마우스 우클릭 차단 설정
● 셋, 사진에 워터마크 추가
● 넷, 핫링크가 되었다면 이미지의 파일 이름을 변경하거나 이미지 주소 변경
● 다섯, IP주소 차단

*핫링크를 방지하는 방법. 보통은 클라우드플레어가 가장 속편합니다.

 

이미지의 파일명이나 주소를 바꾸는 경우 페이지를 찾을 수 없다는 404페이지가 뜨고 핫링크가 바로 깨집니다. IP주소의 차단은 서버의 유입 트래픽을 모니터링 한 다음에 특정 사이트에서 유입이 유난히 많다면 그 사이트의 IP를 차단하면 됩니다. 대부분 귀찮아서 모니터링을 하지 않을 뿐. 그래서 접근 정보를 제공하는 워드프레스 보안 플러그인을 하나 정도 설치해서 사용하는 게 좋습니다. 공유 호스팅을 사용중인데 핫링크로 인한 트래픽이 급증한다? 사이트 다운됩니다.

 

19. 워드프레스 속도 최적화 – 폰트

폰트를 서버에 저장해서 사용하든, 구글 웹폰트를 사용하든, 어도비 킷을 사용하든 예쁜 폰트를 쓰고 싶은 사람의 마음은 전부 똑같고, 디자인 측면에서도 폰트가 차지하는 영향은 아주 크기 때문에 얼마든지 사용해도 됩니다. 단, 구글 웹폰트에 저장된 폰트도 폰트마다 로드 시간이 다르기 때문에 확인이 필요합니다.

눈누 한글 폰트는 가급적 용량이 작은 걸 설치해서 사용하고, TTF보다 WOFF를 쓰는 게 속도에서 약간이지만 더 빠릅니다. 폰트는 2~3개만 사용하세요. 스탠더드 방식으로 구글 웹폰트 사용보다 좀 더 빠르게 웹폰트를 쓰고 싶다면 몇 가지 방법들이 있으니까 검색해서 적용해 보세요. 스펙트라 애드온을 사용한다면 사용할 폰트 외에 나머지는 로드하지 못하도록 설정할 수 있습니다.

 

 

사이트를 운영하다 보면 리디렉션 (redirect)이 발생합니다. 저도 페이지를 수정해놓고 퍼머링크를 변경 안 하거나, 페이지를 삭제하고 링크를 지우지 않은 경우가 자주 있었습니다. 이런 경우 방문자가 페이지에 접속하면 페이지를 찾을 수 없다는 404오류 화면이 표시됩니다. 검색 엔진은 NO INDEX가 되지 않은 404페이지를 싫어합니다.

그래서 링크가 잘못됐거나 깨진 게 있는지 점검하는 게 좋고, 게시물과 페이지 주소인 퍼머링크가 변경됐다면 301리디렉션을 설정해서 검색 엔진이 변경된 페이지로 방문자를 보내고 인덱스 할 수 있도록 해줘야 합니다. RANK MATH SEO 플러그인을 사용하면 404페이지 모니터링과 리디렉션 설정을 쉽게 할 수 있습니다. RANK MATH를 사용한 삭제와 리디렉션 글을 참고하세요.

 

21. 워드프레스 속도 최적화 – 테마, 플러그인, PHP 업데이트

워드프레스 업데이트를 할 때마다 속도는 조금이라도 계속 개선됩니다. 워드프레스는 PHP로 만들어졌습니다. 그래서 PHP 업데이트 역시 중요합니다. 지금 대부분 사용하는 게 PHP7.4버전이고 PHP7.4는 업데이트 지원이 완전히 끝났습니다.

이제는 PHP8.1을 사용해야 하는데 업데이트 전에 체크사항이 있습니다. 사이트에 설치된 테마, 플러그인마다 제조사 홈페이지에서 PHP8과의 호환성 업데이트가 이뤄졌는지 찾습니다. 찾기가 어렵다면 고객지원이나 실시간 채팅으로 물어봅니다. 테마와 플러그인이 모두 PHP8과 호환이 된다면 내가 사용하는 호스팅 회사에 혹시 모르니 PHP 버전의 다운그레이드를 지원하는지도 체크합니다.

모든 걸 확인하고 조건이 충족하면 그 때 PHP 버전을 업데이트합니다. 혹여 문제가 생기면 서버의 PHP를 다시 7.4로 되돌려야 합니다. 그리고 업데이트는 사이트에 가장 유입이 적은 시간에 실행하세요.

 

22. 워드프레스 속도 최적화 – FTP사용법을 익히고 플러그인 삭제하는 것도 중요

좋은 플러그인도 중요하지만 사용하지 않을 때 삭제하는 것도 설치만큼 중요합니다. 플러그인을 삭제하기 전에 구글에서 플러그인을 완벽하게 삭제하는 방법을 찾아보거나 플러그인 홈페이지의 기술 자료에서 제대로 삭제하는 법을 찾아봅니다. 플러그인을 비활성화 후 삭제할 때도 페이지를 번역해서 화면에 나온 내용이 무엇을 말하는지 자세히 살펴봐야 합니다.

예를 들어, 보안 플러그인인 워드펜스의 경우 삭제를 하면 화면에 선택 가능한 삭제 옵션이 나옵니다. 데이터베이스를 보전하고 삭제할 건지, 특정 데이터만 남기고 삭제할 건지, 아니면 모든 데이터베이스를 완전히 삭제할 것인지 물어보는데 그냥 삭제를 진행하면 데이터베이스가 서버에 그대로 남아있기 때문에 서버의 용량을 많던 적던 차지하게 됩니다. 우커머스도 마찬가지입니다.

일부 플러그인의 경우 플러그인을 비활성화하고 삭제를 했는데 서버에 남겨진 코드가 다른 플러그인이 작동할 때 쓸데없이 로드되는 경우들도 있습니다. 이러면 조금의 차이라도 속도에서 손해를 보게 됩니다. 불필요한 걸 호출하는데 시간을 낭비하니까요. 그리고 삭제를 한 이후 FTP를 사용해서 서버에 접속한 다음 플러그인 데이터가 남아 있는지 확인하고 남아 있다면 백업한 다음 해당 플러그인 데이터를 삭제하시고 사이트에 문제가 없는지 확인하면 됩니다. 즐워프.