ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະຫຼຸດຜ່ອນ Shopify CSS ຂອງທ່ານທີ່ສ້າງຂຶ້ນໂດຍໃຊ້ຕົວແປຂອງແຫຼວ
ພວກເຮົາກໍ່ສ້າງອອກ a ShopifyPlus ເວັບໄຊທ໌ສໍາລັບລູກຄ້າທີ່ມີຈໍານວນການຕັ້ງຄ່າສໍາລັບຮູບແບບຂອງເຂົາເຈົ້າຢູ່ໃນໄຟລ໌ຫົວຂໍ້ຕົວຈິງ. ໃນຂະນະທີ່ມັນເປັນປະໂຫຍດແທ້ໆສໍາລັບການປັບຮູບແບບໄດ້ຢ່າງງ່າຍດາຍ, ມັນຫມາຍຄວາມວ່າທ່ານບໍ່ມີແຜ່ນແບບ cascading ແບບຄົງທີ່ (CSS) ໄຟລ໌ທີ່ທ່ານສາມາດໄດ້ຢ່າງງ່າຍດາຍ mini (ຫຼຸດຂະຫນາດ). ບາງຄັ້ງອັນນີ້ເອີ້ນວ່າ CSS compression ແລະ ການບີບອັດ CSS ຂອງທ່ານ.
CSS Minification ແມ່ນຫຍັງ?
ເມື່ອທ່ານກໍາລັງຂຽນໃສ່ stylesheet, ທ່ານກໍານົດຮູບແບບສໍາລັບອົງປະກອບ 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, ທ່ານສາມາດນໍາໃຊ້ການຕັ້ງຄ່າທີ່ທ່ານສາມາດອັບເດດໄດ້ຢ່າງງ່າຍດາຍ. ພວກເຮົາມັກເຮັດສິ່ງນີ້ໃນຂະນະທີ່ພວກເຮົາທົດສອບແລະເພີ່ມປະສິດທິພາບເວັບໄຊທ໌ເພື່ອໃຫ້ພວກເຮົາສາມາດປັບແຕ່ງຫົວຂໍ້ຕາມສາຍຕາແທນທີ່ຈະຂຸດຄົ້ນລະຫັດ. ດັ່ງນັ້ນ, Stylesheet ຂອງພວກເຮົາແມ່ນສ້າງຂຶ້ນດ້ວຍ Liquid (ພາສາສະຄຣິບຂອງ Shopify) ແລະພວກເຮົາເພີ່ມຕົວແປເພື່ອອັບເດດ Stylesheet. ມັນອາດຈະເບິ່ງຄືວ່ານີ້:
{%- 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… ຕົວຈິງແລ້ວທ່ານສາມາດນໍາໃຊ້ scripting ເພື່ອຫຼຸດຜ່ອນຜົນຜະລິດ!
Shopify CSS Minification ໃນ Liquid
Shopify ຊ່ວຍໃຫ້ທ່ານສາມາດປ່ຽນຕົວແປສະຄິບໄດ້ງ່າຍແລະດັດແປງຜົນໄດ້ຮັບ. ໃນກໍລະນີນີ້, ພວກເຮົາໃນຕົວຈິງສາມາດຫໍ່ CSS ຂອງພວກເຮົາເຂົ້າໄປໃນຕົວປ່ຽນແປງເນື້ອໃນແລະຫຼັງຈາກນັ້ນການຈັດການມັນເພື່ອເອົາແຖບທັງຫມົດ, ການກັບຄືນເສັ້ນ, ແລະຊ່ອງຫວ່າງ! ຂ້ອຍພົບລະຫັດນີ້ຢູ່ໃນ
ຊຸມຊົນ Shopify ຈາກ ທິມ (ຫາງລີ) ແລະມັນເຮັດວຽກ brilliantly!{%- 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}