블로그스팟 페이지 스피드 인사이트 속도 개선한 방법
여태까지 구글 블로거는 속도 측정을 안했습니다. 어련히 알아서 빠르겠거니 하고 냅뒀는데, 갑자기 속도를 측정하고 싶더라구요. 그랬더니 결과는 처참했습니다. 지금부터 블로그스팟 페이지 스피드 인사이트 속도 전과 개선한 후를 비교해드리며 사용한 방법을 소개해드리겠습니다.
블로그스팟 페이지 스피드 인사이트 속도 개선하기
개선 전의 상태
솔직히 정말 놀랐습니다.
제가 서브 블로그로 요즘 공들여서 키우고 있는 구글 블로거(블로그 스팟)입니다만, 모바일 테스트가 38점이 나왔습니다.
본래 블로그스팟의 모바일 버전은 주소 뒤에 "?m=1"이 표시가 되는데, 저는 본래의 링크로 검사를 했습니다.
하지만 아무리 그래도 이건 너무 심합니다.
제 경우에는 사진도 Wepb 확장자로 바꿔서 올리고 있고, 동영상은 임베드 기능을
이용해서 네이버tv 영상을 올리기 때문에, 미디어 떄문은 아니기 때문에 더 이해가
되지 않았습니다.
»
네이버tv iframe 소스코드 보는 방법
애드센스 로드 지연 시킨 후
자바 스크립트 코드들 때문에 속도가 많이 느려졌다는 평가가 뜹니다. 확인을 해보니 구글 애드센스 자동광고 코드가 영향을 많이 미친다고 합니다. 그래서 로드를 지연시켜준다는 코드를 찾아서 바디 끝 부분에 추가를 했었습니다.
그랬더니 56점으로 많이 올라갔습니다. 아직 주황불이라 한참 멀었지만, 빨간색에서 변한거니까 나름 긍정적입니다.
자동광고 코드 lazyload 적용 후
하지만 여전히 애드센스 코드 영향은 줄어들지 않습니다. 그래서 구글에 '애드센스 lazyload'를 하는 방법을 찾아서 적용을 해봤습니다. 4점이 올랐네요.
참고로 혹시 충돌이 나거나 문제가 생길까봐 아까 위에서 바디 하단에 추가했던 코드는 제거했습니다.
이 이후로 gzip 압축도 시도해봤지만, 결과는 변하지 않았습니다. 하지만 gzip 테스트 홈페이지에서 검사를 했더니 이미 압축이 적용 되어 있다고 뜹니다. 설마 적용이 돼서 저정도인 걸까요? 섬찟합니다.
이 블로그 속도 체크 결과
구글 블로거도 어쩔 수 없구나 했는데, 시험 삼아서 체크를 해본 이 블로그는 모바일 77점이 나옵니다.
이때, 약간 당황스러웠습니다. 대체 왜 성능 차이가 나는건지. 심지어 이 것도 모바일 버전이 아니고 본래의 주소로 테스트 한 것이라 조건은 같습니다.
해결 방법
꾸미기 위한 코드 제거
조금 더 예쁘고 정돈되어 보일 수 있도록 많은 자바 스크립트 코드들을 구글 서치를 하면서 찾아서 추가했었습니다.
- 전체 글 보기
- 저작권자 자동으로 바뀔부분 적용
- 글 수정시 수정날짜 추가
- 연관글 표시하기
위의 자바 스크립트 위젯을 꼭 필요한 연관글 표시하기를 제외하고는 모두 비활성으로 돌렸습니다.
+2023.09.20 추가) 다른 방법을 사용해서 모바일 점수를 98점까지 올렸습니다. 다른 글에서 도움을 받았던 영상을 추천드리고 있으므로 관심이 있으시다면 참고해주세요.
문제의 블로그 적용 후
그러자 위의 사진처럼 모바일 성능이 73점으로 올라갔습니다. 굉장히 허탈하더라구요. 그래서 눈을 딱 감고 위의 1번~3번을 삭제했습니다.
솔직히 편의성을 위해서라면 있어야 할 것 같아서 추가를 했던 것인데, 제가 압축이나 이런걸 할 줄 모르는 상태에서 추가를 하니 눈에 띄게 무거워진 것 같습니다.
애드센스 자동광고 코드가 제일 영향을 많이 주고 있지만, 애드센스를 제거할 수 없어서 결단을 내렸습니다.
마치며
결국 제가 적용했던 방법은 '애드센스 자동광고 로딩 지연', '꼭 필요한 자바 코드 위젯 말고 제거하기'입니다.
html, css 코드에 문외한인 저로써는 확실히 말씀드릴 수 있는게, 꾸미기 위해서 사용되는 자바 스크립트 위젯은 비활성화를 해보시고 테스트 해보시는 방법을 시도해보시라는 것 입니다.
워드프레스를 운영하면서 경험해본바에 의하면, 확실히 페이지 속도와 오류를 줄일 수록 로봇도 잘 방문하고 방문자 수도 늘어나는 것을 느낄 수 있습니다.