มีหลากหลายวิธีในการเพิ่มประสิทธิภาพของเว็บไซต์เพื่อให้มีความเร็วสูงสุด ซึ่ง 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')