한빛출판네트워크

제공 : 한빛 네트워크
저자 : Lara Swanson
역자 : 임지현
원문 : HTML and CSS performance

효율적이고, 재사용할 수 있는 마크업은 페이지 로드 시간과 개발 작업을 줄여준다.

[편집자 노트 : 이 기사는 웹 디자인과 성능 시리즈의 세 번째 포스트입니다. 첫 번째와 두 번째 포스트는 이곳(웹 성능은 사용자 경험이다)과 이곳(웹사이트 이미지 최적화하기)에서 읽으실 수 있습니다.]

마크업 최적화는 사이트의 페이지 로드 시간에 실질적인 영향을 미친다. 부풀어버린 HTML은 부풀어버린 CSS를 일으키고, 그 반대도 마찬가지다. 예를 들면, 시맨틱 태그의 사용과 재사용 가능한 템플릿 사용 작업으로, 눈에 띄게 사이트 전반의 HTML, CSS 그리고 스타일시트 이미지들의 파일 크기를 줄일 수 있었다.



간단히 남아있는 요소들을 더 의미 있는 이름으로 바꾸고, 재사용성에 초점을 두는 데 필요 없는 요소들(divitis라고도 불리는)을 HTML에서 제거하는 것만으로 파일 크기를 크게 줄이는 데 성공하였다. 후에 같은 방법의 대청소에서는, 사용하지 않는 셀렉터(selector)들을 제거하고, 스타일을 합치고 압축시키며, 사이트 전반에 사용되는 색들을 정규화하여 CSS의 크기를 39% 감소시켰다.

필자는 요소(element)에 의미 있고 분별 있는 이름을 짓기를 추천한다. 요소의 이름을 짓는 방법론에 대해서는 업계에서 여러 의견이 있지만, 소, 중형 크기의 사이트에는 시맨틱 태그를 사용하는 것이 좋다. 페이스북과 같이 큰 사이트는 사이트의 크기와 코드를 손보는 많은 개발자의 수 때문에 객체 지향적 작명 패턴을 사용해야만 한다. 반면 보통의 사이트에는 시맨틱 태그를 사용하는 것이 재사용성 유지 보수와 필요 없는 요소 제거에 매우 큰 이익이 될 수 있다.

그러나 CSS 전처리기를 사용하고 있다면, 객체 지향 CSS를 고려해야 할 것이다. 작은 믹싱에서 시작한 것이 컴파일 후에 파일 크기가 증가한 것을 눈치채지 못한 채, 놀랄 만큼 불어나 버린 CSS가 돼버리는 수가 있다. CSS 정의를 반복하는 대신 같은 CSS 객체를 재사용하는 게 총 CSS 파일 크기를 줄이는 데 도움이 될 것이다.

초기 개발 이후 추가되거나 업데이트된 CSS의 결과로 효율적이지 않은 셀렉터들이 생겨나는 경향이 있는데, 전형적으로 디자이너나 개발자들이 오래된 CSS를 오버라이드 하려고 해서 나타난다. 이 현상은 무언가가 잘못되었고, 마크업이 더 효율적으로 될 수 있다는 것을 의미한다. 많은 사람이 비효율적인 셀렉터들이 나쁜 성능을 가져온다고 생각하지만, 최신 브라우저에서는 그리 크게 우려할 사항이 아니다. 그렇지만 그럼에도 불구하고, 불필요한 셀럭터들을 제거하는 것은 좋다. 프론트엔드 설계를 유지하는데도 도움이 된다.

재사용성을 염두에 둔 개발을 지향하는 것은 미래의 개발 시간뿐 아니라 현재의 페이지 로드 시간도 줄이는 경향을 띤다. 디자인을 하거나 개발을 하면서 자기 자신에게 질문을 해보라. "나 말고 다른 사람이 이 패턴을 사용할까?" 재사용될 수 있는 자원은 캐싱될 수 있고, 큰 성능 개선을 가져온다! 자원 캐싱은 단지 이미지에만 영향을 미치는 것이 아니다. 스타일 시트와 스크립트들도 캐싱을 해야만 한다. 캐싱 방법을 재정비하고자 한다면, CSS가 항상 최상단에 그리고 JavaScript가 최하단에 있고, 둘 다 압축되어 있는지 확인하라. 마지막으로, @import를 사용하지 않도록 명심하고, 가능한 스크립트와 스타일시트들을 합칠 수 있는 만큼 합쳐서 최대한 적은 스타일시트와 스크립트를 로딩하도록 하라.

HTML과 CSS로 사이트를 구축하기 전에, 다음 사항을 확인하라:

• 나는 용도에 맞는 디자인 패턴을 만들었는가?
  
  
• 나는 의미 있는 요소와 견고한 HTML 계층구조를 사용하였는가?
  
  
• 지금 내가 작성한 마크업을 정리해서 나중에 개발 시간과 페이지 로드 시간을 절약할 수 있는가?
  
  
• 자동압축과 캐싱을 사용하였는가?

다음에는 페이지 속도가 모바일 유저에게 아주 중요하게 됨으로써, 반응형 웹디자인 개발의 성능을 개선하는 방법들을 알아본다.