블로그나 웹 사이트가 느리게 뜨면 우리는 좀 기다리다가 5초 이상이 지나도 안 뜨면 뒤로 버튼을 눌러서 나가 버립니다. 따라서 내 웹 사이트나 블로그가 얼마나 느리게 뜨는 지를 가끔 체크해 봐야 합니다.
구글 크롬 웹 브라우저 로딩이 느린 웹 사이트에 로딩 속도를 표시를 검토 중
구글은 크롬 웹브라우저에서 로딩 속도가 느린 웹 사이트나 블로그의 로딩 속도를 측정해서 느리게 뜨는 웹 사이트가 뜨기 전에 느리게 뜨는 웹 사이트라고 미리 표기하는 방법을 검토 중에 있습니다. 이 메시지를 보면 서버가 다운 된 것이 아닌 좀 기다리면 열린다는 소리라서 조금만 기다리면 됩니다. 또한 주소창 바로 아래에 로딩바를 표시해서 로딩바가 다 차면 웹 사이트가 열리기에 로딩 되는 속도를 알 수 있습니다.
구글은 느리게 뜨는 웹 페이지를 그닥 좋아하지 않습니다. 이는 웹 서비스 사용자도 마찬가지입니다. 그래서 내 웹 사이트 또는 블로그가 얼마나 느리게 뜨는 지 알고 느리면 왜 느린지 해결할 방법을 찾아서 수정해 줘야 합니다. 네이버 블로그는 모든 것을 네이버가 조절하기에 할 것이 없습니다. 자유도 없는 블로그 서비스죠.
웹 사이트 로딩 속도 테스트 서비스 PageSpeed Insights
내 블로그, 웹 사이트가 얼마나 느리게 로딩 되는지 어떤 문제가 있는지를 알려주는 서비스가 PageSpeed Insights입니다.
https://developers.google.com/speed/pagespeed/insights/
에 접속한 후에 URL을 입력하면 바로 로딩 속도와 문제점을 알 수 있습니다.
제 블로그를 URL 입력창에 넣고 분석을 눌러 봤습니다.
측정은 모바일 웹 페이지와 PC로 나누어서 진행합니다. 모바일 웹이 89점이 나왔네요. 90점이 넘어야 준수한 편인데 살짝 모자르네요.
하단을 보면 왜 느린지 자세히 분석해 놓았습니다. 로딩에 가장 많이 걸리는 건 '랜더링 차단 리소스 제거하기'네요. 무려 1.3초나 걸립니다. 이걸 눌러보면
어디서 문제가 있는지 알려줍니다. 이 '랜더링 차단 리소스 제거하기'에서 나오는 건 내가 사용한 티스토리 스킨에 적용된 CSS, JS같은 코드 때문입니다. 이건 함부로 건드리면 스킨이 날아갈 수 있기에 함부로 만질 수 없습니다. 모바일 쪽은 건드릴 게 없습니다.
PC 페이지를 보니 22점으로 저질이네요. 참고로 네이버는 모바일이 25점 내외로 티스토리보다 못합니다. 흥미롭게도 PC 페이지는 네이버가 티스토리보다 조금 더 앞섭니다. 그러나 요즘 대부분의 사람들이 모바일 웹페이지로 접속해서 티스토리가 접속 품질이 더 좋습니다.
PC 페이지가 느린 이유 중 하나가 이미지 용량이 있네요. 구글은 JPEG와 PNG 같은 이미지 파일형식 말고 JPEG2000, JPEG XR, WebP와 같은 이미지 형식을 사용하고 권장하고 있습니다. 그런데 이게 범용적이지 않다 보니 저 조차도 JPEG를 주로 쓰네요.
앞으로는 업로드하는 파일 하나 하나를 용량을 줄여서 올리도록 노력해 봐야곘네요. 로딩하는 이미지 중에 가장 용량이 크고 느린 걸 보니 스킨에 무려 10메가짜리 이미지가 있네요. 어? 이거 티스토리에서 알아서 줄여주는 줄 알았는데 그냥 다 10메가짜리를 그냥 다 받아야 하나 보네요. 부리나케 수정을 했습니다.
티스토리 들어가서 스킨 편집을 클릭한 후
커버 이미지를 해상도가 낮은 이미지로 변경했습니다.
다시 측저해보니 22점에서 26점으로 올라갔네요. 웹 사이트나 티스토리 블로거들은 한 번 측정해 보시고 개선할 부분이 있으면 개선해 보세요.