Lazy Loading คืออะไรและทำไมคุณควรสนใจมันในบริบทของ SEO? - Semalt ผู้เชี่ยวชาญ
47% ของผู้ใช้อินเทอร์เน็ตคาดหวังว่าหน้าเว็บจะโหลดได้ภายใน 2 วินาที จะเกิดอะไรขึ้นในกรณีที่มีการชาร์จนานขึ้น? ผู้ใช้จะไม่อ่านเนื้อหาบนเว็บไซต์และจะไม่ทำธุรกรรม เขาจะจากไปและไม่กลับมาอีก ดังนั้นจึงไม่มีคำถามว่าจะมีการกลับใจใหม่สูง
เจ้าของเว็บไซต์มีเวลาเพียงไม่กี่วินาทีในการให้ความสนใจเป็นอันดับแรก จากนั้นให้ผู้ใช้อยู่ในเว็บไซต์ หากหลังจากเข้าสู่เว็บไซต์แล้ว หากผู้ใช้พบปัญหาใดๆ เช่น การจัดตารางเวลาข้อมูลที่ไม่ถูกต้อง สถาปัตยกรรมเว็บไซต์ที่ออกแบบมาไม่ดี หรือข้อผิดพลาดในการโหลดหน้า เขาจะเลือกที่อื่นในเครือข่ายและอาจจะไม่กลับมาอีก นั่นคือเหตุผลที่การแก้ปัญหาการโหลดหน้าเว็บช้า เช่นเดียวกับอินเทอร์เฟซที่ชัดเจนและใช้งานง่าย จึงเป็นประเด็นสำคัญใน การเพิ่มประสิทธิภาพ SEO. คุณรู้หรือไม่ว่าตามข้อมูลของ Google หน้าเว็บที่ใช้เวลาในการโหลดมากกว่า 5 วินาทีอาจพบว่า Conversion ลดลงถึง 40% เหตุผลเพียงพอที่จะเปลี่ยนเกียร์
ขี้เกียจโหลดคืออะไร?
แม้ว่าแนวความคิดของการโหลดแบบ Lazy Loading ในความเป็นจริงควรถูกเข้าใจว่าเป็นการโหลดช้า จากมุมมองของ โซลูชั่น SEOมันมีนัยยะที่แตกต่างกันโดยสิ้นเชิง อันที่จริง ไม่มีอะไรมากไปกว่าสคริปต์ที่แทรกลงในโค้ดของเพจที่ควบคุมการโหลดสื่อ (รูปภาพและวิดีโอ) ที่วางไว้ในโค้ดของเพจ ด้วยเหตุนี้ มัลติมีเดียจึงโหลดได้ก็ต่อเมื่อผู้ใช้ไปที่ส่วนใดส่วนหนึ่งเท่านั้น ไม่ใช่ทันทีหลังจากไปที่ที่อยู่เว็บเป้าหมาย รูปแบบการดำเนินการนี้ช่วยเร่งกระบวนการโหลดของเว็บไซต์และสนับสนุนให้คุณใช้งาน แม้ว่าชื่อของสคริปต์เองอาจทำให้เข้าใจผิดได้
เป็นมูลค่าการกล่าวขวัญว่าวิธีหนึ่งในการเร่งความเร็วในการโหลดเว็บไซต์คือการโหลดสคริปต์ JavaScript แบบอะซิงโครนัส การรู้เกี่ยวกับวิธีการนี้มีความสำคัญอย่างยิ่งหากสคริปต์อยู่บนเซิร์ฟเวอร์ระยะไกล ใช้เวลานานในการแทนที่ไฟล์ดังกล่าว ตัวสคริปต์เองยังสามารถหยุดการประมวลผลองค์ประกอบที่เหลือได้ ในกรณีนี้ คุณต้องบังคับเบราว์เซอร์ให้โหลดแบบอะซิงโครนัส
ผลลัพธ์จะมีความสำคัญจากมุมมองของเจ้าของเว็บไซต์ และสิ่งเหล่านี้อ่านง่ายมาก เนื่องจากเวลาในการโหลดเว็บไซต์ของคุณควรสั้นลงอย่างมาก ก็เพียงพอแล้วที่จะจินตนาการถึงขั้นตอนการทำงานของเว็บไซต์
หากเรากำลังจัดการกับเว็บไซต์ขนาดใหญ่ที่มีเนื้อหาจำนวนมาก การโหลดไฟล์มัลติมีเดียทั้งหมดพร้อมกันจะเป็นการเบิร์นทรัพยากรทั้งหมด
เมื่อมีการใช้สคริปต์การโหลดแบบ Lazy Loading ลำดับข้อมูลที่เกี่ยวข้องกับการอธิบายปัญหาเฉพาะหรือหัวข้อที่กำลังพิจารณาอยู่ในไซต์จะถูกเรียกใช้ สำหรับผู้ใช้ ข้อมูลจะถูกส่งทันที และในขณะเดียวกัน เขาก็ไม่รับรู้และไม่รับผลกระทบใด ๆ ที่กราฟิกที่เหลือรอเวลาในการโหลด - สิ่งนี้จะเกิดขึ้นเมื่อเขาสนใจพวกเขาในขณะที่เลื่อนหน้า
เหตุใดสคริปต์การโหลดแบบขี้เกียจจึงเป็นทางออกที่ดีสำหรับเว็บไซต์ของคุณ
ถ้าคุณจริง วิเคราะห์ว่าใครเข้าเยี่ยมชมเว็บไซต์ของคุณ (คุณสามารถใช้เครื่องมือนี้: the แดชบอร์ด SEO เฉพาะ ) และพฤติกรรมของพวกเขา คุณทราบดีว่าผู้ใช้ไม่ได้ใช้เวลากับมันมากเสมอไป และไม่ได้เจาะลึกโครงสร้างของลิงก์และหน้าย่อยเพื่อดูข้อเสนอหรือผลิตภัณฑ์อย่างรอบคอบ (ซึ่งน่าเสียดาย) โดยปกติ เขา/เธอจะไปที่หน้า Landing Page (แน่นอนว่าใช้กับแคมเปญ AdWords) เข้าถึงข้อมูล ตอบสนองความต้องการของตน และเดินหน้าต่อไป ดังนั้นจึงไม่สมเหตุสมผลที่พวกเขาโหลดกราฟิกอื่นๆ ทั้งหมดที่ไม่เกี่ยวข้องกับจุดประสงค์ในการเยี่ยมชมของเขาในช่วงเวลาสั้นๆ นี้
ตัวอย่าง
แจ็คกำลังมองหามอเตอร์ไซค์ เขาเคยฝันถึงมันมาโดยตลอดแต่ไม่เคยมีเงินจ่ายมาก่อน ในที่สุดเขาก็ระดมทุนได้ 20,000 ดอลลาร์ และพร้อมที่จะเลือกโมเดลในฝัน ดังนั้นเขาจึงเข้าสู่เครื่องมือค้นหา "มอเตอร์ไซค์ดีๆ สูงถึง 20,000 ดอลลาร์"
ปรากฏแก่เขา:
- เครื่องมือค้นหาหลายรายการพร้อมข้อเสนอการขาย - จัดเรียงโมเดลตามพารามิเตอร์ที่เลือก เขาเปิดแท็บทีละแท็บและเรียกดูข้อเสนอ
- เว็บไซต์เนื้อหา - คู่มือการซื้อและการเลือกรถจักรยานยนต์
ในขณะที่แจ็คใช้เวลาส่วนใหญ่กับเว็บไซต์ลับๆ เพราะเขาต้องเลือกพาหนะที่สมบูรณ์แบบ ในเว็บไซต์เนื้อหา เขาจะใช้เวลาไม่เกิน 8-10 นาทีกับบทความหน้าเดียวและไปต่อ
สิ่งสำคัญในตัวอย่างนี้คือไม่จำเป็นต้องโหลดรูปภาพทั้งหมดจากหน้าย่อยของเว็บไซต์เนื้อหาสำหรับ Jack เพราะการออกแบบกราฟิกของบทความก็เพียงพอแล้ว คุณไม่จำเป็นต้องให้รูปถ่ายของโมเดลทั้งหมดที่มีในเครื่องมือค้นหาหลายรายการแก่เขา ท้ายที่สุด เขาจะถูกดึงดูดโดยคนเพียงไม่กี่คนเท่านั้น!
รูปแบบการทำงานที่เรียกว่าการโหลดภาพตามต้องการเป็นทางออกที่ดีที่สุดสำหรับการรักษาความสะดวกสบายในการใช้งานเว็บไซต์และความเร็วในการใช้งาน คุณจะได้รับเวลาและได้รับคะแนนที่สูงขึ้นสำหรับคุณภาพของเว็บไซต์
การโหลดทรัพยากรที่ไม่จำเป็นอย่างเกียจคร้านถือเป็น "สิ่งที่ต้องมี" อย่างแท้จริงสำหรับเว็บไซต์ใดๆ ที่ต้องการให้บริการเนื้อหาแก่ผู้ใช้ในเวลาอันสั้น เป็นที่น่าจดจำว่าตั้งแต่เดือนกรกฎาคม 2018 ความเร็วเว็บไซต์เป็นปัจจัยหนึ่งในการจัดอันดับอย่างเป็นทางการเมื่อกำหนดตำแหน่งของผลการค้นหาบนมือถือบน Google ดังนั้นเมื่อเพิ่มประสิทธิภาพเว็บไซต์สำหรับ SEO คุณควรให้ความสนใจกับแง่มุมนี้
คุณสามารถเปลี่ยนแปลงอะไรในกระบวนการโหลดเว็บไซต์ได้บ้าง Google พูดว่าอย่างไร
ความเร็วในการโหลดเว็บไซต์ ไม่ได้เป็นเพียงองค์ประกอบที่สร้างแรงบันดาลใจความพึงพอใจของลูกค้า นอกจากนี้ยังเป็นหนึ่งในปัจจัยการจัดอันดับที่มีอิทธิพลในเชิงบวกต่อการประเมินเว็บไซต์ที่อยู่ในตำแหน่ง ก่อนที่ผู้ใช้จะเห็น เบราว์เซอร์ต้องดำเนินการสองสามขั้นตอน หากมีข้อผิดพลาดในขั้นตอนการวิเคราะห์ใดๆ ผู้ใช้จะต้องรอเป็นเวลานานกว่าที่ไซต์จะโหลด
เว็บไซต์ของคุณประกอบด้วยทรัพยากรต่างๆ เช่น โค้ด HTML โค้ด CSS และโค้ด JS ซึ่งรับผิดชอบองค์ประกอบกราฟิก เพื่อให้ผู้ใช้ได้มุมมองที่พร้อมใช้งาน เบราว์เซอร์จำเป็นต้องอ่านแต่ละมุมมอง การดูที่มีเนื้อหาจำนวนมากจึงต้องใช้เวลาโหลดนานขึ้นสำหรับเว็บไซต์และการเลื่อนหน้าย่อยทั้งหมด นี่ไม่ใช่ทางออกที่ดีที่สุดสำหรับคุณและผู้ใช้ ผู้ใช้สูญเสียการถ่ายโอนบนโทรศัพท์หรือโอเวอร์โหลดการเชื่อมต่อภายในบ้านด้วยทรัพยากรที่โหลดโดยไม่จำเป็น ในฐานะเจ้าของเว็บไซต์ คุณยังประสบปัญหานี้เมื่อคุณใช้เซิร์ฟเวอร์ที่มีแบนด์วิดท์จำกัด หรือคุณเช่าทรัพยากรขึ้นอยู่กับปริมาณการรับส่งข้อมูลบนไซต์
ให้ชัดเจน - ปัจจัยส่วนใหญ่ที่มีอิทธิพลต่อความเร็วในการโหลดเว็บไซต์สามารถสัมผัสได้โดยคุณ และคุณสามารถเพิ่มความเร็วในกระบวนการนี้ด้วยการกระทำเฉพาะ ในฐานะเจ้าของเว็บไซต์หรือบุคคลที่รับผิดชอบในการเพิ่มประสิทธิภาพ ให้ตรวจสอบเซิร์ฟเวอร์โฮสต์ ควรมีความจุที่ตรงกับขนาดของไซต์และปริมาณการเข้าชม นี่เป็นพื้นฐานที่ต้องได้รับการดูแลเมื่อพัฒนาเว็บไซต์
คุณสามารถใช้เงินเป็นจำนวนมากเพื่อเพิ่มประสิทธิภาพและใช้เวลามากในการติดตั้ง แต่ถ้าเซิร์ฟเวอร์ทำงานช้า เว็บไซต์จะไม่เร่งความเร็ว ดังนั้นอย่าไปหาผู้ให้บริการโฮสติ้งที่ดีกว่ารายแรก!
ในปี 2009 Amazon แสดงให้เห็นว่าทุกๆ 0.1 วินาที ความล่าช้าในการทำงานของเว็บไซต์ทำให้ยอดขายลดลง 1% ซึ่งหมายความว่าทุก ๆ วินาทีของความล่าช้ามีค่าใช้จ่าย Amazon "เพียง" 10% ของรายได้!
จะใช้สคริปต์การโหลดแบบขี้เกียจได้อย่างไร?
การใช้งานสคริปต์การโหลดแบบ Lazy Loading เกี่ยวข้องกับการเปลี่ยนแปลงโค้ดเว็บไซต์ ในการดำเนินการนี้ คุณสามารถใช้ปลั๊กอิน CMS สำเร็จรูปหรือปลั๊กอิน JS ได้
ในสคริปต์การโหลดแบบ Lazy Loading คุณไม่ควรใส่รูปภาพที่ด้านบนของหน้าและโลโก้ "รูปภาพฮีโร่" ทั้งหมด หากคุณใช้การโหลดแบบ Lazy Loading สำหรับกราฟิกที่วางอยู่ที่ด้านบนของหน้า แทนที่จะแสดงให้ผู้ใช้เห็นทันที สคริปต์จะวิเคราะห์กระบวนการเพิ่มเติม ซึ่งแน่นอนว่าจะทำให้เกิดความล่าช้าและคุณภาพ UX ลดลงอย่างมาก ผลของการปรับให้เหมาะสมดังกล่าวจะไม่เกิดผล
การโหลดแบบ Lazy Loading อย่างไร้ความสามารถอาจส่งผลให้ผู้ใช้ไม่เห็นกราฟิกในระยะเริ่มต้นของการแสดงหน้า และเนื้อหาเว็บไซต์จะแสดงอย่างไม่ถูกต้อง
สคริปต์มีการใช้งานอย่างไรในโค้ด
โปรดทราบว่า iframes แบบฝังยังใช้ข้อมูลจำนวนมากและสามารถลดประสิทธิภาพของหน้าได้ ดังนั้นจึงควรตรวจสอบให้แน่ใจว่าโหลดได้เมื่อผู้ใช้ต้องการเท่านั้น ซึ่งลดเวลาในการโหลดหน้าเว็บโดยรวม แต่ยังลดแบนด์วิดท์ของผู้ใช้และลดการใช้หน่วยความจำ
ขออภัย บอทของเครื่องมือค้นหาชอบหน้าเว็บที่สามารถรวบรวมข้อมูลโค้ด HTML ได้อย่างรวดเร็ว Googlebot สามารถแสดงผล JS ตาม Chrome41 ได้ แต่อาจสร้างดัชนีไม่ถูกต้องในสถานการณ์นี้เสมอไป พูดง่ายๆ ว่าหุ่นยนต์อาจไม่สังเกตเห็นภาพเหล่านี้
เคล็ดลับที่เป็นประโยชน์
หากคุณพบปัญหาในการโหลดเว็บไซต์ ให้ทำดังนี้
- ใช้การบีบอัด Gzip ซึ่งเป็นวิธีบีบอัดไฟล์ HTML และ CSS ทางฝั่งเซิร์ฟเวอร์ การใช้งานช่วยประหยัดจาก 40 ถึง 80% ของขนาดไฟล์ดั้งเดิม
- ตรวจสอบและอัพเดตฐานข้อมูล ซึ่งเพิ่มขึ้นในระหว่างการอัพเดตและการใช้งาน
- ดูแลแคชของเบราว์เซอร์ เซิร์ฟเวอร์จะไม่ต้องส่งองค์ประกอบทั้งหมดของเว็บไซต์ทุกครั้งที่ผู้ใช้เข้าชม เพราะบางส่วนจะถูกแคชไว้
- กำจัดสคริปต์และปลั๊กอินที่ไม่จำเป็นทั้งหมดที่ไม่ส่งผลต่อการทำงานที่เหมาะสมของเว็บไซต์