הדרך הקלה ביותר להקטין את ה-CSS של Shopify שנבנה באמצעות משתנים נוזליים

הקטנת סקריפט לקובצי Shopify Liquid CSS

בנינו א Shopify פלוס אתר עבור לקוח שיש לו מספר הגדרות עבור הסגנונות שלו בקובץ ערכת הנושא בפועל. למרות שזה באמת יתרון להתאמה קלה של סגנונות, זה אומר שאין לך גיליונות סגנון מדורגים סטטיים (CSS) קובץ שאתה יכול בקלות minify (להקטין בגודל). לפעמים זה מכונה CSS דְחִיסָה ו כְּבִישָׁה ה-CSS שלך.

מהו הקטנת CSS?

כאשר אתה כותב לגיליון סגנונות, אתה מגדיר את הסגנון עבור רכיב HTML מסוים פעם אחת, ולאחר מכן משתמש בו שוב ושוב בכל מספר דפי אינטרנט. לדוגמה, אם אני רוצה להגדיר כמה פרטים לגבי איך הגופנים שלי נראים באתר שלי, אני יכול לארגן את ה-CSS שלי באופן הבא:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

בתוך גיליון הסגנונות הזה, כל רווח, שורה וכרטיסייה תופסים מקום. אם אני מסיר את כל אלה, אני יכול להקטין את הגודל של גיליון הסגנונות הזה ביותר מ-40% אם ה-CSS ממוזער! התוצאה היא זו…

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 Liquid

בתוך ערכת נושא של 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... אתה באמת יכול להשתמש בסקריפטים כדי לצמצם את הפלט!

Shopify CSS Minification בנוזל

Shopify מאפשרת לך בקלות לסקריפט משתנים ולשנות את הפלט. במקרה זה, אנו יכולים למעשה לעטוף את ה-CSS שלנו במשתנה תוכן ואז לתפעל אותו כדי להסיר את כל הטאבים, החזרות השורות והרווחים! מצאתי את הקוד הזה ב- קהילת Shopify החל מ- טים (טירלי) וזה עבד בצורה מבריקה!

{%- 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}