Speed Auditor: ค้นหาสิ่งที่ทำให้ WordPress ของคุณช้าลง

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

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

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

แหล่งกำเนิด

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

หากคุณกำลังมองหาปลั๊กอินที่ดี อาจดีที่สุด สำหรับ WPO ที่สามารถจ่ายเงินได้ พร้อมให้คุณทำการเปลี่ยนแปลงและปรับแต่งอย่างละเอียด ขอแนะนำให้คุณลองใช้Perfmatters หากคุณต้องการสิ่งที่ฟรีและง่าย ไม่ต้องการให้หัวคุณปวดกับตั้งค่าและการปรับแต่ง แต่มีความเป็นไปได้มากมาย คุณสามารถลองใช้WPO Rocket TweaksโดยFernando Tellado ซึ่งมีให้ดาวน์โหลดใน WordPress repository

หากคุณไม่ทราบว่าDOMnode หรือ latency metric คืออะไร ไม่ต้องกังวล Speed Auditor ถูกออกแบบมาเพื่อช่วยให้คุณเข้าใจเว็บไซต์ของคุณได้ในพริบตา:

• ตัวบ่งชี้อัจฉริยะ:ไอคอนที่เปลี่ยนสีจะปรากฏในแถบผู้ดูแลระบบของคุณ หากเป็นสีเขียว แสดงว่า LCP (เวลาที่ใช้ในการแสดงสิ่งที่สำคัญที่สุด) ของคุณอยู่ในระดับที่เหมาะสม หากเปลี่ยนเป็นสีส้มหรือ สีแดง แสดงว่ามีบางอย่างต้องการความสนใจจากคุณ

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

ใต้ฝากระโปรง

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

• การระบุ LCP อย่างแม่นยำ:ปลั๊กอินจะตรวจจับได้อย่างถูกต้องว่าองค์ประกอบใด (รูปภาพหรือบล็อกข้อความ) ที่เป็นตัวกระตุ้นการแสดงผล Largest Contentful Paint
• การวิเคราะห์ความลึกของ DOM:มีความสำคัญอย่างยิ่งเพื่อหลีกเลี่ยง "ขนาด DOM ที่มากเกินไป" Speed Auditor แยกจำนวนโหนดตามโซน (ส่วนหัว, เนื้อหา, ส่วนท้าย) และเตือนคุณหากมีการซ้อนกันเกิน 15-20 ระดับ
• ตัวตรวจสอบความล่าช้าของสื่อ:วัดเวลาการถ่ายโอนจริง (Resource Timing API) ของรูปภาพ หากรูปภาพใช้เวลา 500 มิลลิวินาทีในการดาวน์โหลด ปลั๊กอินจะระบุว่ามีความสำคัญ
• ไม่มีผลกระทบต่อเซิร์ฟเวอร์:การประมวลผลทั้งหมดเกิดขึ้นที่ฝั่งไคลเอนต์ (เบราว์เซอร์) ไม่มีการเรียกใช้ฐานข้อมูลหรือกระบวนการ PHP ที่หนักหน่วงซึ่งทำให้เว็บไซต์ช้าลง

ก้าวกระโดดครั้งใหญ่ เร็ว ๆ นี้: Speed Auditor 1.1.9 (พร้อม "Radar CLS")

จนถึงตอนนี้Cumulative Layout Shift (CLS)เป็นเพียงตัวเลขนามธรรมในรายงาน คุณรู้ว่ามีบางสิ่งกำลังเคลื่อนที่ แต่คุณไม่ทราบเสมอว่าคืออะไรในเร็วๆ นี้ ในเวอร์ชัน 1.1.9 สิ่งนี้จะเปลี่ยนไป

ปุ่ม"ไฮไลท์เตอร์" ของเรดาร์หรือระบบCLS แบบภาพจะถูกนำเสนอ

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

• นี่คือแบนเนอร์ AdSense ที่กำลังโปรโมทเนื้อหาของคุณอยู่หรือไม่? คุณจะเห็นมันพร้อมกับกรอบสีแดง คุณสามารถศึกษาปัญหานี้เพิ่มเติมได้ที่นี่
• เป็นภาพที่ไม่มีขนาดที่กำหนดไว้หรือไม่? เรดาร์จะตรวจจับได้
• ความต่อเนื่องทั้งหมด:คุณสามารถเรียกดูเว็บไซต์ทั้งหมดของคุณพร้อมกับเปิดเรดาร์ไว้ได้; ปลั๊กอินจะจดจำว่าคุณต้องการตรวจสอบทุกมุมของเว็บไซต์อย่างต่อเนื่อง

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

แนวคิดคือการปรับปรุงทั้งการตอบสนองของการวิเคราะห์และรายงานที่สร้างขึ้นเมื่อฉันทดสอบในสถานการณ์ต่าง ๆ และหากฉันได้รับคำแนะนำสำหรับการปรับปรุงหรือคำเตือนเกี่ยวกับข้อผิดพลาด

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

มันทำงานอย่างไร?

โค้ดนี้ทำตามขั้นตอนสามขั้นตอนต่อไปนี้:

1. PerformanceObserver

เบราว์เซอร์ (Chrome, Edge, Opera) มี API พื้นฐานที่เรียกว่าPerformance API ปลั๊กอินจะลงทะเบียน "ตัวเฝ้าดู" ที่เรียกว่าPerformanceObserverซึ่งได้รับการกำหนดค่าเฉพาะสำหรับประเภทข้อมูลอินพุตการเลื่อนเลย์เอาต์

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

• ค่าของการชดเชย:(ตัวเลขดังกล่าวคือ 0.0145)
• องค์ประกอบที่เป็นสาเหตุ:เบราว์เซอร์จะแจ้งให้ปลั๊กอินทราบอย่างชัดเจนว่าโหนด HTML ใดที่ถูกย้าย

2. ตัวกรอง "การโต้ตอบล่าสุด"

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

ปลั๊กอินจะตรวจสอบคุณสมบัติที่เรียกว่า hadRecentInput หากคุณได้สัมผัสปุ่มหรือคลิกภายใน 500 มิลลิวินาทีที่ผ่านมา เบราว์เซอร์จะบันทึกการเคลื่อนไหวนั้นว่าเป็น "ที่คาดหวัง"และปลั๊กอินจะละเว้นเพื่อหลีกเลี่ยงการตรวจจับผิดพลาด มันจะตรวจจับเฉพาะการเคลื่อนไหวที่เกิดขึ้นอย่างไม่คาดคิดเท่านั้น (เช่น โฆษณาที่ปรากฏขึ้นอย่างกะทันหัน)

3. การแสดงผลภาพ (กล่องสีแดง)

เมื่อปลั๊กอินได้รับองค์ประกอบที่ถูกย้ายแล้ว ส่วนที่มองเห็นได้จะเริ่มทำงาน:

1. การประสานการคำนวณ:ใช้ฟังก์ชันที่เรียกว่า getBoundingClientRect() เพื่อค้นหาว่าองค์ประกอบนั้นอยู่ที่ใดบนหน้าจอในขณะนั้น (พิกเซลขึ้น, พิกเซลซ้าย)
2. การฉีดเฟรม:สร้างdivที่มีตำแหน่งแบบสัมบูรณ์ ขอบสีแดง 2px และค่าz-indexที่สูงมากเพื่อวาดทับทุกอย่าง
3. ป้ายกำกับ:เพิ่มกล่องเล็ก ๆ ที่มุมบนซ้ายของกล่องสีแดง พร้อมชื่อของป้ายกำกับ (ins, img, div) และค่าของ CLS ที่สะสมไว้

ทำไมสิ่งนี้ถึงดีกว่ารายงานภายนอก?

เครื่องมือเช่น PageSpeed บางครั้งไม่สามารถตรวจจับ CLS ได้ เนื่องจากไม่เลื่อนไปยังด้านล่างหรือไม่รอให้โฆษณาบางตัวโหลดเสร็จ

ปลั๊กอินนี้ใช้การเก็บข้อมูลอย่างต่อเนื่องเพื่อวัดค่า CLSที่สะสมตลอดช่วงเวลาที่ผู้ใช้ใช้งานจริง หากมีองค์ประกอบใดเคลื่อนที่เล็กน้อยในช่วงเริ่มต้นและเคลื่อนที่อีกเล็กน้อยเมื่อเลื่อนหน้า ปลั๊กอินจะนำค่าเหล่านี้มารวมกันและเน้นให้เห็น เพื่อให้คุณได้ตัวเลขที่ใกล้เคียงกับค่าจริงมากที่สุด ซึ่งจะเป็นค่าที่ Google จะนำไปแสดงในรายงาน"Chrome User Experience" (CrUX)