วิธีเข้าถึง 100 ใน Google PageSpeed ​​Insights (บน WordPress)

จะดีกว่าไหมหากมีเครื่องมือที่จะช่วยให้คุณทำเว็บไซต์ได้เร็วขึ้น มี! Google PageSpeed ​​Insights คือชื่อเรียก และเป็นบริการฟรีที่พร้อมแก้ปัญหาเว็บไซต์ช้าของคุณ ในบทความนี้ เราจะมาดูกันว่ามันคืออะไร ทำงานอย่างไร และคุณจะเข้าถึงคะแนน Google PageSpeed ​​Insights 100/100 ใน WordPress ได้อย่างไร

ข้อมูลเชิงลึกของ Google PageSpeed ​​คืออะไร

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

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

Google เคยให้คะแนนรวมเต็ม 100 สำหรับหน้าเว็บหนึ่งๆ แต่ตอนนี้ไม่ทำแล้ว

แต่ Google วัดสถิติ 3 รายการที่เรียกว่า Core Web Vitals เหล่านี้คือ:

• Largest Contentful Paint (LCP) : เนื้อหาหลักของเว็บไซต์โหลดเร็วแค่ไหน ซึ่งควรเป็น 2.5 วินาที หรือน้อยกว่าเพื่อประสบการณ์การใช้งานที่ดี
• First Input Delay (FID) : การตอบสนองของไซต์ต่อการป้อนข้อมูลของผู้ใช้เป็นอย่างไร FID ควรเป็น 100 มิลลิวินาที หรือน้อยกว่า
• Cumulative Layout Shift (CLS) : วัดความเสถียรของภาพหน้าเว็บ คะแนน CLS 0.1 หรือน้อยกว่านั้นดีกว่า

นอกจากนี้ Google ยังวัดสิ่งต่อไปนี้:

• First Contentful Paint (FCP) : เวลาที่หน้าเว็บใช้ในการเริ่มแสดงผลบนหน้าจอ คะแนน FCP ที่ดีคือ 1.8 วินาที หรือน้อยกว่า
• การโต้ตอบกับ Next Paint (INP) : วัดการตอบสนองของเพจต่อการโต้ตอบของผู้ใช้ เว็บไซต์ที่ตอบสนองได้ดีมี INP ไม่เกิน 200 มิลลิวินาที
• Time to First Byte (TTFB) : เวลาที่ใช้สำหรับไบต์แรกของข้อมูลที่จะถูกส่งหลังจากการร้องขอของเซิร์ฟเวอร์ TTFB ที่ 0.8 วินาที หรือน้อยกว่านั้นเหมาะอย่างยิ่ง

ด้านล่างนี้ ในส่วนการวินิจฉัยปัญหาด้านประสิทธิภาพ Google PageSpeed ​​Insights จะให้คะแนนสี่ประการแก่คุณ ได้แก่ ประสิทธิภาพ การเข้าถึง แนวทางปฏิบัติที่ดีที่สุด และ SEO 90 หรือมากกว่าคือคะแนนดี 50 ถึง 89 แสดงว่าสามารถปรับปรุงได้ และคะแนนต่ำกว่า 50 คือแย่

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

ก่อนที่เราจะพูดถึงวิธีปรับปรุงประสิทธิภาพเว็บไซต์ของคุณ เรามาดูว่าเหตุใดความเร็วเว็บไซต์จึงมีความสำคัญ

ทำไมความเร็วของเว็บไซต์จึงสำคัญ

ความเร็วของเว็บไซต์มีผลกระทบอย่างมากต่อพฤติกรรมของผู้ใช้และผู้บริโภค

เวลาเฉลี่ยที่ใช้ในการโหลดหน้า Landing Page บนมือถือจนเต็มคือ 22 วินาที [1]

ความน่าจะเป็นของการตีกลับ เพิ่มขึ้น 32% เมื่อเวลาในการโหลดหน้าเว็บเปลี่ยน จาก 1 วินาทีเป็น 3 วินาที [2]

53% ของการเข้าชม ถูกละทิ้ง หากไซต์มือถือใช้เวลา ในการโหลดนานกว่า 3 วินาที [3]

แน่นอน หากคุณใช้งานไซต์อีคอมเมิร์ซ ไซต์ที่ช้าจะส่งผลให้มีการแปลงลดลง และนั่นคือสิ่งที่คุณต้องจัดการ อัตราการแปลงลดลงตามเวลาที่ใช้ในการโหลดไซต์ [4] :

• หน้าที่โหลดใน 2.4 วินาทีมีอัตราการแปลง 1.9%
• ที่ 3.3 วินาที อัตราการแปลงคือ 1.5%
• ที่ 4.2 วินาที อัตราการแปลงน้อยกว่า 1%
• ที่ 5.7+ วินาที อัตราการแปลงคือ 0.6%

คะแนน PageSpeed ​​Insights สูงเทียบกับความเร็วหน้าเว็บจริง

Google คำนวณคะแนน PageSpeed ​​Insights จากทั้งข้อมูลในห้องปฏิบัติการ (รวบรวมภายใต้เงื่อนไขที่มีการควบคุม) และข้อมูลภาคสนาม (รวบรวมจากผู้ใช้จริงในป่า)

หากต้องการทดสอบความเร็วหน้าเว็บจริงของคุณ คุณสามารถใช้เครื่องมือออนไลน์ เช่น การทดสอบความเร็วของ GTmetrix หรือ Pingdom

การใช้เครื่องมือเหล่านี้ทำให้คุณสามารถทดสอบไซต์ของคุณในสถานที่ต่างๆ ได้

คุณสามารถดูได้ใน GTmetrix ว่าเวลาในการโหลดหน้าเว็บสำหรับเซิร์ฟเวอร์ทดสอบในซานอันโตนิโอ รัฐเท็กซัสคือ 666 มิลลิวินาที ซึ่งเป็นคะแนนที่ดีมาก

ในฮ่องกง เวลาในการโหลดหน้าเว็บจะนานขึ้นเล็กน้อย – 1.4 วินาที

Pingdom ยังแสดงเวลาในการโหลดที่รวดเร็ว 850ms สำหรับการทดสอบในวอชิงตัน ดี.ซี. แต่โหลดช้ากว่า 1.06 วินาทีในโตเกียว ประเทศญี่ปุ่น

เครื่องมือ Uptrends ช่วยให้คุณทดสอบผ่านมือถือและเดสก์ท็อป นี่คือผลลัพธ์สำหรับไซต์ WP Shout จากปารีส ประเทศฝรั่งเศส บน iPad Air – เวลาในการโหลด 1.9 วินาที:

ดังนั้นจึงดูเหมือนจะมีความสัมพันธ์ระหว่างคะแนน Google PageSpeed ​​Insights และความเร็วของหน้าจริง

วิธีรับคะแนน Google PageSpeed ​​​​Insights 100 ใน WordPress ในอุดมคติ

ตอนนี้คุณรู้แล้วว่าทำไมคะแนน Google PageSpeed ​​Insights ที่สูงจึงมีความสำคัญ ถึงเวลามองหาวิธีที่คุณสามารถปรับปรุงได้

วิธีปรับปรุงคะแนน Google PageSpeed ​​Insights

1. ปรับภาพให้เหมาะสม

การปรับรูปภาพของคุณให้เหมาะสมสำหรับเว็บเป็นวิธีง่ายๆ ในการปรับปรุงคะแนนประสิทธิภาพของคุณ

คุณต้องใช้ปลั๊กอินบีบอัดรูปภาพ เช่น Optimole

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

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

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

ปลั๊กอิน Optimole ยังมีการโหลดแบบ Lazy Loading ซึ่งจะโหลดรูปภาพหรือวิดีโอเมื่อผู้ใช้เลื่อนลงไปเท่านั้น สิ่งนี้ช่วยด้วยโอกาส การเลื่อนภาพนอกหน้าจอ ที่แสดงด้านล่าง

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

2. หลีกเลี่ยงขนาด DOM ที่มากเกินไป

DOM คืออะไร? DOM ย่อมาจาก Document Object Model และเป็นโครงสร้างแบบต้นไม้ที่มีองค์ประกอบ HTML คุณลักษณะ และข้อความทั้งหมดของเพจรวมอยู่ด้วย

กลยุทธ์สองสามประการในการลดขนาดของ DOM คือการแบ่งหน้าเว็บยาวๆ ออกเป็นส่วนย่อยๆ และหลีกเลี่ยงการซ่อนโหนด DOM ด้วยการประกาศ {display:none;} ใน CSS

ปัจจัยหนึ่งที่สามารถเพิ่มขนาด DOM ได้คือการใช้ตัวสร้างเพจ เครื่องมือสร้างเพจมักจะเพิ่มจำนวนองค์ประกอบ <div> ในเพจ

หากคุณใช้ Elementor ตั้งแต่เวอร์ชัน 3.0 ตัวตัด HTML บางส่วนถูกลบออก ซึ่งทำให้ขนาดของ DOM ลดลง

หรือคุณสามารถเปลี่ยนไปใช้ Gutenberg แทนเครื่องมือสร้างเพจ อย่างที่ Chris Lema ได้ทำไปแล้ว

คุณสามารถดูเคล็ดลับเพิ่มเติมเกี่ยวกับการหลีกเลี่ยงขนาด DOM ที่มากเกินไปได้ในโพสต์นี้

3. เพิ่มประสิทธิภาพ JavaScript และ CSS

ไฟล์ CSS และ JS สามารถ ย่อ และ บีบอัด เพื่อปรับปรุงประสิทธิภาพ การย่อขนาดจะลบช่องว่างทั้งหมดออกจากไฟล์ CSS หรือ JS ในขณะที่การบีบอัด GZIP จะลบอักขระซ้ำๆ เช่น {

ปลั๊กอิน WordPress ที่ให้คุณลดขนาด CSS หรือ JS รวมถึง Autoptimize (ฟรี) และ WP Rocket (ชำระเงิน)

การลดขนาดอาจทำให้ไซต์ของคุณเสียหายได้ ดังนั้นปลั๊กอินที่ลดขนาดจะมีตัวเลือกการยกเว้นไฟล์จากการลดขนาดหากคุณมีปัญหา

WP Rocket ยังมีตัวเลือกในการ รวม ไฟล์ CSS และ JS ของคุณเป็นไฟล์เดียว ซึ่งช่วยลดการร้องขอ คุณจะไม่ต้องการทำเช่นนี้หากเว็บเซิร์ฟเวอร์ของคุณใช้ HTTP/2 คุณสามารถทดสอบว่าเซิร์ฟเวอร์ของคุณรัน HTTP/2 เพื่อตรวจสอบก่อนหรือไม่

คุณสามารถเปิดใช้งานการบีบอัด GZIP ด้วยปลั๊กอินแคชส่วนใหญ่ หากเว็บเซิร์ฟเวอร์ของคุณคือ Apache หรือ LiteSpeed ​​ปลั๊กอินสามารถเขียนไปยังไฟล์ .htaccess ของคุณได้โดยตรงหรือระบุบรรทัดเพื่อคัดลอกและวางลงในไฟล์ หากคุณใช้ NGINX หรือ IIS Hummingbird ยังมีการกำหนดค่าเพื่อเปิดใช้งานการบีบอัดบนเซิร์ฟเวอร์เหล่านี้

หากมี CSS หรือ JS บนไซต์ของคุณที่ไม่ได้ใช้งาน ก็ถึงเวลาที่ต้องลบออก คุณสามารถใช้ Chrome DevTools เพื่อค้นหา CSS และ JS ที่ไม่ได้ใช้ ซึ่งมักจะมาจากปลั๊กอิน

คุณยังสามารถใช้ CSS Saver ของ Rapidload เพื่อดูว่า CSS ใดที่คุณจะเสียไปจากเว็บไซต์ของคุณได้:

4. กำจัดทรัพยากรที่ปิดกั้นการเรนเดอร์

Render-blocking CSS และ JS คือไฟล์ที่ถูกตั้งค่าสถานะว่าบล็อกการระบายสีแรกของหน้าเว็บของคุณ

ปลั๊กอิน Autoptimize สามารถแก้ไขปัญหานี้ได้ และเป็นผลให้ปรับปรุงคะแนนของ Contentful Paint แรกและที่ใหญ่ที่สุดของคุณ

5. ลดเวลาตอบสนองของเซิร์ฟเวอร์เริ่มต้น

เวลาตอบสนองของเซิร์ฟเวอร์ขึ้นอยู่กับปัจจัยบางประการ: ธีมและปลั๊กอินที่คุณใช้ และประเภทของเว็บโฮสติ้งที่คุณมี

ลองลบปลั๊กอินส่วนเกินที่คุณไม่ได้ใช้หรือเปลี่ยนไปใช้ธีมแบบไลท์ เช่น Astra

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

6. ตรวจสอบให้แน่ใจว่ายังคงมองเห็นข้อความระหว่างการโหลดเว็บฟอนต์ ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏให้เห็นระหว่างการโหลดเว็บฟอนต์

หากคุณใช้แบบอักษรบนเว็บ คำแนะนำของ Google จะหยุดไม่ให้ข้อความในหน้าเว็บของคุณถูกมองไม่เห็นขณะโหลด

คำแนะนำแนะนำให้เพิ่ม font-display: swap; ในการประกาศ @font-face ของคุณในสไตล์ชีตของคุณ

ภาพหน้าจอด้านล่างแสดงวิธีเพิ่มพร็อพเพอร์ตี้นี้โดยใช้ปลั๊กอิน Asset CleanUp

7. รักษาจำนวนคำขอให้ต่ำและขนาดการถ่ายโอนมีขนาดเล็ก

Google PageSpeed ​​Insights บันทึกจำนวนไฟล์ที่เว็บเซิร์ฟเวอร์ร้องขอและขนาดของไฟล์เหล่านี้

หากคุณมีจำนวนมากที่นี่ คุณสามารถลดได้โดย:

• ปรับแต่งรูปภาพและไฟล์มีเดียของคุณให้เหมาะสม ขอแนะนำให้ใช้ไฟล์วิดีโอแทน GIF แบบเคลื่อนไหว
• เพิ่มประสิทธิภาพ CSS และ JS ของคุณ
• ปรับแบบอักษรและสคริปต์ของบุคคลที่สามให้เหมาะสม
• การลดขนาดของไฟล์ HTML

8. หลีกเลี่ยงการผูกมัดคำขอที่สำคัญ

คำขอสำคัญคือคำขอที่จำเป็นต่อการโหลดหน้าเว็บ ตัวอย่างเช่น โลโก้อาจเป็นคำขอที่สำคัญ

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

ตาม Google เพื่อหลีกเลี่ยงการเชื่อมโยงคำขอที่สำคัญ คุณควร:

• ลดจำนวนทรัพยากรที่สำคัญให้เหลือน้อยที่สุด: กำจัดทรัพยากรเหล่านี้ เลื่อนเวลาการดาวน์โหลด ทำเครื่องหมายเป็น async และอื่นๆ
• ปรับจำนวนไบต์ที่สำคัญให้เหมาะสมเพื่อลดเวลาในการดาวน์โหลด (จำนวนรอบการเดินทาง)
• ปรับลำดับการโหลดทรัพยากรวิกฤตที่เหลืออยู่ให้เหมาะสม: ดาวน์โหลดสินทรัพย์วิกฤตทั้งหมดให้เร็วที่สุดเท่าที่จะเป็นไปได้เพื่อลดความยาวเส้นทางวิกฤต

คุณสามารถทำได้โดย:

• โหลดคำขอคีย์ รูปภาพ และฟอนต์ล่วงหน้าโดยใช้ “link rel=”โหลดล่วงหน้า” ใน HTML ที่อ้างถึง
• ย่อขนาด CSS และ JavaScript ของคุณ
• กำจัดทรัพยากรที่ปิดกั้นการเรนเดอร์

คุณสามารถใช้ปลั๊กอินอย่าง WP Rocket เพื่อทำงานเหล่านี้ให้คุณได้

9. หลีกเลี่ยงงานเธรดหลักที่ยาว และลดงานเธรดหลัก

งานเธรดหลักแบบยาวคืองาน JavaScript (มากกว่า 50 มิลลิวินาที) ที่ทำให้เวลาในการโต้ตอบสำหรับผู้ใช้ล่าช้า

การลดงานเธรดหลักให้เหลือน้อยที่สุดหมายถึงการลดเวลาในการแยกวิเคราะห์ คอมไพล์ และเรียกใช้ JS

คุณสามารถลดความยาวและเวลาของงาน JavaScript ได้โดย:

• ลดการใช้ปลั๊กอินของคุณให้เหลือน้อยที่สุด
• การโฮสต์ฟอนต์และสคริปต์การวิเคราะห์ของคุณในเครื่อง
• ย่อหรือเลื่อน JS และ CSS
• ขี้เกียจโหลดภาพพื้นหลัง

ดูบทความต่อไปนี้สำหรับคำแนะนำเพิ่มเติมเกี่ยวกับการลดการทำงานของเธรดหลักใน WordPress

10. หลีกเลี่ยงการเลื่อนเค้าโครงขนาดใหญ่ หลีกเลี่ยงการเลื่อนเค้าโครงขนาดใหญ่

การเปลี่ยนแปลงเลย์เอาต์ทำให้เกิดเมตริก Cumulative Layout Shift และสร้างความประทับใจให้กับผู้ใช้ในการกระโดดหน้า

คุณสามารถแก้ปัญหานี้ได้โดย:

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

สำหรับข้อมูลเพิ่มเติม โปรดอ่านคำแนะนำเกี่ยวกับการแก้ไขการเปลี่ยนแปลงเลย์เอาต์แบบสะสมใน WordPress

11. ลดผลกระทบของรหัสบุคคลที่สาม

สคริปต์ของบุคคลที่สามคือโฮสต์ที่อื่น เช่น การติดตามของ Google Analytics หรือการฝัง YouTube

หากเป็นไปได้ ให้ลองโฮสต์สคริปต์ในเครื่อง คุณไม่สามารถทำเช่นนี้กับ YouTube ได้ แต่คุณสามารถโฮสต์รหัสการวิเคราะห์และแบบอักษรในเครื่องได้

คุณสามารถใช้ปลั๊กอิน Local Google Fonts เพื่อโฮสต์ Google Fonts บนเซิร์ฟเวอร์ของคุณเอง

ปลั๊กอิน Local Google Analytics สำหรับ WordPress – แคชคำขอภายนอกจะโฮสต์ Google Analytics ของคุณไว้ในเครื่อง

12. ใช้ CDN

เครือข่ายการจัดส่งเนื้อหาเป็นเครือข่ายระยะไกลของเซิร์ฟเวอร์ซึ่งจัดเก็บและให้บริการเนื้อหาเว็บแก่ผู้ใช้

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

เราใช้ Cloudflare CDN ที่ WP Shout คุณสามารถเริ่มต้นใช้งานได้ฟรี

เรียนรู้เพิ่มเติมเกี่ยวกับสาเหตุที่คุณควรใช้ CDN และตัวเลือกที่ดีที่สุด

บทสรุปเกี่ยวกับวิธีรับคะแนน Google PageSpeed ​​Insights 100

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

คุณไม่ควรหมกมุ่นอยู่กับการทำคะแนน 100 มากเกินไป – คะแนน 90+ ก็ยังถือว่าดีมาก อ่านโพสต์ของ David เกี่ยวกับการเพิ่มประสิทธิภาพไซต์เพื่อดูว่าเราทำอะไรเพื่อปรับปรุงคะแนนของเรา