-
จากการใส่ URL ในเบราว์เซอร์หรือเปิดเว็บเพจจากลิงค์อื่นจนกระทั่งโหลดหน้าเว็บทั้งหมดเบราว์เซอร์จะโหลดไฟล์ใดบ้างในระหว่างกระบวนการนี้ มาดูกันว่าส่วนใดของหน้าเว็บประกอบด้วยอะไรบ้าง ของ, 1. เอกสารเว็บคือข้อความที่แสดงบนหน้าเว็บซึ่งเป็นส่วนเล็กๆ 2. รูปภาพคือรูปภาพที่แสดงบนหน้าเว็บ รูปภาพถือเป็นส่วนที่ใหญ่ที่สุดของทั้งหน้า 3. ออบเจ็กต์ที่เป็นองค์ประกอบของออบเจ็กต์ เช่น Flash, Plug-in Video เป็นต้น 4. สคริปต์ ส่วนใหญ่เป็นไฟล์ js, 5, style sheet ซึ่งควบคุมเอฟเฟกต์การแสดงผลของหน้าเว็บ
จากนั้น ยิ่งไฟล์หน้าเว็บมีขนาดใหญ่เท่าใด เบราว์เซอร์ก็จะใช้เวลานานในการดาวน์โหลดหน้าเว็บจากเซิร์ฟเวอร์เพื่อแสดงหน้าเว็บนั้น สิ่งนี้ส่งผลเสียต่อ SEO ของเว็บไซต์ สำหรับเนื้อหาเฉพาะ โปรดดูบทความใน "ความเร็วในการโหลดหน้าเว็บส่งผลต่อเอฟเฟกต์ SEO อย่างไร" เนื่องจากเซิร์ฟเวอร์ แถบสถานะของเบราว์เซอร์อยู่ในสถานะคำขอเสมอ ดังนั้น สำหรับเว็บไซต์ ขนาดไฟล์ทั้งหมดจึงรวมถึงเนื้อหาที่กล่าวถึงข้างต้น, html, CSS ภายนอก, จาวาสคริปต์ภายนอก และขนาดของไฟล์บางไฟล์ เช่น รูปภาพ เสียง วิดีโอ แฟลช ฯลฯ บนหน้าเว็บ HTML, CSS และ Javascript ในไฟล์เหล่านี้เป็นไฟล์ข้อความทั้งหมดสามารถจัดรูปแบบได้หลังจากเขียนหน้าเว็บแล้ว อย่างไรก็ตาม เว็บเซิร์ฟเวอร์สมัยใหม่มีฟังก์ชันการบีบอัดข้อความที่ผู้ดูแลระบบสามารถตั้งค่าได้
อย่างไรก็ตาม ไฟล์ต่างๆ เช่น รูปภาพ เสียง วิดีโอ และแฟลชถือเป็นสัดส่วนขนาดใหญ่ของเว็บไซต์ และไฟล์เหล่านี้มีขนาดใหญ่กว่าไฟล์ข้อความมาก เป็นปัจจัยสำคัญที่ส่งผลต่อความเร็วในการดาวน์โหลดในระหว่างกระบวนการเปิดเว็บไซต์
นี่คือขนาดของหน้าแรกของห้างสรรพสินค้า B2C ในประเทศ
นี่คือขนาดของหน้าแรกของ Taobao
ขนาดโฮมเพจ 163 เมื่อเทียบกับเว็บไซต์พอร์ทัล หน้าเว็บไซต์ห้างสรรพสินค้ามีขนาดค่อนข้างใหญ่แน่นอน รูปภาพด้านบนเป็น Plug-in ใน Firefox มีฟังก์ชันในการตรวจสอบขนาดของหน้าเว็บ เครื่องมือนี้มีประโยชน์มากสำหรับการวิเคราะห์ทางเทคนิคของเว็บไซต์ และการใช้งานยังต้องใช้ SEO มาก วิเคราะห์โค้ดพื้นฐานของเว็บไซต์ วิเคราะห์เว็บไซต์ของคู่แข่ง ฯลฯ
ภายใต้สถานการณ์ปกติ แต่ละหน้ามีขนาดเท่าใดจึงจะเหมาะสม แม้แต่ผู้เชี่ยวชาญก็ไม่เห็นด้วยในเรื่องนี้ หากเว็บไซต์ของคุณต้องการกราฟิกคุณภาพระดับมืออาชีพ ก็เป็นไปไม่ได้ที่จะปฏิบัติตาม "กฎ 20,000" เช่น ห้างสรรพสินค้าอีคอมเมิร์ซเอฟเฟกต์การประมวลผลรูปภาพและความรู้สึกในการขายแตกต่างกัน เช่น บางเว็บไซต์ตั้งหัวข้อพิเศษซึ่งส่วนใหญ่เป็นรูปภาพ ในเวลานี้ เมื่อออกแบบเพจ คุณสามารถตัดรูปภาพขนาดใหญ่เข้าไปได้ รูปภาพขนาดเล็ก เช่น ห้างสรรพสินค้ามูนบาสในประเทศ แม้ว่าจะเป็นหัวข้อพิเศษ แต่ก็แบ่งภาพใหญ่ออกเป็นส่วนเล็กๆ มากมาย ดังนั้นเมื่อผู้ใช้เปิดหน้าเว็บ หน้าเว็บจะโหลดเร็วขึ้น และความเร็วในการเปิดเว็บไซต์ จะส่งผลต่อผู้ใช้อย่างมาก ลองนึกภาพ เว็บไซต์เปิดช้ามาก ปกติคุณจะรอนานแค่ไหน อย่าปล่อยให้ผู้ใช้รอนานเกินไป ไม่เช่นนั้น คุณจะสูญเสียผู้ใช้หรือคำสั่งซื้อไป
ดังนั้นสิ่งที่ดีที่สุดที่ควรทำเพื่อลดน้ำหนักบนหน้าเว็บในเว็บไซต์ของคุณคืออะไร?
1. ใส่สไตล์ชีต css และไฟล์จาวาสคริปต์ส่วนใหญ่ลงในไฟล์ภายนอกของหน้าเว็บ เขียนเป็นไฟล์แยกต่างหาก และอ้างอิงไฟล์เหล่านี้เมื่อเปิดเว็บไซต์เป็นครั้งแรกก่อนที่จะโหลดเท่านั้น จากนั้นหน้าใดๆ ของเว็บไซต์ก็สามารถนำไฟล์เหล่านี้กลับมาใช้ใหม่ได้โดยไม่จำเป็นต้องดาวน์โหลดอีกครั้ง แม้ว่าไฟล์เหล่านี้อาจมีขนาดไม่ใหญ่มาก แต่หากต้องโหลดทุกครั้งที่เปิดหน้าใหม่ ก็เป็นส่วนหนึ่งของการประหยัดแบนด์วิธของผู้ใช้
2. หากเป็นไปได้ ให้ลองใช้กราฟิก เสียง และวิดีโอในหน้าต่างๆ ไฟล์เหล่านี้จะถูกโหลดในครั้งแรกที่ใช้ด้วย
3. อย่าใช้รูปภาพ ภาพเคลื่อนไหว และเสียงที่ไม่จำเป็น ไม่ว่าจะเป็นการใช้งานจริงหรือเพื่อเพิ่มความสวยงามของเว็บไซต์ แต่ละไฟล์ควรมีเหตุผลในการมีอยู่ของมัน สามารถถอดออกได้
4. ลองใช้รูปภาพขนาดเล็กแทนรูปภาพขนาดใหญ่ เนื่องจากในสถานการณ์เดียวกัน รูปภาพขนาดเล็กจะดาวน์โหลดได้เร็วกว่า หากคุณไม่มีข้อกำหนดด้านพิกเซลรูปภาพสูง คุณสามารถใช้รูปภาพในรูปแบบ GIF ได้ ภาพพื้นหลังสามารถทำซ้ำได้ในขนาดที่เล็กแทนที่จะใช้รูปภาพขนาดใหญ่เป็นพื้นหลัง ตัวอย่างเช่น ในเว็บไซต์ห้างสรรพสินค้าบางแห่ง รูปภาพบนหน้าเฉพาะเรื่องสามารถตัดเป็นรูปภาพขนาดเล็กได้ ซึ่งจะช่วยเร่งการเปิดไซต์ของคุณ หน้าเว็บ
5. ลดการใช้รูปภาพในการพลิกเอฟเฟกต์ในปุ่มนำทาง เนื่องจากจำเป็นต้องดาวน์โหลดรูปภาพที่แตกต่างกัน ในทางกลับกัน หากใช้ลิงก์ข้อความ ก็สามารถทำได้โดยใช้ CSS เพื่อควบคุมการพลิก
ข้างต้นโดยพื้นฐานแล้วแสดงรายการปัจจัยที่เกี่ยวข้องที่ส่งผลต่อขนาดของหน้าเว็บ อาจมีบางส่วนที่ยังไม่พบ ฉันหวังว่าเพื่อนบางคนจะค้นพบปัจจัยเพิ่มเติมที่ส่งผลต่อการเพิ่มประสิทธิภาพของหน้าเว็บ
ข้อมูลผู้แต่ง: บล็อกของ Liu Yunwei
ขอบคุณ kitwer สำหรับการสนับสนุนของคุณ