วิธีใช้ PageSpeed ​​​​Insights API เพื่อตรวจสอบประสิทธิภาพของเพจ

มีเครื่องมือที่จะช่วยตรวจสอบประสิทธิภาพของเพจและประเมินการปรับปรุงของคุณ หนึ่งในสิ่งที่ดีที่สุดคือ PageSpeed ​​Insights มีให้ใช้งานในรูปแบบเว็บแอปพลิเคชันและเป็นแท็บ Lighthouse ใน DevTools ของ Chrome (เครื่องมือ DevTools เดียวกันนี้มีให้ใช้งานใน Edge, Opera, Brave และ Vivaldi ด้วย)

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

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

การเข้าถึงประภาคาร

เริ่ม Lighthouse โดยเปิดหน้าที่คุณต้องการตรวจสอบแล้วกด Ctrl/Cmd + Shift + I หรือเลือก เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จาก เครื่องมือเพิ่มเติม ในเมนู สลับไปที่แท็บ Lighthouse และคลิกปุ่ม วิเคราะห์การโหลดหน้า ผลลัพธ์จะแสดงหลังจากนั้นไม่กี่วินาที:

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

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

PageSpeed ​​​​Insights API มีวิธีแก้ไขปัญหาเหล่านี้ เพื่อให้การทดสอบเป็นแบบอัตโนมัติ บันทึก และเปรียบเทียบได้

PageSpeed ​​​​Insights API คืออะไร

Google ให้บริการ PageSpeed ​​​​Insights REST API ฟรี ซึ่งส่งคืนข้อมูลในรูปแบบ JSON ที่มีเมตริก Lighthouse ทั้งหมดและอีกมากมาย ช่วยให้คุณสามารถเรียกใช้เพจโดยอัตโนมัติ เก็บข้อมูลที่เป็นผลลัพธ์ ตรวจทานการเปลี่ยนแปลงเมื่อเวลาผ่านไป และแสดงข้อมูลที่แน่นอนที่คุณต้องการ

PageSpeed ​​​​Insights API เลียนแบบวิธีที่ Google เห็น ไซต์ของคุณ คุณสามารถเรียกใช้รายงานทุกๆ 2-3 วันหรือเมื่อใดก็ตามที่คุณเผยแพร่การอัปเดตประสิทธิภาพ

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

การเริ่มต้นอย่างรวดเร็วของ PageSpeed ​​Insights API

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

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://www.yoursite.com/

Firefox เหมาะอย่างยิ่งเพราะมีโปรแกรมดู JSON ในตัว แม้ว่า Chrome จะมีส่วนขยายที่ให้ฟังก์ชันการทำงานเหมือนกัน คะแนนประสิทธิภาพโดยรวมของ Lighthouse ถูกเน้นไว้ด้านล่าง:

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

url=https://mysite.com/page1

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

strategy=desktop

หรือเปลี่ยนไปใช้มือถือด้วย:

strategy=mobile

เรียกใช้เฉพาะการทดสอบประสิทธิภาพเท่านั้น เว้นแต่คุณจะระบุหมวดหมู่ความสนใจตั้งแต่หนึ่งหมวดหมู่ขึ้นไป:

category=performance
category=accessibility
category=best-practices
category=seo
category=pwa

สามารถกำหนดภาษาเฉพาะได้โดยการตั้งค่าโลแคล เช่น ฝรั่งเศส:

locale=fr-FR

และรายละเอียดแคมเปญ Google Analytics สามารถกำหนดได้ด้วย:

utm_campaign=<campaign>
utm_source=<source>

บริการนี้ฟรีสำหรับคำขอที่ไม่บ่อยนัก แต่คุณจะต้องลงชื่อสมัครใช้คีย์ Google API หากคุณต้องการเรียกใช้การทดสอบจำนวนมากจากที่อยู่ IP เดียวกันในช่วงเวลาสั้นๆ รหัสถูกเพิ่มไปยัง URL ด้วย:

key=<api-key>

คุณสามารถสร้างสตริงข้อความค้นหาของ URL ได้โดยการระบุพารามิเตอร์ที่คุณเลือกโดยคั่นด้วยอักขระเครื่องหมายและ (&) API URL ต่อไปนี้ทดสอบหน้าที่ https://mysite.com/ โดยใช้อุปกรณ์มือถือเพื่อประเมินประสิทธิภาพและเกณฑ์การเข้าถึง:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://mysite.com/&strategy=mobile&category=performance&category=accessibility

คุณสามารถสร้าง URL ของคุณเองหรือใช้เครื่องมือสร้าง URL ของ Google PageSpeed ​​API หากคุณต้องการความช่วยเหลือเพิ่มเติม

ผลลัพธ์ JSON ของ PageSpeed ​​​​Insights API

โดยทั่วไปการทดสอบจะส่งคืนข้อมูล JSON ประมาณ 600Kb โดยขึ้นอยู่กับหมวดหมู่ที่คุณเลือก จำนวนเนื้อหาในหน้า และความซับซ้อนของภาพหน้าจอ (ฝังในรูปแบบ Base64)

ปริมาณข้อมูลน่ากลัว มีการซ้ำซ้อน และเอกสารผลลัพธ์ไม่ชัดเจนเสมอไป JSON แบ่งออกเป็นสี่ส่วนตามที่อธิบายไว้ด้านล่าง

โหลดประสบการณ์

เมตริกเหล่านี้คำนวณจากประสบการณ์การโหลดหน้าเว็บของผู้ใช้ปลายทาง ประกอบด้วยข้อมูลต่างๆ เช่น Core Web Vitals CUMULATIVE_LAYOUT_SHIFT_SCORE, FIRST_CONTENTFUL_PAINT_MS และ FIRST_INPUT_DELAY_MS รายละเอียดและค่า "หมวดหมู่" ส่งกลับ FAST, AVERAGE, SLOW หรือ NONE หากไม่มีการวัด ตัวอย่าง:

 "loadingExperience": { "metrics": { "CUMULATIVE_LAYOUT_SHIFT_SCORE": { "percentile": 0, "distributions": [ { "min": 0, "max": 10, "proportion": 0.970 }, { "min": 10, "max": 25, "proportion": 0.017 }, { "min": 25, "proportion": 0.012 } ], "category": "FAST" },

originLoadingExperience

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

ผลประภาคาร

นี่คือส่วนที่ใหญ่ที่สุดและมีเมตริก Lighthouse ทั้งหมด ให้ข้อมูลเกี่ยวกับการทดสอบ:

• requestUrl – URL ที่คุณร้องขอ
• finalUrl – หน้าเว็บจริงที่ทดสอบหลังจากทำตามการเปลี่ยนเส้นทางทั้งหมด
• lighthouseVersion – เวอร์ชันซอฟต์แวร์
• fetchTime – เวลาที่รันการทดสอบ
• userAgent – ​​สตริงตัวแทนผู้ใช้ของเบราว์เซอร์ที่ใช้สำหรับการทดสอบ
• สภาพแวดล้อม – ข้อมูลตัวแทนผู้ใช้เพิ่มเติม
• configSettings – การตั้งค่าที่ส่งผ่านไปยัง API

ตามมาด้วยส่วน "การตรวจสอบ" ที่มีหลายส่วนรวมถึงจาวาสคริปต์ที่ไม่ได้ใช้, กฎ css ที่ไม่ได้ใช้, น้ำหนักรวมไบต์, การเปลี่ยนเส้นทาง, ขนาดโดม, องค์ประกอบสีเนื้อหาที่ใหญ่ที่สุด, เวลาตอบสนองของเซิร์ฟเวอร์, เครือข่าย - คำขอ, การเลื่อนเลย์เอาต์แบบสะสม, สีที่สื่อความหมายแรก, ภาพขนาดย่อของภาพหน้าจอ และภาพหน้าจอแบบเต็มหน้า

เมตริกการตรวจสอบส่วนใหญ่จะมีส่วน "รายละเอียด" ซึ่งมีปัจจัยต่างๆ เช่น "overallSavingsBytes" และ "overallSavingsMs" ซึ่งประเมินประโยชน์ของการดำเนินการปรับปรุงประสิทธิภาพ

ส่วน "ภาพหน้าจอ" แบบเต็มหน้าและภาพขนาดย่อประกอบด้วยข้อมูลภาพฐาน 64 ที่ฝังอยู่

ส่วน "เมตริก" ให้ข้อมูลสรุปของเมตริกทั้งหมดในอาร์เรย์ "รายการ" เช่น

 "metrics": { "id": "metrics", "title": "Metrics", "description": "Collects all available metrics.", "score": null, "scoreDisplayMode": "informative", "details": { "type": "debugdata", "items": [{ "observedFirstVisualChange": 234, "observedFirstContentfulPaint": 284, "interactive": 278, "observedFirstPaintTs": 1579728174422, "observedDomContentLoaded": 314, // ... etc ... }] }, "numericValue": 278, "numericUnit": "millisecond" },

ส่วน "การตรวจสอบ" ตามด้วย "หมวดหมู่" ซึ่งจะให้คะแนน Lighthouse โดยรวมสำหรับหมวดหมู่ที่เลือกซึ่งส่งผ่าน API URL:

 "categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.97, "auditRefs": [ //...

“คะแนน” คือตัวเลขระหว่าง 0 ถึง 1 ซึ่งโดยปกติจะแสดงเป็นเปอร์เซ็นต์ในรายงาน Lighthouse โดยทั่วไป คะแนนของ:

• 0.9 ถึง 1.0 กำลังดี
• 0.5 ถึงต่ำกว่า 0.9 แสดงว่าจำเป็นต้องปรับปรุง
• ต่ำกว่า 0.5 ถือว่าไม่ดีและต้องการการดูแลอย่างเร่งด่วน

ส่วน "auditRefs" แสดงรายการเมตริกทั้งหมดและการถ่วงน้ำหนักที่ใช้ในการคำนวณแต่ละคะแนน

การวิเคราะห์UTCประทับเวลา

ในที่สุด เวลาการวิเคราะห์จะถูกรายงาน ซึ่งควรตรงกับเวลาที่แสดงใน lighthouseResult.fetchTime

เมตริกผลลัพธ์ JSON ที่มีประโยชน์

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

• ตัวจัดรูปแบบ JSON และตัวตรวจสอบความถูกต้อง
• ตัวจัดรูปแบบ JSON
• jsonformatter.io

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

เมตริกสรุป

คะแนนรวมตั้งแต่ 0 ถึง 1:

การวัดประสิทธิภาพ

ซึ่งรวมถึงคะแนน Core Web Vitals จาก 0 ถึง 1:

คะแนนประสิทธิภาพที่เป็นประโยชน์อื่นๆ ได้แก่:

คุณสามารถรับตัวเลขและหน่วยจริงได้ เช่น:

• lighthouseResult.audits.total-byte-weight.numericValue –
  ขนาดหน้าทั้งหมด เช่น 450123
• lighthouseResult.audits.total-byte-weight.numericUnit –
  หน่วยที่ใช้สำหรับขนาดหน้าทั้งหมด เช่น "ไบต์"

หรืออีกทางหนึ่ง “displayValue” มักจะมีข้อความที่อ่านได้ซึ่งมีทั้งตัวเลขและหน่วย:

• lighthouseResult.audits.server-response-time.displayValue –
  ข้อความเกี่ยวกับเวลาตอบสนอง เช่น “เอกสารรูทใช้เวลา 170 มิลลิวินาที”
• lighthouseResult.audits.dom-size.displayValue –
  ข้อความเกี่ยวกับจำนวนองค์ประกอบใน DOM เช่น "543 องค์ประกอบ"

สร้างแดชบอร์ดประสิทธิภาพแบบไม่มีโค้ด

ฟีด Live API สามารถอ่านและประมวลผลได้ในหลายระบบ รวมถึง Microsoft Excel (ค่อนข้างแปลกประหลาด Google ชีตไม่รองรับฟีด JSON ที่ไม่มีปลั๊กอินหรือโค้ดมาโครเพิ่มเติม รองรับ XML)

หากต้องการนำเข้าคะแนนประสิทธิภาพโดยรวมแบบเรียลไทม์ไปยัง Excel ให้เริ่มสเปรดชีตใหม่ สลับไปที่แท็บ ข้อมูล แล้วคลิก จากเว็บ ป้อน URL ของ PageSpeed ​​Insights API แล้วกดตกลง:

คลิก เชื่อมต่อ ในกล่องโต้ตอบถัดไปและคงการตั้งค่าเริ่มต้น (ไม่ระบุชื่อ) คุณจะไปที่เครื่องมือ การตั้งค่าแบบสอบถาม :

คลิก บันทึก ทางด้านขวาของเมตริกผลลัพธ์ ประภาคาร จากนั้นคลิกที่ หมวดหมู่ และ ประสิทธิภาพ เพื่อเจาะลึกลำดับชั้นของวัตถุ JSON:

คลิกไอคอน ลงในตาราง ที่ด้านบนจากตัวเลือกเมนูคลิกขวา

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

สุดท้าย คลิก ปิดและโหลด เพื่อแสดงคะแนนการแสดงสดในสเปรดชีตของคุณ:

คุณสามารถทำตามขั้นตอนเดียวกันสำหรับเมตริกอื่นๆ ที่น่าสนใจ

สร้างแดชบอร์ดประสิทธิภาพเว็บ

การสาธิต Codepen นี้มีรูปแบบที่คุณสามารถป้อน URL และเลือกการวิเคราะห์เดสก์ท็อปหรือมือถือเพื่อรับผลลัพธ์

รหัสจะสร้าง PageSpeed ​​Insights URL เรียกใช้ API จากนั้นแสดงผลต่างๆ ลงในตารางสรุปซึ่งดูได้เร็วกว่ารายงาน Lighthouse มาตรฐาน:

ฟังก์ชัน startCheck() แบบอะซิงโครนัสถูกเรียกเมื่อส่งแบบฟอร์ม จะยกเลิกการส่งเหตุการณ์และซ่อนผลลัพธ์ก่อนหน้า:

 // make API request async function startCheck(e) { e.preventDefault(); show(resultTable, false); show(status); show(error, false);

จากนั้นสร้าง apiURL จากข้อมูลในแบบฟอร์มและปิดใช้งานฟิลด์:

 const form = e.target, fields = form.firstElementChild, data = new FormData(form), qs = decodeURIComponent( new URLSearchParams(data).toString() ), apiURL = form.action + '?' + qs; fields.disabled = true;

Fetch API ใช้เพื่อเรียก PageSpeed ​​URL รับการตอบกลับ และแยกวิเคราะห์สตริง JSON เป็นวัตถุ JavaScript ที่ใช้งานได้ บล็อก try/catch ทำให้แน่ใจว่ามีการบันทึกข้อผิดพลาด:

 try { // call API and get result const response = await fetch(apiURL), result = await response.json();

วัตถุผลลัพธ์จะถูกส่งผ่านไปยังฟังก์ชัน showResult() ซึ่งจะแยกคุณสมบัติและวางลงในตารางผลลัพธ์หรือองค์ประกอบ HTML อื่น ๆ ที่มีแอตทริบิวต์ data-point ตั้งค่าเป็นคุณสมบัติ PageSpeed ​​API เช่น

<td data-point="lighthouseResult.categories.performance.score"></td>

จุดสิ้นสุดของบล็อกลอง:

 // output result showResult(result); show(status, false); show(resultTable); }

สุดท้าย catch block จะจัดการกับข้อผิดพลาดและช่องแบบฟอร์มจะถูกเปิดใช้งานอีกครั้งเพื่อให้สามารถเรียกใช้การทดสอบเพิ่มเติมได้:

 catch(err) { // API error console.log(err); show(status, false); show(error); } fields.disabled = false; }

ตัวเลือกการพัฒนาเพิ่มเติม

โค้ดตัวอย่างด้านบนดึงผลลัพธ์จาก PageSpeed ​​Insights API เมื่อคุณร้องขอ รายงานสามารถกำหนดค่าได้มากกว่า Lighthouse แต่การดำเนินการยังคงเป็นกระบวนการแบบแมนนวล

หากคุณต้องการพัฒนาแดชบอร์ดของคุณเอง การสร้างแอปพลิเคชันขนาดเล็กที่เรียก PageSpeed ​​Insights API และจัดเก็บ JSON ที่เป็นผลลัพธ์ในบันทึกฐานข้อมูลใหม่เทียบกับ URL ที่ทดสอบและวันที่/เวลาปัจจุบันอาจเป็นประโยชน์ ฐานข้อมูลส่วนใหญ่รองรับ JSON แม้ว่า MongoDB จะเหมาะกับงาน งาน cron สามารถโทรหาใบสมัครของคุณตามเวลา - บางทีวันละครั้งในช่วงเช้าตรู่

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

หากคุณต้องการสร้างรายงานที่ซับซ้อนด้วยข้อมูลจำนวนมาก คุณควรคำนวณตัวเลขล่วงหน้าวันละครั้ง ณ จุดที่มีข้อมูล PageSpeed ​​ใหม่ ท้ายที่สุด คุณไม่ต้องการแสดงการปรับปรุงประสิทธิภาพในรายงานซึ่งใช้เวลาไม่กี่นาทีในการสร้าง!

สรุป

เครื่องมือ Lighthouse ของ Chrome นั้นยอดเยี่ยม แต่การประเมินหน้าหลายๆ หน้าบ่อยๆ ก็เป็นงานที่น่าเบื่อ PageSpeed ​​​​Insights API ช่วยให้คุณประเมินประสิทธิภาพของไซต์โดยใช้เทคนิคทางโปรแกรม ประโยชน์ที่ได้รับ:

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