Performance

Metrics

First Contentful Paint

เป็นหนึ่งในเมตริกที่วัดระยะเวลาหรือวัดความเร็วในการดาวน์โหลดหน้าเว็บไซต์เมื่อ DOM ตัวแรกปรากฏขึ้น แม้หน้าเว็บไซต์ยังแสดงข้อมูลไม่ครบก็ตาม

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

Speed Index

เป็นหนึ่งในเมตริกที่วัดความเร็วในการแสดงเนื้อหาระหว่างการโหลดหน้าเว็บไซต์ โดย Lighthouse จะจับความเร็วภาพของวิดีโอที่โชว์บนหน้าเว็บไซต์ จากนั้นจะใช้ Speedline Node.js module เพื่อสร้างคะแนนของ Speed Index

วิธีในการปรับปรุง
แม้ว่าคุณจะทำการปรับปรุงความเร็วในการดาวน์โหลดหน้าเว็บไซต์ เพื่อเพิ่มคะแนน Speed Index แล้ว แต่ก็จำเป็นต้องแก้ไขให้คะแนนดีมากขึ้น เช่น ลด Thread work หลัก, ลดเวลาในการดำเนินการของ JavaScript เป็นต้น

Largest Contentful Paint

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

• Server ตอบสนองช้า
• บล็อกการแสดงผล JavaScript และ CSS
• ใช้ไฟล์ที่มีขนาดใหญ่เกินไป ส่งผลให้เกิดการดาวน์โหลดช้า

วิธีในการปรับปรุง

• ใช้การโหลดแบบทันทีด้วยรูปแบบ PRPL
• เพิ่มประสิทธิภาพการแสดงผลที่สำคัญ โดยเฉพาะ CSS และ JavaScript
• ปรับขนาดภาพให้มีขนาดที่เหมาะสม
• ปรับแต่ฟ้อนต์ของเว็บ

Time to Interactive

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

วิธีในการปรับปรุง
การปรับปรุงที่ส่งผลอย่างมากสำหรับการทำ Time to Interactive คือลบ JavaScript ที่ไม่จำเป็นออกไป และมองหาโอกาสในการเพิ่มประสิทธิภาพ JavaScript ที่มีให้ดีมากขึ้น โดยเฉพาะการลด Payloads ของ JavaScript ด้วยการแยกโค้ดและใช้รูปแบบ PRPL

Total Blocking Time

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

• การเรียกใช้ JavaScript ที่ไม่จำเป็น
• คำสั่ง JavaScript ไม่มีประสิทธิภาพ

วิธีในการปรับปรุง
ตรวจดูว่าอะไรเป็นสาเหตุที่ทำระยะเวลาที่ยาวนานอันนั้น เพื่อเรียนรู้และปรับปรุงประสิทธิภาพในส่วนนั้น

Cumulative Layout Shift

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

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

• ใส่ขนาดของ Attributes ไว้ใน Element ของรูปภาพและวิดีโอเสนอ กำหนดอัตราส่วนต่าง ๆ ไว้อย่างชัดเจน เพื่อให้มั่นใจว่าจะสามารถจัดสรรสัดส่วนได้อย่างถูกต้อง
• อย่าพยายามแทรกเนื้อหาไว้บนเนื้อหาที่มีอยู่ ยกเว้นจะทำไปเพื่อตอบสนองการใช้งานของผู้ใช้

Preload key requests

พิจารณาการใช้ <link rel=preload> เพื่อจัดลำดับความสำคัญในการดึงทรัพยากรที่ร้องขอภายหลังจากการดาวน์โหลดหน้าเว็บไซต์

Remove unused CSS, Remove unused JavaScript

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

Does not use passive listeners to improve scrolling performance

ป้องกันไม่ให้เกิดความผิดปกติกับประสิทธิภาพของ Scrolling ควบคุม Script เหล่านี้ให้ได้ บางทีอาจมี Script จาก Third-Party ที่อาจส่งผลกระทบให้ Scrolling ผิดปกติได้

Minimize main-thread work

ทุกๆครั้งที่เว็บไซต์ถูกเปิดขึ้นมา ระบบจะสร้าง Thread ขึ้นมา เราเรียกมันว่า Main-Thread หรืออีกชื่อหนึ่งคือ UI Thread มันคือ Thread ที่เป็นส่วนที่เอาไว้ติดต่อสื่อสารกับผู้ใช้ ที่ประกอบไปด้วย HTML, CSS และ JavaScript หากการทำงานของ Main Thread ใช้เวลานานเกินไปอาจส่งผลให้ UX ไม่ดีและใช้เวลาในการโหลดหน้าเว็บช้า

Reduce JavaScript execution time

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

Avoid chaining critical requests

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

วิธีในการปรับปรุง

• ลดจำนวน DOM ให้เหลือน้อยที่สุด
• ปรับจำนวน critical byte ให้เหมาะสม เพื่อลดเวลาในการดาวน์โหลด

Keep request counts low and transfer sizes small

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

Avoid large layout shifts

คือการตรวจจับ DOM ที่มีส่วนร่วมหรือส่งผลกระทบต่อ CLS ของเพจมากที่สุด

Avoid long main-thread tasks

แสดงการรายงานที่ใช้ระยะเวลานานที่สุดของ Main-Thread ซึ่งตรงนี้มีประโยชน์สำหรับการระบุไฟล์ที่หน่วงเวลาในการโหลดหน้าเว็บที่สุด

Eliminate render-blocking resources

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

วิธีในการปรับปรุง
ส่วนของ JavaScript – เอา Script ไปวางไว้ก่อนปิดแท็ก Body ในหน้านั้น
ส่วนของ CSS – นำ <link rel=”stylesheet” href=”styles.css”> ไปวางไว้ในส่วนของ Body แทน

Properly size images, Efficiently encode images

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

วิธีในการปรับปรุง

• ลดขนาดของภาพให้เล็กลง อาจใช้โปรแกรม Photoshop หรือ เข้าไปที่เว็บไซต์ tinypng.com
• หากคุณใช้ WordPress สามารถใช้ WordPress ในการลดขนาดภาพได้

Defer offscreen images

เกิดจากการที่รูปภาพโหลดขณะที่ยัง Scroll Down ไปไม่ถึง อาจทำให้เกิดปัญหาในการดาวน์โหลดเว็บไซต์ช้ากว่าเดิม

วิธีในการปรับปรุง
นำ Lazy Load มาใช้ในการจัดการ เพื่อกันไม่ให้ดาวน์โหลดรูป เมื่อยัง Scroll ลงมาไม่ถึงในส่วนนั้น

Minify CSS

การลดขนาดของไฟล์ CSS สามารถปรับปรุงประสิทธิภาพการโหลดหน้าเว็บไซต์ เพราะไฟล์ CSS มักมีขนาดใหญ่กว่าที่จำเป็น ซึ่ง Minify JavaScript ก็เช่นกัน

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

Serve images in next-gen formats

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

วิธีในการปรับปรุง
หากคุณใช้ WordPress สามารถใช้ปลั๊กอิน WebP Express ในการจัดการได้

Enable text compression

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

1. กด Control + Shift + J เพื่อเปิด Chrome DevTools
2. คลิกแท็บ Network
3. คลิก Request เพื่อให้เกิดการตอบกลับที่สนใจ
4. คลิกแท็บ Headers
5. เช็ก content-encoding

Preconnect to required origins

แสดงรายการ key request ที่ยังไม่ได้จัดลำดับความสำคัญของคำขอในการดึงข้อมูล ซึ่งโดยปกติแล้วระบบจะสร้าง DOM ขึ้นมาเสร็จแล้วถึงค่อยไปโหลด CSS ที่เหลือขึ้นมา ซึ่งกว่าจะโหลดเสร็จนั้นก็ใช้เวลา เมื่อต้องรอตัวนั้นแล้วมารอตัวนี้อีก อาจทำให้ใช้เวลานานเกินไป

วิธีในการปรับปรุง
ปกติถ้าจะต้องเขียนโค้ดเอง ก็จะใช้ <link rel=”preconnect”> แต่ถ้าคุณใช้ WordPress ก็มีปลั๊กอินที่ช่วยตรงนี้ก็มี คือ Pre*Party Resource Hints

Avoid multiple page redirects

การ Redirect ทำให้ความเร็วในการดาวน์โหลดเว็บไซต์ช้าลง เบราว์เซอร์จะต้องทำการร้องขอ HTTP อีกครั้งที่ตำแหน่งใหม่เพื่อดึงทรัพยากร

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

Use video formats for animated content

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

Remove duplicate modules in JavaScript bundles

ลบ Modules ของ JavaScript ขนาดใหญ่ที่มีการทำงานซ้ำกันออกจาก Bundles เพื่อลดการโหลดที่ไม่จำเป็น

Avoid serving legacy JavaScript to modern browsers

หลีกเลี่ยงการใช้ JavaScript ในรูปแบบเก่าหรือรูปแบบเดิม ในเบราว์เซอร์ปัจจุบัน เนื่องจากมีการอัปเดตเบราว์เซอร์ การใช้ JavaScript รูปแบบใหม่จะสามารถรองรับได้มากกว่า

Avoids enormous network payloads

เป็นปัญหาที่เกิดบ่อยมากกับเว็บไซต์ที่มีเนื้อหายาวๆ คุณควรแบ่งออกเป็นหลายๆหน้ามากกว่ารวมเนื้อหาไว้ในหน้าเดียว

วิธีในการปรับปรุง
พยายามอย่าเชื่อมต่อไปที่โดเมนอื่น ๆ มากเกินไป แต่ถ้าจำเป็นต้องทำ ต้องมีการควบคุมอย่างดี เพื่อไม่ให้เกิดปัญหานี้

Serve static assets with an efficient cache policy

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

• ฟอนต์, รูปภาพ, ไฟล์, Script, Stylesheet
• มีรหัส 200, 203, 206 HTTP
• ไม่มีนโยบายหรือไม่มีแคชที่ชัดเจน

Avoids an excessive DOM size

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

• มี DOM เกิน 1,500 โหนด
• มีความลึกของ DOM เกิน 32 โหนด
• มีโหนดลูกมากเกินกว่า 60 โหนด

User Timing marks and measures

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

All text remains visible during webfont loads

ใช้ประโยชน์ฟีเจอร์ CSS ที่แสดงแบบอักษร เพื่อให้แน่ใจว่าข้อความจะปรากฏให้ผู้ใช้เห็นขณะที่ webfont กำลังโหลด

Minimize third-party usage

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

Avoids document.write()

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

Avoids large JavaScript libraries with smaller alternatives

ไลบรารีของ JavaScript ขนาดใหญ่อาจทำให้ประสิทธิภาพต่ำลง ต้องใช้ไลบรารีที่เล็กกว่าและมีฟังก์ชันเทียบเท่า เพื่อลดขนาดของ Bundle

SEO

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

Content Best Practices

จัดรูปแบบ HTML ให้โปรแกรมรวบรวมข้อมูลเข้าใจเนื้อหาบนเว็บไซต์ของคุณได้ดียิ่งขึ้น

Mobile Friendly

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

Has a <meta name=”viewport”> tag with width or initial-scale

จำเป็นต้องมี viewport meta tag เพื่อให้เมื่อเปิดใช้งานบนอุปกรณ์พกพาแล้วแสดงหน้าเว็บไซต์ที่พอดีกับหน้าจอ

Document has a <title> element

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

Document has a meta description

meta description สามารถเพิ่มปริมาณการค้นหาของคุณได้ เทคนิคคือ ควรมี meta description เฉพาะหน้านั้น ๆ และอธิบายให้ชัดเจน

Page has successful HTTP status code

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

Links have descriptive text

ระบุ hyperlink ไปให้ชัดเจนเลยว่า หากผู้ใช้งานคลิกไปนั้น จะคลิกไปที่หน้าใด

robots.txt is valid

หาก root.txt ของคุณผิดปกติอาจทำให้เกิดปัญหา 2 ประเภท คือ

• Search Engine เข้ามารวบรวมข้อมูลบนเว็บไซต์ไม่ได้ ทำให้อันดับในหน้าการค้นหาน้อยลง
• Search Engine อาจไปดึงข้อมูลจากหน้าที่คุณไม่ต้องการให้แสดงบนหน้าการค้นหา
  ดังนั้นตรวจสอบให้แน่ใจว่า robots.txt ของคุณนั้นไม่ได้แสดง HTTP 5XX เพื่อให้โรบอททำงานได้ดีมากขึ้น

Image elements have [alt] attributes

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

Document has a valid hreflang

hreflang ช่วยให้ระบุหน้าเว็บไซต์ในแต่ละภูมิภาคหรือแบ่งเวอร์ชันของหน้าเว็บไซต์ในแต่ละภาษาได้ ยิ่งถ้าคุณมีเว็บไซต์หลายภาษา คุณควรเพิ่มไฟล์นี้เข้าไป ห้ามขาด

Document has a valid rel=canonical

การใช้ canonical ช่วยให้ Serach Engine รวบรวมหน้าที่เหมือนกันให้เป็น URL เดียวกัน เพื่อป้องกันปัญหาการใช้หน้าซ้ำกันทั้งในเวอร์ชัน Desktop และเวอร์ชันอุปกรณ์พกพา

Document uses legible font sizes

ตั้งค่าขนาดของตัวอักษรภายในเว็บไซต์ให้อ่านง่าย โดยควรมีขนาดตั้งแต่ 12 px ขึ้นไป

Tap targets are sized appropriately

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