블로그를 처음 운영하는 분들이 흔하게 하는 실수가 바로..이것 저것 잡다한 것들을 블로그에 덕지덕지 붙이면서 '화려하고'.'예쁘게' 꾸밀려고 한다는 사실입니다. 


저도 블로그를 운영할 초반에는 나름대로 보기좋게 꾸미고자 노력했는데..지금 생각해보면 다 부질없는 짓이더라구요~ 


정작 중요한건 자신의 블로그에 방문하는 사람들의 입장에서 봤을때 해당 페이지가 얼마나 빨리 로딩이 되고 중요한 정보들을 담고 있느냐 하는 것이죠. 쉽게 말해서 입장을 바꿔놓고 생각을 해보면 공감이 가는 이야기입니다.



방문자가 늘어나길 기대한다면 가장 먼저 자신의 블로그 로딩속도가 얼마나 빠른지 부터 먼저 확인해보고 문제점이 있다면 수정을 해야만 장기적으로 볼때 훨씬 도움이 될꺼라는 생각이 드네요. 


이번 시간에는 크롬 확장프로그램 중에서 'pagespeed insights'라는 웹사이트 속도 측정 프로그램에 대해서 알아보겠습니다.

 

크롬 확장프로그램 'pagespeed insights'1


구글 디벨로퍼(google developers)라는 곳에 접속해보면 pagespeed tools라는 기능이 있는데요..그중 하나는 분석도구(analysis)고 다른 하나는 최적화(optimization)입니다. 


그런데 최적화관련 기능들은 현재 '유료'이고..분석도구만 누구나 프리하게 사용할 수 있습니다.


크롬 확장프로그램 'pagespeed insights'2


분석도구에서 pagespeed insights browser extensions이라는 부분을 클릭해보면 구글 크롬과 파이어폭스에서만 확장프로그램을 제공한다는 사실을 확인할 수 있어요~ 


파이어폭스는 써보지 않아서 일단 패스...구글 크롬 하단부에 있는 install chrome extension을 눌러줍니다.


크롬 확장프로그램 'pagespeed insights'3


그러면 이렇게 바로 크롬 웹스토어에 있는 확장프로그램으로 연결이 되고..바로 설치가 가능해집니다. 


영어로 되어 있다고 혹시 영어로만 나오는 프로그램이 아닌가? 생각할 수도 있는데..한글로도 나오니까 걱정하지 마세요^^


크롬 확장프로그램 'pagespeed insights'4


그런데..반드시 구글 디벨로퍼(google developers)을 통해서 확장프로그램을 받을 필요는 없구요..직접 크롬 웹스토어로 들어가서 'pagespeed insights'를 검색하면 바로 찾을 수 있습니다.


크롬 확장프로그램 'pagespeed insights'5


크롬 확장프로그램 'pagespeed insights'의 설치가 마무리되면 구글 크롬 오른쪽 상단에 저렇게 생긴 아이콘이 생성됩니다.


웹사이트 속도 측정용 크롬 확장프로그램 'pagespeed insights'



그런데 이 아이콘 자체에는 기능이라고 할만한 것이 없구요..개발자 도구메뉴로 들어가야만 웹사이트 속도 측정을 할 수 있어요~ 어떻게 보면 약간 불편하기도 합니다.


크롬 확장프로그램 'pagespeed insights'6


개발자도구를 실행시켜주려면 단축키 'ctrl + shift + I'를 눌러주거나 크롬 설정메뉴 중간쯤에 보이는 '도구'-'개발자도구'로 직접 들어가야 합니다. 


하지만 굳이 이렇게 하지 않아도 오른쪽 마우스 버튼메뉴에서 '요소 검사'로 들어가면 똑같더라구요^^ (개인적으로 그냥.. 요소검사 기능을 사용하는 것을 추천합니다.)


크롬 확장프로그램 'pagespeed insights'7


개발자도구로 들어가든..요소검사로 들어가든..위와 같이 똑같은 기능이 실행되는데 아래쪽에 생성된 창의 상단 메뉴를 보면 끝에 'pagespeed'라는 기능이 생성된 모습을 확인할 수 있구요.. 


바로 이곳에서 웹사이트 속도 측정 분석이 가능합니다.


크롬 확장프로그램 'pagespeed insights'8


분석을 해보면 해당 페이지에 대한 문제점과 제안사항이 요약되어서 나타납니다..흠..고쳐야할 부분들이 꽤 많네요 ㅠㅠ 


크롬 확장프로그램 'pagespeed insights'9


그리고 크롬 확장프로그램을 따로 설치하지 않고도 웹사이트 속도 측정을 할 수 있는 페이지가 있습니다. 


사용자 편의성에 따라서 약간 다르겠지만..생각해보면 이게 더 간단한 방법일 수도 있겠네요~방문해서 블로그 주소만 입력해주고 간단하게 '분석'버튼만 눌러주면 끝이니까요~ ☞ 구글 pagespeed insights


크롬 확장프로그램 'pagespeed insights'10


실제로 해당 페이지에서 로렌과 오뚜막 블로그 주소를 넣은 다음 웹사이트 속도 측정을 해본 결과들입니다. '모바일','데스크톱'이 따로 구분이 되어 있구요. '사용자 환경'에 대한 점수도 따로 구분되어 있답니다. 


이때 속도측정을 했을때 모바일에서는 73/100..데스크톱에서는 78/100으로 비교적 양호(?)한 점수를 받았구요..사용자 환경점수는 91/100이라 꽤 높은 점수를 받은 것 같습니다.


그런데 문제는 이 속도가 그때 그때 다르다는 점이죠..같은 블로그라도 페이지마다 달라지고..인터넷 회선의 영향도 크게 받는 것 같습니다. 


분명 같은 페이지인데도 다른 곳에서 접속했을때 또 점수가 내려가거나 올가가는 경우도 있습니다. 아마 어느 국가에서 접속했느냐에 따라서도 속도차이가 있겠죠. 


이러한 수치는 어디까지나 참고용이구요.. pagespeed insights는 두 가지 방법중에 아무거나 사용해도 상관없습니다^^ 


구글 웹사이트 속도 측정결과에서 보여주는 개선할 부분들을 적절히 수정해주면 속도향상에 도움이 될꺼라고 생각되네요^^


그리드형