ลดขนาดไฟล์ CSS เร่งโหลดหน้าเร็วขึ้น Credit: ลดขนาดไฟล์ CSS เร่งโหลดหน้าเร็วขึ้น | kruSAK Under Creative Commons License: Attribution

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

หากใครต้องการลดขนาดไฟล์ CSS ในบล็อกของเรา ทำตามขั้นตอน ดังนี้ครับ

1. สำหรับ WordPress ล็อกอินเข้า Dashboard แล้วไปในส่วนของ รูปแบบบล็อก (Themes)เลือกเมนู ผู้แก้ไข(Editor) เพื่อแก้ไข Themes

2. เลือกไฟล์ CSS ที่ใช้งาน ปกติเมื่อคลิกตรงเมนู ‘ผู้แก้ไข’ แล้ว จะเข้าสู่หน้า แก้ไข Themes หน้าที่โหลดขึ้นมาโดยปริยายคือหน้า Style.css ของธีมที่เราใช้งานอยู่ แต่ถ้าธีมที่เราใช้งานมีโทนสี หรือรูปแบบให้เลือกด้วย ธีมนั้นก็จะมีไฟล์ CSS หลายไฟล์ เราก็ต้องดูครับว่าธีมที่เราใช้งานอยู่เราเลือกใช้โทนสีอะไร รูปแบบไหน ไฟล์ css ชื่ออะไร อย่างเช่น ผมใช้ธีมที่มีโทนสีแดง ไฟล์ CSS ของที่ธีมจะที่ใช้มีชื่อว่า Style-red.css เราก็เลือกไฟล์นี้เพื่อทำการบีบอัดมันให้เล็กลง

3. ทำการคัดลอก (copy) โค้ดไว้

4. ไปที่ Arantius.com

5. นำโค้ดที่คัดลอกไว้ วางในส่วนของ Code in

เมื่อวางโค้ด จะเห็นตัวเลขแสดงจำนวน Byte ของไฟล์ที่เราใช้งาน เดี๋ยวมาดูว่าจะทำการลดขนาดไปได้มากแค่ไหน

ตรง Option คลิกเลือก
-Strip comments at least characters long (Note)
-One rule per line (Note)
แล้ว คลิก Compress

หลังจากคลิก Compress แล้วจะเห็นขนาดของจำนวน Bytes ลดลง

6. คัดลอกโค้ดหลังการ Compress แล้วไปวางที่ไฟล์ css ที่เราคัดลอกมาเมื่อตอนแรก
แล้วทำการอัปเดทไฟล์

สำหรับ Drupal หาไฟล์ css ได้ที่โฟล์เดอร์  Themes/ธีมที่ใช้งาน/style.css  ทำการบีบอัดก็ทำเช่นเดียวกันครับ

Credit: ลดขนาดไฟล์ CSS เร่งโหลดหน้าเร็วขึ้น | kruSAK 
Under Creative Commons License: Attribution