오늘날의 웹에서 페이지 로딩 속도는 가장 중요한 웹 사이트 지표 중 하나입니다. 밀리 초조차도 사용자 경험과 제품에 큰 영향을 미치며 느린 페이지 로딩은 쉽게 전환율을 감소시킵니다. 많은 도구와 기술을 사용하여 웹 사이트 속도를 높일 수 있습니다. 이 기사에서는 프론트 엔드 성능을 향상시키는 데 사용할 수있는 최고의 CSS 최적화 기술을 소개합니다.
1. 성능 병목 현상 찾기
모든 최적화에서 가장 중요한 것은 포괄적 인 진단으로 시작하는 것입니다. 다행히도 성능 병목 현상을 찾는 데 도움이되는 CSS 진단 도구가 많이 있습니다. 먼저 웹 브라우저의 DevTools를 사용하여 자산 로딩 속도를 확인할 수 있습니다. 대부분의 브라우저에서 F12 버튼을 눌러 DevTools를 열 수 있습니다.
예를 들어, Firefox DevTools에서 "네트워크"탭을 사용하여 페이지에로드 된 모든 CSS 파일의 크기와로드 시간을 확인할 수 있습니다. 캐싱을 사용하거나 사용하지 않고 CSS로드 속도를 테스트 할 수도 있습니다. DevTools는 Google 글꼴 파일 및 타사 CDN에서 추출 된 CSS 리소스와 같은 외부 CSS도 표시하므로 이전에 알지 못했던 많은 리소스를 찾을 수 있습니다.
Google에서 제공하는 Pingdom 도구와 Lighthouse는 개발자가 웹 사이트 속도와 프런트 엔드 성능을 분석하는 데 자주 사용하는 두 가지 다른 무료 도구입니다. 예를 들어 간단한 웹 사이트 속도 테스트를 실행하는 경우 Pingdom 도구는 유용한 CSS 최적화 팁을 제공합니다.
2. CSS 파일 축소 및 압축
대부분의 웹 사이트는 여러 CSS 파일에 의존합니다. 대부분의 경우 모듈 식 CSS가 모범 사례로 간주되지만 모든 파일을로드하는 데 시간이 걸릴 수 있습니다. 그러나 이것이 바로 CSS 축소 및 압축 도구가 존재하는 이유입니다. 적절하게 사용하면 페이지로드 시간을 크게 줄일 수 있습니다.
CSS Minify와 같은 일부 온라인 도구를 사용하면 CSS 파일을 복사하여 간단한 양식에 붙여 넣어 크기를 줄일 수 있습니다. 이 유형의 도구는 소규모 프로젝트에서 잘 작동합니다. 그러나 여러 CSS 파일이있는 대규모 프로젝트의 경우이를 사용하는 것이 번거롭고 시간이 많이 걸릴 수 있습니다. 이 경우 자동화 된 솔루션을 선택하는 것이 가장 좋습니다.
오늘날 대부분의 빌드 도구를 사용하면 코드 기반에서 자동으로 압축을 수행 할 수 있습니다. 예를 들어, 기본적으로 Webpack은 모든 파일을 축소 된 패키지로 반환합니다. PostCSS에는 또한 CSS Nano와 같은 스마트 플러그인이있어 파일 크기를 줄일 수있을뿐만 아니라 다양한 대상 최적화를 통해 실행할 수 있습니다.
3. Flexbox 및 CSS 그리드 사용
CSS를 작성할 때 여전히 기존 상자 모델에만 의존하고 여백, 패딩 및 부동 소수점을 사용하여 화면에서 항목을 정렬하는 경우 더 현대적인 레이아웃 모듈, 즉 flexbox 및 CSS Grid를 채택하는 것을 고려해야합니다. 이러한 새로운 모델을 사용하면 더 적은 코드로 복잡한 레이아웃을 구현할 수 있습니다.
오래된 기술을 사용하면 프로젝트를 수직으로 중앙에 배치하는 것과 같은 단순한 작업에도 많은 트릭과 조정을해야합니다. 그러나 이것은 flexbox와 CSS Grid의 경우가 아닙니다. 새 레이아웃 모듈을 선택하는 데 시간이 좀 걸릴 수 있지만 CSS 파일이 훨씬 작기 때문에 그만한 가치가 있습니다. 이것은 특히 flexbox의 경우에 해당됩니다. 지금까지 flexbox는 브라우저 지원이 매우 우수합니다 (현재 전 세계적으로 98.3 %).
CSS Grid에 대한 브라우저의 지원이 완전하지는 않지만 (현재 전 세계의 92.03 %를 차지함) 이전 브라우저를 지원할 필요가 없거나 백업 기능을 제공 할 의향이있는 경우에도 계속 사용할 수 있습니다.
4. @import 규칙 대신 <link> 태그 사용 **
두 가지 주요 기술을 사용하여 웹 페이지에서 CSS 파일을로드 할 수 있습니다.
<link> 태그를 사용하여 HTML 페이지의 <head> 섹션에 추가하십시오.
* @ import * CSS 규칙을 사용하여 다른 스타일 시트에서 가져옵니다.
기본 CSS 파일의 맨 위에 @import 규칙을 추가해야합니다. 대부분의 경우 글꼴 및 기타 디자인 요소와 같은 작은 리소스를로드하는 데 사용됩니다. 처음에는 이것이 좋은 해결책 인 것처럼 보였지만 <link> 태그를 사용하여 스타일 시트를 직접로드하는 HTML 페이지에 비해 브라우저가 추가 스타일 시트를로드하는 데 훨씬 더 오래 걸립니다.
HTML 페이지에 여러 CSS 파일을 추가 할 때 CSS의 특수성에주의해야합니다. 가장 일반적인 스타일 시트를 먼저 추가 한 다음보다 구체적인 스타일 시트를 선택하십시오. 나중에 추가 된 스타일 시트가 이전 CSS 파일의 규칙을 재정의하기 때문에 이렇게해야합니다. 예를 들어 다음 예제에서는 올바른 순서로 CSS 파일을 추가합니다.
<link rel = "stylesheet"href = "main.css"> <link rel = "stylesheet"href = "page.css"> <link rel = "stylesheet"href = "component.css">
5. 이미지 대신 그라디언트 및 SVG 사용
웹 페이지의 모든 이미지를로드하는 데 많은 시간이 걸릴 수 있습니다. 개발자는 외부 CDN에서 이미지를로드하거나 TinyJPG와 같은 이미지 압축 도구를 사용하는 등 다양한 이미지 최적화 기술을 사용하여 이러한 영향을 완화합니다. 이러한 솔루션은 많은 도움을 제공 할 수 있지만 대부분의 경우 기본 CSS 효과를 사용하여 많은 리소스 JPG 및 PNG 이미지를 대체 할 수 있습니다.
예를 들어 배경 이미지 대신 그라디언트를 사용할 수 있으며 배경 이미지는 사용자의 브라우저 속도를 크게 저하시킬 수 있습니다. CSS의 그라디언트 기능을 사용하여 선형, 방사형 및 반복 그라디언트를 만들 수 있습니다. 이러한 기본 CSS 기능을 사용하면 색상뿐만 아니라 그라디언트 각도도 정의 할 수 있습니다.
예를 들어 다음 규칙은 어떤 이미지보다 빠르게로드되는 멋진 그라데이션 배경을 만듭니다.
div {background : linear-gradient (45deg, lightgreen, royalblue);
}
더 복잡한 그라디언트 및 텍스처의 경우 CSSmatic (아래 표시) 및 ColorZilla와 같은 생성기를 사용할 수도 있습니다.
그래디언트 외에도 SVG (Scalable Vector Graphics)를 사용하여 기존 JPG 및 PNG 이미지를 대체 할 수 있습니다. 로드 속도가 빨라질뿐만 아니라 이미지의 한 버전 만 포함하면됩니다. SVG는 벡터 특성으로 인한 품질 손실없이 모든 크기로 확장 할 수 있기 때문입니다. 또한 일반 HTML 파일과 마찬가지로 CSS를 사용하여 SVG 스타일을 지정할 수도 있습니다.
6. 중요한 규칙을 피하십시오
尽管！important规则在某些情况下可能是天赐之物，但您仅应将其作为最后的选择。此规则从级联中创建一个异常。因此，当您在CSS声明中添加！important时，它将覆盖所有其他声明，即使是那些具有更高特异性的声明。它的语法如下所示：
h1{ margin-bottom: 20px!important;
}
如果CSS中有太多重要规则，则用户的浏览器将不得不对代码进行额外的检查，这可能会大大降低页面速度。根据经验，切勿在整个站点范围的CSS或创建主题或插件时使用！important。如果可能，请仅在要覆盖来自第三方库的CSS时使用它。
7.考虑CSS重构
尽管CSS重构很少是一件容易的事，但在许多情况下，它可以显着提高网站性能。例如，如果CSS文件太大，或者您继承了旧版代码库，或者页面加载时间很差，严重损害了转换率。CSS重构的目标是使代码更整洁，更可维护并且加载更快。
CSS重构是一个多步骤的过程，在此过程中，您需要分析CSS代码库的各个方面。您需要检查几件不同的事情，例如：
无论您有未使用或重复的CSS规则或资源，
是否可以利用Flexbox和CSS网格等更现代的技术，
是否使用过多的特异性（可以使用此视觉特异性计算器进行计算），
CSS文件的结构是否合理（例如，维护较小的文件比维护较大的文件更容易），
是否值得使用自动构建工具，
还有很多其他
在开始重构之前，还应设置可衡量的目标并选择要使用的基准，例如页面加载时间或第一个有意义的绘制，以便您可以比较它们的前后值。
同样不要忘记使用版本控制工具，例如Git。这样，如果出现任何问题，您可以返回到以前的代码版本。
包起来
您可以使用许多CSS优化技巧来改善网站的性能。它们中的大多数易于实现，但会对页面加载时间产生重大影响。更快的加载页面不仅可以增强用户体验，还可以帮助您在Google和其他搜索引擎中获得更好的排名。
CSS 최적화 모범 사례 외에도 캐싱, Google AMP 및 HTTPS 프로토콜과 같은 다른 많은 기술을 사용하여로드 속도를 개선 할 수도 있습니다.