css 로딩 속도

웹페이지를 만들다 보면, 텍스트는 뜨는데 css적인 요소는 늦게 떠서 마치 렉이 걸리는 듯한 현상이 종종 보일 것이다.

이에 대한 이유는 보통 3가지로 볼 수있다.

1. @import

외부 폰트 링크는 종종 @import 방식을 사용하는데

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css;

위의 import 방식보다 link 태그 방식이 속도가 더 빠르다.

link 로딩 방식은 css 전체 해석보다 먼저 진행이 되는 데 반해, @import 방식은 css 전체 해석보다 뒤에 발생한다. 이 때문에 로딩이 느릴 수 밖에 없다.

그렇기 때문에 link 로딩 방식을 추천

2. 스타일 링크

css를 따로 파일로 만들어서 html 파일에 link 형태로 주입하는 방식을 많이 채용한다.

<link
      rel="stylesheet"
      type="text/css"
      href="/src/css/Common/NavBar/default.css"
    /> 

link는 반응형이라면 최대한 자식 html 파일 보다 부모 html 파일에 적용을 하는 것이 좋다. 부모 html에 적용을 해놓으면 preload 형식이 되기 때문.

3. 코드 구조

우선 css 파일의 길이를 줄이면 줄일 수록 로딩속도는 줄어든다.
하나의 css 파일에 다 넣는 것보다 여러 개의 css 파일에 넣는 것이 속도 개선에 효과적이다.

html 파일에서 css를 불러올 때 css의 크기가 커지면 코드를 읽는 데 시간 소요가 많이 발생하기 때문에 속도 차이가 발생하는 것이다.

.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

위의 코드를 압축하여

.main {display: flex;flex-direction: column;justify-content: center;}

위의 코드로 바꾸면 css의 코드를 줄일 수 있어 로딩 속도를 줄일 수 있다.