글
블로그 운영
블로그 작업노트 31: 이미지 최적화 및 광고 스크립트 최적화
드디어.. 올그린 진입이번 작업노트 최대의 결실이다.
아마 블로그 작업을 진행한 이래로 가장 큰 내부적인 변화와 더불어 역대급 최적화 작업이 이루어진 시기가 아닌가 싶다.
블로그에 광고를 달기 시작한 이후 광고 로딩의 여부에 따라서 문서 내부의 컨텐츠 위치가 변하게 되고 이를 우회하기위해 사이드 포스트, 옵저버, 대기작업 등 여러가지를 그간 블로그 기능으로써 추가해왔다.
그러다가 자동 광고를 써서 모바일용 앵커 광고를 띄우기 시작한 이후로부터 급격하게 문제가 발생했다.
바로 앵커광고에서 만드는 패딩에 의해서 본문 자체가 위치가변해서 CLS 문제가 일어났던것이다.
이를 무마하기위해서 오만가지 짓을 다해봤다.
강제 패딩값도 줘보고 앵커를 수동형식으로도 만들어봤으며 이리저리 스크립트를 만들어가면서 최적화를 시도해보았지만 결과는 스파게티 코드만될뿐이지 페이지스피드상의 점수는 항상 시궁창이었다.
그러다가 어느 워드프레스 사이트를 보게되었고, 해당 사이트에서 광고가 지연로딩된다는걸 알게된 이후 해당방식을 적용해 기존 광고관련 스크립트를 전부 손봤더니...
맨위의 결과를 얻게 되었다.
결국 최초의 페이지로딩만 최적화시키고 이후 무거운 작업은 별도로 실행하면 된다는 트릭이었다.
이 과정중에 이미지 최적화를위해서 기존에 가로 900에 맞춘 이미지를 가로 600으로 맞추도록 사양도 변경했으며 기타 UI에 영향이 갈만한 리소스를 초기화 하기위해 라라벨 웹팩에 purgecss 라이브러리도 적용시켜 경량화 작업도 진행했다.
사실 좀 어이없음다만 이런 시도보다 그저 광고 스크립트를 지연로딩시키는게 제일 크리티컬하게 변화가 있는 작업이었다.
결과에 기쁘면서도 한편으로는 좀 허무한 느낌도 드는 지난 몇달간의 고군분투였다...
광고를 최적화 한 이후에는 인페이지 자동광고도 한번 적용해보았으며 검정 테마를 사용하는 내 사이트에 어울리게 액자형식으로 border를 주는 방식으로 꾸며보았다.
일단 최대한 안어색하게 보이게 하려고 노력은 하긴했는데,
어느 광고가뜨냐에따라서 자연스러움과 부담스러움이 공존하는 광고방식이라...
일단 며칠간 써보고 지속할지말지 고민을 좀 더 해봐야겠다.
일단은 좀 덜뜨면좋을거같아서 광고간의 거리는 최대(1000px)에 광고수는 최소(6회)로 해놓았다.
근데 이렇게 해놔도 스크롤 슥슥내리면 거의 도배급으로 보여서 좀 불편하긴하다.
#블로그 #광고
0
개의 댓글
블로그 운영 콜렉션의 다른 글
글 카테고리의 다른 글
05/27
31주차 그림결산
오메...까먹고 어제 저번주차 그림결산을 못올렸다.후다닥 31주차 결산을 시작해보고자한다. 이번주차는 흑백그림을 메인으로 그려보았다.채색을 하기보다는 한번 라인을 따는걸 주 목적으로 해보고 싶었고, 만화식 라인터치가 요즘 겁나 맘에들어서 이것저것 따라서 그려보고 여러가지로 시도해보고있다. 위의 아야카짤도...
05/23
자고일어났더니 얼굴이 부었다? 림프 마사지로 해결해보자!
우리가 흔히 라면먹고 자면 아침에 얼굴 붓는다~ 라는 말을 자주들었듯이 제대로 잠을 자지못하고 자기전에 뭘 먹고자면 다음날 아침에 부어있는 얼굴을 보기 마련이다. 어으 잘잤다... 보통 이렇게 일시적으로 얼굴이 붓는것은 얼굴의 체액 순환, 즉 림프의 순환이 제대로 되지않고 뭉쳐있기 때문에 발생하는 이슈이다.마...
05/22
곰의 손이 음료를 건네주는 카페? 오사카의 ‘쿠마노테 카페’
오늘도 커뮤니티를 떠돌다가 되게 재미있는 글을 보게되었다.글 내용은 '일본 소외계층이 만든 카페'라는 제목으로 루리웹이나 개드립에서 떠돌던 짤이었다. 뭐 쉽게 말해 카페이긴한데, 종업원이 안내를 해주고 음료를 건네는 대신 구멍이 뚫린 벽에서 인형탈을 쓴 사람이 대응해준다는것, 그리고 종업원이 모습이 보이지...