ปรับปรุงความเร็วไซต์ด้วยการตรวจสอบโฆษณาของผู้เผยแพร่โฆษณาสำหรับ Lighthouse

โพสต์นี้ได้รับการอัปเดตล่าสุดเมื่อวันที่ 6 กันยายน 2021

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

#1 – ไซต์โหลดช้าและมีคะแนนต่ำสำหรับเครื่องมือการรายงาน

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

#2 – โค้ดของ MonetizeMore ทำให้เว็บไซต์ทำงานช้าลง

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

ประภาคาร

เราจะใช้การตรวจสอบโฆษณาของผู้เผยแพร่โฆษณาสำหรับ Lighthouse นับจากนี้ และคุณจะพบได้ที่นี่: https://developers.google.com/publisher-ads-audits

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

ด้วย Chrome:

1.- เปิดหน้าเว็บเป้าหมาย

2.- คลิกขวาแล้วเลือกตรวจสอบ

3.- ในบรรดาเครื่องมือ dev ให้มองหาเครื่องมือสุดท้ายที่เรียกว่าการตรวจสอบ

4.- เลือกหมวดหมู่ที่เกี่ยวข้องแล้วคลิก "สร้างรายงาน" หลังจากรีเฟรชไซต์หลายครั้ง รายงานจะถูกสร้างขึ้นและแสดง

คุณจะเห็นหมวดหมู่ต่างๆ ที่เพจได้รับการประเมิน:

• ประสิทธิภาพ: การดำเนินการทางเทคนิคของเพจ ซึ่งรวมถึงการโต้ตอบ ความเร็ว และการเข้ารหัส
• การช่วยสำหรับการเข้าถึง: การออกแบบองค์ประกอบที่ช่วยให้ผู้ทุพพลภาพสามารถมีส่วนร่วมกับเนื้อหาได้อย่างสะดวกสบายยิ่งขึ้น
• แนวทางปฏิบัติที่ดีที่สุด: คำแนะนำทั่วไป เพื่อปรับปรุงการนำทางและความปลอดภัยเป็นหลัก
• SEO: การเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหาเพื่อมีส่วนร่วมกับไซต์
• Progressive Web App: PWA เป็นไซต์ประเภทหนึ่งที่มีลักษณะคล้ายกับแอปบนอุปกรณ์เคลื่อนที่อย่างมาก ในการนำเสนอ และภายใต้ประทุน นี่คือคำแนะนำในการเพิ่มประสิทธิภาพสำหรับเว็บไซต์ประเภทนี้

ข้อมูลส่วนใหญ่ค่อนข้างตรงไปตรงมา สิ่งที่เราควรให้ความสนใจเป็นพิเศษคือประสิทธิภาพ -> การวินิจฉัย ซึ่งเราสามารถดูประสิทธิภาพของรหัส js และโดยเฉพาะอย่างยิ่งของเรา

ในภาพด้านบน (การวินิจฉัย -> ลดผลกระทบของโค้ดของบุคคลที่สาม) เราเห็นว่าโค้ดของเราบล็อกน้อยกว่าหนึ่งในสามของวินาทีในเธรดหลัก (เธรดที่รับผิดชอบในการโหลดหน้า) ไม่มีโค้ดเหล่านี้บล็อกเธรดหลักมากนัก แต่โค้ดของบุคคลที่สามทั้งกลุ่มใช้เธรดหลักที่สองทั้งหมด ซึ่งเป็นสิ่งที่ผู้ใช้ประสบในท้ายที่สุด

ในภาพด้านบน (การวินิจฉัย -> ลดเวลาการดำเนินการของ JavaScript) เราเห็นว่าโค้ดของเราสอดคล้องกับโค้ดที่เหลือในเวลาดำเนินการ แม้ว่าเวลาในการดำเนินการจะสูงกว่านี้ แต่จะดำเนินการในเธรดอื่นแบบอะซิงโครนัส ดังนั้นจึงไม่ส่งผลกระทบต่อประสิทธิภาพการทำงาน

ข้อพิจารณา

• คุณสามารถทำการทดสอบง่ายๆ โดยเรียกใช้รายงานนี้โดยไม่มีแท็ก จากนั้นเพิ่มแท็กของเราและเรียกใช้รายงานอีกครั้ง ดังที่ได้กล่าวไว้ การแลกเปลี่ยนจะทำให้คะแนนรวมลดลง แต่คาดว่าจะเป็นเช่นนั้น
• การทดสอบ/คะแนนความเร็วของหน้าเว็บส่วนใหญ่ไม่ได้คำนึงถึงความล่าช้าที่จำเป็นเมื่อเรียกใช้การเสนอราคาส่วนหัว และได้รับการออกแบบมาเพื่อประเมินแท็กโฆษณาแบบฮาร์ดโค้ด ดังนั้นเมื่อทำงานบนหน้าเว็บที่มีการเสนอราคาส่วนหัว พวกเขาจะไม่คำนึงถึงฟังก์ชันที่กำหนดเองและจะลดคะแนนลง
• ปลั๊กอิน Chrome ของคุณสามารถเปลี่ยนแปลงประสิทธิภาพของรายงานได้อย่างมาก คุณสามารถลองทดสอบหน้าในสภาพแวดล้อมที่สะอาดกว่า:
  • ไปที่หน้าต่อไปนี้: https://developers.google.com/publisher-ads-audits
  • วางที่อยู่ของไซต์
  • ในการตั้งค่าขั้นสูง ให้เปิดใช้งานเรียกใช้การตรวจสอบประภาคารเพิ่มเติม
  • คลิกที่สร้างรายงาน
  • *รายงานนี้จะให้รายงานโฆษณาของผู้เผยแพร่โฆษณาแก่คุณด้วย หากไซต์ได้รับการกำหนดค่าอย่างถูกต้อง คะแนนควรสูง ดังนั้นจึงเป็นวิธีที่ดีในการแสดงให้ผู้เผยแพร่เห็นว่าปัญหาด้านประสิทธิภาพอาจอยู่ที่อื่น
• หากจำเป็นต้องปรับปรุงประสิทธิภาพ คุณสามารถพิจารณา:
  • การลดจำนวนหน่วยโฆษณาในหน้า
  • ย้ายการเรียกสคริปต์ MonetizeMore ไปที่ส่วนท้ายของหน้าหรือสูงกว่า โดยอิงตามการใช้งานการเรียกใช้ JS/ทรัพยากรจำนวนมากอื่นๆ
  • ลดการหมดเวลาของการประมูลส่วนหัวเป็นค่าที่ไม่มีการสูญเสียอย่างมีนัยสำคัญของการประมูลที่เข้ามา (สามารถทดสอบผ่าน PGAI: ภายใต้แท็บผู้ประมูล รหัสสีของการประมูลที่ได้รับ)
  • Lazy Load ตำแหน่งโฆษณาทั้งหมดในทุกหน้า (เปิดใช้งาน SPA ใน dbAdmin และเปลี่ยน DIV เป็นรูปแบบสันหลังยาว)

คำแนะนำทางเทคนิคอื่นๆ สามารถ:

• ปรับปรุงการโหลด JavaScript: การเรียกใช้สคริปต์ขนาดใหญ่เพียงครั้งเดียวหรือการเรียกใช้สคริปต์ขนาดเล็กจำนวนมากจะส่งผลเสียต่อประสิทธิภาพ สร้างความสมดุลระหว่างงานและการโทรใน JS สิ่งนี้สามารถทำได้ด้วยไฟล์ JS ที่ผับสามารถจัดการได้เท่านั้น (ไม่ใช่สคริปต์ wrapper, GA หรือ facebook ของเรา)
• ตรวจสอบให้แน่ใจว่าสคริปต์ใด ๆ ที่สามารถทำงานแบบอะซิงโครนัสได้ สคริปต์ของเรามีอยู่แล้ว
• ตรวจสอบให้แน่ใจว่าทรัพยากร (รูปภาพ วิดีโอ) ได้รับการเข้ารหัสด้วยเทคโนโลยีล่าสุด การดำเนินการนี้ทำให้องค์ประกอบต่างๆ ถูกบีบอัดขณะเดินทาง และคลายการบีบอัดเมื่อโหลดบนหน้าเว็บ

ต้องการความช่วยเหลือเพิ่มเติม? ลงทะเบียนสำหรับบัญชีมืออาชีพที่ MonetizeMore วันนี้!