วิธีใช้ Lazy Loading เพื่อให้ได้ผลลัพธ์ความเร็วมือถือที่สมบูรณ์แบบ

ไซต์ของคุณผ่านการทดสอบความเร็วไซต์บนมือถือของ Google หรือไม่ ไม่? คุณอาจต้องการดูภาพที่โหลดแบบขี้เกียจ

ประสิทธิภาพของเว็บไซต์เป็นสิ่งสำคัญ หากบล็อกหรือเว็บไซต์ของคุณโหลดช้า ประสบการณ์ของผู้ใช้จะแย่มาก

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

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

เตรียมพร้อมสำหรับผู้ใช้มือถือ

โปรแกรมบล็อกและเว็บไซต์ส่วนใหญ่สร้างขึ้นมาอย่างดีสำหรับการดูบนเดสก์ท็อป

พวกเขาใช้การออกแบบที่ตอบสนองเพื่อส่งมอบเวอร์ชันมือถือ

แม้ว่านี่จะเป็นวิธีแก้ปัญหาที่ใช้งานได้จริง แต่ก็มีข้อเสียเปรียบที่สำคัญ

หากไซต์ของคุณมีการตอบสนอง ไซต์นั้นจะทำงานบนอุปกรณ์เคลื่อนที่

แต่ขนาดไฟล์รูปภาพของคุณสำหรับเดสก์ท็อป ดังนั้นความเร็วไซต์บนมือถือของคุณจึงช้ากว่ามาก

หากคุณทำการทดสอบ Google Pagespeed Insights ผลลัพธ์ของคุณอาจสมเหตุสมผลและ เป็นสีเขียว สำหรับเดสก์ท็อป แต่ดูเหมือนว่าจะเป็นแบบนี้สำหรับรุ่นมือถือของคุณ

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

Google กำลังเปลี่ยนไปใช้ดัชนีมือถือเป็นอันดับแรกเป็นปัจจัยในการจัดอันดับ

มีบริการทดสอบความเร็วเว็บไซต์ฟรีมากมายที่คุณสามารถใช้เพื่อการตรวจสอบประสิทธิภาพ

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

WebpageTest ให้คุณเลือกเวอร์ชันมือถือต่างๆ ได้ ดังนั้นจึงเป็นทางเลือกแทน Google

ตรวจสอบให้แน่ใจเสมอว่าคุณสามารถตรวจสอบเวอร์ชันมือถือของคุณได้ เนื่องจากอุปกรณ์เชื่อมต่อด้วยความเร็วการเชื่อมต่ออินเทอร์เน็ตที่ช้ากว่ามาก

หากผลลัพธ์ของคุณไม่น่าพอใจ คุณมีงานต้องทำ

คุณปรับปรุงประสิทธิภาพมือถือของคุณอย่างไร?

มีหลายปัจจัยที่ทำให้ไซต์มีความเร็วช้าลงทั้งบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่

ไฟล์ Javascript และ CSS สามารถโหลดเร็วเกินไปและบล็อกการเรนเดอร์ หากคุณใช้ WordPress คุณสามารถแก้ไขได้อย่างง่ายดายโดยใช้ปลั๊กอินแคช

คุณอาจมีปัญหากับโฮสต์เว็บของคุณที่ทำให้ TTFB (Time To First Byte) ของคุณสูงกว่าครึ่งวินาทีเล็กน้อย

อย่างไรก็ตาม โฮสต์ส่วนใหญ่จะสูงกว่าเวลานี้เพียง 10 ถึง 20 เปอร์เซ็นต์เท่านั้น ซึ่งไม่ใช่ปัญหาใหญ่

ปัญหาที่ใหญ่ที่สุดคือรูปภาพและ iframe เกือบทุกครั้ง เมื่อคุณเพิ่มรูปภาพลงในโพสต์ รูปภาพจะไม่ถูกบีบอัด ขนาด หรือจัดรูปแบบสำหรับมือถือ

คุณสามารถใช้ปลั๊กอินเพื่อช่วย Smush เป็นปลั๊กอินยอดนิยมสำหรับบีบอัดรูปภาพเมื่อคุณอัปโหลด ผลลัพธ์จะปรับปรุงเวอร์ชันเดสก์ท็อปของคุณเล็กน้อย แต่ไม่ใช่เวอร์ชันมือถือของคุณ

หากต้องการปรับปรุงเวลาในการโหลดหน้าเว็บบนอุปกรณ์เคลื่อนที่ คุณต้องแสดงภาพที่มีขนาดเล็กลงมาก แต่สิ่งนี้เกี่ยวข้องกับการทำงานจำนวนมาก

ก่อนหน้านี้ ทางออกที่ดีที่สุดคือการมีไซต์เวอร์ชันมือถือแยกต่างหากหรือใช้หน้า AMP ไม่ว่าจะด้วยวิธีใด รูปภาพทั้งหมดบนไซต์ที่มีอยู่จะต้องถูกแทนที่ด้วยรูปภาพ Next-Gen

งานที่เกี่ยวข้องกับโซลูชันใดโซลูชันหนึ่งอาจใช้เวลาหลายสัปดาห์หรือหลายเดือน ขึ้นอยู่กับขนาดของไซต์ของคุณ

สำหรับเจ้าของไซต์ส่วนใหญ่ หากคุณไม่ทราบเกี่ยวกับ Intersection Observer API หรือ img src, data src attribute, class lazy, img tags หรือ img class คุณจะไม่ต้องสร้างไซต์บนมือถือใหม่

มาเผชิญหน้ากัน มันยากและใช้เวลานานเกินไป

อ่านเพิ่มเติม: วิธีหยุดแบบฟอร์มการติดต่อและความคิดเห็นสแปม

ใช้พฤติกรรมการโหลดที่ขี้เกียจ

โชคดีที่มีวิธีง่ายๆ ในการแก้ไขเวลาในการโหลดหน้าเว็บบนมือถือของคุณ คำตอบคือทำให้รูปภาพทั้งหมดของคุณโหลดอย่างเกียจคร้าน

การโหลดแบบขี้เกียจจะทำให้การส่งภาพล่าช้าจนกว่าผู้อ่านจะต้องการ ขณะที่ผู้อ่านเลื่อนหน้าเว็บ ภาพด้านล่างที่ดูได้จะถูกระงับไว้

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

เรียกใช้การทดสอบการโหลดแบบสันหลังยาว

ในช่วงสองสามสัปดาห์ที่ผ่านมา ฉันได้ทดสอบเบต้าวิธีใหม่ในการสร้างไซต์บนอุปกรณ์เคลื่อนที่

คุณอาจเคยได้ยินเกี่ยวกับเครือข่ายการส่งเนื้อหา การโหลดแบบ Lazy Loading และภาพนอกจอที่เลื่อนออกไป

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

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

จากนั้นภาพก็ปรากฏขึ้นอย่างชัดเจนในพริบตา

นี่คือการโหลดแบบขี้เกียจในการดำเนินการ ขณะที่ผู้ใช้เลื่อนหน้าลง ภาพจะไม่ถูกโหลดจนกว่าจะจำเป็น

มันทำให้เพจทำงานเร็วมากโดยเฉพาะบนอุปกรณ์พกพา Lazy Loader สามารถใช้กับรูปภาพจำนวนเท่าใดก็ได้บนหน้าเว็บ

แต่ยังมีองค์ประกอบหนึ่งที่ขาดหายไปจากโซลูชันนี้ รูปภาพไม่ได้อยู่ในรูปแบบ Next-Gen

โชคดีที่ตอนนี้มีวิธีแก้ไข ดังนั้นคุณจึงไม่ต้องแทนที่รูปภาพทั้งหมดของคุณ Optimole เป็นปลั๊กอิน WordPress ที่ช่วยยกของหนักได้มากมาย

ไม่เพียงโหลดรูปภาพแบบขี้เกียจเท่านั้น แต่ยังแทนที่รูปภาพของคุณด้วย URL รูปภาพใหม่ที่ส่งรูปภาพ Next-Gen

ยิ่งไปกว่านั้น มันปรับขนาดภาพได้ทันที

การทดสอบ Optimole

ฉันทำการทดสอบหลายอย่าง และทุกครั้งที่ฉันตรวจสอบหน้าเว็บ หน้าเว็บนั้นทำคะแนนได้สูงมากในการทดสอบความเร็วมือถือของ Google

หนึ่งในการทดสอบของฉันคือหน้าเว็บแบบเต็มความกว้างซึ่งมีรูปภาพขนาดใหญ่ที่ไม่บีบอัดและไม่ปรับขนาดสิบภาพ

กล่าวอีกนัยหนึ่งฉันเพิ่งตบภาพขนาดใหญ่บนหน้าหนึ่งและเผยแพร่ (รูปภาพได้รับความอนุเคราะห์จาก Pixabay ดังนั้นพวกเขาจึงไม่จำเป็นต้องระบุแหล่งที่มาของครีเอทีฟคอมมอนส์)

เพจนี้ใหญ่มากจนฉันไม่สามารถแสดงรูปภาพให้คุณได้เห็น ดังนั้นฉันจะแสดงให้คุณเห็นในวิดีโอ

เมื่อฉันทดสอบหน้าบน Google นี่คือผลลัพธ์

ไม่น่าแปลกใจเมื่อพิจารณาจากขนาดของภาพทั้งหมด

จากนั้นฉันก็เปิดใช้งาน Optimole คุณสามารถดูการตั้งค่าที่ฉันใช้ด้านล่าง นั่นคือทั้งหมดที่คุณต้องทำ

แล้วผลเป็นอย่างไร?

สำหรับเดสก์ท็อป คะแนนที่สมบูรณ์แบบ

สำหรับมือถือ คะแนนเกือบสมบูรณ์แบบ

สำหรับ GTmetrix คะแนนใกล้จะสมบูรณ์แบบอีกครั้ง

โปรดจำไว้ว่าสิ่งเหล่านี้เป็นผลลัพธ์จริงสำหรับหน้าเว็บที่เต็มไปด้วยรูปภาพขนาดใหญ่ที่มีความละเอียดสูง

การติดตั้งปลั๊กอินและรับคีย์ API ใช้เวลาเพียงไม่กี่นาที และเพียงไม่กี่วินาทีในการเปิดใช้งานการตั้งค่า

ในเวลาไม่ถึงห้านาที ฉันก็มีเพจและไซต์บนมือถือที่เกือบสมบูรณ์แบบ

เรียนรู้เพิ่มเติมเกี่ยวกับ Optimole

หากต้องการดูการทำงานของปลั๊กอินในโลกแห่งความเป็นจริง โปรดไปที่เว็บไซต์ CodeinWP มันทำงานบน Optimole คุณจึงสามารถรันการทดสอบความเร็วไซต์ของมันได้

คุณสามารถตรวจสอบเว็บไซต์ของคุณได้โดยไปที่เว็บไซต์ Optimole

คลิกปุ่ม ตรวจสอบไซต์ของฉัน และป้อน URL ของไซต์ของคุณ คุณจะเห็นรายการรูปภาพทั้งหมดของคุณและเงินออมที่สามารถทำได้บนเว็บไซต์ของคุณ

หากคุณมีไซต์ขนาดเล็ก มีปลั๊กอินเวอร์ชันฟรีให้ใช้งาน แต่ถ้าคุณมีไซต์ขนาดใหญ่ คุณอาจต้องการพิจารณาตัวเลือกแบบพรีเมียม

การอ่านบทความนี้ใช้เวลานานกว่าการทำให้เว็บไซต์ของคุณทำงานเร็วมากสำหรับผู้เยี่ยมชมบนอุปกรณ์เคลื่อนที่ ดังนั้นสิ่งที่คุณรอ?

ทางเลือกในการโหลดที่ขี้เกียจมากขึ้น

หากคุณไม่ต้องการตั้งค่าการส่งอิมเมจ Nextgen แบบ CDN มีตัวเลือกฟรีมากมายที่คุณสามารถใช้ได้

ตอนนี้ WordPress รวมการโหลดแบบขี้เกียจเป็นค่าเริ่มต้น อย่างไรก็ตาม คุณสามารถควบคุมวิธีการทำงานได้เพียงเล็กน้อย โดยปกติจะดีกว่าถ้าใช้ปลั๊กอินเพื่อให้คุณสามารถปรับแต่งประสิทธิภาพได้อย่างละเอียด

Smush เป็นปลั๊กอิน WordPress ยอดนิยมและฟรีสำหรับย่อรูปภาพเมื่อคุณโหลดลงในไลบรารีสื่อของคุณ

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

A3 Lazy Load เป็นอีกหนึ่งปลั๊กอินฟรี ฉันใช้มันมานานแล้วในเว็บไซต์หลายแห่งของฉัน รวมถึงเว็บไซต์นี้ด้วย

สิ่งที่ฉันชอบคือฉันสามารถปรับแต่งตัวเลือกได้มากมาย มีตัวเลือกในการยกเว้นวิดเจ็ต ซึ่งช่วยแก้ปัญหาการกระโดดในบางธีม

BJ Lazy Load มีมานานแล้ว มีผู้ใช้มากกว่า 90,000 คน อย่างไรก็ตาม มันยังไม่ได้รับการอัพเดทมาระยะหนึ่งแล้ว

Lazy Load เป็นปลั๊กอินฟรีที่มีการติดตั้ง 60,000 ครั้ง เป็นส่วนประกอบฟรีจาก WP Rocket ซึ่งเป็นโซลูชันครบวงจรสำหรับการเพิ่มประสิทธิภาพความเร็วไซต์

ปลั๊กอินตัวสุดท้ายคือ Lazy Load สำหรับวิดีโอ เป็นเครื่องมือที่ดีที่จะใช้หากคุณมีวิดีโอ Youtube จำนวนมากบนไซต์ของคุณ

เลือกอะไรดี! ตอนนี้คุณไม่มีเหตุผลเลยที่จะมีเว็บไซต์บนมือถือที่ช้า

หมายเหตุ: ฉันไม่มีส่วนเกี่ยวข้องกับผลิตภัณฑ์นี้ การตรวจสอบ Optimole ของฉันขึ้นอยู่กับประสบการณ์ของฉันในฐานะผู้ใช้

อ่านเพิ่มเติม: ตัวตรวจสอบเว็บไซต์และเครื่องมือ SEO ฟรี