ค่าใช้จ่ายของคำขอ HTTP
แต่ละคำขอ HTTP ใช้เวลา ดังนั้นไฟล์ CSS หนึ่งไฟล์จะโหลดได้เร็วกว่า ไฟล์ CSS หลายไฟล์ แม้ว่า ขนาดรวมของพวกมันจะ เท่ากันก็ตาม
ดังนั้นเพื่อเพิ่มความเร็ว ไฟล์ CSS ทั้งหมดจะถูกรวมเป็นไฟล์ทั่วไปเดียว และไฟล์ JavaScript ทั้งหมดจะถูกรวม เป็นไฟล์ทั่วไปเดียว สิ่งนี้ทำโดยใช้ ตัวรวบรวม (bundlers) เช่น Gulp หรือ Webpack
รูปภาพขนาดเล็กก็ถูกรวมเป็น รูปเดียว รูปภาพรวมดังกล่าวเรียกว่า สไปรต์
บอกหน่อยว่ามีอะไรผิดปกติกับโค้ดนี้:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">
<link rel="stylesheet" href="styles3.css">
<link rel="stylesheet" href="styles4.css">
<link rel="stylesheet" href="styles5.css">
<link rel="stylesheet" href="styles6.css">
<link rel="stylesheet" href="styles7.css">
<link rel="stylesheet" href="styles8.css">
<script src="scripts1.js"></script>
<script src="scripts2.js"></script>
<script src="scripts3.js"></script>
<script src="scripts4.js"></script>
<script src="scripts5.js"></script>
</head>
<body>
</body>
</html>
