유동 변수를 사용하여 구축된 Shopify CSS를 최소화하는 가장 쉬운 방법

Shopify Liquid CSS 파일용 스크립트 축소

우리는 구축했다 쇼피파이 플러스 실제 테마 파일에 스타일에 대한 여러 설정이 있는 클라이언트용 사이트입니다. 스타일을 쉽게 조정하는 데는 정말 유리하지만 정적 CSS 스타일 시트(CSS) 파일을 쉽게 작게하다 (크기를 줄입니다). 때로는 이것을 CSS라고 합니다. 압축압축하는 당신의 CSS.

CSS 축소란 무엇입니까?

스타일시트에 작성할 때 특정 HTML 요소에 대한 스타일을 한 번 정의한 다음 여러 웹 페이지에서 계속해서 사용합니다. 예를 들어, 내 글꼴이 내 사이트에서 어떻게 보이는지에 대한 몇 가지 세부 사항을 설정하려는 경우 CSS를 다음과 같이 구성할 수 있습니다.

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

해당 스타일시트 내에서 각 공백, 줄바꿈 및 탭은 공간을 차지합니다. 그것들을 모두 제거하면 CSS가 축소되면 해당 스타일시트의 크기를 40% 이상 줄일 수 있습니다! 결과는 이…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS 축소 사이트 속도를 높이고 CSS 파일을 효율적으로 압축하는 데 도움이 되는 여러 도구가 온라인에 있는 경우 필수입니다. 그냥 검색 CSS 도구 압축 or CSS 도구 축소 온라인.

큰 CSS 파일과 CSS를 축소하여 얼마나 많은 공간을 절약할 수 있는지 상상해 보십시오… 일반적으로 예산의 최소 20%, 최대 40%가 될 수 있습니다. 사이트 전체에서 참조되는 더 작은 CSS 페이지를 사용하면 모든 단일 페이지의 로드 시간을 절약하고 사이트 순위를 높이고 참여도를 높이고 궁극적으로 전환 측정항목을 개선할 수 있습니다.

물론 단점은 압축된 CSS 파일에 한 줄이 있어서 문제를 해결하거나 업데이트하기가 매우 어렵다는 것입니다.

Shopify CSS 액체

Shopify 테마 내에서 쉽게 업데이트할 수 있는 설정을 적용할 수 있습니다. 코드를 파헤치는 대신 시각적으로 테마를 사용자 지정할 수 있도록 사이트를 테스트하고 최적화할 때 이 작업을 수행하는 것을 좋아합니다. 따라서 스타일시트는 Liquid(Shopify의 스크립팅 언어)로 구축되었으며 스타일시트를 업데이트하기 위해 변수를 추가합니다. 다음과 같이 보일 수 있습니다.

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

이것은 잘 작동하지만 스크립트가 유동 태그를 이해하지 못하기 때문에 단순히 코드를 복사하고 온라인 도구를 사용하여 코드를 축소할 수 없습니다. 실제로 시도하면 CSS가 완전히 파괴됩니다! 좋은 소식은 그것이 Liquid로 구축되었기 때문에… 실제로 스크립팅을 사용하여 출력을 최소화할 수 있다는 것입니다!

Liquid의 Shopify CSS 축소

Shopify를 사용하면 변수를 쉽게 스크립팅하고 출력을 수정할 수 있습니다. 이 경우 실제로 CSS를 콘텐츠 변수로 래핑한 다음 조작하여 모든 탭, 줄 반환 및 공백을 제거할 수 있습니다! 에서 이 코드를 찾았습니다. 쇼피파이 커뮤니티팀(테일리) 그리고 그것은 훌륭하게 작동했습니다!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

따라서 위의 예에서 내 theme.css.liquid 페이지는 다음과 같습니다.

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

코드를 실행하면 출력 CSS는 다음과 같이 완벽하게 축소됩니다.

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}