글
블로그 운영
블로그 작업노트 32: 각종 최적화 작업
저번 최적화 작업에 이어서 스크립트도 최적화를 진행해보았다.
스크립트를 진행하기 이전에 이미지를 작은크기를 만들어두고 srcset 방식으로 취사선택하는 기능도 만들려고 생각은 했으나 이제와서 모든이미지 교체하기도 현실적으로 힘들기도하고 현재만해도 원본+최적화(600, webp, 품질50)으로 나름 쓸만하게 되어있어서 더 건드리기가 애매했다.
오히려 지금 문제가 되는건 본문이미지가 너무 저화질로 보여서 고민인게 더 큰느낌이랄까...
기존에 페이지스피드 점수문제였던 하단의 콜렉션 카드, 카테고리 카드도 일전에 적용해본 사용자 인터랙션 기반 지연로딩 방식을 좀더 확장해 해결했다보니까 지금와서 이미지 손대는건 잘 모르겠다는 느낌이다.
현재 본문이미지도 가로 최대 사이즈 600으로 조절해서 사용하므로 원래 그의 1.5배인 900으로 저장해뒀는데, 이미지 사이즈는 품질보다 해상도가 더 큰 영향을끼친다고하는걸들어서 늘리기도 애매하다.
스크립트 최적화
뭐 하여튼 이미지는 이정도로 맺어두고, 이번 작업노트의 메인인 스크립트 최적화는 아래와 같은 부분이 최적화가 이루어졌다.
레이아웃 스크립트 정리기존에 DOM을 제어하는 부분은 DOMContentLoaded 핸들러에 넣어두고 페이지 로드 후 지연처리해야하는 부분은 load 핸들러에 배정했다.
그리고 페이지 초기 로딩시 과도한 작업이 이루어지는 부분은 인터랙션 핸들러가 처리하도록 3단계 랜더링 방식을 취했다.
위 코드에서
onUserInteraction 이 파트를 의미하며 해당 파트에서 랜더링하는 부분이 내 사이트에서 가장 무거운 부분이라 볼 수 있다.
관련된 내용은 위 포스팅에서 더욱 자세히 풀어놓았다.
자동광고 추가 및 디자인 조율
사실 예전부터 본문내 광고를 넣고싶다고 생각했는데, 광고가 너무 못생겨서 넣는걸 주저하고있었다.
광고도 잘로딩도 안되기도하고말이다.
하지만 위의 최적화 과정을 통해 나름 본문 광고도 제대로 구현이 가능할거 같아서 현재 본문내 자동광고도 설정을 해본 상태이다.
내 욕심으로는 좀더 광고간의 거리가 크고 광고도 적게떳으면 좋겠는데, 지금 설정이 최저빈도로 뜨는거라한다.
모바일 화면모바일에서는 위와같이 가로를 다먹는 배너느낌으로 적용해보았다.
모바일에서 본문광고는 워낙 큰게 붙어서좀 위협적이긴한데...
현재상황에서 자동으로 붙는 광고의 높이를 마음대로 조절할수없다는게 정말 아쉽다.
피시화면피시에서는 위와같은 느낌이다.
가능한한 본문이랑 다른 느낌을 주고싶어서 액자형태로 만들어뒀다.
캐시 드라이버로 자주 요청되는 DB 최적화
이 부분은 백단 최적화이다.
라라벨의 캐시 파일 드라이버를 이용해 자주요청되는 카테고리, 컬렉션, 최근게시판 댓글같은 모델리스트를 캐시에 저장해두고 DB요청을 하지않는 느낌으로다가 개선해보았다.
실제로 해당 작업을 하고난 이후에 SSR 수치가 30%정도 유의미하게 빨라짐을 확인했다.
관련된 내용은 위 포스팅에서 상세하게 적어놓았다.
결론적으로 웹사이트 최적화한 후 구글 페이지 스피드 점수를 높게받고 싶었다.
드디어...!그리고 그 목적은 얼추 달성했다고 생각한다.
이제 실제로 이렇게 최적화해둔 화면이 실제로 유저 경험에 얼마나 도움이될지 2-3주 지나고 애널리틱스로 분석해보는일만 남았다.
이번 최적화 과정을 통해 오랜만에 웹개발하면서 뭐에 몰두하는 느낌도 좋았고 꽤나 유의미한 성과를 내서 나름 만족한다.
#블로그
0
개의 댓글