퍼포먼스 랩(Performance Lab)
퍼포먼스 랩(Performance Lab) 리뷰. 적절하게 사용하면 워드프레스 사이트 속도를 크게 높여줄 지도…
워드프레스 사이트를 운영한다는 것은 곧 속도와의 전쟁이라고 봐도 됩니다. 워드프레스 개발진들이 낸 콘텐츠들 중에서 대표적으로 제트팩 플러그인이 느리다는 이야기를 하도 많이 듣고 있습니다. 그래서 제트팩을 사용하지 않으시는 분들도 많죠. 그렇기에 워드프레스 개발진들도 나름대로 워드프레스 속도를 올리고자 하는 여러 시도들을 하고 있습니다. 물론 제트팩에서도 제트팩 부스트라는 친구가 평가가 나름 좋은 편이기는 합니다. 유명 캐시 플러그인을 인수한 것 같더라고요. 하지만 제트팩은 워드프레스 개발진들 주요 수입이어서인지 점점 창렬하게 바뀌고 있습니다… 하여튼 워드프레스에서 사이트 속도 증가를 위해서 일종의 베타 테스트격으로 개발하는 플러그인이 있습니다. 바로 Performance Lab입니다. 예전에 사용하다가 제 블로그 이슈때문에 잠시 사용하지 않다가 다시 켜봤습니다.
Table of Contents
퍼포먼스 랩이 예전에는 좀 단순무식한 수준의 인터페이스였으나…
퍼포먼스 랩이 정말 말 그대로 베타테스트 격인 옵션들만 모여있다보니…
사실 이 퍼포먼스 랩이 예전에는 정말 말 그대로 ‘옵션’ 수준의, 거의 인터페이스가 없다고 봐도 되는 수준이었는데 이제는 조금이나마… 그래도 워드프레스 플러그인 수준의 인터페이스가 되었다고 생각합니다. 물론 대다수의 워드프레스 플러그인은 인터페이스가 딱히 좋은 편은 아닙니다. 다만 예전에는 그 정도도 되지 않았던… 그리고 예전에는 항목들을 적용하거나 안하거나, 이것이 정말 전부였습니다. 체크표시와 옵션 설명이 끝… 이제는 저 항목들에 대해서 어느 정도의 설명도 있어서 조금은 친절해진 플러그인입니다.
퍼포먼스 랩의 각 항목들이 얼마나 효과가 있을까요?
퍼포먼스 랩은 현재 총 6가지 옵션을 지원합니다. 플러그인 자체가 ‘실험실’적인 목적으로 운영되는 것이니만큼 일부는 다른 플러그인에서 사용되기도 합니다만 다른 옵션들은 일반 플러그인에서 잘 보기 힘든 옵션들입니다. 아마 이 옵션들 중에서 부작용이 적으면서 효과가 확실한 친구들은 후에 워드프레스 코어로 옮겨질 듯합니다. 그 6가지 옵션은 왼쪽 위부터 각각 image placeholders, speculative loading, auto-sizes for lazy-loading images, 성능 좋은 번역, modern image formats, 그리고 embed optimizer입니다.
이들 중에서 제가 적용한 옵션은 저 사진에 있는 것처럼 speculative loading, 성능 좋은 번역과 embed optimizer입니다. 일단 이미지 관련 옵션들은 함부로 설정하면 사이트에 있는 이미지들이 안나오거나 할 수 있습니다. 저도 이미지 관련 플러그인 사용하면서 여러 번 데였었습니다… 정말 단순한 수준의 옵션이 아니라면 함부로 체크하거나 하지 않으심이 좋습니다.
일단 저 imace placeholders는 이미지가 로딩되는 도중에 주요 색을 미리 표시해주는 옵션…이라고 해석하면 될까요? 그러니까, 이미지가 로딩되는 시간 이전에 주요 색부터 빨리 로딩해서 로딩 시간을 줄인다… 이런 식으로 해석하면 될 듯합니다. 또 Speculative Loading은 링크 위에 마우스 커서를 대거나 할 때 페이지를 prepatch나 prerender할 수 있도록 하는 옵션이라고 합니다. 확실히 로딩을 미리미리 한다면 사이트 로딩 속도는 빨라질 듯해보입니다.
Auto-sizes for lazy-loading images는 lazy-loading되는 이미지들도 사이즈를 자동으로 맞춰주는 옵션이라는데… 저는 제 블로그 사진들을 다 일정 크기로 맞춰줘서 업로드하다보니 저와는 맞지 않는 옵션이라고 판단했습니다. 사진 포트폴리오 블로거분들에게는 좋은 옵션일 수 있습니다. 성능 좋은 번역(왜 얘만 한글…)은 mo 확장자 파일을 php로 변경해주는 옵션이라고 합니다. 이렇게만 쓰면 이게 뭔가 싶지만… php 파일이 되면 OPcache로 보관이 되고, 이 과정에서 웹사이트 속도가 빨라진다는 것입니다. 이 부분은 또 언어별로 속도가 달라질 듯해서 측정이 대단히 어렵겠습니다만, 다른 옵션들보다도 속도 체감이 확실하게 되는 것인지 평가가 매우 좋습니다. 그래서 개발진들도 원래는 베타 테스트 수준이어야되는데 반응이 좋아서 베타 딱지를 뗐다고 합니다.
나머지 두 옵션 중 하나는 Modern Image formats인데, 이 옵션은 미디어 업로드 중에 WebP나 AVIP로 변경해주는 옵션이라고 합니다. 일단 제가 사용하는 이미지 플러그인인 ShortPixel에 WebP로 변경해주는 옵션이 있어서 저는 굳이 사용하지는 않았습니다. Embed Optimizer는 설명으로는 lazy-loading iframes나 scripts 속도 최적화를 해준다는 내용인데, 대략 유튜브 등을 임베드할 때 최적화를 해주는 옵션으로 보입니다. 그래서 이 옵션 역시 켜줬습니다.
일단 수치적으로 눈에 띄는 효과는 잘 모르겠습니다… 하지만 평가 자체는 매우 좋긴 합니다.
위의 셋 스크린샷들이 각각 다른 플러그인을 사용하지 않은 상태, Autopimize와 이 플러그인을 사용해준 상태, 그리고 하루 지난 후 상태입니다. 하루 지난 후에도 수치가 달라지는 이유는 워드프레스가 캐시 등 다른 플러그인을 적용하면 그 직후에는 속도가 상당히 떨어집니다. 그리고 사실 측정할 때마다도 속도가 달라지긴 합니다… 그래서 하루 지난 상태에서 다시 측정을 해봤습니다.
실제 측정해보니 속도 차이가 크지 않습니다… 너무 극적인 효과를 기대했던 것일까요? 가슴이 아픕니다… 저 스크린샷에 있는 항목들을 보면 몇 가지를 알 수 있는데요, 저기서 Autopitimize는 아마 Cache 관련 내용때문에 있는 것일 테고요, Google Tag Manager… 이거는 정말 단 한번도 사용한 적 없는데 사용하시는 분들은 잘 사용하시긴 합니다. 제 능력의 부족…
그리고 google syndication 이것도 구글, Google Analytics도 구글, fundingchoicesmessages… 이거는 뭔가 했는데 구글 애드센스 관련 내용입니다. 그리고 Clarity는 마이크로소프트에서 운영하는 애널리틱스 비슷한 것인데요, 저는 매달 블로그 실적 확인할 때 들어가줍니다.
정말 다 저에게 필요하긴 한데 저렇게 주르륵 뜨는 것들 뜨면 그냥 다 삭제하고 싶은 생각이 굴뚝같습니다. 참고로 lighthouse 등 구글 자체적으로 측정할 때는 본인들 저것들 쏙 빼놓습니다. 사실 제 블로그가 더이상 속도가 오를레야 오를 수가 없는 이유가 바로 저것들때문이지 않나 싶습니다. 저것들 이외에는 제 이미지들 크기가 크다고 떠서인데, 데스크탑도 생각하려면 어쩔 수가 없다고 생각하고 있습니다. 과연 언제쯤이면 속도와의 싸움에서 이길 수가 있을까요…
