프로젝트에서 '낭비적인' CSS 피하기

웹 디자이너는 자신의 창작물을 최적화하기 위해 끊임없이 노력하는 것 같습니다. 단기적으로는 성능에 이점이 있습니다. 장기적으로 유지 관리도 단순화할 수 있습니다.

종종 이는 이미지 최적화, 페이지 캐싱 구현 및 CDN(콘텐츠 전송 네트워크)을 통한 파일 제공을 의미합니다. 모두 효과적인 조치입니다. 그러나 충분한 관심을 받지 못하는 한 가지 항목은 웹사이트 CSS의 잠재적인 팽창입니다.

스타일시트를 축소하거나 CDN을 통해 제공할 수 있지만 더 많은 작업을 수행할 수 있습니다. 특히, 사용되지 않는 불필요한 마크업을 제거하고 여전히 관련성이 높은 스타일을 강화합니다.

이것은 빌드 프로세스의 맨 처음부터 수행하는 것이 가장 좋습니다. 그러나 기존 웹사이트의 부하를 줄이는 것도 가능합니다. 더 빠른 웹 사이트를 만들 수 있는 몇 가지 도구 및 기술과 함께 관련된 문제를 살펴보겠습니다.

테마 및 프레임워크에 내장된 블로트 다루기

웹 사이트는 기본적으로 처음부터 만들어졌습니다. 이것은 디자이너가 필요한 스타일과 스크립트만 포함할 수 있다는 점에서 훌륭한 접근 방식이었습니다. 주의해서 수행하면 이 프로세스로 인해 웹 사이트가 미세하게 조정될 수 있습니다.

물론 많은 사람들이 그 관행을 포기한 데에는 여러 가지 이유가 있습니다. 시간과 예산의 제약 측면에서 비효율적입니다.

최신 웹 사이트는 사전 구축된 제품 위에 구축되는 경우가 많습니다. Bootstrap이나 정교한 WordPress 테마와 같은 CSS 프레임워크일 수 있습니다. 어떤 경우에는 CMS 테마에 프레임워크가 포함될 수도 있습니다.

이 제품들은 모두에게 맞는 사이즈로 제작되었습니다. 필요할 수 있는 모든 것을 포함하면 개발 속도가 훨씬 빨라집니다. 불행히도 성능에 미치는 영향에 대해서도 마찬가지입니다.

그렇다면 상황을 개선하기 위해 무엇을 할 수 있습니까?

가능한 경우 구성 요소 기반 또는 경량 프레임워크 사용

이론적으로 팽창을 피하면서 프레임워크의 이점을 모두 얻을 수 있습니다. 이는 특정 기능을 로드하면서 다른 기능은 제외할 수 있는 구성 요소 기반 패키지를 사용하여 달성할 수 있습니다. 앞서 언급한 부트스트랩은 이러한 유형의 사용자 정의를 어느 정도 허용합니다.

또 다른 대안은 기본 스타일을 제공하고 그 위에 빌드할 것이라고 가정하는 Tailwind CSS입니다. 완성품이 아닌 훌륭한 출발점을 찾고 있다면 이것이 적합할 수 있습니다.

프레임워크를 사용하는 데는 아무런 문제가 없습니다. 그러나 다음 중 하나를 찾으십시오.) 로드할 구성 요소를 선택하고 선택할 수 있습니다. b) 쉽게 사용자 정의할 수 있는 베어본 스타일시트를 제공합니다. 어느 쪽이든, 프로젝트는 감소된 부하의 이점을 얻을 것입니다.

CMS 테마로 무엇을 해야 합니까?

상용 WordPress 테마와 같은 제품은 필요 여부와 상관없이 스타일이 많이 포함되어 있기 때문에 까다로울 수 있습니다.

특정 테마가 원하지 않는 스타일시트를 대기열에서 빼내기 쉬운 정도로 잘 구성될 가능성이 있습니다. 몇 번의 클릭으로 이 작업을 수행할 수 있는 테마 옵션 패널이 있을 수도 있습니다. 그러나 이것은 규칙보다 예외일 가능성이 더 큽니다.

부풀려진 테마를 피하는 가장 좋은 방법은 나만의 테마를 만드는 것입니다. 예를 들어, WordPress 스타터 테마는 사용자 정의할 수 있는 몇 가지 기본 CSS를 제공합니다. 이것은 더 간결한 스타일시트를 보장하는 데 도움이 되며 CMS와 관련된 약간의 오버헤드를 제거합니다.

기존 스타일시트 정리

기존 웹사이트로 초점을 변경하여 CSS 정리 및 리팩토링을 두 가지 방법 중 하나로 수행할 수 있습니다.

수동으로 스타일 검토

좋아하는 코드 편집기를 실행하고 사이트의 스타일시트를 여는 것은 항상 좋은 출발점입니다. 예, 지루한 경험이 될 수 있습니다. 그러나 덜 매달린 과일을 관리하는 효과적인 방법이기도 합니다.

CSS의 모든 줄을 자세히 조사할 필요는 없습니다. 대신, 아이디어는 사용되지 않거나 가능한 한 효율적이지 않은 항목을 찾는 것입니다.

예를 들어 플러그인 스타일을 덮어쓰는 몇 가지 사용자 정의 스타일이 있는 WordPress 웹 사이트를 실행한다고 가정해 보겠습니다. 특정 플러그인을 더 이상 사용하지 않는다면? 이 경우 스타일을 쉽게 제거할 수 있습니다.

또는 겨울 방학 때처럼 간헐적으로만 사용하는 스타일이 있을 수 있습니다. 이러한 스타일을 별도의 파일로 옮기고 필요할 때만 호출하는 것이 좋습니다.

그런 다음 잘 작성되지 않은 CSS 선택기가 있습니다. 더 이상 필요하지 않은 브라우저 접두사 또는 불필요한 중복 속성이 많이 있을 수 있습니다. 이것은 청소를 위해 익은 지역입니다.

사이트 디자인이 몇 년 이상 된 경우 너무 많은 스타일을 찾을 수 있다는 사실에 놀랄 수 있습니다.

자동화된 도구 사용

사이트(또는 적어도 일부)를 스캔하고 사용하지 않은 CSS 목록을 보고하는 도구가 많이 있습니다. 그러나 완벽을 기다리는 동안 숨을 참지 마십시오.

자동화된 접근성 도구와 마찬가지로 사용하지 않는 CSS 스캐너는 너무 많은 정보만 제공할 수 있습니다. 따라서 한 알의 소금으로 결과를 가져 와서 지침으로 사용하는 것이 가장 좋습니다. 질문에 대한 최종 답변이 아닙니다.

CSS-Tricks의 Chris Coyier는 체크아웃할 가치가 있는 이 특정 문제에 대한 뛰어난 기사를 작성했습니다. 그는 이러한 도구 중 일부를 테스트할 뿐만 아니라 미디어 쿼리와 같이 당면한 더 큰 문제도 살펴봅니다.

그러나 이러한 도구 중 하나 이상을 시도하는 데 관심이 있는 경우 가장 인기 있는 몇 가지 옵션은 다음과 같습니다.

• 짓빗
• 퍼지 CSS
• 퓨리파이CSS
• 미사용 CSS

자동화된 도구와 수동 검토의 조합이 최선의 조치일 것입니다. 두 가지를 모두 수행하면 잠재적인 성능 최적화에 대한 보다 완전한 그림을 얻을 수 있습니다. 모든 항목을 포착할 수는 없지만 측정 가능한 영향을 미칠 수 있는 기회는 여전히 있습니다. GTmetrix와 같은 도구를 사용하여 테스트 전후에 몇 가지 작업을 수행하여 결과를 확인할 수 있습니다.

CSS와 관련하여: 낭비하지 말고 원하지 않는

특히 기성 CSS 프레임워크를 사용할 때 스타일시트가 얼마나 커질 수 있는지는 놀랍습니다. 물론, 작가가 스타일링 요소에 대해 많은 노력을 기울인 것은 좋은 일입니다. 동시에 페이지 렌더링 및 로드 시간과 관련하여 테이블에 많은 것을 남깁니다.

이것은 프로젝트 초기부터 주의를 기울일 가치가 있는 것입니다. 스타일시트의 무게를 줄임으로써 사이트에서 마지막 한 방울의 최적화를 짜내는 데 도움이 됩니다.

귀하의 웹사이트가 이미 세상에 공개되어 있는 경우에도 여전히 긍정적인 조치를 취할 수 있습니다. CSS를 검토하고 간소화하거나 제거할 항목을 찾습니다. 많은 자동화 도구 중 하나를 활용하여 놓쳤을 수 있는 항목을 찾으십시오.

결론은 CSS를 필수 요소로 줄이는 것은 완벽한 프로세스가 아니라는 것입니다. 그러나 여전히 시간과 노력의 가치가 있습니다.