เทคนิคการเร่งความเร็ว CSS ตอนที่ 1

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

หากเรามี CSS หลายไฟล์ การโหลด CSS แยกทีละไฟล์จะทำให้เราเสียเวลาส่วนหนึ่งไปกับการติดต่อกับ Server เพื่อขอข้อมูลของแต่ละไฟล์ ดังนั้น เราจึงควรรวม CSS หลายๆไฟล์ให้เป็นไฟล์เพียงไฟล์เดียว เพื่อทำการโหลดเพียงครั้งเดียว
หลีกเลี่ยงการโหลด CSS โดยใช้คำสั่ง @import เนื่องจากคำสั่งนี้ทำงานช้าที่สุด (ช้ากว่าการเรียกใช้ด้วย <link rel=stylesheet ....>)
ใช้การบีบอัด CSS เช่นการใช้ GZip หรือการ Compress CSS เพื่อให้ไฟล์ CSS มีขนาดที่เล็กที่สุด
ทำการ Cache ไฟล์ CSS เพื่อให้ไม่ต้องโหลดไฟล์นี้บ่อยๆ

มีเทคนิคเล็กๆน้อยในการรวมไฟล์ โดยผมใช้ PHP ในการรวมไฟล์ได้เช่น
<link rel=stylesheet href=https://www.goragod.com/css.php>
เราสามารถเรียกใช้ไฟล์นามสกุลอื่นๆ เป็น CSS ได้ครับ ซึ่งผมกำหนดให้เรียก ไฟล์ PHP เพื่อให้ PHP ทำการรวมไฟล์ CSS หลายๆไฟล์เข้าด้วยกันแทน และยังสามารถใช้ PHP เพื่อกำหนด Cache หรือ Compress ได้อีกด้วย

<?php

// ระบุ header เพื่อให้รู้ว่าเป็น CSS

header('Content-type: text/css; charset: UTF-8');

// cache 1 เดือน

$expirse = 60 * 60 * 24 * 30;

$gmt = gmdate("D, d M Y H:i:s", time() + $expirse).' GMT';

header("Expires: $gmt");

header("Cache-Control: max-age=$expirse, must-revalidate, public");

// ใช้ PHP โหลดไฟล์ CSS

echo file_get_contents('css1.css');

echo file_get_contents('css2.css')