วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์

วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์

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

• เลือกบริการเว็บโฮสติ้งที่ได้คุณภาพ

  บริการเว็บโฮสติ้งทั่วไปที่เราเห็นกันอยู่ในราคาหลัก 100 ถึงหลัก 1,000 จะเป็นบริการแบบ Shared Hosting ความหมายคือเรากำลังใช้ server ตัวเดียวกันกับอีกหลาย ๆ เว็บไซต์ นั่นหมายความว่าวันดีคืนดีมีเว็บไซต์บางเว็บใน Server เดียวกันกับเราใช้ปริมาณการโอนถ่ายข้อมูลสูงมาก ๆ อาจจะมีผลกับเว็บไซต์ของเราด้วยเช่นกัน การเลือก Shared Hosting ที่ได้คุณภาพและเหมาะสมกับราคา มีผลกับการโหลดหน้าเว็บไซต์ของเราโดยตรง




• ลดขนาด Assets ไฟล์ทั้งหมด

  ส่วนประกอบสำคัญของการทำเว็บไซต์คือไฟล์ assets เช่น ไฟล์ javascript และไฟล์ CSS ซึ่งโดยทั่วไปแล้วเมื่อนำขึ้นใช้งานจริงควรเป็นไฟล์ที่เป็นเวอร์ชั่น Minify ที่ทำการลดขนาดเรียบร้อยแล้ว ซึ่งเราสามารถลดขนาดไฟล์เหล่านี้แบบออนไลน์ได้จากเครื่องมือออนไลน์มากมายเช่น http://javascriptcompressor.com




• รวม Assets เป็นไฟล์เดียว

  ไฟล์ javascript และไฟล์ CSS ในขั้นตอนของการพัฒนา โปรแกรมเมอร์อาจจะมีการโหลด Library, framework ซึ่งแต่ละเฟรมเวิร์คหรือไลบรารี่อาจจะแยกทั้ง CSS และ JS ไว้ ทำให้หนึ่งโปรเจคหรือหนึ่งเว็บไซต์ในขั้นตอนของการพัฒนาจะมีไฟล์เหล่านี้อยู่เยอะแยะมากมายเต็มไปหมด แต่เมื่อนำขึ้นออนไลน์ใช้งานจริง ควรจะรวมเป็นไฟล์เดียวทำการ minify ไฟล์ให้มีขนาดเล็กที่สุด




• Compress ไฟล์รูปทั้งหมดในหน้าเว็บ

  รูปภาพเป็นส่วนประกอบที่สำคัญของการทำเว็บไซต์ รูปที่สวย สามารถทำให้เว็บไซต์ดูน่าสนใจได้ง่ายขึ้น แต่ในอีกมุมหนึ่งเว็บไซต์ที่ใช้รูปภาพตกแต่งมักจะมีปัญหาเรื่องการโหลดหน้าเว็บไซต์ เพราะขนาดของรูปภาพที่มักจะหนักเกินไปสำหรับการโหลด เพราะฉะนั้นรูปที่นำไปใช้งานบนเว็บไซต์ควรที่จะผ่านการบีบอัด แต่เป็นการบีบอัดที่ยังรักษาคุณภาพและความคมชัดของรูปให้มากที่สุด วิธีลดขนาดของรูปภาพบนเว็บไซต์ ทั้งรูปขนาดเล็กและใหญ่ เป็นวิธีที่ได้ผลเห็นได้ชัดเจนมาก ว่าเว็บไซต์โหลดเร็วขึ้น เราสามารถใช้เครื่องมือลดขนาดรูปภาพแบบออนไลน์ได้ทั่วไป ซึ่งฟรีอยู่แล้ว เช่น https://tinyjpg.com




• ใช้งาน lazy load สำหรับรูปภาพและวีดีโอ

  รูปภาพและวีดีโอเป็นไฟล์มีเดียที่มีขนาดใหญ่ที่สุดบนหน้าเว็บไซต์ 1 รูปภาพ อาจจะมีน้ำหนักเยอะกว่าหน้าเว็บไซต์ทั้งหมด เพราะฉะนั้นให้ลดภาระการโหลดหน้าเว็บไซต์โดยการกำหนดให้โหลดไฟล์ html,css,javascript ให้เสร็จก่อน เมื่อโหลดทั้ง 3 ส่วนเรียบร้อยแล้ว ค่อยไปโหลดรูปภาพและวีดีโอทีหลัง ซึ่งเราเรียกวิธีการแบบนี้กว่า การทำ lazy load สามารถดูวิธีการทำงานได้ที่กระทู้ Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์




• เปิดใช้งาน cache สำหรับเว็บไซต์

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

  <meta name="expires" content="never" />