วิธีที่มีประสิทธิภาพในการลดแบนด์วิดธ์ (และเวลาในการโหลดหน้าเว็บ)?

อะไรคือวิธีที่มีประสิทธิภาพมากที่สุดในการลดปริมาณแบนด์วิดธ์ที่เว็บไซต์ต้องการเพื่อแสดงผลหน้า?

แคชก้าวร้าว? กำลังลดขนาด JS / CSS? Gzip? CMS? ผี?

วิธีการพื้นฐานบางอย่างที่สามารถนำไปใช้กับเว็บไซต์ใด ๆ

• บีบอัด HTML, CSS และ Javascript ของคุณด้วยdeflateหรือgzipถ้าเบราว์เซอร์ที่ทำการร้องขอสนับสนุน
• ลดขนาดจาวาสคริปต์ของคุณด้วยGoogle Closure Compiler
• ลดขนาด css ของคุณด้วยYUI Compressor

มีส่วนร่วมเล็กน้อย:

• หากหน้าหรือรูปภาพไม่น่าจะมีการเปลี่ยนแปลงให้บอกเบราว์เซอร์เพื่อแคช เว็บเซิร์ฟเวอร์ส่วนใหญ่ทำสิ่งนี้สำหรับไฟล์คงที่ดังนั้นสิ่งที่คุณต้องทำคือเพิ่มลงในสคริปต์แบบไดนามิกของคุณหากเป็นไปได้
• ผสานไฟล์ CSS และ JS ของคุณเป็นหนึ่งเดียวโดยอัตโนมัติ สิ่งนี้มีประโยชน์เนื่องจากจะลดการร้องขอ HTTP (ซึ่งมีค่าใช้จ่ายและเบราว์เซอร์ที่โง่ - และโดยที่ฉันหมายถึง Internet Explorer - จำกัด ตามคำขอเริ่มต้น 2 ครั้งต่อโดเมน)
• ย้ายไฟล์สแตติกของคุณ (CSS, JS, รูปภาพ, ฯลฯ ) ไปยังชื่อโดเมนแยกต่างหาก สิ่งนี้ทำให้ข้อมูลคุกกี้ไม่ถูกส่งในคำขอ HTTP

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

  ข้อดีคือไคลเอนต์ทำการร้องขอ HTTP น้อยลง (ซึ่งมีค่าใช้จ่าย)

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

Google ได้สรุปและอธิบายข้อเสนอแนะของพวกเขาเพื่อลดขนาดของน้ำหนักบรรทุกให้ต่ำที่สุด พวกเขารวมถึงเทคนิคต่อไปนี้:

1. เปิดใช้งานการบีบอัด
2. ลบ CSS ที่ไม่ได้ใช้
3. ลดขนาด JavaScript
4. ลดขนาด CSS
5. ลดขนาด HTML
6. เลื่อนการโหลด JavaScript
7. ปรับภาพให้เหมาะสม
8. แสดงภาพที่ปรับขนาดแล้ว
9. ให้บริการทรัพยากรจาก URL ที่สอดคล้องกัน

ข้อเสนอแนะเหล่านี้เป็นส่วนหนึ่งของโอเพนซอร์ส Firefox / Firebug เพิ่มในโครงการที่เรียกว่าความเร็วหน้า คล้ายกับปลั๊กอินYSlowของ Yahoo! ส่วนเสริม Page Speed ​​จริงจะตรวจสอบการเพิ่มประสิทธิภาพมากกว่ารายการอธิบายในรายละเอียด คำแนะนำในการใช้ Page Speed ​​จะถูกนำเสนอด้วย

แนวทางปฏิบัติที่ดีที่สุดของ Yahoo! เพื่อเพิ่มความเร็วเว็บไซต์ของคุณจะระบุแนวทางปฏิบัติที่ดีที่สุดที่คล้ายกัน:

1. ลดการร้องขอ HTTP ให้น้อยที่สุด
2. ใช้เครือข่ายการจัดส่งเนื้อหา
3. เพิ่ม Expires หรือ Cader-Control Header
4. ส่วนประกอบ Gzip
5. ใส่สไตล์ชีตไว้ด้านบน
6. ใส่สคริปต์ที่ด้านล่าง
7. หลีกเลี่ยงการแสดงออก CSS
8. ทำ JavaScript และ CSS ภายนอก
9. ลดการค้นหา DNS
10. ...

(รายการของ Yahoo! มีความยาว ~ 35 รายการไม่จำเป็นต้องอ้างถึงทั้งหมด)

ทั้งYSlow (ลิงค์รูปภาพ) และPage Speed (ลิงค์รูปภาพ) จะช่วยให้คุณเรียกใช้การทดสอบในหน้าเว็บของคุณแนะนำสิ่งที่คุณสามารถทำได้และแสดงให้คุณเห็นว่ามีการใช้งานอะไรบ้างจากคำแนะนำของพวกเขา