오늘날 웹에서 페이지 로드 시간은 가장 중요한 웹 사이트 측정 항목 중 하나입니다.
밀리 초조차도 수익에 큰 영향을 줄 수 있으며 페이지 로드가 느리면 전환율을 쉽게 방해 할 수 있습니다.
https://onextrapixel.com/best-css-optimization-tips/
웹 사이트 속도를 높이기 위해 채택 할 수 있는 많은 도구와 기술이 있습니다.
이 기사에서는 프론트 엔드 성능을 향상 시키는 데 사용할 수 있는 최상의 CSS 최적화 팁을 살펴 보겠습니다.
1. 성능 병목 현상 찾기
모든 종류의 최적화에서 가장 중요한 것은 철저한 감사로 시작하는 것입니다.
운 좋게도 성능 병목 현상을 찾는 데 도움이 되는 많은 CSS 진단 도구가 있습니다.
무엇보다도 웹 브라우저의 DevTools를 사용하여 자산이 얼마나 빨리 로드 되는지 확인할 수 있습니다.
대부분의 브라우저에서 F12 버튼을 눌러 DevTools를 열 수 있습니다.
예를 들어 Firefox DevTools에서 네트워크 탭을 사용하여 페이지에서 로드 한 모든 CSS 파일의 크기와 로드 시간을 확인할 수 있습니다.
캐시가 있거나 없는 CSS로드 속도를 테스트 할 수도 있습니다.
또한 DevTools는 타사 CDN에서 가져온 Google Font 파일 및 CSS 자산과 같은 외부 CSS를 표시하므로 이전에는 몰랐던 많은 소스를 찾을 수 있습니다.
Pingdom Tools 및 Google의 Lighthouse는 개발자가 웹 사이트 속도 및 프런트 엔드 성능을 분석하는 데 자주 사용하는 다른 두 가지 무료 도구입니다.
예를 들어 Pingdom Tools는 간단한 웹 사이트 속도 테스트를 실행하는 경우 몇 가지 유용한 CSS 최적화 팁을 제공합니다.
2. CSS 파일 축소 및 압축
대부분의 웹 사이트는 여러 CSS 파일을 사용합니다.
대부분의 경우 모듈식 CSS는 모범 사례로 생각되지만 모든 파일을 로드하는 데 시간이 오래 걸릴 수 있습니다.
그러나 이것이 바로 CSS 축소 및 압축 도구가 존재하는 이유입니다. 똑똑하게 사용하면 페이지 로드 시간을 크게 향상 시킬 수 있습니다.
CSS 파일을 간단한 형식으로 복사하여 붙여 넣어 CSS 파일을 축소 할 수 있는 CSS 도구와 같은 온라인 도구가 있습니다.
이 유형의 도구는 소규모 프로젝트에 적합합니다.
그러나 여러 CSS 파일이 포함 된 더 큰 프로젝트의 경우 이를 사용하면 번거롭고 시간이 많이 걸릴 수 있습니다.
이러한 경우 자동화 된 솔루션을 선택하는 것이 좋습니다.
요즘 대부분의 빌드 도구를 사용하면 코드 기반에서 자동으로 압축을 수행 할 수 있습니다.
예를 들어, Webpack은 기본적으로 모든 파일을 축소된 번들로 반환합니다. PostCSS에는 CSS Nano와 같은 스마트 플러그인이 있어 파일을 축소 할 뿐만 아니라 집중적인 최적화를 통해 실행할 수도 있습니다.
3. Flexbox 및 CSS Grid 사용
CSS를 작성할 때 여전히 전통적인 상자 모델에만 의존하고 여백, 패딩 및 부동을 사용하여 화면에 항목을 정렬하는 경우 더 현대적인 레이아웃 모듈, 즉 flexbox 및 CSS Grid를 채택하는 것이 좋습니다.
이 새로운 모델을 사용하면 훨씬 적은 코드로 복잡한 레이아웃을 구현할 수 있습니다.
오래된 기술을 사용하면 항목을 세로로 가운데에 놓는 것과 같은 간단한 작업에도 많은 트릭과 비틀기를 사용해야 합니다.
그러나 flexbox와 CSS Grid는 그렇지 않습니다. 새로운 레이아웃 모듈을 선택하는 데 약간의 시간이 걸릴 수 있지만 CSS 파일이 훨씬 작기 때문에 투자 가치가 있습니다.
이것은 현재로서는 꽤 좋은 브라우저 지원을 제공하는 flexbox (현재는 전 세계적으로 98.3 %)에 해당합니다.
CSS Grid에 대한 브라우저 지원은 완벽하지 않지만 (현재 전 세계적으로 92.03 %), 오래된 브라우저를 지원할 필요가 없거나 폴백을 제공하려는 경우에도 계속 사용할 수 있습니다.
4. @import 규칙 대신 <link> 태그를 사용하십시오.
웹 페이지가 CSS 파일을 로드 하도록 하는 데 사용할 수 있는 두 가지 주요 기술이 있습니다.
@import 규칙을 기본 CSS 파일 맨 위에 추가해야 합니다.
대부분의 경우 글꼴 및 기타 디자인 요소와 같은 더 작은 자산을 로드 하는 데 사용됩니다.
처음에는 이것이 좋은 해결책처럼 보이지만 HTML 페이지가 <link> 태그를 사용하여 직접 스타일 시트를 로드 할 때 보다 브라우저가 추가 스타일 시트를 로드 하는 데 훨씬 오래 걸립니다.
HTML 페이지에 둘 이상의 CSS 파일을 추가 할 때는 항상 CSS 특성에 주의하십시오.
가장 일반적인 스타일 시트를 먼저 추가 한 다음보다 구체적인 스타일 시트로 이동하십시오.
나중에 추가 한 스타일 시트가 이전 CSS 파일의 규칙을 대체하기 때문에 이를 수행해야 합니다.
예를 들어 CSS 파일이 올바른 순서로 추가 된 예는 다음과 같습니다.
1 2 3 | <link rel="stylesheet" href="main.css"><link rel="stylesheet" href="page.css"><link rel="stylesheet" href="component.css"> |
5. 이미지 대신 그라디언트 및 SVG 사용
웹 페이지에 모든 이미지를 로드 하는 데 시간이 오래 걸릴 수 있습니다.
개발자는 많은 이미지 최적화 기술을 사용하여 외부 CDN에서 이미지를 로드하거나 TinyJPG와 같은 이미지 압축 도구를 사용하는 등의 효과를 완화합니다.
이러한 솔루션은 많은 도움이 될 수 있지만 많은 경우 리소스가 많은 JPG 및 PNG 이미지를 기본 CSS 효과로 바꿀 수 있습니다.
예를 들어, 사용자의 브라우저 속도가 상당히 느려질 수 있는 거대한 배경 이미지 대신 그라디언트를 사용할 수 있습니다.
CSS의 그라디언트 함수를 사용하여 선형, 방사형 및 반복 그라디언트를 만들 수 있습니다.
이러한 CSS 기본 기능을 사용하면 색상뿐만 아니라 그라디언트 각도를 정의 할 수 있습니다.
예를 들어 다음 규칙은 이미지보다 훨씬 빠르게 로드 되는 멋진 그라데이션 배경을 만듭니다.
1 2 3 4 5 | div { background: linear-gradient(45deg, lightgreen, royalblue);} |
보다 복잡한 그라디언트 및 질감의 경우 CSSmatic (아래 이미지) 및 ColorZilla와 같은 생성기를 사용할 수도 있습니다.
그라디언트 외에도 기존 JPG 및 PNG 이미지를 SVG (Scalable Vector Graphics)로 바꿀 수 있습니다.
로드 속도가 빠를 뿐만 아니라 한 가지 버전의 이미지만 포함하면 됩니다.
SVG는 벡터 특성으로 인해 품질 손실 없이 모든 크기로 확장 할 수 있기 때문입니다.
또한 SVG를 일반적인 HTML 파일처럼 CSS로 스타일링할 수도 있습니다.
6. !important 규칙을 피하십시오
중요한 규칙은 경우에 따라 신의 선물이 될 수 있지만 최후의 수단으로 만 사용해야 합니다.
이 규칙은 계단식에서 예외를 만듭니다.
따라서 CSS 선언에! important를 추가하면 특정 선언이 포함 된 다른 선언도 무시합니다. 구문은 다음과 같습니다.
1 2 3 4 5 | h1 { margin-bottom: 20px !important;} |
CSS에 중요한 규칙이 너무 많으면 사용자 브라우저에서 코드를 추가로 확인해야 하므로 페이지 속도가 크게 느려질 수 있습니다.
일반적으로 사이트 전체 CSS 또는 테마 또는 플러그인을 작성할 때! 중요를 사용하지 마십시오.
가능하면 타사 라이브러리에서 오는 CSS를 재정의 하려는 경우에만 사용하십시오.
7. CSS 리팩토링 고려
CSS 리팩토링은 쉬운 일이 아니지만 웹 사이트 성능을 크게 향상 시킬 수 있는 경우가 많습니다.
예를 들어 CSS 파일이 너무 크거나 레거시 코드 기반을 상속 받았거나 페이지 로드 시간이 너무 길어 전환율을 심각하게 저하 시키는 경우.
CSS 리팩토링의 목표는 코드를 더 매끄럽고 유지 보수가 쉽고 빠르게 로드 하는 것입니다.
CSS 리팩토링은 CSS 코드베이스의 모든 측면을 분석해야 하는 다단계 프로세스입니다. 다음과 같은 여러 가지 사항을 확인해야 합니다.
리팩토링을 시작하기 전에 측정 가능한 목표를 설정하고 페이지 로드 시간 또는 첫 번째 의미 있는 페인트와 같이 사용할 벤치 마크를 선택하여 이전 및 이후 값을 비교할 수 있습니다.
또한 Git과 같은 버전 관리 도구를 사용하는 것을 잊지 마십시오. 이런 식으로 문제가 발생하면 이전 버전의 코드로 다시 이동할 수 있습니다.
마무리
웹 사이트의 성능을 향상 시키기 위해 사용할 수 있는 CSS 최적화 팁이 많이 있습니다.
대부분 구현하기 쉽지만 페이지 로드 시간에 큰 영향을 줄 수 있습니다.
빠른 로딩 페이지는 사용자 경험을 향상 시킬 뿐만 아니라 Google 및 기타 검색 엔진에서 더 나은 순위를 얻는 데 도움이 됩니다.
CSS 최적화 모범 사례 외에도 캐싱, Google AMP 및 HTTPS 프로토콜과 같은 다른 많은 기술을 사용하여 로딩 속도를 향상 시킬 수 있습니다.
웹 사이트 로딩 속도를 개선하기 위해 10 단계 가이드를 확인하십시오.
등록된 댓글이 없습니다.
