5 วิธีทำเว็บให้โหลดเร็ว แบบไม่ต้องพึ่งโปรแกรมเมอร์

Update

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

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

ก่อนจะทำเว็บให้โหลดเร็วต้องเข้าใจโครงสร้างของเว็บไซต์ก่อน เว็บไซต์จะประกอบไปด้วยองค์ประกอบหลักๆ 2 ส่วนคือ
1. ส่วนของ Code
2. ส่วนของ Visual (รูปภาพ,วีดีโอ,กราฟิก,ตัวอักษร)

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

วิธีที่ 1 ลดขนาดรูปภาพ

หากเราสังเกตเว็บไซต์จะเห็นว่า 50-60% ของหน้าเว็บจะประกอบไปด้วยรูปภาพ และรูปภาพเจ้าปัญหาคือ 1 ในสาเหตุที่ทำให้เว็บไซต์โหลดได้ช้ามาก เช่นมีรูปภาพทั้งหมด 10 รูปต่อ 1 หน้าเว็บไซต์ และตัวรูปมีขนาด 1-2 MB เท่ากับว่าเมื่อมีผู้เข้ามาที่เว็บไซต์จะต้องโหลดในส่วนของรูปอย่างเดียวประมาณ 20 MB

วิธีการง่าย ๆ ในการแก้ปัญหารูปภาพมีขนาดไฟล์ใหญ่คือคือการนำภาพไปลดขนาดด้วยเครื่องมือฟรีอย่าง https://tinypng.com/ แล้วนำรูปภาพที่ถูกลดขนาดไปเปลี่ยนบนเว็บไซต์

ทำเว็บให้โหลดเร็ว ด้วยการลดขนาดรูปภาพด้วย TinyPNG
ขนาดไฟล์ก่อนปรับลดคือ 640 KB หลังจากปรับลดได้ขนาดเล็กลงเหลือเพียง 166 KB

อยากรู้ว่าเว็บไซต์ของเรารูปภาพทำให้เว็บไซต์โหลดช้าหรือไม่ตรวจสอบได้ที่ https://pagespeed.web.dev/

ตัวเครื่องมือจะแจ้งว่าขนาดรูปของเรามีขนาดหนักแค่ไหน และถ้าหากเราปรับปรุงหน้าเว็บจะโหลดเร็วขึ้นกี่วินาที

วิธีที่ 2 เปลี่ยนนามสกุลรูปภาพ

ไฟล์รูปภาพของเราในปัจจุบันมักจะเป็นไฟล์ jpeg, jpg, png ซึ่งเป็นไฟล์ที่ถูกใช้กันมาอย่างยาวนาน แต่รู้หรือไม่ว่าในปัจจุบันมีสกุลไฟล์ที่ถูกสร้างมาให้ใช้กับงานเว็บไซต์โดยเฉพาะเช่น WebP

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

หลาย ๆ เว็บไซต์ในปัจจุบันสามารถ Upload รูปภาพสกุล WebP เข้าไปได้แบบตรงเลย แต่ก่อนอื่นเราควรไปทำการ Convert ไฟล์รูปภาพที่เว็บไซต์ https://cloudconvert.com/png-to-webp เสียก่อน

ทำเว็บให้โหลดเร็ว ด้วยการเปลี่ยนนามสกุลรูปภาพเป็น WebP
Convert ไฟล์สกุล Png เป็นสกุล WebP
ขนาดไฟล์ WebP เล็กเพียงแค่ 74 KB เท่านั้น

วิธีที่ 3 ทำ Cache ที่หน้าเว็บไซต์

พอเจอคำว่า Cache หลายคนอาจจะไม่คุ้นกับคำนี้ ก่อนอื่นอธิบายเรื่อง Cache ให้ทุกคนเข้าใจกันก่อน Cache หรือที่คนทำเว็บเรียกว่า Web Cache เป็นการจัดเก็บข้อมูลการเข้าเว็บไซต์ ซึ่งจะช่วยให้ผู้ใช้เข้าเว็บไซต์เดิมได้เร็วขึ้นในครั้งถัดไป อธิบายง่าย ๆ ก็คือ วันนี้เราเข้าเว็บไซต์ https://grappik.com ในครั้งแรกอาจจะโหลดหน้าเว็บไซต์ประมาณ 2-3 วินาที แต่ในการโหลดครั้งถัดไประบบมีการจัดเก็บข้อมูลบางส่วนเอาไว้แล้ว จะทำให้โหลดได้ไวขึ้นประมาณ 60-70% เลยทีเดียว

การทำ Cache ไม่ต้องเขียน Code เป็นก็สามารถทำได้ง่าย ๆ ดังนี้
1. หากเว็บไซต์ถูกพัฒนาด้วย WordPress CMS จะสามารถลง Plugin Cache และสามารถใช้งานได้ทันทีที่หลังบ้านของเว็บไซต์

Plugin Cache ที่มีให้เลือกใช้สำหรับ WordPress CMS

2. ทำ Cache ด้วย Cloudflare

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

ตัวอย่างการตั้งค่าเชื่อมต่อหน้าเว็บไซต์กับ Clouflare

วิธีการติดตั้งเว็บไซต์เรากับ Cloudflare สามารถดูได้จากวีดีโอด้านล่าง

ติดตั้ง Cloudflare กับเว็บไซต์ที่ใช้ WordPress CMS
ติดตั้ง Cloudflare กับเว็บไซต์ทั่วไป

วิธีที่ 4 ลบ Tracking Code หรือ 3rd Party Code ที่ไม่จำเป็น

เว็บไซต์ที่ทำเสร็จส่วนมากจะต้องติด Tracking Code หรือ 3rd Party Code เช่น Google Analytic, Facebook Pixel เป็นต้น ซึ่งการติด Code เหล่านี้มาก ๆ เป็นอีก 1 สาเหตุที่ทำให้เว็บไซต์โหลดได้ช้าลง แต่ก็แลกมากับข้อมูลที่จำเป็นในการวิเคราะห์ทางการตลาด ความเร็วเว็บไซต์ก็อยากได้ข้อมูลที่ได้มาก็สำคัญ วิธีแก้ปัญหาถ้าหากต้องการติดตั้ง Tracking Code เอาไว้ควรเลือกใช้ Google Tag Manager เพียงแค่ตัวเดียว แล้วใช้ Google Tag Manager จัดการ Tracking Code แทน

วิธีการควบคุม Tracking Code ผ่าน Google Tag Manager ก็ทำได้สะดวก

ตัวอย่าง GTM ที่ใช้บน https://grappikdigital.com/

วิธีที่ 5 ฝังฟอนต์ลงบนเว็บโดยตรงหรือใช้ Google Fonts

นอกจากภาพที่เป็น Visual หลักของเว็บไซต์ที่มีประมาณ 50 – 60% ในส่วนของตัวอักษรก็คงใช้อีก 30 – 40% ที่เหลือบนหน้าเว็บไซต์ หากเป็นเมื่อก่อนที่เทคโนโลยีของฟอนต์ยังไม่ดีเท่านี้ นักพัฒนาหรือนักออกแบบหลายคนก็คงใช้เป็นวิธีการตัดกราฟิกเป็น PNG ในบางส่วนแล้วแปะลงไปในหน้าเว็บไซต์เพื่อให้ได้ดีไซน์ตามต้องการ

ในปัจจุบันตัวฟอนต์ถูกพัฒนาให้สามารถแสดงผลบนเว็บไซต์ได้เป็นอย่างดี และมีตัวเลือกหลากหลายภาษา และยิ่งเป็นภาษาไทยก็มีให้เลือกใช้เกือบ 20 แบบที่ Google Fonts

แต่ถ้าการฝังฟอนต์อาจจะเกินมือไปในกรณีที่เว็บไซต์ไหนใช้ WordPress CMS ก็สามารถใช้ Plugin อย่าง Seed Fonts เพื่อเรียก Google Fonts มาใช้งานได้อย่างสะดวก

ดาวน์โหลด Plugin ได้ที่ https://th.wordpress.org/plugins/seed-fonts/

หากลองทำครบทั้ง 2 ข้อที่เราแนะนำแล้วต้องการเช็คความเร็วของหน้าเว็บไซต์ก็สามารถเช็คได้ 2 ที่ด้วยกัน

1. https://pagespeed.web.dev/ วิธีการเช็คก็แสนง่ายเพียงพิมพ์ชื่อเว็บไซต์เข้าไปแค่นี้ก็เสร็จแล้ว

2. https://gtmetrix.com/ เว็บไซต์นี้ไม่ได้เช็คแค่ความเร็วอย่างเดียว แต่ยังเช็คการแสดงผลของเว็บไซต์และการใช้งานอีกด้วย

เช็คว่า เว็บโหลดเร็ว แค่ไหนด้วย gtmetrix.com
ผลการทดสอบเว็บไซต์ https://seaacademy.co/ ที่เป็นผลงานของทีมเรา

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