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

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

ฉันไม่เคยพิจารณาตัวเลือกนี้เนื่องจากสิ่งเดียวที่ฉันอ่านบนอินเทอร์เน็ตคือการลดจำนวนคำขอ HTTP (บล็อก) เป็นกุญแจสำคัญในหน้าเว็บที่เร็วขึ้น (แม้ว่า Google Pagespeed Insights จะไม่ได้ระบุ1นี้อย่างชัดเจน)

ฉันเห็นเหตุผลสองสามข้อที่ว่าทำไมการเทียบกันจะไม่ปรับปรุงประสิทธิภาพหรือมีความสำคัญเพียงเล็กน้อย (เทียบกับประโยชน์ของการใช้คำขอ HTTP ที่น้อยลง):

การตั้งค่าการเชื่อมต่อใหม่นั้นมีราคาแพง ในขณะที่การตั้งค่าการเชื่อมต่อหลายรายการสามารถทำได้ในแบบคู่ขนานเบราว์เซอร์จะใช้การเชื่อมต่อประมาณ 4-6 ครั้ง (ขึ้นอยู่กับเบราว์เซอร์) ดังนั้นการดาวน์โหลด CSS แบบขนานจะเป็นการบล็อกการดาวน์โหลดเนื้อหาอื่น ๆ เช่น JavaScript และรูปภาพ
การตั้งค่าการเชื่อมต่อ HTTPS จะใช้ข้อมูลพิเศษบางอย่าง ฉันได้อ่านสิ่งนี้อาจเป็นข้อมูลไม่กี่ KB นี่คือข้อมูลพิเศษบางอย่างที่ต้องส่งผ่านสายแทน CSS ที่เราต้องการส่งจริง
เนื่องจากอัลกอริธึมเริ่มช้าของ TCP ยิ่งมีการส่งข้อมูลผ่านการเชื่อมต่อมากเท่าไหร่การเชื่อมต่อก็จะยิ่งเร็วขึ้นเท่านั้น ดังนั้นการเชื่อมต่อที่มีอายุมากกว่าจะส่งข้อมูลได้เร็วกว่าการเชื่อมต่อใหม่ ดูตัวอย่างโปรโตคอล SPDY ที่ใช้การเชื่อมต่อเดียวเพื่อปรับปรุงเวลาในการโหลดหน้าเว็บ
TCP เป็นสิ่งที่เป็นนามธรรม: ยังคงมี (การเชื่อมต่อปกติ) เพียงหนึ่งการเชื่อมต่อพื้นฐาน ดังนั้นในขณะที่ใช้หลายคำขอข้อมูลที่ส่งผ่านสายอาจไม่จำเป็นต้องได้รับประโยชน์จากการเชื่อมต่อที่หลากหลายเพื่อปรับปรุงความเร็ว
การเชื่อมต่ออินเทอร์เน็ตนั้นไม่น่าเชื่อถือโดยเฉพาะบนมือถือ คำขอหนึ่งอาจเสร็จเร็วกว่าคำขออื่นอย่างมาก การใช้หลายคำขอสำหรับ CSS หมายถึงการแสดงผลหน้าเว็บถูกบล็อกจนกว่าคำขอสุดท้ายจะเสร็จซึ่งอาจช้ากว่าการเชื่อมต่อโดยเฉลี่ย

ดังนั้นจะมีประโยชน์ใด ๆ ในการปรับแต่งคำร้องขอ HTTP สำหรับไฟล์ CSS หรือไม่?

หมายเหตุ / อัปเดต: ไฟล์ CSS ทั้งหมดเป็นการปิดกั้นการแสดงผล ไฟล์ CSS ที่ไม่ได้ถูกย้ายไปอยู่นอกเส้นทางที่สำคัญ

css performance

— ayke
แหล่งที่มา

ฉันเห็นบางอย่างในรหัสของ etsy เป็นไซต์งานฝีมือที่พวกเขาแนะนำให้ใช้โดเมนที่ไม่มีเนื้อหาสำหรับวัตถุคงที่ (css, imgs, js) ปรากฎว่าเบราว์เซอร์สมัยใหม่ทำงานได้ยอดเยี่ยมด้วยการดาวน์โหลดแบบขนานจากโดเมนเดียว สำหรับหลาย ๆ ไฟล์จากโดเมนเดียวกัน (10 css ไฟล์เทียบกับ 1 ใหญ่) ฉันคิดว่าคุณจะรวมและลดขนาดไฟล์ได้ดีกว่าและทำให้มันเป็นคำขอเดียว พิเศษกับ CSS ที่ไซต์ของคุณอาจต้องการ css ทั้งหมดเพื่อดูให้ถูกต้อง

— แฟรงค์

เบราว์เซอร์ดาวน์โหลดพร้อมกันตามจำนวนการเชื่อมต่อที่พร้อมใช้งาน เป็นไปตาม HTML ที่เบราว์เซอร์อ่านอยู่

— อาทิตย์

ไฟล์ CSS ที่ลิงก์จากเอกสาร HTML จะถูกเพิ่มในคิวการดาวน์โหลดแบบขนานเนื่องจาก HTML จะถูกวิเคราะห์ สิ่งสำคัญคือลิงก์ JavaScript ที่ไม่ใช่แบบอะซิงโครนัสจะบล็อกตัวแยกวิเคราะห์ HTML ป้องกันไม่ให้เพิ่มแท็กในคิวการดาวน์โหลดในภายหลังจนกว่าจะมีการดาวน์โหลด JavaScript แยกวิเคราะห์และดำเนินการ JavaScript ^[1]

นี่คือตัวอย่างที่บังคับให้เบราว์เซอร์ดาวน์โหลดไฟล์สามในสี่ไฟล์ตามลำดับ (อย่างน้อยสามรอบ):

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

นี่คือตัวอย่างที่ทำใหม่เพื่อให้ดาวน์โหลดทั้ง 4 ไฟล์แบบขนาน (อย่างน้อยหนึ่งรอบการเดินทาง):

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

หมายเหตุอื่น: ไฟล์ CSS คือการปิดกั้นการแสดงผล (โดยค่าเริ่มต้น) ไม่ใช่การแยกวิเคราะห์ข้อความ หน้าจะยังคงถูกแยกวิเคราะห์และสร้าง DOM แต่การแสดงผลจะไม่เริ่มจนกว่า CSSOM จะถูกสร้างขึ้น

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

ดังนั้นจึงไม่มีประโยชน์ชัดเจนที่จะขนานดาวน์โหลด CSS ของคุณเพียงเพื่อประโยชน์ของตัวเอง แต่เช่นเคยวัดและทดสอบ!

สำหรับการอ่านเพิ่มเติมฉันแนะนำบทความเหล่านี้ใน 'พื้นฐานเว็บ: การเพิ่มประสิทธิภาพ' จาก Google: https://developers.google.com/web/fundamentals/performance/

[1]: นี่เป็นการละเว้นคุณลักษณะการแยกวิเคราะห์แบบเจาะจงของเบราว์เซอร์บางตัว:

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=en-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

— Robert K. Bell
แหล่งที่มา

อ่านดีอีกเกี่ยวกับวิธีการดาวน์โหลดสคริปต์ของคุณพร้อมกันอยู่ที่นี่: stackoverflow.com/questions/436411/…

— joshreesjones

เป็นที่น่าสังเกตว่าไฟล์. js ทั้งหมดควรมีการเชื่อมโยงในตอนท้ายของรหัสก่อนแท็กเนื้อความการปิดวิธีที่พวกเขาจะไม่ปิดกั้นอะไร

— Chaoley

คุณสามารถทำอย่างละเอียด "ดังนั้นไม่มีประโยชน์ที่ชัดเจนในการขนานดาวน์โหลด CSS ของคุณเพียงเพื่อประโยชน์ของตัวเอง"? ฉันไม่สามารถหาคำตอบข้างต้นได้

— gaurav5430

@ gaurav5430 ดูเหมือนจะไม่มีเหตุผลที่ดีในการแยกไฟล์ css นอกเหนือจากการปรับเวลาการ

— Robert K. Bell