블로그 작업노트 31: 이미지 최적화 및 광고 스크립트 최적화

이번 작업노트 최대의 결실이다.

아마 블로그 작업을 진행한 이래로 가장 큰 내부적인 변화와 더불어 역대급 최적화 작업이 이루어진 시기가 아닌가 싶다.

블로그에 광고를 달기 시작한 이후 광고 로딩의 여부에 따라서 문서 내부의 컨텐츠 위치가 변하게 되고 이를 우회하기위해 사이드 포스트, 옵저버, 대기작업 등 여러가지를 그간 블로그 기능으로써 추가해왔다.

그러다가 자동 광고를 써서 모바일용 앵커 광고를 띄우기 시작한 이후로부터 급격하게 문제가 발생했다.

바로 앵커광고에서 만드는 패딩에 의해서 본문 자체가 위치가변해서 CLS 문제가 일어났던것이다.

이를 무마하기위해서 오만가지 짓을 다해봤다.

강제 패딩값도 줘보고 앵커를 수동형식으로도 만들어봤으며 이리저리 스크립트를 만들어가면서 최적화를 시도해보았지만 결과는 스파게티 코드만될뿐이지 페이지스피드상의 점수는 항상 시궁창이었다.

그러다가 어느 워드프레스 사이트를 보게되었고, 해당 사이트에서 광고가 지연로딩된다는걸 알게된 이후 해당방식을 적용해 기존 광고관련 스크립트를 전부 손봤더니...

맨위의 결과를 얻게 되었다.

결국 최초의 페이지로딩만 최적화시키고 이후 무거운 작업은 별도로 실행하면 된다는 트릭이었다.

이 과정중에 이미지 최적화를위해서 기존에 가로 900에 맞춘 이미지를 가로 600으로 맞추도록 사양도 변경했으며 기타 UI에 영향이 갈만한 리소스를 초기화 하기위해 라라벨 웹팩에 purgecss 라이브러리도 적용시켜 경량화 작업도 진행했다.

다만 이런 시도보다 그저 광고 스크립트를 지연로딩시키는게 제일 크리티컬하게 변화가 있는 작업이었다.

결과에 기쁘면서도 한편으로는 좀 허무한 느낌도 드는 지난 몇달간의 고군분투였다...

광고를 최적화 한 이후에는 인페이지 자동광고도 한번 적용해보았으며 검정 테마를 사용하는 내 사이트에 어울리게 액자형식으로 border를 주는 방식으로 꾸며보았다.

일단 최대한 안어색하게 보이게 하려고 노력은 하긴했는데,

어느 광고가뜨냐에따라서 자연스러움과 부담스러움이 공존하는 광고방식이라...

일단 며칠간 써보고 지속할지말지 고민을 좀 더 해봐야겠다.

일단은 좀 덜뜨면좋을거같아서 광고간의 거리는 최대(1000px)에 광고수는 최소(6회)로 해놓았다.

근데 이렇게 해놔도 스크롤 슥슥내리면 거의 도배급으로 보여서 좀 불편하긴하다.