CSS 성능 개선 방법

소규모 프로젝트에서는 상관없지만, 프로젝트가 커지면 커질수록 CSS양은 늘어나게 되고, 

CSS가 많아지면 많아질수록 당연히 성능도 저하된다. 

 

성능 개선 방법 

 

1. @import 를 사용하지 않는다. 

속도 측면에서 import는 좋지 않은 방식이라는 내용이 많다. 하지만 Vue에서는 style 내부에 

import로 파일을 불러오고 있는데, 해당 방식보다 더 나은 방법이 있는지는 알아봐야 한다. 

 

추가로, index에서 모든 스타일 시트를 불러오는 것보단, 컴포넌트 별로 사용할 스타일 시트를 

분리하여 불러오는 게 속도 향상에 좋다. 

 

2. 선택자 방식

header > ul > li > p 보다는 클래스 명을 지정하여 뎁스를 줄여주는 게 좋다. 

또한 태그 선택자를 사용하지 않는다. 태그 선택자의 경우 속도의 문제도 있지만, 유지 보수가 어렵다. 

 

3. CSS 속성 정렬 

구글의 경우 css 속성 정렬 방법을 abc로 하고 있다고 한다. 

abc 순의 정렬이 css 적용 속도가 살짝 개선된다고 하는데, 공식적인 내용인지는 모르겠다.

 

4. Extend 보다는 Mixin으로 사용! 

 

Extend는 기존 스타일에서 클래스 명을 추가하여 오버라이딩을 하는 걸 Extend라 예를 들 수 있다.

Mixin은 반복되는 코드가 있으면, 반복되는 코드를 한 클래스마다 다 추가해주는 것으로 예를 들 수 있다.

 

// Extend

.header {
	width: 100%;
    height: 40px;
    border: 1px solid #ffffff;
    border-radius: 4px;
}

.header--border-red {
	border: 1px solid red; 
}

// Mixin 

.header {
	width: 100%;
    height: 40px;
    border: 1px solid #ffffff;
    border-radius: 4px;
}

.header--border-red {
	width: 100%;
    height: 40px;
	border: 1px solid red; 
    border-radius: 4px;
}

왜인지 띄어쓰기가 이상하게 나오는데, 무시해주세요 

 

코드로만 봤을 때는, Extend가 코드양이 더 작고, Mixin은 훨씬 더 긴 코드와, 용량을 가지게 된다.

하지만 Mixin 방식이 실제로 23.32% 정도 나은 퍼포먼스를 보인다고 테스트한 블로그 글이 있고, 

실제로 많은 문서에서도 Extend보다는 Mixin을 선호하라고 한다. 

 

같은 코드를 반복해서 작성하는 건 꽤나 까다로운 일이기 때문에, Scss에서 지원하는 @Mixin 기능을 이용하자.

 

 

정리해보자면, import 를 최소화 (spa에서는 조금 더 알아보자)하고, 선택자 방식을 사용하지 않고. @Mixin 기능을 활용하자. 

또한 Css 파일 분리가 가능하다면, 분리하여 사용되는 곳에만 import 해주도록 하자.