เทคนิคการเร่งความเร็ว CSS ตอนที่ 2
ผมได้พูดถึงเรื่องเทคนิคการโหลด CSS ให้เร็วที่สุดไปแล้ว ตอนนี้เราจะมาพูดถึงเทคนิคการเขียนเพื่อให้ CSS มีประสิทธิภาพมากที่สุดกัน
1.การเขียน CSS แบบ Inline จะมีประสิทธิภาพมากที่สุด แต่ผมก็ไม่แนะนำให้มีการเขียน CSS ในรูปแบบนี้นะครับ เนื่องจากโค้ดจะดูรก และทำให้หน้าเว็บมีขนาดใหญ่กว่าที่ควรจะเป็น
2.การเขียน CSS แบบ Internal หรือเป็นการเขียน CSS ลงในหน้า HTML จะมีประสิทธิภาพรองลงมา เนื่องจากการเขียน CSS ลงในหน้าเว็บโดยตรงทำให้ไม่ต้องเสียเวลาในการโหลดไฟล์ CSS แยกต่างหาก
วิธีนี้ก็เช่นกัน ถึงจะมีประสิทธิภาพดี แต่ก็ทำให้หน้าเว็บมีขนาดใหญ่ขึ้น
1.การเขียน CSS แบบ Inline จะมีประสิทธิภาพมากที่สุด แต่ผมก็ไม่แนะนำให้มีการเขียน CSS ในรูปแบบนี้นะครับ เนื่องจากโค้ดจะดูรก และทำให้หน้าเว็บมีขนาดใหญ่กว่าที่ควรจะเป็น
<div style="background-color:red"></div>2.การเขียน CSS แบบ Internal หรือเป็นการเขียน CSS ลงในหน้า HTML จะมีประสิทธิภาพรองลงมา เนื่องจากการเขียน CSS ลงในหน้าเว็บโดยตรงทำให้ไม่ต้องเสียเวลาในการโหลดไฟล์ CSS แยกต่างหาก
<style>
.red {
color: red;
}
</style>
......
<body>
<div class=red>...</div>
</body>วิธีนี้ก็เช่นกัน ถึงจะมีประสิทธิภาพดี แต่ก็ทำให้หน้าเว็บมีขนาดใหญ่ขึ้น
เราควรออกแบบหน้าเว็บ HTML ให้มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ ด้วยการแยกการโหลดไฟล์ในแต่ละส่วนออกจากกัน เนื่องจาก อุปกรณ์บางประเภทอาจไม่จำเป้นต้องใช้ CSS เพื่อการแสดงผล เช่นอุปกรณ์ช่วยอ่านสำหรับผู้ที่มีปัญหาในการมองเห็น หรือแม้แต่ Search Engine เองก็ไม่จำเป็นต้องใช้ CSS ในการเก็บข้อมูลหน้าเว็บ
ทั้ง CSS แบบ Inline และ Internal เป็นสิ่งที่ควรหลีกเลี่ยงนะครับ แต่ก็ยังสามารถใช้ได้อยู่ตามความจำเป็น เนื่องจาก CSS ทั้งสองอย่างจะมีความสำคัญกว่า CSS แบบปกติ เช่น CSS แบบ Inline จะถูกกำหนดให้มีความสำคัญที่สุด ซึ่งถ้ามี CSS แบบ Inline เมื่อไร มันจะถูกปฏิบัติก่อนเป็นลำดับแรก ในขณะที่ CSS แบบ Internal จะมีความสำคัญรองลงมา และ CSS แบบ External จะมีความสำคัญต่ำที่สุด<style>
div {
color: red;
}
</style>
<div style="color:blue">element นี้จะมีสีน้ำเงิน</div>