เทคนิคปรับเว็บไซต์ให้รองรับ SEO แบบเต็ม 100 บน web.dev

เทคนิคปรับเว็บไซต์ให้รองรับ SEO แบบเต็ม 100 บน web.dev

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

เช็กเว็บไซต์ด้วย Web.dev

Web.dev เป็นเครื่องมือที่ช่วยวัดประสิทธิภาพของเว็บไซต์คุณว่าทำงานได้ดีแค่ไหน พร้อมไกด์ปรับปรุงแก้ไขเว็บไซต์ โดยผู้ใช้งานสามารถเข้าไปยังเว็บไซต์ https://web.dev/measure/ และแปะลิงก์เพื่อเช็ก หลังจากนั้น ก็กด View Report เพื่อดูผลลัพธ์ของการเช็ก โดยในหน้า Report จะแสดงผลลัพธ์ออกมา 4 ด้าน ดังนี้

  • Performance
  • Accessibility
  • Best Practices
  • SEO

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

Accessibility

การตรวจสอบในส่วนนี้ เน้นถึงโอกาสในการปรับปรุงการเข้าถึงเว็บไซต์ ระบบจะตรวจพบเฉพาะปัญหาการช่วยการเข้าถึงโดยอัตโนมัติ

100 Accessibility

Background and foreground colors do not have a sufficient contrast ratio.

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

Heading elements are not in a sequentially-descending order

ส่วนใหญ่ screen readers มักมีคำสั่งข้ามไปมาระหว่างส่วนหัวหรือไปยังพื้นที่ที่เป็นจุดสังเกตอย่างรวดเร็วหรือไปยังหน้าที่ไม่คุ้นเคยจากการอ่านแค่ส่วนหัว ดังนั้น ควรเริ่มแก้ไขจากส่วนหัวก่อน โดยมีวิธีแก้ไขดังนี้

  • ตรวจสอบให้แน่ใจว่าส่วนหัวของคุณ นั้นสื่อถึงเนื้อหาที่เกี่ยวข้องอย่างชัดเจน
  • มีการเรียงลำดับเพื่อให้เข้าใจโครงสร้างของเนื้อหา

Links do not have a discernible name

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

[aria-hidden=”true”] is present on the document <body>

การใช้โค้ดรูปแบบนี้บนเว็บไซต์ เป็นการซ่อนหน้าเว็บทั้งหมดจากผู้ใช้ที่ใช้งานผ่าน Screen readers ดังนั้นวิธีแก้ไขคือลบโค้ดส่วนนี้ออกจากหน้าเว็บไซต์ซะ หรืออีกทางคือ ใส่ main ไว้หน้า aria-hidden

The page contains a heading, skip link, or landmark region

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

  • วางเนื้อหาให้อยู่ในจุดที่สังเกตเห็น
  • ตรวจสอบให้แน่ใจ ว่าเนื้อหาที่เห็นนั้น แสดงประเภทของเนื้อหาอย่างถูกต้อง
  • ใช้ Skip link

Document has a <title> element

การที่มี <title> อยู่ทุกหน้าเว็บจะช่วยให้ผู้ใช้พิจารณาว่านี่ใช้สิ่งที่เขาค้นหาหรือไม่ ซึ่งเคล็ดลับในการสร้างชื่อที่ดี คือ

  • ในแต่ละหน้าอย่าใช้ชื่อซ้ำกัน
  • ตั้งชื่อเรื่องที่มีความหมายกระชับ หลีกเลี่ยงการใช้คำคลุมเครือ
  • หลีกเลี่ยงการใช้คีย์เวิร์ดในทางที่ผิด

[id] attributes on active, focusable elements are unique

หลีกเลี่ยงการใช้ ID ซ้ำกัน เพราะหากมีการใช้ซ้ำ หน้าเว็บอาจแสดงเพียง ID ตัวแรก ทำให้ปิดกั้นการมองเห็นตัวอื่น ๆ ได้

<html> element has a [lang] attribute

หากหน้าเว็บไม่มีการระบุภาษาพื้นฐานสำหรับ <html> เวลาผู้ใช้ที่ใช้ Screen readers ภาษาจะเปลี่ยนไปตามอุปกรณ์ที่ผู้ใช้ใช้งาน ซึ่งอาจให้เนื้อหาผิดเพี้ยนได้ ยกตัวอย่างเช่น หน้าเว็บไซต์ของคุณเป็นภาษาอังกฤษ แต่ผู้ใช้ใช้ภาษาไทย การแปลมาอาจไม่ตรงกับความหมายที่แท้จริง วิธีแก้ทำได้ง่าย ๆ เพียงกำหนดภาษาให้กับหน้าเว็บไซต์ด้วย <html lang= “en”>

<html> element has a valid value for its [lang] attribute

เพื่อให้แน่ใจว่าในหน้านั้น สามารถออกเสียงภาษาโดยรวมได้ถูกต้อง คุณต้องระบุ BCP 47 language ใช้วิธีแก้ไขเหมือนข้อที่แล้วคือ <html lang= “en”>

Image elements have [alt] attributes

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

List items (<li>) are contained within <ul> or <ol> parent elements

รวบรวม <li> ที่ไม่มี Element ไว้ภายใน Element <ul> หรือ <ol>

Best Practices

100 Best Practices

Links to cross-origin destinations are unsafe

การเชื่อมโยงเว็บไซต์ของคุณไปยังไซต์อื่น ๆ ด้วย target=“_blank” แอตทริบิวต์ของคุณสามารถเปิดเผยไซต์ของคุณเกี่ยวกับปัญหาด้านความปลอดภัย

วิธีในการปรับปรุง
เพิ่ม rel=”noopener” หรือ rel=”noreferrer” เข้าไปใน target=”_blank” เพื่อป้องกันไม่ให้ไซต์อื่น ๆ เข้าถึงเว็บไซต์ของคุณ

Browser errors were logged to the console

Message Locked ใน Console มาจากนักพัฒนาเว็บไซต์ที่มีการสร้างเว็บไซต์ขึ้นมาเอง โดยจะมีระดับความรุนแรง 4 ระดับ คือ

  • Verbose
  • Info
  • Warning
  • Error

ซึ่งถ้าเกิด Error แสดงว่าหน้าเว็บไซต์ของคุณต้องได้รับการแก้ไขทันที

Missing source maps for large first-party JavaScript

Source Maps ที่แปลงจาก minified code ไปเป็น original source code นั้น ช่วยให้นักพัฒนาสามารถแก้ไขข้อบกพร่องได้จริง นอกจากนี้ Lighthouse ยังสามารถให้ข้อมูลเชิงลึกเพิ่มเติม พิจารณาปรับใช้ Source Maps เพื่อนำสิ่งเหล่านี้ไปใช้ประโยชน์ต่อ

Uses HTTPS

เว็บไซต์ทั้งหมดควรได้รับการป้องกันเบื้องต้นคือการใช้ HTTPS เพื่อไม่ให้ผู้อื่นเข้ามาบุกรุกหรือยุ่งเกี่ยวกับไซต์ของคุณได้อย่างง่ายดาย

Avoids requesting the geolocation permission on page load

การขออนุญาตเก็บตำแหน่งทางภูมิศาสตร์ของผู้ใช้งานเว็บไซต์

Avoids requesting the notification permission on page load

การขออนุญาตส่งแจ้งเตือนไปยังผู้ใช้งาน ต้องมีการขออนุญาตทุกครั้ง

Avoids front-end JavaScript libraries with known security vulnerabilities

พยายามหยุดใช้ไลบรารีของ JavaScript ที่ไม่มีความปลอดภัย

Displays images with correct aspect ratio

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

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

Serves images with appropriate resolution

ควรใช้รูปภาพที่ทำออกมาแค่ขนาดเดียว แต่สามารถใช้งานได้ทุก ๆ อุปกรณ์ที่แสดง

Page has the HTML doctype

หากเว็บไซต์ไม่ได้มีการกำหนดหน้าหลักหรือรูปแบบหลักไว้ ส่งผลให้เว็บไซต์แสดงรูปลักษณ์ที่แปลกประหลาดออกมา ดังนั้น ควรเพิ่ม <!DOCTYPE html> ไว้ด้านบนโค้ด HTML ของทุกหน้า

Properly defines charset

Server และ Browser สื่อสารกันด้วยการส่งข้อมูลจำนวนไบท์กันผ่านอินเทอร์เน็ต แต่หาก Server ไม่มีการระบุ charset เมื่อส่งไฟล์ Browser จะไม่สามารถรู้ได้ว่า charset แต่ละไบท์คืออะไร ดังนั้น เพิ่ม <meta charset> ไว้เป็นองค์ประกอบของ Html และเพ่ม Content-Type ในส่วน HTTP response header

Avoids Application Cache

หากคุณจะใช้ Application Cache แนะนำให้ใช้ Cache API ผ่านผู้ให้บริการแทน เพื่อความปลอดภัยและผ่านการตรวจสอบจาก Lighthouse

Detected JavaScript libraries

ส่วนนี้ Lighthouse จะแสดงไลบรารีของ JavaScript ทั้งหมดที่มี ดังนั้นควรอัปเดตไลบรารีของคุณอย่างสม่ำเสมอ

Avoids deprecated APIs

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

SEO

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

100 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

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

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

รู้อย่างนี้แล้ว อย่าลืมลองเข้าไปใช้งาน web.dev กันนะครับ แล้วคุณจะเปลี่ยนเว็บไซต์ของคุณ ให้รองรับการทำ SEO แบบ 100 เต็ม แน่นอนครับ!!