디자이너가 알면 좋은 개발자 도구 사용 방법 :: 속도, 불필요한 소스,
나는 IT 중소기업에 다니는 디자이너다. 디자이너가 많은 회사에도 다녀보고, 제조업에 웹디자이너로도 종사해보았는데, 디자이너에 대한 대우가 영... 모두가 아시다시피 그렇다.(우리회사 오기 전 까지는 디자이너의 길을 선택한 것을 후회했다) 특히 디자이너의 수가 많은 회사일수록 (ex 디자이너 에이전시) 더 빡빡했던 것 같다. 그래서 선택한 지금의 회사는 IT 중소기업으로 대다수가 개발자이며 디자이너는 나 혼자다. 디자이너가 혼자이다보니 한가지를 깊이 파기보다 다재다능한 것이 더 어울린다. PSD 파일만 열심히 만지다가 어느덧 HTML파일까지 만지게 되었고, 이번에는 JS를 스터디하며, 간단한 회사 홈페이지를 개발자 손통하지 않고 리뉴얼하였다. 웹 서버에 올리면서 개발자인 팀장님께서 주신 간단한 팁을 공유해보려고한다.
홈페이지 성능 개선하기:: 개발자 도구 > 네트워크
Ctrl + Shift + i 혹은 F11을 누르면 개발자도구가 브라우저 하단이나 좌,우측 혹은 새창으로 생성된다. 개발자도구에 [ 네트워크 ] 탭을 선택한다.
① 네트워크 상단 삭제 클릭 : 네트워크 리스트를 깨끗하게 만든 후 분석 해야 속도가 제대로 분석이 된다.
② 캐시 사용 중지 체크 : 캐시가 남아있으면 속도가 조금더 빠르게 분석되므로 캐시 사용을 중지한다.
③ 새로고침 : 새로고침하여 속도 확인
④ 확인 해야할 부분 : A) 상태(HTTP 규약) / B) 네트워크 하단의 속도 및 용량 분석.
A) HTTP 상태 코드 읽는 방법 네트워크 상태 읽는 방법
| 그룹 | 코드 | 상수 | 설명 |
| 100번대 (정보응답) |
100 | CONTINUE | 상태 OK. 클라이언트가 계속해서 요청하거나 요청이 완료된 경우에는 무시해도 됨. |
| 101 | SWITCHING_PROTOCOL | 클라이언트가 보낸 upgrade 요청 헤더에 대한 응답. | |
| 200번대 (성공 응답) |
200 | OK | 요청이 성공적으로 완료 |
| 201 | CREATED | 요청이 성공적이였으며, 그 결과 새로운 리소스 생성되었음. | |
| 202 | ACCEPTED | 요청을 수신했지만, 그에 응하여 행동할 수 없음. | |
| 300번대 (리다이렉션 메세지) |
300 | MULTIPLE_CHOICE | 요청에 대해 하나 이상의 응답이 가능 |
| 301 | MOVED_PREMANETLE | 요청한 리소스의 URI가 일시적으로 변경되었음 | |
| 302 | FOUND | ||
| 303 | SEE_OTHER | 클라이언트가 요청한 리소스를 다른 URI에서 GET 요청을 통해 얻어야 할 경우 서버가 클라이언트로 직접 보낸다는 응답. | |
| 400번대 (클라이언트 오류 응답) |
400 | BAD_REQUEST | 이 응답은 잘못된 문법으로 인해 서버가 요청을 이해할 수 없음. |
| 401 | UNAUTHOTIZED | 인증되지 않음 | |
| 403 | FORBIDDEN | 클라이언트가 콘텐츠에 접근할 권리를 가지고 있지 않음. | |
| 404 | NOT_FOUND | 서버는 요청 받은 리소스를 찾을 수 없음. | |
| 500번대 (서버 오류 응답) |
500 | INTERNAL_SERVER_ERROR | 처리할 수 없는 내부 오류가 발생 |
| 501 | NOT_IMPLEMENTED | 요청 메서드는 서버가 지원하지 않거나 처리할 수 없음 | |
| 503 | SERVICE_UNAVAILABLE | 서버는 요청을 처리할 준비가 되지 않았음. |
B) 네트워크 하단의 속도 및 용량 분석.
소스를 다 읽어들였더니 101건의 요청이 있었고, 이 웹페이지의 리소스가 4.3MB 였다. 로드가 913밀리초 시간만큼 걸렸는데, 로컬이라는 특수한 상황으로 치면 꽤 무거운 사이트라고 할 수 있다고한다. 일단 가장 쉽게 줄일 수 있는 이미지를 먼저 줄여보고 평가해보겠다.
이미지 용량 줄이기 :: tinypng.com
리소스의 크기가 4.3MB에서 1.6MB로 축소되고 로드 시간이 줄어든것을 확인할 수 있다.
소스 > 디버깅 / 디버깅 해제
JS를 작성하다보면 디버깅을 해야할 일이 생기는데, 디버깅을 설정해놓고 매번 없애는 작업을 하기 너무 번거로웠는데, 이 버튼만 누르면 디버깅 해제가 가능하다. deactivate breakpoints(ctrl + F8)
