หมวดหมู่: know-how

23 วิธีปรับขนาดไฟล์รูป ทำเว็บให้โหลดเร็ว แบบง่ายๆ แต่ผลลัพธ์แทบตะลึง

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

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

  • ปรับแต่งรูปภาพให้เหมาะสมก่อนการอัปโหลด – การใช้โปรแกรมเช่น Photoshop เพื่อปรับแต่งรูปภาพให้เหมาะสมก่อนที่จะอัปโหลดสามารถประหยัดงานได้มาก คุณสามารถปรับขนาดบีบอัดดึงข้อมูล EXIF ​​บันทึกในรูปแบบที่ถูกต้อง (เช่น PNG / JPEG / WebP) และเขียน alt ไฟล์ที่สื่อความหมายได้
  • หากคุณต้องการภาพที่มีความละเอียดสูง (เช่นเว็บไซต์เกี่ยวกับการถ่ายภาพ) คุณอาจไม่ต้องการปรับขนาดและบีบอัด ซึ่งนั่นก็มีวิธีทำให้เว็บโหลดเร็วขึ้น เช่น Lazyload
  • เครื่องมือหลักที่เราใช้ – เราใช้ Imagify สำหรับการบีบอัดแบบไม่สูญเสียเพิ่มเติม + การลบข้อมูล EXIF, CDN,  ปลั๊กอินคุณสมบัติ ALT ภาพอัตโนมัติไปยังไฟล์รูปภาพ

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

ไป.. ไปเริ่มกันเลย 23 วิธีมีอะไรบ้างมาอ่านกัน

1.ค้นหารูป ที่แย่ ก่อน

ให้คุณเปิดเว็บคุณด้วย GTmetrix ก่อน แล้วกดทดสอบ แล้ว คุณจะเห็นรายการเหล่านี้ในแท็บ Page Speed ​​/ YSlow โดย GTmetrix จะแสดงคำแนะนำที่คุณควรจะปรับแก้ทั้งหมดเกี่ยวกับรูปภาพของคุณ โดยจะส่งผลต่อคะแนน

ที่ Tab PageSpeed ให้ดูช่อง Type Column ที่เป็น Images

แล้วเราจะรู้ทันที่ว่าเราจะควรทำอะไรกับมันโดย มันจะมี Type มากมายให้เราเลือกปรับ ใน GTMetrix แต่เราขอบอกว่าให้เน้นไปที่ Type Images ก่อน เพื่อ Post นี้เกี่ยวกับการปรับรูปภาพ

2.หัวใจหลักของการปรับรูป มี 8 ข้อ ทำเว็บให้โหลดเร็ว

  1. Serve scaled images : แสดงภาพที่ปรับขนาด ซึ่งใน GTmetrix มีแค่ขนาดจอ Desktop เท่านั้นที่เขาแนะนำ
  2. Specify image dimensions : ระบุขนาดของรูปภาพให้เหมาะสม
  3. Optimize images : ปรับคุณภาพของรูปภาพให้เบาที่สุดแต่ไม่ลดคุณภาพ
  4. Combining images using CSS sprites : ใช้ CSS sprites ในการรวมภาพ ลด Request เหมาะสำหรับภาพขนาดเล็กๆ
  5. Avoid URL redirects : หลีกเลี่ยงการ เปลี่ยนเส้นทาง URL
  6. Use a content delivery network : ใช้ CDN เพื่อใช้ Server จำนวนมากทั่วโลก รับโหลดรูปภาพแทน Server ของคุณแค่ตัวเดียว
  7. Leverage browser caching : ใช้ Browser Cache เพื่อไม่ต้องโหลดรูปใหม่ทุกครั้ง ในกรณีที่เคยเปิดหน้าเว็บคุณมาแล้วเคยโหลดรูปนั้นไว้แล้ว
  8. Make favicon small and cacheable : ทำ Icon เว็บของคุณให้มีขนาดเล็ก

3.ปรับขนาดภาพ Serve scaled images

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

servescale-image

โดย GTMetrix จะแนะนำ ขนาดที่ควรปรับ แต่ขอย้ำส่วนใหญ่จะมีเฉพาะ Desktop ส่วน Mobile จะไม่มีในระบบ Suggest

เมื่อคุณ Upload 1 รูปภาพมันจำเป็นต้องมีหลายขนาด บางเว็บ 1 รูป มีถึง 40 ขนาด โดยขนาดพื้นที่จัดเก็บจะถูกใช้ปริมาณมากเกือบ 40 เท่า แต่ผหากเป็น Dynamic จริงๆ และ 1 รูปจะมีไฟล์แค่ 1 ขนาด แต่รูปจะถูกปรับโดย Code จาก Server แล้วส่งขนาดรูปให้พอเหมาะกับขนาด Browser ของแต่ละอุปกรณ์

สำหรับเราแล้ว เราจะไม่ใช้การปรับแบบ Static ที่รูปๆหนึ่งจะมีขนาดที่ตายตัว บนหลายอุกปรณ์ เราได้ใช้ระบบ Dynamic Scale Image โดยจะปรับขนาดให้พอเหมาะกับหน้าจอ ทุกอุปกรณ์ ข้อดีมากๆ คือ ขนาดจะลดลงเท่าที่จำเป็น และ คุณภาพรูปก็จะไม่เสีย แต่แน่น Package นี้มีค่าใช้จ่ายเพิ่ม หากคุณรับไม่ได้คุณใช้ระบบ Static ปกติ ก็ได้เราทำให้เป็นเพื่นฐานอยู่แล้ว

4.ระบุขนาดภาพ ไปเลย

ในเมื่อเลือกปรับแบบ Static เราก็ต้องมาก Code กันต่อให้รูป เป็นขนาดที่พอเหมาะสำหรับ GTmetrix ได้บอกไว้ว่าควรเป็นเท่าไร

คือต้องมานับปรับที่ละรูป ถ้าคุณพอมีเวลาก็มานั่งทำเลย ถ้าถ้าไม่มีเวลา ก็จ้างเราได้นะ

5. บีบอัดรูปภาพแบบไม่สูญเสีย

สิ่งเหล่านี้คือรายการ “ปรับภาพให้เหมาะสม” โดยการบีบอัดภาพ ซึ่งมีหลายวิธี ไม่ว่าจะเป็น Imagify , คราเคน , ShortPixel หรือ Smush ก็สามารถบีบอัดได้ดีไม่ต่างกันมากแล้ว

โดยส่วนตัวเราแนะนำ Imagify โดยสามารถปรับทีละรูปให้เข้ากับเว็บไซต์ คุณ หรือ หากคุณเป็นโปรแกรมเมอร์ที่เชี่ยวชาญด้าน Linux ขั้นเซียน คุณก็สามารถใช้ Command line โดยใช้ JpegOptim และ OptiPNG ในการปรับทั้ง Directory รูปภาพได้

สำหรับ เราแล้ว เราไม่ชอบการบีบอัดภาพซักเท่าไร เราชอบเว็บที่มีความชัดของภาพ แล้ว Pagespeed Insights ก็ไม่ได้ซีเรียสมากมายกับการบีบอัด แต่จะเน้นไปที่การ Render เว็บให้เห็นเว็บไว เป็นหลักไปแล้ว

6.รวมรูปภาพเป็น CSS Sprites

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

หากคุณใช้ Server ที่เป็น http 2.0 เราก็ว่าไม่จำเป็นต้องใช้ CSS Sprites เลย

7.หลีกเลี่ยงการเปลี่ยนเส้นทาง URL รูปภาพ

การเปลี่ยนเส้นทาง URL หรือ Redirect URL คือ การสั่งให้ โหลดเปลี่ยนที่ เช่น เว็บของคุณ คือ “http://www.abc.com” แต่เวลาคุณใส่ตำแหน่งรูปภาพ คุณไม่ได้ใส่ “www.” ไปใส่แค่ “http://abc.com” ไม่ได้ แบบนี้จะเกิดการ Redirect ทันที จาก http://abc.com ไป http://www.abc.com

ซึ่งใน GTmetrix ก็บอกไว้ชัด

เว็บคุณควรอยู่ใน Directory เดียวกัน การเปลี่ยนเส้นทาง URL ทำให้ Download ช้าขึ้น จำนวน 1 วินาทีแน่นอน ซึ่งถือว่าสูงมาก

เพราะ ฉะนัน คุณควร Find&Replace ให้อยู่ใน directory เดียวกัน

8.ใช้ CDN เข้าช่วย ทำเว็บให้โหลดเร็ว

CDN คือ Content Delivery Network แปลเป็นไทยก็คือ เครือข่ายการนำส่งเนื้อหา

ประโยชน์คือ ให้ Server ที่กระจายอยู่ทั่วโลก ส่งข้อมูลช่วย แทนที่จะใช้ Server คุณ Server เดียว

ข้อเสีย คือแพง คิดว่า Transfer เป็น GB ไม่ว่าจะ Akamai หรือ Cloudfront หรือ Google CDN ซึ่งฟรีก็มี ยอดนิยม ก็คือ Cloudflare แต่ ประสิทธิภาพ ไม่สู้เจ้าอื่น เพราะ คนใช้เยอะ โหลดช้า

การเปลี่ยนเป็น CDN ของเรา ดำเนินอยู่บน Akamai ซึ่งแน่นอน มีค่าใช้จ่ายรายเดือนเพิ่มเติม แต่เราไม่หักเพิ่ม ซึ่งเริ่มต้นที่เดือนละ 2000 บาทขึ้น โดยเรา คิดเพียงค่าติดตั้ง

Akamai คือ เบอร์ 1 ของบริการ CDN บนโลกนี้ แม้แต่ Facebook, Youtube ก็ยังใช้ โดยเราใช้บนระบบ Akamai ของ Reseller เจ้าอื่นในตลาด ซึ่ง หากซื้อผ่านกับ Akamai โดยตรง ไม่ต่ำกว่าเดือนละล้านบาท แต่เราหาให้คุณได้ ในราคาเริ่มต้น 2000 บาท/เดือน

9.ทำการ แคช ให้กับรูปภาพ

ปลั๊กอินแคชส่วนใหญ่มีตัวเลือกสำหรับการแคชเบราว์เซอร์ซึ่งจะแคชรูปภาพ  โดยกดเปิดมันซะ

โดยหากที่เคยโหลดรูปนี้มาแล้ว จะไม่ต้องโหลดใหม่อีก

10.ทำให้ Favicon มีขนาดเล็กและแคชได้

ตรวจสอบว่าไอคอน Favicon หรือ Icon ของคุณเว็บคุณ มีขนาด 16x16px เป็นรูปแบบ favicon.ico และแคชไว้โดยใช้ปลั๊กอินแคชของคุณ

11.ลบข้อมูล EXIF ของรูปออก

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

12.CDN ฟรี Cloudflare

จริงๆ แล้วใช้ Cloudflare ก็ไม่ได้เสียหายอะไร โดยสิ่งที่เราชอบก็มี

  • Cloudflare มี POP เยอะที่สุด รองจาก Akamai
  • ในเวอร์ชั่นเสียเงิน มีการปรับขนาดภาพตามอุปกรณ์ ได้
  • สามารถลดจำนวนคำขอ – แทนที่จะส่งคำขอจำนวนมากสำหรับรูปภาพทั้งหมดบนเว็บไซต์ Mirage
  • มีระบบ Anycast ที่ชื่อว่า ARGO
  • มีระบบลบข้อมูล EXIF ​​และบีบอัดรูปภาพ
  • มีระบบ Hotlink Protection ป้องกันไม่ให้ผู้อื่นคัดลอกรูปภาพของคุณและวางลงในเว็บไซต์ของตนเองซึ่ง โดยดูดแบนด์วิดท์ของคุณฟรีๆ

13.ใช้ Lazy Load

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

14.บันทึกเป็นรูปแบบที่ถูกต้อง

PNG เทียบกับ JPEG  

PNG ไม่มีการบีบอัด (ขนาดไฟล์ใหญ่กว่า) และควรใช้ในภาพธรรมดาที่ไม่มีสีมาก 

JPEG คือไฟล์บีบอัด (ขนาดไฟล์ที่เล็กกว่า) ซึ่งจะลดคุณภาพของภาพลงเล็กน้อย แต่มีขนาดเล็กลงและใช้ในภาพที่มีสีจำนวนมาก แต่ไม่มีภาพพื้นหลังใส มีแต่พื้นหลังทึบเท่านั้น

15.ตั้งชื่อไฟล์ภาพให้อ่านออก

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

16.ใส่ alt ในภาพทุกครั้ง

 Alternative Tags หรือ มันก็คือการใส่ชื่อให้กับรูปภาพนั้นเอง

เพราะ ส่งผลต่อ SEO อย่างมาก เสริมจากการตั้งชื่อไฟล์แล้ว ก็ควรใส่ alt โดยการใส่ ก็ควรจะเหมือนกับชื่อไฟล์รูปภาพของคุณ โดยคุณสามารถใช้ปลั๊กอิน Automatic Image Alt Attributesเพื่อใช้ชื่อไฟล์เป็นข้อความอัตโนมัติ ไม่ต้องมานั่งใส่เองทุกครั้ง

17. ใส่ รูป Open Graph เสมอ

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

18.ใช้ Featured Snippets

Google จะมีระบบดึงรูป Feature Image ของ Post หรือ หน้า ของเว็บเราที่ติดอันดับ 1 ของคีย์เวิร์ดนั้นไปแแสดง วิธีการทำก็ต้องใช้ SEO Plugin ในการช่วยบอกให้รู้ว่า Snipped image ของเราใช้รูปไหน

ตัวอย่างหน้าที่ไม่มี Feature Image
ตัวอย่างที่มี Feature Image

โดยตัวอย่างคำแนะนำจะมี 3 ประเภท

  1. คำตอบ
  2. ตารางเปรียบเทียบ
  3. รายการ

โดยจริงๆแล้วยังมีระบบ Google Schema ที่เราจะบอกต่อในข้อถัดไป เกี่ยวกับรูป

19.Google Schema

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

โดยมีโครงสร้างดังนี้

สามารถอ่านเพิ่มได้ที่ https://developers.google.com/search/docs/data-types/article

Google ชอบมาก หากเราทำตามมาตรฐานเขา

20.เปลี่ยน .GIF เป็น .MP4 หรือ WebM ซะ

GIF หรือ ภาพ อนิเมชั่น ทำให้เว็บโหลดช้า หากคุณทดสอบด้วย Google Lighthouse เขาจะแนะนำทันทีว่าให้เปลี่ยน

วิธีแรก สร้างวิดีโอ MPEG โดยการ Convert หากคุรติดตั้ง https://www.ffmpeg.org/ คุณสามารถสั่งให้ Convert ได้เลย หรือ จะ Online Convert ก็ง่ายดีไม่ต้องติดตั้งยุ่งยาก

วิธีที่สองแปลงเป็น .webM ซะ และ วิดีโอ WebM มีขนาดเล็กกว่าวิดีโอ MP4 มาก แต่เบราว์เซอร์บางประเภทไม่รองรับ WebM ดังนั้นจึงเหมาะสมที่จะสร้างทั้งสองอย่างทั้ง MP4 และ webM

นี่คือตัวอย่างขนาดไฟล์

21.หลีกเลี่ยง Gravatar

Wordpress มันจะดึงรูป Profile จาก Gravatar.com โดยเราต้องตรวจสอบว่าเราปิดหรือยัง เพราะ มันช้า เลย เหตุผลสั้นๆ หากคุณไม่อยากปิดคุณต้อง Cache Gravatar แบบ Local ดึงมาเก็บไว้ที่ Server เรา

22.หลีกเลี่ยงการฝังรูปภาพจากเว็บไซต์ภายนอก

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

23.สรุป เครื่องมือที่ควรใช้

  • Automatic Image Alt Attributes – ใช้แทรกข้อความ alt โดยอัตโนมัติโดยใช้ชื่อไฟล์ภาพ
  • Better Search Replace – ใช้แก้ redirection
  • Cloudflare – CDN ฟรี แต่เราแนะนำให้ใช้ Akamai
  • Chrome DevTools – ตรวจสอบ Error Network ได้
  • CSS Sprite Generator – ใช้รวมภาพเล็กๆ ที่ใช้บ่อย
  • GTmetrix – ใช้ตรวจสอบภาพคุณภาพแย่ และ ขนาดที่ใหญ่เกินไป
  • Imagify –ใช้บีบอัดรูปภาพ หรือ จะแปลงเป็น WebP ก็ได้
  • Imsanity – resizes รูปภาพให้มีหลายขนาด แต่จะทำให้เว็บคุณพื้นที่ใหญ่ได้
  • Lazy Load –  ปลั๊กอินที่ทำให้การโหลดภาพล่าช้าจนกว่าจะมองเห็นได้
  • Optimum Gravatar Cache – โหลด Gravatar มาเก็บไว้ที่ Local
  • Yoast – เปิดใช้งาน OpenGraph Facebook/Twitter

การปรับรูปภาพ หลักๆ ก็เรื่อง ขนาดภาพ ขนาดไฟล์ ประเภทไฟล์ วิธีการ Delivery ภาพ และ การทำมาตรฐานภาพ ให้ Google หรือ Social Network เข้าใจ

เราว่าคะแนน ก็เพิ่มชึ้นเยอะแล้ว หากทำตามได้ 22 ข้อแนะนำ ทำให้เว็บโหลดเร็ว

แก้เว็บโหลดช้า วิธีลับที่ Digital Page Speed ใช้

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

“ทำไมเว็บโหลดช้า ” “ต้องเพื่ม ขนาด Server+Network ไหม

เริ่มต้นเราขอบอกว่า Server 1 ตัว 1 CPU, Ram 4 GB สามารถ รับคนได้เป็น หมื่นๆ คนพร้อมๆกัน หรือ รองรับคนเข้าเป็นล้านคน ต่อวันได้ หากเรา Opimise Application ของเราดี เรามองว่า Hardware เป็นเพียงแค่ 10% ของทั้งหมด อีก 90% Code ล้วนๆ ที่ทำให้ช้า

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

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

  1. หน้าเว็บมีจำนวนโหลดไฟล์เยอะ
  2. ปัจจัยภายนอกจาก Plugin อื่นๆ
  3. ภาพขนาดใหญ่เกินความจำเป็น

แต่อีก 50% มาจากด้าน Code Performance ด้วยที่เป็นเรื่องด้านของการใช้ Code ที่จำเป็นต้องใช้ไหม ในตัวเว็บ อันไหนไม่จำเป็นต้องตัดออก และจะตัดออกยังไง เราช่วยคุณได้ เราอยากจะบอกว่า ถึงแม้คุณจะปรับปัจจัย 3 ข้อด้านบนแล้ว ให้เหลือจากหน้าละ 3 Mb หรือ 300 Kb ก็ตาม ยังไงก็ต้องเพิ่ม Performance ด้าน Code อีกอยู่ดี

ผมต้องรับผิดชอบต่อไซต์ที่เรากำลังสร้างและตระหนักถึงผลกระทบโดยตรงต่อความเร็วที่เรามี ด้วยคะแนน Pagespeed Insights ที่เราจะยึดเป็นเกณฑ์หลักที่ต้องมากกว่า 90 คะแนน ยังไงคุณก็ต้องทำเว็บใหม่

คุณสามารถเลือก Design ที่เราออกแบบไว้ได้ที่ https://store.pagespeed.digital/

หน้าเว็บที่เร็วมีลักษณะอย่างไร

  1. เว็บต้อง โหลด ต่ำกว่า 2 วินาที หรือ เปิดปุ๊บมาปั๊บ แม้จะเป็นเน็ต 3G
  2. เว็บต้อง Render หน้าเพจได้เร็ว (มองเห็นโครงสร้างได้ไว) หรือ LCP (Large Content Paint) ต่ำกว่า 2.5 วินาที
  3. TTFB ต่ำว่า 200 ms หรือ ควรจะ 50-60 ms
  4. หากมีผู้ใช้งานเว็บ เป็นคนต่างประเทศด้วย ต้องมี การทดสอบผ่านต่ำว่า 200 ms ทุกทวีป โดยใช้ เครื่องมือที่เราแนะนำทดสอบ

อะไรคือส่วนผสมของหน้าเว็บ?

นี่คือองค์ประกอบหลักของหน้าเว็บ:

  • HTML นี้เป็นโครงสร้างของไซต์ของคุณ โดยปกติจะก่อให้เกิดน้ำหนักหน้าน้อยที่สุด
  • CSS ควบคุมรูปแบบและการออกแบบไซต์ – สี ฯลฯ 
  • JavaScript ส่วนใหญ่ใช้สำหรับองค์ประกอบแบบโต้ตอบเช่นตัวเลื่อนการแชทออนไลน์ภาพเคลื่อนไหวและอื่น ๆ
  • รูปภาพ
  • แบบอักษร Font เช่น Google Fonts, Typekit ฯลฯ
  • วิดีโอ และสื่ออื่น ๆ
  • เนื้อหาภายนอก / บุคคลที่สาม ไฟล์และเนื้อหาของคุณส่วนใหญ่จะโฮสต์จากโดเมนของคุณเอง แต่เนื้อหาภายนอกหรือของบุคคลที่สามคือเมื่อไฟล์ถูกโฮสต์จากโดเมนอื่นที่คุณไม่ได้เป็นเจ้าของ ตัวอย่างทั่วไปคือ Google Analytics หรือ Google Fonts ซึ่งโฮสต์บนโดเมนที่ควบคุมโดย Google หรือ Google Adsense แบบเนอร์โฆษณาที่คุณติด

โดยทุกอย่างที่เราบอกไป มีส่วนหมด ที่จะทำให้เว็บโหลดช้า

อะไรเป็นที่ทำให้ เว็บโหลดช้า

  • ขนาดหน้า (รวมของส่วนประกอบทั้งหมด)
  • JavaScript
  • เนื้อหาของบุคคลที่สาม 

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

ถ้าคงเหลือไว้ ควรมีเท่าไรจึงจะดี ไม่ส่งผลให้ เว็บโหลดช้า

ที่นี่อาจมีตัวแปรได้หลายตัวดังนั้นจึงควรถือเป็นแนวทางคร่าวๆ

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

  • ขนาดหน้าทั้งหมด: 1 MB หรือน้อยกว่า
  • JavaScript : น้อยกว่า 150KB จึงจะเหมาะ 
  • เนื้อหาของบุคคลที่สาม : 25% หรือน้อยกว่า
  • โฆษณาของบุคคล : ให้น้อยที่สุด !

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

บนมือถือ การโหลด และ Render หน้าเว็บจะใช้เวลานานขึ้น

เราจึงต้อง ออกแบบเว็บให้ Mobile First หากคุณเข้าไปดู Analytic ของคุณ คุณก็ทราบอยู่แล้วว่า มือถือเกิน 50% ของ Desktop สิ่งที่เราต้องคำนึงถึงสินแรกคือ

  • Mobile มักใช้การเชื่อมต่อที่ช้ากว่า Desktop เว้นแต่เน็ตอัลลิมิต ก็ถือว่าไม่เป็นปัญหา
  • CPU ของมือถือ ช้ากว่า Desktop เยอะ

เราเองได้ออกแบบการสร้างเว็บที่เบาบาง ซึ่งเป็นเรื่องที่ยากมากกว่า การออกแบบเยอะๆ แบบ Lazada Shopee Sanook Kapook เราว่าการออกแบบเว็บแบบนั้นเป็นเรื่องที่เราทำได้สบายมาก แต่คุณต้องแลกกับ Performance นะ คุณลอง เอาคะแนนไปเทสที่เพจสปีดสิ คะแนนอยู่ไม่เกิน 30

ตรวจสถานะปัจจุบันของเว็บไซต์ของคุณ

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

คุณสามารถใช้เครื่องมือทดสอบความเร็วฟรีเพื่อตรวจสอบสถิติที่สำคัญสำหรับเพจของคุณได้อย่างง่ายดาย

ขนาดหน้าของคุณมีขนาดไฟล์ โหลดเท่าไร

ขนาดหน้านั้นง่ายต่อการระบุในรายงาน GT Metrix

ขนาดของ Page Speed 352KB

โปรดจำไว้ว่า 1MB หรือน้อยกว่านั้นเหมาะอย่างยิ่ง ยิ่งคุณไปสูงกว่านั้นประสิทธิภาพก็จะยิ่งลดลงโดยเฉพาะบนอุปกรณ์เคลื่อนที่

ตรวจสอบว่า Javascript มีขนาดเท่าไร

ใน GT Metrix ให้คลิกที่แท็บ Waterfall จากนั้นกรองผลลัพธ์โดยคลิกปุ่ม JS

ของ Pagespeed มีเพียง 1 ไฟล์ โดยเราฝัง Javascript ไปที่ inline Html หมดแล้ว

มีเนื้อหาของบุคคลที่สามมากแค่ไหน?

ในส่วน Content size by Domain จะบอกว่าเรามีการโหลดจากเว็บอื่นด้วยหรือเปล่า เราจะบอกคุณสั้นๆ ว่าทำไมไม่ควรมีเนื้อหาที่โหลดจากเว็บอื่น

  • มันเหมือนการเข้าเว็บอื่นๆ พร้อมๆ กับเรา แทนที่ Web Browser จะส่งไปหาข้อมูลเราเพียงโดเมนเดียว แต่กลับต้องไป รอ เจ้าอื่นอีกด้วย เหมือนคุณสั่ง Grab Food นั่นแหละ ที่ Order 1 Order จะต้องมาจากร้านเดียว ถ้าจะสั่งร้านอื่น มันก็เหมือน โดเมน อื่น ที่ทำให้ช้าลง
  • ทุกโดเมนต้องใช้เวลาในการเชื่อมต่อ อย่างต่ำ 200 ms แน่นอน หากคุณมี 10 others domain ก็กินเวลาเกือบ 2 วิในการค้นหาแล้ว แม้คุณจะ Preload ก็อาจช่วยได้บ้าง แต่ ควรจะเลิกใส่ ถึงจะดีที่สุด
  • หากคำขอหนึ่งล้มเหลวจะมีความสามารถในการทำลายไซต์ได้ ไม่ดีแน่ เราจะมั่นใจได้อย่างไรว่าเว็บอื่นจะ ส่งข้อมูลมาให้เราสมบรูณ์ หยุดการพึ่งพาคนอื่น และ มาออกแบบ Standalone ให้ทำงานได้เทียบเท่า บุคคลที่สาม

ที่นี่เว็บของคุณเป็นไงบ้าง หากต้องการให้เรารายงานให้ สามารถติดต่อได้ที่ หน้าขอใบเสนอราคา โดยไม่มีค่าใช้จ่าย

ค้นหาไฟล์ที่แย่ ไฟล์ที่โหลดช้า ประเมินผลนาน เขียน Code มาไม่ดี

ตัดมันออกไป หรือ ถ้าตัดไม่ได้ก็มาคิดว่าจะเอายังไงกับมัน ให้มันทำงานดีขึ้น

  1. ในส่วนนี้ เราจะหาไฟล์ที่แย่รูปภาพ ไฟล์ไหนใหญ่ และ scale ใหญ่เกินไป ตัดออกซะ
  2. Javascript ไฟล์ไหนแย่ ตัดออกซะ ง่ายสุดใช้ Google Pagespeed Insights ตรวจได้
  3. Stackify ตรวจสอบ นี้คือวิธีที่เราใช้ Test ไฟล์ หรือ Database ตัวไหนที่ทำให้เกิดปัญหา

โดย เราลงทุนซื้อ License รายเดือนโดยเฉพาะ เพื่อการตรวจสอบเชิงคุณภาพ ทุ่นเวลาค้นหาปัญหาที่เกิดขึ้น

อย่างไรการตรวจสอบที่ทรงประสิทธิภาพที่สุด ยังคงเป็น Error Log จาก Web Server Log (Apache, NginX) อยู่ดี รวมไปถึง Application Log (จาก Wordpress หรือ App ที่เราใช้)

สรุป

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

แนวทางแก้เว็บช้าให้เร็วขึ้น หลังติด Facebook & Google Analytic

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

การที่คุณติด Google Analytic หรือ Facebook Comment หรือ Emblem Post ต่างๆ รวมไปถึง Twitter, Youtube ด้วยเช่นกัน มันทำให้ส่งผลต่อประสิทธิภาพช้าขึ้น 10-20 คะแนน ที่จะต้องเสียไป

เพราะว่าอะไร ทำไมถึงช้า มาดู วิธีแก้เว็บช้า กัน

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

  • Facebook Feed+Post+Comment : คุณทราบหรือไม่ว่าเพียงตัวเดียวอาจโหลดเพิ่มถึง 14-20 Resource โดยหากไม่จำเป็นต้องใช้จริงๆ เราแนะนำให้เอาออกจาก ไซต์ทั้งหมด แล้วเปลี่ยนไปเป็นระบบอื่น ซึ่งหากเห็นเว็บข่าวๆต่างจะไม่ค่อยมีระบบ Comment เลยเพราะ ทำให้เว็บช้านั้นเอง แต่ถ้ามีก็จะนิยมสร้างไว้หน้าอื่นเลย เช่น ต้องคลิก เพื่อโหลดหน้า Comment อย่างเดียว ซึ่งมันก็มีที่มาอย่างนี้ นั้นเอง
  • Google Tag Manager + Analytics = 73KB โดย 73 KB นี้ไม่เหมือนกับไฟล์แบบรูปภาพ นะ มันจะส่งผลต่อ LCP ใน Web Vitals อย่างหลีกเลี่ยงไม่ได้ แต่ก็ไม่ได้หมายความว่าเราจะจัดการมันไม่ได้
  • Youtube, Google Analytic, Twitter หรือ อื่นๆ ก็สามารถทำให้เว็บคุณช้าขึ้นได้เหมือนกัน โดย เราก็มีทางออก หากจำเป็นต้องใช้ เรามีวิธีสูตรรลับของเราที่ทำให้ เว็บของคุณไม่ช้าได้ รวมถึง Facebook ด้วย
  • เราใช้เทคนิค 2-3 อย่างในการผสานรวม ให้ออกมาอย่างไม่เสีย Performace โดยเป็นสิ่งที่หลายคนไม่รู้มาก่อน อย่างเช่น คุณทราบหรือไม่ ว่าจริงๆ Google Analytic สามารถเก็บไว้ที่ File Host ของเราได้ ไม่จำเป็นจะต้องโหลดใหม่ทุกครั้ง และ นี่คือ หนึ่งในสาม ที่เราใช้ ในแบบที่คุณน่าจะจินตนาการไม่ออกแน่ๆ

การออกแบบสร้างบ้าน ยังต้องใช้ Consult แล้ว ทำไมเว็บไซต์ถึงควรจะมีตามด้วย

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

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

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

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

1.ดวงตาของคุณ – การทดสอบสายตา

เป็นเพียงจุดเริ่มต้น

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

รับรอง เราไม่ปั่น 55

สายตาเป็นเครื่องมือที่ใช้วัดระดับ วินาที ได้ แต่หากจะไประดับ milli-sec คือ 1 ใน 1000 ของวินาที จะต้องใช้เครื่องมือต่อไป นี้ มีอะไรบ้าง มาดูกัน

2.เว็บเบราว์เซอร์ Google Chrome : Developer tool

Google Chrome Developer Tools มาพร้อมกับเครื่องมือที่มีประโยชน์มากมายในการตรวจสอบเว็บไซต์ เปิดเครื่องมือสำหรับนักพัฒนาโดย Ctrl + Shift + I หรือ Ctrl + Opt + J

โดยการทดสอบนี้ จะเกิดผลขึ้นจริงกับทางฝั่งผู้ใช้งาน ไม่เหมือนกับ Tools ตัวอื่นๆ ที่ไปวัดประสิทธิภาพบนเครื่องคอมพิวเตอร์ของ ตัวเอง.. โอเคร เราจะมาว่ากันว่า Chrome มันทำอะไรให้เราได้บ้าง

2.1 การตรวจสอบเครือข่าย (Network tab)

เมื่อเรากด Ctrl + Shift + I หรือ Ctrl + Opt + J แล้วให้เลือกไปที่แท็บ Network เราจะเห็นหัวข้อต่างๆ ตามภาพ

Network tab
  • Status : 200, 304, 404 ที่จะบอกว่าไฟล์ที่โหลดจาก Server สำเร็จหรือไม่สำเร็จ
  • Protocol : ว่า Server ใช้มาตรฐานอะไร เช่น HTTP1.1, HTTP2, Quic ฯลฯ
  • Type : ใช้แยกประเภทของไฟล์ ว่าเว็บช้า สาเหตุเพราะว่าอะไร
  • Priority : ใช้ลำดับความสำคัญของไฟล์ ว่าควรโหลดก่อน หรือ โหลดทีหลัง
  • Size : บอกขนาด ซึ่งยิ่งน้อยยิ่งดี แต่ต้องไม่ทำให้คุณภาพ ลดลงไป
  • Waterfall : แท็บสีเขียว ที่ใช้บอกว่าไฟล์นั้น โหลดเร็วหรือช้า โดยวัดได้เป็นมิลลินาที

2.2 การวัดประสิทธิภาพ (Audit tab)

การวัดประสิทธิภาพนี้ จะทดสอบไซต์แบบ Local คุณยังสามารถเลือกอุปกรณ์และเค้นความเร็วเครือข่ายและ CPU, SEO, Performance, Best Practise ได้อีกด้วย

คุณสามารถใช้เครื่องมือ ‘Lighthouse’ ที่ฉันกล่าวถึงด้านล่างเพื่อให้ได้ผลลัพธ์เดียวกัน

2.3 ความปลอดภัย (Security tab)

ใช้ตรวจสอบความปลอดภัย ว่าตรงตามมาตรฐาน Https หรือ Version ไหนที่ใช้อยู่ ซึ่งทาง Digital Pagespeed มีให้เลือกครบ

3.Google PageSpeed ​​Insights

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

บางคนบ่นว่าไม่แสดงเวลาโหลดเว็บแล้วจะรู้ได้ไง แต่เชื่อเถอะ เว็บที่ได้คะแนะ Pagespeed Insights สูงส่วนใหญ่จะเร็วเป็นพื้นฐาน และ โดยปริยาย

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

โดยสามารถอ่าน บทความ เก่าของเราได้ที่ https://pagespeed.digital/how-to-make-high-score-of-pagespeed-insights/ เราเขียนอธิบายอย่างละเอียดไว้หมดแล้ว

4. GTmetrix

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

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

สิ่งที่สำคัญอีกอย่าง คือใน Tab Timing เพราะ สามารถบอกค่า TTFB (Time To First Byte) ได้ แต่นั่นอย่างลืมว่า สถานที่ใช้ทดสอบคือ ประเทศอะไร

และ ยังมี Feature ที่เราชอบคือการตรวจสอบให้เราตามการตั้งเวลาไว้

TTFB ของประเทศไทยควรอยู่ที่ 50-60 ms
ตัวอย่างเว็บ GTmetrix

5.การทดสอบความเร็ว Pingdom

Pingdom Speed ​​Testเป็นเครื่องมือฟรีจาก SolarWinds คล้ายกับ GTmetrix มากให้รายงานพร้อมคะแนนและเวลาในการโหลด  โดยเป็น บริษัท ‘การตรวจสอบประสิทธิภาพเว็บไซต์และความพร้อมใช้งาน’  Pingdom monitor จะตรวจสอบอย่างต่อเนื่อง (พูดทุกๆ 5 นาทีหรือ 30 วินาที) และจะแจ้งเตือนคุณหากมีสิ่งผิดปกติเกิดขึ้น

จะว่าไปเราไม่ค่อยชอบเครื่องมือนี้เท่าไร เพราะ ผลการวัดไม่ค่อยแม่น เพราะ ที่ตั้ง Server อยู่ไกล

6. WebPageTest โดย Akamai

เป็นเครื่องมือที่เราชอบใช้อันดับ 3 รองจาก Gtmetrix

WebPageTest เป็นหนึ่งในเครื่องมือที่เก่าแก่และเชื่อถือได้ ทดสอบเว็บไซต์ของคุณหลาย ๆ ครั้งจากอุปกรณ์เครื่องเดียวกัน เป็นประโยชน์มากในการดูว่า “การแคชเบราว์เซอร์” ทำงานได้อย่างมีประสิทธิภาพเพียงใด นอกจากนี้ยังมีเมตริกหลัก ๆ เช่นTTFB , keep-alive, การบีบอัด , การแคชเบราว์เซอร์ , cdn เป็นต้น

สามารถวัดคะแนน Web Vitals ได้ด้วย

7.การทดสอบประสิทธิภาพ โดย KeyCDN

เครื่องมือส่วนใหญ่ที่ฉันระบุไว้ข้างต้นจะทดสอบTTFB (เวลาเป็นไบต์แรกหรือเวลาตอบสนองของเซิร์ฟเวอร์) จากตำแหน่งเดียว KeyCDN ทดสอบประสิทธิภาพจะวิเคราะห์เว็บไซต์ของคุณจาก 14 สถานที่ที่มีปุ่มเพียงแค่คลิกและให้รายงานของเวลาการค้นหา DNS, การเชื่อมต่อเป็น TLS และ TTFB

การทดสอบจากหลายประเทศทั่วโลก

8.ความเร็วไซต์ Google Analytic & Search Console

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

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

9.Loader.io ทดสอบ Loadtest

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

อย่าคิดและเชื่อในการเข้าชมแบบ “ไม่ จำกัด ” ทำการทดสอบโหลดดีกว่าและหาจำนวนผู้เยี่ยมชมที่คุณสามารถจัดการได้

Loader.ioทำให้ง่ายต่อการส่งคำขอ 10k / วินาทีไปยังไซต์ของคุณและดูว่ามันทำงานอย่างไร

10. Google Lighthouse

Lighthouse เป็นอีกหนึ่งเครื่องมือที่ Google จัดหาให้ มันสร้างขึ้นภายใน Google Chrome

Lighthouse ทดสอบประสิทธิภาพการเข้าถึงแนวทางปฏิบัติที่ดีที่สุดและ SEO รายงาน “ประสิทธิภาพ” จะเหมือนกับใน Google PageSPeed Insights แต่ในเครื่องมือเดียวคุณสามารถทดสอบทั้งหมดได้

คุณสามารถทดสอบได้โดยตรงจากแท็บ “การตรวจสอบ” ของเบราว์เซอร์ Chrome ในเครื่องมือของนักพัฒนาหรือไปที่ https://web.dev/measure

สรุป ทุกเครื่องมือสามารถใช้งานจริงได้หมด การปรับ Pagespeed ของเราจะใช้เครื่องมือเหล่านี้ทั้งหมด

การไปถึง 100 คะแนน ไม่ใช่เรื่องยาก แต่การที่จะรักษาให้อยู่ได้ 100 คะแนนตลอดนี้สิ คือ สิ่งสำคัญ เรายินดีให้คำปรึกษา หากซื้อบริการเรา เรามีบริการรักษาคะแนน 100 คะแนน ฟรี หก เดือน

รู้จัก Pagespeed Insights คืออะไร ทำอย่างไรให้ได้คะแนน เต็ม 100

Google Pagespeed ​​Insights คือ เครื่องมือที่ใช้เป็นมาตรฐานใหม่ สำหรับการวัดประสิทธิภาพความเร็วเว็บโดยเฉพาะ คนที่เป็นเจ้าของเว็บไซต์ หรือ เจ้าของธุรกิจ ควรจะต้องหันมาให้ความสนใจกับความเร็วของเว็บคุณมากขึ้นมากขึ้น.. ซึ่ง ณ ปัจจุบัน นอกจาก On Page, Off Page หรือ Content คุณภาพจัดๆ ก็ยังคงไม่พอ.. ในการแข่งขันอันดับ Ranking บน Google เพราะ ใครๆก็ทำได้.. เชื่อไหม เรามีลูกค้าที่เราปรับ Page Speed ให้ ทั้งที่ Content ก็เหมือนเดิม แล้วปรากฏว่า คนเข้าเว็บเยอะขึ้นอย่างน่าตกใจมากๆ และ ได้แซงแบรด์ดังที่เป็นคู่แข่งไปแล้วด้วย ทักเรามาสิ เราจะบอกว่าใคร

เราทำการปรับให้วันที่ 15 ส.ค. หลังจากนั้น คนก็เข้าเยอะขึ้นจาก Organic ล้วนๆ

อ่าห์.. คุณอาจคิดว่าเราโฆษณาเกินจริง เราเข้าใจนะ.. คุณมีสิทธิ์คิด.. จริงๆ มันก็มีปัจจัยหลายๆ อย่างที่สามารถเกิดขึ้นได้ สำหรับคนเข้าเว็บเยอะขึ้น แต่เราอยากบอกว่า เราคิดว่าเราไม่ได้โกหก อย่างน้อย Google ก็ได้เขียน Blog ไว้ว่า ความเร็วเว็บ และ Landing Page เป็นปัจจัยหนึ่ง การค้นหาของ Google และโฆษณา

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

เข้าเรื่อง.. โพสต์นี้ ที่เราเขียน มีคำแนะนำดีๆ ต่อการทำคะแนนให้สูงๆ บน Google PageSpeed ​​Insights ด้วยนะ โดยเราบอกหมดไม่หมกเม็ดให้คุณ ได้รับคะแนนถึง 100 คะแนน เหมือนอย่างที่เราทำ

มาเริ่มกันเลย!

ข้อมูลเบื้องต้นเกี่ยวคะแนน 0-100 มันคืออะไร

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

อย่างแรก Google Pagespeed Insights ให้คุณเข้าไปดูก่อน ว่ามันมีหน้าตาอย่างไร ซึ่งหากคุณอ่านในข้อความใหญ่ๆ ที่เขาเขียน “ทำให้หน้าเว็บของคุณทำงานได้เร็วขึ้นในอุปกรณ์ทุกชนิด” โดย Focus ที่คำๆนี้ สั้นๆ แต่ยาก กับคำว่า “ได้เร็วขึ้น

หน้าตาเว็บ
ผล Test ของ kapook.com

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

ลองเทส เว็บของคุณสิ ถ้าคุณได้สีเขียวอยู่แล้ว เราว่า คุณไม่ต้องอ่านต่อแล้วเสียเวลา ไปดูบริการอื่นๆ ของเราได้เลย ที่นี่

โดยจะมีหน้าคำแนะนำมากมายให้คุณได้อ่าน

โดยที่กล่าวมานั้น มันคือ คำแนะนำที่เราต้องมาปรับปรุง อย่างคร่าวๆ โดยหากได้คะแนน 90 ขึ้น มักจะไม่มีคำแนะนำให้ทำตาม

และ สิ่งเหล่านี้เรียก มาตรฐาน Core Web Vital ซึ่งอยู่ในหมวด User Experience ของ Google ซึ่งจุดมุ่งหมายสำคัญของ Core Web Vital คืออะไร สามารอ่านเรื่องราวเชิงเจาะลึกได้ที่นี่ Core Web Vitals คืออะไร?

Pagespeed Insights กับ Core Web Vital ต่างกันอย่างไร

Pagespeed Insights คือ เครื่องมือที่ใช้วัดความเร็วเว็บไซต์บนอุปกรณ์ต่างๆ

Core Web Vitals คือ เกณฑ์ที่ใช้วัดความเร็วในการแสดงผล

ดังนั้น คะแนน Pagespeed Insights และ คะแนน Core Web Vitals จึงเป็นอันเดียวกันอย่างแยกไม่ได้

หากจะให้มองเห็นภาพรวม Core Web Vital คือ Subset ของ Page Experience โดยยังมีอย่างอื่นอีกที่เป็นปัจจัยในการวัดคุณค่าอีก ดังภาพด้านล่าง

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

ความลับที่ทำให้ได้คะแนน Pagespeed Insight เต็ม 100

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

ความลับคือ แก้ปัญหาเหล่านั้นให้ได้มากที่สุด

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

Google ใช้ PageSpeed ​​Insights อย่างไร

เราขอสรุปสั้นๆ

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

เทคนิค 23 วิธีในการปรับปรุงประสิทธิภาพ Pagespeed ทำได้หมด ได้ 100 แน่นอน

  1. กำจัด Render-Blocking Resources
  2. หลีกเลี่ยงคำขอสำคัญแบบลูกโซ่ 
  3. รักษาจำนวน Request Objects ให้น้อย และ ขนาดต้องเล็ก
  4. ลดขนาด CSS
  5. ลดขนาด JavaScript
  6. ลบ CSS ที่ไม่ได้ใช้ออก
  7. ลดการทำงานของเธรดหลัก
  8. ลดเวลาดำเนินการของ JavaScript Execution time
  9. ลดเวลาตอบสนองของเซิร์ฟเวอร์ หรือ Time To First Byte (TTFB)
  10. ส่งขนาดรูปภาพที่เหมาะสมตามอุปกรณ์
  11. Lazyload ภาพ และ คลิปวีดีโอ
  12. เข้ารหัสรูปภาพอย่างมีประสิทธิภาพ
  13. แสดงภาพในรูปแบบ .WebP
  14. ใช้รูปแบบวิดีโอสำหรับเนื้อหาเคลื่อนไหวไปเลย
  15. ตรวจสอบให้แน่ใจว่าข้อความยังคงปรากฏให้เห็นระหว่างการโหลด Webfont
  16. เปิดใช้งานการบีบอัดข้อความ
  17. ทำการ Pre-Connect และ Pre-Load เว็บภายนอก
  18. หลีกเลี่ยง Redirection ที่ซ้ำซ้อน หรือ ไม่จำเป็น
  19. แคชเบราว์เซอร์ Leverage
  20. ตัด Third-Party code
  21. หลีกเลี่ยง Payload เครือข่ายจำนวนมหาศาล
  22. ตรวจสอบ Timing ในการ ดาวน์โหลด
  23. หลีกเลี่ยงขนาดของ Document Object Model (DOM) ที่มากเกินไป

    เรากำลังเขียนเนื้อหาขั้นตอนการทำอย่างละเอียดโปรดติดตาม

สรุป

การปรับ Pagespeed มีความจำเป็นแน่นอน และ อย่าหมกหมุ่นกับ ตัวเลข 100 คะแนนจนมากเกินไป ซึ่งเอาเวลาส่วนใหญ่ของคุณไป Focus กับการสร้าง Contents ที่มีคุณค่า หรือสร้างผลิตภัณฑ์ที่ดีๆ ใหม่ๆ และคนต้องการ ออกมาขายให้กับลูกค้า เพื่อสร้างยอดขายให้มากขึ้นดีกว่า

ถ้าคุณชื่นชอบบทความของเรา และ ไม่อยากเสียเวลาที่มีคุณค่าของคุณ ปล่อยให้เราดูแลด้านนี้แทนเลย เรามีนโยบาย สัญญารักษาความลับ ที่นี่ และ พูดคุยกับฝ่ายขายของเราก่อนได้ ที่นี่

case study : ปรับความเร็ว www.pueantae-ngernduan.com

เริ่มต้นด้วย ระบุปัญหา และ วัดคะแนน


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

อย่างแรกที่เราทำคือ การตรวจคะแนน Pagespeed Insights ของ Google โดยเป็นเครื่องมือ Benchmark หลักของเรา และ เราตรวจพบว่าคะแนนของเว็ปไซต์ เพื่อนแท้ เงินด่วน – www.pueantae-ngernduan.com อยู่ที่ 74 คะแนน ซึ่งเป็นคะแนนที่เป็นระดับกลาง

โดยมีเกณฑ์ที่ผ่านอยู่ 2 อย่าง

  • First Input Delay ที่ได้ 16 ms โดยเว็บนี้อยู่ในเกณฑ์ที่ดี คือ 91%
  • Cumulative Layout Shift อยู่ที่ 0 ไม่มีปัญหา

โดยมีเกณฑ์ที่ไม่ผ่านอยู่ 2 อย่าง

  • First Contentful Paint คือ ค่าเวลาที่ทำให้ Browser สามารถแสดงผล โดยเว็บนี้บล๊อกการแสดงผลแรกที่ 3.8 วินาที
  • Largest Contentful Paint คือ ค่าเวลาที่แสดงผลทั้งหมด ที่ทำให้ Browser สามารถแสดงผลโดยเว็บนี้บล๊อกการแสดงผลแรกที่ 3.8 วินาที

โดยคะแนนทั้งหมดเรายึดจากคะแนนในส่วน Mobile เท่านั้น หากเป็นส่วน Desktop จะพบว่าเว็บนี้ทำคะแนนได้ถึง 92 คะแนน ซึ่งอยู่ในเกณฑ์ที่ดีแล้ว

สำหรับคนที่ไม่เข้าใจว่าเกณฑ์คะแนนเหล่านั้นคืออะไร สามารถอ่านเพิ่มเติมได้ที่ https://web.dev/vitals/

เริ่มการวิเคราะห์ Web Infrastructure

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

กดหน้า ขอใบเสนอราคา ได้เลยหากคุณต้องการทราบราคา

สิ่งที่เราปรับปรุง

  • เราได้ทำการเปลี่ยนแปลงจัดการเว็บ และ การอัปเกรด Server เป็น VPS โดยอัพเกรค ความถี่ CPU จาก 2.2 เป็น 3.7 Ghz
  • การปรับโครงสร้างเว็บใหม่ หรือ เปลี่ยนธีมใหม่ แต่เป็น Design เดิม โดยการเปลี่ยนแปลง รูปแบบเว็บ ย่อมต้องเจอกับความไม่เหมือนกันอยู่บ้าง 100% แต่เราจะคงอยู่ 90% ขึ้นให้รูปแบบเหมือนเดิม โดยขั้นตอนนี้ เหมือนการ Renovate บ้านเลยก็ว่าได้ แน่นอน มันสามารถสวยได้กว่าเดิม หรือ จะเอาแบบเดิมก็ไม่มีปัญหา
  • การตรวจสอบปลั๊กอิน หรือ 3rd Party ของเว็บ และ จัดทำการปรับให้เข้ากับธีมใหม่ และเลือกใช้ Plugin ที่เรา benchmark มา ว่าเร็วที่สุด
  • การปรับฐานข้อมูล โดยทำการลบตารางขยะ ปรับปรุงการ Queryให้เร็วเพิ่มขึ้นกว่า 30% โดยจะส่งผลต่อ TTFB หรือ FCP
  • เพิ่มประสิทธิภาพ หน้า และ javascript dom render โดยใช้ทักษะทาง Programming ของเรา ทำการตัด Function ที่ไม่จำเป็นต่อเว็บออก เช่า หากเว็บไม่มีการ Animation ใดๆ เราก็จะทำการลบ โค๊ดที่ใช้ Animation ออก
  • จัดการระบบ Cache (Cache คือ Output เว็บที่ถูกบีบอัดมา) จากเดิมจัดเก็บที่ SSD ให้ปรับมาเป็นที่ Memory และ หากลูกค้ามี Request จากต่างประเทศ เราสามารถ Copy Cache ไปบน Server อีกตัวได้ ซึ่งมีค่าใช้จ่ายเพิ่ม
  • การเพิ่มประสิทธิภาพ Font และ รูป และ สูตรลับพิเศษที่ทำให้รูปมีขนาดพอดีกับทุกอุปกรณ์ ซึ่งปกติภาพที่โหลดจะมีเพียงขนาดเดียว และ จะไม่สามารถแสดงขนาดได้ตรงกับอัตราส่วนหน้าจอของแต่ละอุปกรณ์
  • ทุกอย่างที่เราใช้ เราผ่านการคัดกรอกมาแล้ว ว่าเร็ว และ เร็วที่สุดในบรรดาคู่แข่ง ฉะนั้น คุณไม่ต้องเสียเวลาทดลองเอง เพราะ ถึงแม้การที่คุณเจอสิ่งที่เร็วแล้วก็ใช้ว่าจะสามารถแสดงความเร็วออกมาได้อย่างเต็มที่ มันต้องควบคู่กันทั้งหมด เพื่อที่จะดึงศักยภาพ ออกมา หากเปรียบเทียบ มันก็เหมือน คอมพิวเตอร์ที่มีการ์จอแรง แต่ไม่ได้ดาว์นโหลด Firmware มาติดตั้ง

ผลลัพธ์จากการ Optimise

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

และนี้คือคะแนน Web Vital