웹 디버거로 홈페이지(블로그) 로딩 시간 확인하기

주로 크롬Chrome이나 파이어폭스Firefox를 많이 쓰는데 블로그나 홈페이지작업 시 많이 쓰고 있습니다.f9GTRY6ZF8L13VEC63cD

요즘 블로그를 하면서 더 많이 쓰고 있는데, 애드센스에서 스코어카드 중 사이트 상태가 너무 거슬려서 더 쓰게 됐습니다.

사이트 상태는 이용자들이 많이 접근하는 곳의 속도를 체크해서 접속이 잦은 곳을 대상으로 확인하는데 최하점이 매번 나왔습니다.

그러다 블로그 최적화를 검색하고 검색하다보니 이미지 최적화가 필요하다고 하여 포스팅때 마다 신경을 쓰고 있습니다.

링크 : 블로그 로딩속도 개선?! 이미지 최적화 알아보기

하지만 이전에 올린 글들에 대해서는 하기 조금 껄끄러워져서 뭔가 다른 문제가 있나 싶어서 웹디버거로 확인을 하게 되었습니다.

인터넷 익스플로러Internet Explorer에서도 이 기능이 있습니다.

거의 모든 브라우저에서 이 기능을 열 때 [F12]키를 사용합니다.

크롬 개발자 도구

인터넷 익스플로러 개발자 도구

이제 로딩 시간을 알아보는 방법을 알아보겠습니다.

자신의 블로그 상태가 깔끔하고 진입속도가 빨라야 사람들이 많이 들어오기때문에 예민한 부분일 수 밖에 없습니다.

스킨을 몇 번 만지다 보니 이전에 올렸던 이미지들의 이름이 틀려져서 깨지는 현상이 발생했었습니다.

이 문제를 잡고 나니 상당히 속도가 올라갔습니다.

익스플로러보다 크롬에서 보기 편하다고 생각하여 크롬으로 알려드리겠습니다. 익스플로러 및 기타 브라우저도 해당 기능은 보유하고 있으니 활용해보시길 추천합니다.

크롬 개발자도구에서 상단에 Network탭을 선택하게 되면 페이지에서 로딩하는 스크립트 및 이미지들에 대한 결과를 받는 시간 들이 출력됩니다.

사진을 자세히 보시면 아시겠지만 Timeline이후에 표시되는 점이 바로 해당 내용을 불러오는데 경과한 시간을 찍어냅니다.

여기서 Status에 OK가 아닌 다른 메시지가 나타난다면 해당 항목에는 오류가 있다는 의미가 되는데, 이 내용을

자신이 조작하는 페이지에서 수정을 해주게 되면, 속도가 상당히 개선됩니다.

위에서 말씀드렸던 이미지 링크가 잘못되었던 부분들을 수정하고 나니 오래 걸리는 것들은 구글과 관련된 스크립트들 뿐이 었습니다.

자체적으로 진단하고 조치함으로써 속도를 향상시켜 이용자분들께 좋은 서비스 제공하시길 바랍니다^^