Acing Google PageSpeed ​​Insights Assessment

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

ความเร็วของหน้าได้รับการอ้างถึงอย่างเป็นทางการว่าเป็นคุณลักษณะการจัดอันดับที่สำคัญในช่วงกลางปี ​​2018 ในบทความนี้ เราจะอธิบายคะแนนประสิทธิภาพที่เจ้าของธุรกิจควรให้ความสนใจ: PageSpeed ​​Insights เราจะเจาะลึกรายละเอียดทางเทคนิคบางอย่างที่จะช่วยให้นักพัฒนาซอฟต์แวร์ทำการปรับปรุงในกรณีที่ซับซ้อน เช่น ที่เกี่ยวข้องกับแอปพลิเคชันหน้าเดียว

เหตุใดการทดสอบ PageSpeed ​​Insights ของ Acing ของ Acing

เมื่อ Google เปิดตัวเครื่องมือ PageSpeed ​​​​ในปี 2010 เจ้าของเว็บไซต์ส่วนใหญ่คุ้นเคยกับมัน ผู้ที่ยังไม่ได้เปิด PageSpeed ​​Insights เพื่อตรวจสอบไซต์ของตน

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

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

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

คะแนนใดเพียงพอที่จะผ่านการประเมิน PageSpeed

PageSpeed ​​ใช้เมตริกจาก Core Web Vitals เพื่อให้การประเมินผ่าน/ไม่ผ่าน

เครื่องมือนี้มีสามคะแนน:

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

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

2. คะแนนโดยละเอียดสำหรับหน้าใด หน้า หนึ่ง และสำหรับผู้ที่ PageSpeed ​​เห็นว่าคล้ายกับหน้าที่วิเคราะห์ คำนวณจากสถิติที่เบราว์เซอร์ Chrome รวบรวมบนคอมพิวเตอร์จริงและส่งไปยัง Google ซึ่งหมายความว่าประสิทธิภาพใน Firefox, Safari และเบราว์เซอร์อื่นๆ ที่ไม่ใช่ Chromium จะไม่ถูกนำมาพิจารณา

3. สรุปสำหรับ ทุกหน้า ของเว็บไซต์จะได้รับในลักษณะเดียวกับคะแนนหน้าเดียว หากต้องการเข้าถึง ให้เลือกแท็บ Origin แทนแท็บ URL นี้ URL ที่แสดงอยู่ใต้แถบแท็บจะแตกต่างกัน เนื่องจาก Origin จะแสดงหน้าหลักของเว็บไซต์ (เฉพาะโดเมน)

Google อัปเดตรายการเมตริกที่ PageSpeed ​​พิจารณาอยู่เสมอ ดังนั้นแหล่งข้อมูลที่ดีที่สุดคือส่วน Experience / Core Web Vitals ใน Google Search Console สมมติว่าคุณได้เพิ่มเว็บไซต์ของคุณที่นั่นแล้ว

หากต้องการผ่านการประเมิน Core Web Vitals คะแนนทั้งหมดต้องเป็นสีเขียว:

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

เพื่อให้เข้าใจค่าได้ดีขึ้น ให้คลิกที่ชื่อคะแนน:

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

ข้อมูลจะถูกรวบรวมเป็นเวลา 28 วัน และมีความแตกต่างที่สำคัญอีกสองประการจากสิ่งที่ผู้ใช้จริงอาจประสบ:

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

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

การปรับปรุงคะแนนโดยใช้คำแนะนำ PageSpeed ​​Insights

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

เราสามารถหาคำแนะนำได้ในส่วนโอกาสทางด้านล่างผลการประเมิน

เราสามารถขยายแต่ละรายการและรับคำแนะนำโดยละเอียดสำหรับการปรับปรุง มีข้อมูลมากมาย แต่นี่เป็นเคล็ดลับพื้นฐานและสำคัญที่สุด:

• ปรับปรุงความเร็วในการตอบสนองของเซิร์ฟเวอร์ ตัวอย่างเช่น หากคุณใช้โฮสติ้งที่ใช้ร่วมกัน ให้อัปเกรดแผนของคุณหรือย้ายไปยังเซิร์ฟเวอร์ส่วนตัวเสมือน (VPS) หรือแม้แต่เซิร์ฟเวอร์เฉพาะ นอกจากนี้ โฮสต์ทั้งหมดไม่เท่ากัน ลองเลือกโฮสติ้งที่เชื่อถือได้พร้อมฮาร์ดแวร์ที่ดีและการรับประกันความพร้อมในการทำงาน
• ลดปริมาณการรับส่งข้อมูลที่จำเป็นในการเปิดไซต์ของคุณ เพื่อให้บรรลุสิ่งนี้ คุณสามารถแทนที่รูปภาพด้วยรูปภาพที่ปรับให้เหมาะสม: เปลี่ยนรูปแบบ ปรับความละเอียดและการบีบอัด แทนที่ภาพเคลื่อนไหวด้วยภาพนิ่งหากจำเป็น ฯลฯ ระบบจัดการเนื้อหายอดนิยมมีปลั๊กอินที่ทำให้กระบวนการนี้ตรงไปตรงมา
• แคชข้อมูลเพิ่มเติม วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้เครือข่ายการจัดส่งเนื้อหา (CDN) เช่น Cloudflare สำหรับเนื้อหาแบบคงที่ (รูปภาพ สไตล์ สคริปต์ หน้าเว็บที่ไม่เปลี่ยนแปลง) คุณสามารถกำหนดค่ากฎการแคชเพื่อปรับประสิทธิภาพให้เหมาะสม

ตอนนี้เรามาดูปัจจัยที่ซับซ้อนมากขึ้น ซึ่งโปรแกรมเมอร์ที่มีประสบการณ์สามารถช่วยได้

วิธีการดีบักคะแนนในช่วงอายุของเพจ

ดังที่กล่าวไว้ Google Search Console จะพิจารณาคะแนนเฉลี่ยที่ได้รับจากเบราว์เซอร์ที่ใช้ Chromium ในช่วง 28 วันที่ผ่านมา และยังรวมค่าตลอดอายุของหน้าเว็บด้วย

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

วิธีแก้ปัญหาคือการรวมไลบรารี Google Chrome Web Vitals ไว้ในเวอร์ชันนักพัฒนาซอฟต์แวร์ของโครงการไซต์ เพื่อดูว่าเกิดอะไรขึ้นในขณะที่ผู้ใช้โต้ตอบกับเพจ

ตัวเลือกต่างๆ ในการรวมไลบรารีนี้อยู่ในไฟล์ README.md บน GitHub วิธีที่ง่ายที่สุดคือการเพิ่มสคริปต์ต่อไปนี้ มีการปรับแต่งเพื่อแสดงค่าตลอดอายุของหน้าใน <head> ของเทมเพลตหลัก:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

โปรดทราบว่าการคำนวณ Cumulative Layout Shift (CLS) และ Largest Contentful Paint (LCP) จะใช้ได้เฉพาะกับเบราว์เซอร์ที่ใช้ Chromium เท่านั้น รวมถึง Chrome, Opera, Brave (ปิดใช้งาน Brave Shields เพื่อให้ห้องสมุดทำงานได้) และเบราว์เซอร์สมัยใหม่อื่นๆ ส่วนใหญ่ ยกเว้น Firefox ซึ่งอิงตามเอนจิ้น Mozilla และเบราว์เซอร์ Safari ของ Apple

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

หากต้องการดูวิธีการคำนวณค่าเหล่านั้นสำหรับรุ่นมือถือ ให้สลับไปที่อุปกรณ์มือถือโดยใช้แถบเครื่องมืออุปกรณ์ หากต้องการเข้าถึง ให้คลิกปุ่ม Toggle Device Toolbar ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์

ซึ่งจะช่วยระบุปัญหา การขยายแถวในคอนโซลจะแสดงรายละเอียดเกี่ยวกับสิ่งที่ทำให้คะแนนเปลี่ยนแปลง

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

สำหรับพวกเราที่กำลังดิ้นรนกับ CLS สิ่งนี้จะเป็นประโยชน์ ขยายบันทึกบันทึก จากนั้นรายการ รายการเฉพาะ แหล่งที่มา แหล่ง previousRect มาเฉพาะ และเปรียบเทียบ currentRect กับ PreviousRect :

ตอนนี้เราเห็นสิ่งที่เปลี่ยนแปลงแล้ว เราสามารถระบุวิธีแก้ไขได้

ลดการเปลี่ยนแปลงเค้าโครงสะสม

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

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

หากเพจของคุณเป็นไดนามิกและผู้ใช้ใช้งานได้เหมือนกับแอปพลิเคชัน ให้พิจารณาขั้นตอนต่อไปนี้เพื่อแก้ไขปัญหา CLS:

1. ตั้งค่าหน้าให้แสดงเนื้อหา 500 มิลลิวินาทีหลังจากที่ผู้ใช้คลิกปุ่มหรือลิงก์โดยไม่ทำให้ CLS ทำงาน
2. เปลี่ยนพารามิเตอร์ที่ไม่ทำให้องค์ประกอบ DOM อื่นเปลี่ยน: พื้นหลัง สี ฯลฯ
3. ตรวจสอบให้แน่ใจว่าองค์ประกอบอื่นๆ จะไม่เปลี่ยนเมื่อเปลี่ยนขนาดหรือตำแหน่งขององค์ประกอบ

คำแนะนำโดยละเอียดเพิ่มเติมมีอยู่ที่หน้า Google Developers Optimize CLS

500 มิลลิวินาทีสามารถลด CLS ได้อย่างไร

เพื่อแสดงวิธีใช้เกณฑ์ 500 มิลลิวินาที เราจะใช้ตัวอย่างที่เกี่ยวข้องกับการอัปโหลดรูปภาพ

โดยปกติเมื่อผู้ใช้อัปโหลดไฟล์ สคริปต์จะเพิ่มองค์ประกอบ <img> ลงใน DOM จากนั้นเบราว์เซอร์ไคลเอ็นต์จะดาวน์โหลดรูปภาพจากเซิร์ฟเวอร์ การดึงรูปภาพจากเซิร์ฟเวอร์อาจใช้เวลานานกว่า 500 มิลลิวินาที และอาจทำให้เค้าโครงเปลี่ยนไป

แต่มีวิธีที่จะทำให้ได้ภาพเร็วขึ้น เพราะมันมีอยู่แล้วในคอมพิวเตอร์ไคลเอนต์ และด้วยเหตุนี้จึงสร้างองค์ประกอบ <img> ก่อนที่เส้นตาย 500 มิลลิวินาทีจะหมดลง

นี่คือตัวอย่างสากลของ ECMAScript ล้วนๆ ที่ไม่มีไลบรารี่ที่จะทำงานบนเบราว์เซอร์รุ่นใหม่ๆ ส่วนใหญ่ได้:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

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

อัปเดต Google Search Console

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

เลือกเพจที่คุณกำลังดำเนินการโดยใช้กล่องคุณสมบัติการค้นหาที่มุมบนซ้าย จากนั้นไปที่ Core Web Vitals ในเมนูแฮมเบอร์เกอร์ด้านซ้าย:

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

ถัดไป ไปที่ส่วนรายละเอียดใต้แผนภูมิและคลิกที่แถวที่มีคำเตือนการตรวจสอบที่ล้มเหลว

จากนั้นคลิกปุ่มดูรายละเอียดสำหรับปัญหานี้

และสุดท้ายคลิกเริ่มการตรวจสอบใหม่

อย่าคาดหวังผลทันที การตรวจสอบอาจใช้เวลาถึง 28 วัน

การเพิ่มประสิทธิภาพคือการต่อสู้อย่างต่อเนื่อง

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

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

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