목차
한달 여 전 즈음 몇년 만에 새로이 스킨을 변경하며 엄청난 seo 빨간불이 들어 왔었다.
수년간 블로그를 운영해 왔지만 그동안 크게 중요성을 깨닫지 못하고 내 글들을 받아주지 않는 검색엔진 욕만 하며 방치해 두다시피 했는데,
우연히 이쪽 세계를 알게 된후 문제의 원인이 나에게 있다는 걸 알게 되었다.
여러 글들을 서치해 보다가 어느 웹 개발자의 글을 통해 구글의 Page Speed Insight와
코어 웹 바이탈이란 것을 알게 되었고 그곳에서 내 블로그의 적나라한 문제점을 보게 되었는데,
PageSpeed Insight
아직 이쪽 언어들에 익숙하지도 않고 웹 전문가도 아닌 일반 블로거이기 때문에 전문적인 설명은 불가하지만
코어 웹 바이탈 테스트를 통해 웹페이지의 로딩 속도라던가 해당 블로그가
얼마나 검색엔진에 친화적인가 등의 전반적인 품질면을 측정해 볼 수 있다.
처음 접속해서 테스트를 해 본 결과
충격.
.....................
(그 당시 모습을 캡쳐해 두었어야 하는데,,,!)
LCP며 CLS며 모든 신호에 빨간불이 들어와 있고 휴대기기,데스크탑 모두 코어 웹 바이탈 통과 실패.
특히 LCP는 3,4초대를 넘어가 빨간 선 중간 쯤 와있고, CLS는 뭐 볼것도 없음,,ㅜ
LCP가 2.5초 이내에 들어와야 초록불이 들어오고 CLS는 0초대에 들어와야 한다고 하는데 와,.
어떻게 하나...
이대로 내버려 두고 그대로 블로그를 운영하기에는 너무 찜짐하여 해결해 보고 싶었으나
딱히 많은 정보들이 있는 것도 아니고 나와 같은 문제를 겪고 있는 블로거들이 대략적으로 쓰는 방법들을 나도 동원해 보기로 했다.
그리하여 그동안 수차례의 스킨 변경과 여려 자바 스크립트 요소들을 삽입했다 지웠다 해보며 테스트를 진행해 보았는데..
수치의 뚜렷한 변화는 없이 우울한 날들만 계속되고 도저히 해결의 기미가 보이지 않아
포기해야지 할 즈음
데스크탑 점수에서 통과를 시작으로 드디어 좋은 신호가 잡히기 시작했다.
그리고 며칠 후인 오늘.
모바일에서도 드.디,어 통과!!!
통과 기념 샷!
이렇게 기쁠수가...흑...
성능 점수는 시간대 별로,
또 포스트 별로 매번 변함
나는 티스토리 기본 스킨이던 아니면 능력있는 천재 스킨 개발자가 만들어 친절하게 배포해 주시는 스킨이던
그 어떤 스킨도 오리지널 상태 그대로 쓰는 법이 없다.ㅎㅎ
여러 자바스크립트를 섞어 특히 좋아하는 요소들을 덧붙이고 내 취향에 맞게 빼고 하기를 좋아하는데
스킨을 바꿀 때마다 추가하는 요소들은 같다.
원래 기본으로 쓰는게 가장 좋긴 하겠지만.그냥은 심심해서 블로깅 재미가 떨어진다.
통과는 했으나 아직도 저렇게 시뻘건 불들이 들어온다.효..
동일하게 추가한 요소들을 가지고 여러 기본 스킨들과 개발자들이 만들어 주신 스킨들을 테스트한 결과,
티스토리 기본 북클럽 스킨을 가지고 테스트를 했을 때에는
성능 점수가 비교적 높게 나왔었다. 데스크탑 점수가 원래 모바일보다 후하다고 하는데 거의 90점 이상.
북클럽 기본에는 없는 다크모드도 추가하고
(별 쓸데없는) 사용자 지정 자바 스크립트를 많이 넣었는데도 꽤 괜찮은 점수가 나왔었다.
그래도 통과가 어디냐...
여러 원인들이 있겠지만,
그 동안의 나의 노력을 통한 실험과 수치 변화를 통해 이번 웹바이탈 통과에 기여한 가장 큰 시발점이
되었다고 생각되는 몇가지 부분을 추려보자면
1.웹폰트 기본 시스템 폰트로 변경
가독성이 많이 떨어지긴 하지만 태스트를 위해 어쩔 수 없었다.
개인적으로 좀 두께가 있는 티스토리 기본 폰트인 나토산스를 좋아하긴 하지만..
나는 나토산스를 버렸지만 티스토리에서 자동으로 로딩시키는 폰트라 이걸 막기 위해 검색을 통해 얻은 코드를
주입시켜 보았지만,, '웹폰트가 로딩되는 동안~~~"어쩌구 하는 부분은 여전하다.
2.이미지 지연 로딩기법
이것도 역시 검색을 통해 얻은 코드인데, 이것은 효과가 있는듯 하다.
아예 수치가 없어진 것은 아니지만 눈에 띄이게 수치의 변화가 감지되었다.
몇가지 코드들을 얻긴 했는데 어떤 코드는 적용시에 이미지가 원본에 비해 아주 작게 떠서 많이 당황했다.
이미지 크기 변화 없이 잘 적용되는 코드를 얻어 정말 다행임..
3. 이미지 최적화
그 동안 본문에 이미지를 넣으며 알트태그를 넣어 본 적이 거의 없는 나. ㅎㅎ
좀 더 신경을 써서 알트를 넣어주고 이미지 최적화를 위해 첨부되는 사진 용량에도 신경을 써보았다.
이미 과거에 발행한 글들은 어쩔수 없지만..이미지 용량 줄이는 사이트 들에서 최대한 용량을 줄인
이미지들을 첨부하고 극단적으로 webp파일 형식으로 변환하여 실험도 해보았는데,
webp형식의 파일을 구글에서 권장하긴 하지만 의문이다.
구버전 인터넷 익스플로러에서 사진이 보이지 않는 걸 확인했는데, 아직 사용자들이 많은 것 같아
그냥 일반 jpg를 그대로 쓸 예정.
4.스킨 html.css 압축(결과적으로는 실패)
스킨에 사용되는 html, css를 최적화 해 준다는 기법이 있어 시도해 보았으나
웹 코딩에 전문적이지 않은 나로서는 여러번의 삽질만 거듭했을 뿐 성공하지 못했다.
웹페이지가 어떤 식으로 구성이 되고 어떤 부분이 필수적이며 어떤 스크립트를 지연 로딩시키거나 버려야 할지 기본적인 감은 오는데, 전문가가 아닌 나로서는 확실하지 않은 부분이라 그냥 포기.
대신 확실하게 내가 아는!
쓰지 않고 또 버려도 블로그 돌아가는 데 지장이 없는 코드들은 제거했다.
렌더링 차단 리소스와 쓰지 않는 자바스크립트 어쩌구 하는 부분은
티스토리에서 가동시키는 코드들이라 내가 어찌할 수 없는 부분이란 걸 알게 되었고,
또, 애드센스 광고를 달고 있는 한 성능점수가 높게 나올 수 없다고 하는데 앞으로의 블로그 운영에 있어서
중요하게 고려해야 할 포인트를 잘 생각해 보고 결정할 것이다.
이 수치가 앞으로 계속 유지되면 좋겠지만,,,
나의 블로그 운영 특성 상? ㅎㅎ 언제라도 변할 수 있는 부분이긴 한데
암튼 최대한 잘 유지하도록 관리해 볼 생각이다.