เร่งความเร็วเว็บไซต์ของคุณด้วยตัวย่อ CSS

ตัวชี้วัดที่สำคัญของการใช้งานเว็บไซต์คือความเร็ว หรือถ้าให้เจาะจงกว่านั้นคือความเร็วที่หน้าเว็บปรากฏในหน้าต่างเบราว์เซอร์ของผู้เข้าชม มีหลายปัจจัยที่ส่งผลต่อความเร็ว รวมถึงความเร็วของเว็บเซิร์ฟเวอร์ การเชื่อมต่ออินเทอร์เน็ตของผู้เข้าชม และขนาดของไฟล์ที่เบราว์เซอร์ต้องดาวน์โหลด แม้ว่าคุณจะควบคุมความเร็วของเซิร์ฟเวอร์และการเชื่อมต่อไม่ได้ แต่คุณสามารถควบคุมขนาดของไฟล์ที่ประกอบเป็นหน้าเว็บของเว็บไซต์ของคุณได้

เพื่อให้เว็บไซต์เร็วขึ้น ผู้สร้างเว็บจะบีบอัดและเพิ่มประสิทธิภาพไฟล์ภาพทุกไฟล์บนเว็บไซต์ของตนเป็นประจำ ซึ่งมักจะทำให้คุณภาพของภาพลดลงเพื่อลดขนาดไฟล์ลงไม่กี่เปอร์เซ็นต์ เนื่องจากสไตล์ชีต CSS เป็นไฟล์ข้อความธรรมดาและมีขนาดค่อนข้างเล็กเมื่อเทียบกับรูปภาพ ผู้สร้างเว็บจึงไม่ค่อยพิจารณาดำเนินการเพื่อลดขนาดไฟล์สไตล์ชีต CSS ของตน อย่างไรก็ตาม ด้วยการใช้ตัวย่อ CSS และเทคนิคง่ายๆ อื่นๆ คุณสามารถลดขนาดสไตล์ชีทของคุณได้อย่างมาก ในการทดสอบสไตล์ชีทของฉันเองแบบไม่เป็นทางการ ฉันลดขนาดไฟล์ลงประมาณ 25-50%

ใช้คุณสมบัติตัวย่อของ CSS:
คุณสมบัติชวเลข CSS เป็นชื่อคุณสมบัติพิเศษที่ใช้เพื่อแทนที่คุณสมบัติที่เกี่ยวข้องหลายชุด ตัวอย่างเช่น คุณสมบัติการเติมจะย่อมาจาก padding-top, padding-right, padding-bottom และ padding-left

การใช้คุณสมบัติชวเลขช่วยให้คุณสามารถบีบอัดคู่คุณสมบัติ/แอตทริบิวต์หลายคู่ให้เป็นโค้ดบรรทัดเดียวในสไตล์ชีต CSS ตัวอย่างเช่น พิจารณารหัสต่อไปนี้:

.sample1 {
ขอบบน: 15px;
ขอบขวา: 20px;
ขอบล่าง: 12px;
ขอบซ้าย: 24px;
ช่องว่างด้านบน: 5px;
ช่องว่างภายในขวา: 10px;
ช่องว่างภายในด้านล่าง: 4px;
ช่องว่างภายในซ้าย: 8px;
ขอบด้านบนกว้าง: บาง;
สไตล์ขอบด้านบน: ทึบ;
ขอบสีด้านบน: #000000;
-

การแทนที่ด้วยคุณสมบัติตัวย่อบางอย่างสามารถลดโค้ดได้ดังต่อไปนี้ ผลกระทบที่แท้จริงของทั้งสองจะเหมือนกันทุกประการ:

.sample1 {
ระยะขอบ: 15px 20px 12px 24px;
การขยาย: 5px 10px 4px 8px;
ขอบบน: ทึบบาง #000000;
-

โปรดทราบว่าคุณสมบัติแบบย่อยังมีคุณสมบัติหลายรายการ ซึ่งแต่ละคุณสมบัติสอดคล้องกับคุณสมบัติปกติที่รวมกันเป็นคุณสมบัติแบบย่อ คุณสมบัติถูกคั่นด้วยช่องว่าง

เมื่อคุณสมบัติมีค่าใกล้เคียงกัน เช่น สำหรับการวัดเชิงเส้นของคุณสมบัติระยะขอบ ลำดับของคุณสมบัติที่เป็นไปตามคุณสมบัติตัวย่อเป็นสิ่งสำคัญ ลำดับของแอตทริบิวต์เริ่มต้นที่ด้านบน (เส้นขอบด้านบนว่างเปล่า) และดำเนินต่อไปตามเข็มนาฬิการอบๆ กล่อง

หากคุณสมบัติทั้งหมดของคุณสมบัติตัวย่อเหมือนกัน คุณสามารถแสดงรายการคุณสมบัติเดียวและคัดลอกไว้ข้างหน้าสี่ครั้ง ดังนั้นคุณสมบัติสองประการต่อไปนี้จึงเท่ากัน:

ระยะขอบ: 5px 5px 5px 5px;

ระยะขอบ: 5px;

ในทำนองเดียวกัน คุณสามารถแสดงคู่คุณสมบัติด้านบน/ล่าง และขวา/ซ้ายได้โดยใช้คุณสมบัติสองรายการที่ตามหลังระยะขอบของเส้นขอบหรือคุณสมบัติระยะห่าง

ระยะขอบ: 5px 10px 5px 10px;

ระยะขอบ: 5px 10px;

ลำดับของแอตทริบิวต์ไม่สำคัญเมื่อเป็นค่าที่แตกต่างกัน ดังนั้น คุณสมบัติ เช่น สีของเส้นขอบ ลักษณะเส้นขอบ และความกว้างของเส้นขอบ สามารถเป็นไปตามคุณสมบัติเค้าร่างในลำดับใดก็ได้ การละเว้นแอตทริบิวต์จะเทียบเท่ากับการละเว้นคุณสมบัติทั่วไปที่เกี่ยวข้องจากกฎสไตล์

รายการคุณสมบัติตัวย่อ CSS

ด้านล่างนี้คือรายการคุณสมบัติตัวย่อ CSS และคุณสมบัติทั่วไปที่แสดง

พื้นหลัง: การแนบพื้นหลัง, สีพื้นหลัง, ภาพพื้นหลัง, ตำแหน่งพื้นหลัง, การทำซ้ำพื้นหลัง
เส้นขอบ: สีของเส้นขอบ รูปแบบเส้นขอบ ความกว้างของเส้นขอบ
เส้นขอบด้านล่าง (เส้นขอบด้านล่าง): สีเส้นขอบด้านล่าง, ลักษณะเส้นขอบด้านล่าง, ความกว้างของเส้นขอบด้านล่าง
ขอบซ้าย (ขอบซ้าย): สีขอบซ้าย, ลักษณะขอบซ้าย, ความกว้างของขอบซ้าย
เส้นขอบขวา (เส้นขอบด้านขวา): สีเส้นขอบด้านขวา, รูปแบบเส้นขอบด้านขวา, ความกว้างของเส้นขอบด้านขวา
เส้นขอบด้านบน (เส้นขอบด้านบน): สีเส้นขอบด้านบน รูปแบบเส้นขอบด้านบน ความกว้างของเส้นขอบด้านบน
คิว (คิวเสียง): ก่อนคิวหลังคิว
ฟอนต์: ฟอนต์, ขนาดฟอนต์, ลักษณะฟอนต์, น้ำหนักฟอนต์, รูปแบบฟอนต์, ความสูงของบรรทัด, การปรับขนาดฟอนต์, การยืดฟอนต์
สไตล์รายการ: รูปภาพสไตล์รายการ, ตำแหน่งสไตล์รายการ, ประเภทสไตล์รายการ
ขอบ (ว่าง): ขอบบน, ขอบขวา, ขอบล่าง, ขอบซ้าย
โครงร่าง: สีโครงร่าง รูปแบบโครงร่าง ความกว้างของโครงร่าง
ช่องว่างภายใน: ช่องว่างด้านบน ช่องว่างด้านขวา ช่องว่างด้านล่าง ช่องว่างด้านซ้าย
หยุดชั่วคราว (หยุดชั่วคราว): หยุดชั่วคราวหลังจาก หยุดชั่วคราว ลดพื้นที่สีขาว

อีกวิธีในการลดขนาดของสไตล์ชีต CSS คือการลบช่องว่างที่ไม่จำเป็นส่วนใหญ่ออกจากเอกสาร กล่าวอีกนัยหนึ่ง ให้แบ่งแต่ละกฎออกเป็นโค้ดบรรทัดเดียว นั่นคือ ลบการขึ้นบรรทัดใหม่และการเยื้องที่เดิมแทรกลงในโค้ดเพื่อแยกคุณสมบัติ/แอตทริบิวต์แต่ละรายการลงในบรรทัดที่แยกจากกัน

ตัวอย่างเช่น ตัวอย่างโค้ดต่อไปนี้เหมือนกันในเนื้อหา แต่ตัวอย่างที่สองมีการปรับปรุงมากกว่ามาก:

h1 {
ขนาดตัวอักษร: x-large;
น้ำหนักตัวอักษร: ตัวหนา;
สี: #FF0000;
-

h1 {ขนาดตัวอักษร: x-large; ตัวอักษรน้ำหนัก: สีหนา: #FF0000}

ลบความคิดเห็น

การลบความคิดเห็นออกจากโค้ด CSS ของคุณเป็นอีกวิธีหนึ่งในการลดขนาดไฟล์ แม้ว่าความคิดเห็นจะมีประโยชน์สำหรับการอ่านโค้ด แต่ก็ไม่ได้ช่วยให้เบราว์เซอร์สร้างหน้าเว็บของคุณได้ เครื่องมือสร้างเว็บจำนวนมากคุ้นเคยกับการแสดงความคิดเห็นโค้ดทุกบรรทัด หรืออย่างน้อยทุกคำสั่งกฎ ความคิดเห็นที่เอื้อเฟื้อเช่นนี้แทบไม่จำเป็นในสไตล์ชีต CSS เนื่องจากคุณสมบัติและคุณสมบัติ CSS ส่วนใหญ่อ่านและเข้าใจได้ง่าย หากคุณใช้ชื่อที่มีความหมายสำหรับคลาส, ID และตัวเลือกอื่นๆ คุณสามารถกำจัดความคิดเห็นส่วนใหญ่ได้ ในขณะที่ยังคงรักษาโค้ดของคุณให้อ่านและบำรุงรักษาได้

h1 { /* ส่วนหัว 1 สไตล์*/
ขนาดตัวอักษร: x-large; /* x-large */
น้ำหนักตัวอักษร: ตัวหนา; /* ตัวหนา */
สี: #FF0000; /* แดง */
-

การใช้คุณสมบัติชวเลข การลบช่องว่างที่ไม่มีประโยชน์ออก และการละเว้นความคิดเห็นสามารถลดขนาดไฟล์สไตล์ชีต CSS ของคุณได้อย่างมาก สิ่งนี้จะส่งผลเล็กๆ น้อยๆ แต่อาจเห็นได้ชัดเจนในเป้าหมายโดยรวมในการเร่งความเร็วเว็บไซต์ของคุณ