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

มีโอกาสที่ดีที่การออกแบบหน้า Landing Page หลังการคลิกที่ไม่ดีจะทำให้คุณเสียค่าใช้จ่ายอย่างน้อยครึ่งหนึ่งของงบประมาณ PPC การวิจัยล่าสุดจาก Google แนะนำ

ข้อมูลจากเสิร์ชเอ็นจิ้นยักษ์ใหญ่ระบุว่าผู้ใช้อินเทอร์เน็ตบนมือถือมากกว่าหนึ่งในสองจะละทิ้งหน้าเว็บหากไม่โหลดภายใน 3 วินาที และ ณ เดือนกุมภาพันธ์ 2017 หน้า Landing Page หลังการคลิกบนมือถือโดยเฉลี่ยใช้เวลาในการ โหลด 22 วินาทีที่ น่าอับอาย

หากคุณหยุดคิดเลข คุณอาจตระหนักดีว่าหน้าที่โหลดช้าส่งผลเสียต่อกำไรของคุณเพียงใด

หากคุณสร้างผู้เข้าชมหน้า Landing Page หลังการคลิกบนมือถือ 5,000 คนต่อเดือน และแปลง 5% ของผู้เข้าชมเหล่านั้น คุณจะพลาดการแปลง 1,500 ครั้งตลอดทั้งปี หากการโหลดใช้เวลานานกว่า 3 วินาที ครึ่งหนึ่งของผู้เข้าชมของคุณ — 2,500 ต่อเดือนในข้อสมมตินี้ — จะไม่ เห็น หน้า Landing Page ทั้งหมดของคุณหลังจากคลิกก่อนที่จะตีกลับ ที่แย่ไปกว่านั้น งบประมาณ PPC ของคุณจะหมดลงทุกครั้งที่ทำ

แต่บางทีหน้าของคุณไม่โหลดใน 3 วินาที อาจจะโหลดได้ใน 5 วินาที หรือ 6 วินาที หรือ 10 วินาที หากเป็นกรณีนี้ ข้อมูลจาก Google แสดงว่าคุณกำลังสูญเสียเงินมากกว่าเดิม

เกณฑ์มาตรฐานความเร็วหน้าเว็บบนมือถือใหม่

เพจของคุณจัดวางซ้อนกับคนอื่นๆ บนเว็บได้อย่างไร เพื่อสร้างเกณฑ์มาตรฐานใหม่สำหรับความเร็วในการโหลด Google ได้วิเคราะห์หน้า Landing Page หลังคลิกบนมือถือของโฆษณา 900,000 รายการใน 126 ประเทศเมื่อต้นปี 2560

สิ่งที่พวกเขาพบคือการยืนยันสมมติฐานของพวกเขา: เพจบนมือถือนั้น “บวม” และมีองค์ประกอบมากเกินไป

ในหมู่พวกเขา หน้าจากภาคยานยนต์ ค้าปลีก และเทคโนโลยีใช้เวลานานที่สุดในการโหลดโดยเฉลี่ย แม้ว่าจะเป็นอุตสาหกรรมใดก็ตาม ข้อมูลที่น่าตกใจบางอย่างแสดงให้เห็นว่าหน้า Landing Page หลังการคลิกบนมือถือนั้นเป็นที่ต้องการอย่างมาก

ตัวอย่างเช่น 70% ของหน้าที่วิเคราะห์ใช้เวลา 7 วินาทีในการโหลดเนื้อหา ในครึ่งหน้าบน ในหน้าเดียวกันนั้น ใช้เวลารวมกว่า 10 วินาทีในการโหลดเนื้อหาภาพด้านบนและด้านล่างของครึ่งหน้าล่าง

ด้วยความช่วยเหลือของอัลกอริธึมขั้นสูงจาก SOASTA การศึกษาอื่นของ Google ได้เชื่อมโยงความเร็วในการโหลดหน้าเว็บกับตัวบ่งชี้ประสิทธิภาพหลักที่มีความหมายมากขึ้น เช่น Conversion และอัตราตีกลับ ในบล็อกโพสต์ นักวิจัยได้อธิบายเพิ่มเติมว่า:

เราได้สร้างแบบจำลองแมชชีนเลิร์นนิงสองแบบ: รุ่นหนึ่งสำหรับคาดการณ์ Conversion และอีกรุ่นสำหรับคาดการณ์อัตราตีกลับ แต่ละรุ่นใช้ข้อมูลจริงจากตัวอย่างขนาดใหญ่ของไซต์อีคอมเมิร์ซบนมือถือ ซึ่งสัมพันธ์กับผลกระทบของเมตริกหน้าต่างๆ 93 แบบจากรูปแบบรูปภาพไปจนถึงสคริปต์จำนวนหนึ่ง พูดง่ายๆ คือ ทั้งสองรุ่นมองหาปัจจัยด้านไซต์บนอุปกรณ์เคลื่อนที่ที่จะจูงใจให้ผู้ซื้อซื้อหรือตีกลับ รูปแบบการแปลงมีความแม่นยำในการทำนาย 93% และรูปแบบการตีกลับนั้นแม่นยำยิ่งขึ้นที่ 96%

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

นอกจากอัตราตีกลับแล้ว การศึกษายังแสดงให้เห็นว่า ความเร็วในการโหลดหน้าเว็บที่ช้ายังสามารถลด Conversion ได้อีกด้วย แล้วผู้กระทำความผิดคืออะไร?

นักวิจัยระบุข้อบกพร่องในการออกแบบอุปกรณ์พกพาที่สำคัญบางประการ

นักฆ่าความเร็วของหน้าแลนดิ้งเพจหลังการคลิกบนมือถือที่ใหญ่ที่สุด

ความเร็วไม่ได้เป็นเพียงการเบี่ยงเบนของ Conversion และงบประมาณการโฆษณาที่จ่ายไปเท่านั้น นอกจากนี้ยังเป็นหนึ่งในปัจจัยการจัดอันดับเครื่องมือค้นหาของ Google หากหน้าเว็บของคุณไม่โหลดเร็วกว่า 3 วินาทีที่แนะนำ แสดงว่าคุณกำลังเสียเงินและหาไม่พบ ปัญหาใดๆ ต่อไปนี้อาจเป็นสาเหตุ

1. องค์ประกอบของหน้ามากเกินไป

วันนี้หน้าเว็บโดยเฉลี่ยมีขนาดเท่ากันในข้อมูลเช่นเดียวกับวิดีโอเกมคลาสสิก "Doom:"

ที่ 2.3MB มันเติบโตขึ้นเป็นกองขององค์ประกอบที่ไม่จำเป็น และนักออกแบบมี BSO - "กลุ่มอาการวัตถุมันวาว" - Ronan Cremin วิศวกรซอฟต์แวร์แนะนำ:

ในขณะที่เว็บผ่านช่วงวัยรุ่นที่น่าอึดอัดใจ เราปล่อยให้ฟีเจอร์ที่คืบคลานเข้ามาครอบงำและในที่สุดความยุ่งเหยิงก็ทำให้เราดีขึ้น โมดูลแกลเลอรี JavaScript ใหม่? แน่นอนทำไมไม่? โอ้ แบบอักษรเว็บใหม่น่าจะดูดีที่นี่ แต่ทำไมไม่เพิ่มเครื่องมือวิเคราะห์อื่นในขณะที่เราอยู่ในนั้นล่ะ ฉันควรปรับขนาดภาพ 6,000 พิกเซลนี้หรือไม่ ไม่ ให้เบราว์เซอร์จัดการเอง ใช้งานได้สำหรับฉัน

Google ได้ค้นพบว่า "คุณสมบัติ" ตามที่ Cremin เรียกมันว่าสามารถมีผลกระทบด้านลบอย่างมากต่อความเร็วในการโหลด หน้าเฉลี่ยตอนนี้มีองค์ประกอบหลายร้อยถึงพันรายการ — พาดหัว รูปภาพ ปุ่ม — ที่จัดเก็บไว้ในเซิร์ฟเวอร์หลายสิบเครื่อง เมื่อองค์ประกอบเหล่านั้นไม่ได้รับการปรับให้เหมาะสม ผลลัพธ์อาจเป็นประสบการณ์การโหลดที่ "คาดเดาไม่ได้" และ "ผันผวน"

นักวิจัยยังพยายามระบุจำนวนองค์ประกอบในหน้าว่าเป็นตัวทำนาย Conversion ที่แม่นยำที่สุด น้อยกว่าที่พวกเขาอ้างว่ามีมากขึ้น เมื่อองค์ประกอบของหน้าเพิ่มขึ้นจาก 400 เป็น 6,000 โอกาสในการเปลี่ยนผู้เข้าชมจะลดลง 95%

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

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

จากข้อมูลของ Google 70% ของหน้าที่ทดสอบมีขนาดเกิน 1MB, 36% เป็น 2MB และ 12% มีขนาดเกิน 4MB เป็นผลให้มีโอกาสน้อยที่ผู้เข้าชมจะอยู่ได้นาน ผ่านการเชื่อมต่อ 3G ที่รวดเร็ว (ความเร็วของการเชื่อมต่อมือถือส่วนใหญ่ทั่วโลก) 1.49MB ใช้เวลาประมาณ 7 วินาทีในการโหลด

การแก้ปัญหา

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

Hakan Nizam จาก L'Oreal กล่าวว่า "จะมีประสิทธิภาพมากขึ้นในการส่งมอบสิ่งที่รวดเร็วหากเป็นส่วนหนึ่งของเกณฑ์การออกแบบ “มันจะทำให้แบนด์วิดธ์ของนักพัฒนาว่างมากขึ้น จะช่วยให้นักพัฒนาให้ความสำคัญกับปัจจัยอื่นๆ ที่ส่งผลต่ออัตราการแปลง การสนทนาที่รวดเร็วควรได้รับการแก้ไขเพื่อไปยังตัวสร้างความแตกต่างอื่น ๆ "

ในบล็อกโพสต์สำหรับ Google Jason Cohen เปรียบเทียบงบประมาณกับข้อจำกัดด้านความคิดสร้างสรรค์อื่นๆ:

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

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

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

2. ภาพมากเกินไป

ในการวิจัย รูปภาพหนึ่งๆ ได้รับความสนใจจากผู้ทดสอบของ Google มันมีน้ำหนักมากถึง 16MB ซ้ำแล้วซ้ำเล่า พวกเขายังคงค้นหาภาพที่ติดอยู่หน้าเพจ

“องค์ประกอบกราฟิก เช่น favicons โลโก้ และรูปภาพผลิตภัณฑ์สามารถประกอบด้วยน้ำหนักรวมของหน้าสูงสุดสองในสาม (กล่าวคือ หลายร้อยกิโลไบต์) ได้อย่างง่ายดาย” นักวิจัยเตือน

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

การแก้ปัญหา

วิธีที่ง่ายที่สุดวิธีหนึ่งในการเพิ่มความเร็วให้กับหน้าเว็บของคุณก็คือการเพิ่มประสิทธิภาพรูปภาพอย่างรวดเร็ว พยายามอย่างเต็มที่เพื่อ…

• ลดภาพที่ไม่จำเป็น

คุณจำเป็นต้องแสดงมุมที่แตกต่างกันหกมุมของผลิตภัณฑ์ของคุณหรือไม่? รูปภาพสต็อกนั้นเพิ่มมูลค่าให้กับหน้า Landing Page หลังการคลิกของคุณจริงหรือ คุณต้องการเข้ารหัสข้อความในรูปภาพ หรือรวมแบบอักษรที่คุณเลือกเข้ากับ Google Fonts หรือ Adobe Typekit แทน หากคำตอบคือ “ไม่” ให้พิจารณาตัดภาพบางส่วนออกจากการออกแบบของคุณ

• ลดขนาดของภาพที่จำเป็น

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

ประการที่สอง ลองนึกถึงการใช้เครื่องมือ นักวิจัยอ้างว่า 30% ของหน้าสามารถบันทึกข้อมูลได้ 250KB ด้วยความช่วยเหลือของโปรแกรมบีบอัดรูปภาพ Guetzli และ Zopfli ของ Google นั้นคุ้มค่าที่จะลอง

3. การใช้จาวาสคริปต์ เวลาในการโหลดเต็มหน้า

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

ข้อมูลของ Google แสดงให้เห็นว่าเซสชันผู้ใช้ที่ตีกลับมีเวลาพร้อม DOM ซึ่งช้ากว่าเซสชันที่ไม่ตีกลับ 55% การชะลอตัวของความสำคัญนั้นมักเกิดจาก JavaScript ซึ่งเป็นโค้ดประเภทหนึ่งที่หยุดการแยกวิเคราะห์โค้ด HTML ที่ใช้ในเครื่องมือวิเคราะห์ โฆษณา และวิดเจ็ตโซเชียลของบุคคลที่สามจำนวนมาก

Daniel An และ Pat Meenan เปรียบเทียบการชะลอตัวกับร้านอาหารที่ไม่มีการรวบรวมกัน:

ลองนึกภาพว่าคุณอยู่ที่ร้านอาหารและบริกรของคุณพร้อมที่จะนำอาหารของคุณมาให้ แต่ก่อนอื่นต้องรอให้เกลือและพริกไทยส่งมาจากร้านอื่น

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

การแก้ปัญหา

ในความพยายามที่จะปรับปรุงประสบการณ์การท่องเว็บบนมือถือ Google ได้พัฒนา AMP และ AMP สำหรับโปรแกรมโฆษณา เฟรมเวิร์กทั้งสองช่วยให้นักพัฒนามีเครื่องมือที่จำเป็นในการมอบประสบการณ์มือถือด้วยความเร็วสูง พวกเขารวมถึง:

• AMP HTML: นี่คือเวอร์ชันพื้นฐานของสิ่งที่เรารู้จักว่าเป็นภาษามาร์กอัปไฮเปอร์เท็กซ์ ซึ่งเป็นระบบของแท็ก ตัวเลข และตัวอักษรที่ใช้สร้างรากฐานของหน้าเว็บส่วนใหญ่

• AMP JavaScript: โค้ดยอดนิยมเวอร์ชัน AMP ของ Google จำกัดการใช้ JavaScript ของบุคคลที่สามและผู้เขียนเอง

• AMP CDN: ช่วยให้นักพัฒนาสามารถจัดเก็บหน้าเว็บเวอร์ชันแคชไว้บนเซิร์ฟเวอร์ของ Google เวอร์ชันแคชนั้นเป็นสแนปชอตดิจิทัลของเพจที่มีข้อมูลทั้งหมดในที่เดียว ส่งผลให้สามารถให้บริการแก่ผู้ใช้ได้เร็วขึ้น

องค์ประกอบของเฟรมเวิร์กรวมกันเป็นพื้นฐานของหน้าเว็บที่ใช้ข้อมูลน้อยกว่าค่าเฉลี่ย 10 เท่า และโฆษณาที่โหลดเร็วขึ้น 6 เท่า

ไปที่นี่เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการเริ่มต้นใช้งาน AMP

หน้าเว็บบนมือถือของคุณมีความเร็วเท่าใด

หน้า Landing Page หลังการคลิกของคุณได้รับการปรับให้เหมาะกับอุปกรณ์เคลื่อนที่หรือไม่ พวกมันไม่มีรูปภาพที่ไร้ประโยชน์ องค์ประกอบที่เกะกะ และ JavaScript ที่หนักหน่วงหรือไม่

ค้นหาด้วยการทดสอบความเหมาะกับอุปกรณ์เคลื่อนที่จาก Google จากนั้นดูคำแนะนำในการเพิ่มประสิทธิภาพประสบการณ์หน้า Landing Page หลังการคลิก ก่อนสร้างหน้าถัดไป: