이 글은 주식회사 의 Advent Calendar 2019 13일째이다.
저는 인테리어 디자이너로 평소에 LPO 등을 자주 합니다.잘 부탁드립니다.

CSS 성능 향상

구글의 발표에 따르면 "3초 이상 표시해야 하는 사이트에서 53%의 사용자가 이탈한다"
아마존은 "0.1초 늦추면 매출이 1% 감소하고 1초 빨라지면 매출이 10% 높아진다"고 발표했다.
사이트 성능을 향상시키는 것은 사업에서 매우 중요한 일 중의 하나라고 할 수 있다.
성능 개선 방법은 여러 가지가 있습니다. 이번에는 CSS 특화 성능에 대해 이야기해 보겠습니다.

무슨 방법이 있습니까?

방법은 크게 두 축으로 나뉘는데 파일 자체의 경량화와 렌더링 시 최적화된다.
브라우저 페이지에 표시되는 구조는 매우 두루뭉술하여 파일을 다운로드한 후 내용을 분석하여 렌더링 처리하고 표시합니다.
파일 자체가 가벼워지고 렌더링이 쉬워 화면 표시에 긍정적인 영향을 미친다.
그럼 바로 따로 소개해 드릴게요!

파일 자체의 경량화

우선 파일 자체를 줄이고 다운로드 속도를 높이는 방법

짧은 기계 손(통일 지정)으로 기술하다

기본적인 일이지만 통일된 지정으로margin,background 등 총괄적인 속성을 기술하자.
코드도 깔끔하고요.

margin: 10px 20px 10px 20px;

　↓

margin: 10px 20px;

이전 공급업체 접두사 삭제

브라우저가 어느 정도까지 덮어쓰는지에 따라 필요하지 않은 접두사가 코드량 증가의 한 원인이다.
파일의 비대화뿐만 아니라 유지보수성도 떨어질 수 있으니 삭제하고 쓰지 마세요!
항상 border-radius 접두사를 붙이지 않도록 주의하세요.

필요한 경우 Autoprefixer 등이 자동으로 부여되는 것이 좋습니다.

Autoprefixer

border-radius:30px;
-webkit-border-radius: 30px;  /* 不要 */
-moz-border-radius: 30px;     /* 不要 */

파일 병합 및 최소화

조합은 여러 CSS 파일을 한데 모아 요청 횟수를 줄입니다.

Minify화는 쓸모없는 공백, 주석, 줄 바꾸기 등을 삭제하여 파일 크기를 줄인다.

온라인 Minify화 사이트도 있지만 관리 문제를 고려해 퀘스트 주자로 자동화를 권장한다.

/* レイアウトCSS */
.hoge_Wrap {
  color: #ffffff;
  background-color: #888888;
}

　↓

.hoge_Wrap{color:#fff;background-color:#888}

불필요한 코드 삭제

중복 또는 사용되지 않는 규칙을 삭제하여 파일을 줄입니다.필요하지 않은 코드를 삭제하는 것도 유지보수를 높일 수 있다.

chrome 개발 도구

실제로 개발 도구의 More tools>Coverage에서 사용하지 않은 규칙을 확인할 수 있습니다.
붉은 선을 그리는 규칙은 필요하지 않은 규칙이다.

※ 사이트 전체에서 사용하는 것이 아니라 열린 페이지 장치에서 판정한 것이니 주의하십시오.
빨간 선이라지만 아무렇게나 지우면 큰일인데...

여러 가지 편리한 도구

자신도 이번 조사에서 알았지만 짧은 손으로 쓴 기술, 파일의 결합&minify화, 구조상의 최적화와 필요하지 않은 코드의 삭제 등 능숙한 도구가 있다고 한다.

CSSO、cssnano

CSS 파일의 구조적 최적화(예를 들어 비슷한 규칙을 한데 모으는 것)
・ 미니 파일 중복 코드 삭제, 빈 규칙 삭제 등의 기능이 있어 파일의 무게를 줄일 수 있습니다.

CSSO

cssnano

PurgeCSS

CSS 파일에서 페이지에 사용되지 않는 스타일을 검색하고 삭제된 내용을 새 CSS 파일로 생성하는 도구로 사용합니다.

UNCSS, DropCSS도 같은 기능을 가지고 있지만 PurgeCSS는 각종 구축 도구와 조합하여 사용할 수 있다.

참조: CSS 파일에서 사용되지 않는 스타일을 삭제하는 방법

PurgeCSS

렌더링 시 최적화

다음은 쉽게 과장할 수 있는 작법 방법이다.

단축 선택기

브라우저가 오른쪽(끝)에서 선택기를 해석하는 것을 아십니까?
불필요한 중첩 (불필요한 검색 감소) 을 피하여 렌더링 속도를 높입니다.

선택기의 수를 줄이는 데 있어서 BEM은 렌더링이 빠른 쓰기 방법이라고 할 수 있다(선택기의 일치 처리 횟수가 줄어들었기 때문이다)

div p a {
  color: #008080;
}

만약 이런 코드가 있다면 우선 오른쪽의 a를 찾아서 p를 검색한 다음div의 검색 처리에 들어가야 한다.

.hoge {
  color: #008080;
}

이 경우, 상기 설정과 같이class는 렌더링 속도를 높일 수 있습니다.

내장 CSS

CSS를 따로 다운로드할 필요가 없기 때문에 HTML 파일에 렌더링으로 기술하는 것이 가장 빠릅니다.(물론 관리상의 문제가 존재한다.)

LP라면 선택할 수 있다.

인라인 FV CSS만

CCSS(Critical CSS)는 첫 번째 보기의 CSS에만 기술하고 사용하지 않는 CSS는 읽기 지연 등을 통해 디스플레이를 고속화하는 방법이 있습니다.

공구도 있는 것 같다.
Critical Path CSS Generator
개선할 페이지 URL을 입력하고 [생성] 버튼을 클릭하여 코드를 생성합니다.

마지막

글만 쓰면 어떻게 써도 되지만 상술한 것을 머릿속에 새기면 성능을 의식한 CSS의 작법이 더 좋아진다 ◇

그럼, 좋은 표기생활 되세요