CSS, 스크립트 최적화 코-오드

개발중에 참 많은 변화가 있다. 기능도 로직도. 하다보면 이것이 동작하는 코드인지 아닌지 몰라 그냥 남겨두는 경우가 많다.
Java 소스 쪽은 IDE가 한번도 사용하지 않은 변수, 호출되지 않은 메소드 등 그럭저럭 잘 찾아 줘서 개발 후 한 번 쓱 정리하면 그래도 봐줄만 하다. 

문제는 CSS, 스크립트. 웹에서는 페이지 로딩 속도가 중요한 이슈인데 쓸데 없이 용량만 큰 소스들만 정리해줘도 꽤나 향상 시킬 수 있다. 사실은 나도 이번에 사이트 속도 측정을 해보면 많이 배웠다. 그 중 실제로 작동하는(유효한) CSS, 스크립트만 추려 낼수 있는 방법이 효율도 좋고 흥미로워 정리하고자 한다.

크롬개발자도구 -> More tools -> Coverage를 실행

리코드버튼 또는 리로드 버튼을 대상 페이지에서 실행시키면 아래와 같이

소스별로 유효률을 볼 수 있다. 컬럼은 리소스명, 리소스 타입, 파일 사이즈, 유요하지않은(소스는 있지만 실제로 한 번도 동작하지 않는) 파일의 사이즈 그리고 퍼센테이지 이다.

리스트 중 자세히 보고 싶은 것을 클릭하면
이렇게 상세히 볼수 있다. 

나는 이것을 기준 삼아 카피본을 만든 후 사용되지 않은 소스는 지워버리고 슬림 버전을 만든 다음 css, js 압축기를 이용해서 미니마이즈 버전을 만든다. 이렇게 하면 평균 50% 정도의 소스를 덜어 낼 수 있는 것 같다. 물론 로딩 속도도 빨라지고.








adsense