[크롬 개발자도구] 티스토리 블로그가 늦게떠서 확인해보니 믹시 플러그인이 범인~

크롬 브라우저의 [도구] 메뉴에는 [개발자 도구]라는 메뉴가 있다. 당신이 웹사이트 개발자이거나 개발자가 아니더라도 포스팅을 즐기는 나름 블로거라면 알아두어도 좋을 기능이 있는 유용한 메뉴이다. 개발을 해서 사이트를 오픈하거나 포스팅을 올렸는데 해당 페이지가 예상보다 오래 걸린다면 개발자 도구를 열어놓고 어떤 녀석이 웹페이지 로딩시간을 잡아먹는지 확인할 수 있다.

포스팅할 블로그 내용 중에 소스코드가 들어가야 하는 부분이 있어 티스토리 블로그에 SyntaxHighlighter를 설치했습니다. 

관련 블로그 : 티스토리 블로그에 SyntaxHighlighter 3.0 적용하기

그런데 생각보다 웹페이지가 로딩이 완료되기까지의 시간이 너무 오래걸리는 것이었습니다. 그래서 크롬 브라우저에서 [도구] 메뉴에 있는 [개발자 도구]를 열어놓고 해당 웹페이지를 다시 띄워봤죠.

 

개발자 도구의 Network 탭을 클릭하여 웹페이지를 로딩할 때 걸리는 시간을 측정해보니 무려 21초라는 시간이  나왔습니다. 

여기서 그림에서처럼 오른쪽 Timeline을 통해 웹페이지의 각 리소스 (이미지, 스크립트파일, CSS 파일 등)를 가져오는데 걸리는 시간을 확인할 수 있는데요. 저의 경우 mixsh 사이트에 있는 loader.html 파일을 가져오는데 20초가 넘는 시간이 걸려 이 파일을 가져올 때까지 페이스북 플러그인과 SyntaxHighlighter 가 모두 뜨지않는 문제가 발생했습니다. 

그래서 일단 관리자 페이지에서 이 믹시 플러그인을 사용중지했습니다. 

그리고 다시 로딩하였더니 이제는 3,4초대로 제대로 나오는 것을 확인할 수 있었습니다. 

로딩에 장애가 되는 믹시 플러그인을 사용중지하니 모든 컨텐츠와 이전에 설치한 플러그인 기능들이 3,4초안에 모두 로딩되어 정상작동하는 것을 볼 수 있었습니다.

이러한 개발자 도구 또는 인스펙터 등은 크롬이나 사파리, IE 등 대부분의 브라우저에 그 기능이 있으니 이러한 경우에 사용하시면 도움이 되는 정보나 또는 힌트를 얻을 수 있습니다. 

참고하세요~!