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

<h3>วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th">วิธีทำเว็บ<&sol;a> ให้โหลดเร็ว<&sol;strong><br &sol;>&NewLine;เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้าไปอ่านต่อ พอคลิกเข้าไปแล้วเว็บไซต์โหลดนานมากเพราะหน้าเว็บเต็มไปด้วยแบนเนอร์โฆษณา วีดีโอโฆษณา โหลดยังไม่ทันเสร็จ ไม่ทันจะได้อ่านเนื้อหาของข่าว ก็ปิดเว็บไซต์ทิ้งไป ปัญหาเว็บไซต์โหลดช้าทำให้เราเสียทั้ง visitor และผลทาง SEO เพราะฉะนั้น วันนี้เรามาทำหน้าเว็บไซต์ให้โหลดเร็วขึ้น แบบไม่ต้องลบข้อมูลรูปภาพ หรือวีดีโอบนหน้าเว็บออกไปเลย มาดูวิธีทำกันครับ<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<ul>&NewLine;<li>&NewLine;<h4>เลือกบริการเว็บโฮสติ้งที่ได้คุณภาพ<&sol;h4>&NewLine;<p>บริการเว็บโฮสติ้งทั่วไปที่เราเห็นกันอยู่ในราคาหลัก 100 ถึงหลัก 1&comma;000 จะเป็นบริการแบบ Shared Hosting ความหมายคือเรากำลังใช้ server ตัวเดียวกันกับอีกหลาย ๆ เว็บไซต์ นั่นหมายความว่าวันดีคืนดีมีเว็บไซต์บางเว็บใน Server เดียวกันกับเราใช้ปริมาณการโอนถ่ายข้อมูลสูงมาก ๆ อาจจะมีผลกับเว็บไซต์ของเราด้วยเช่นกัน การเลือก Shared Hosting ที่ได้คุณภาพและเหมาะสมกับราคา มีผลกับการโหลดหน้าเว็บไซต์ของเราโดยตรง&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li>&NewLine;<h4>ลดขนาด Assets ไฟล์ทั้งหมด<&sol;h4>&NewLine;<p>ส่วนประกอบสำคัญของการทำเว็บไซต์คือไฟล์ assets เช่น ไฟล์ javascript และไฟล์ CSS ซึ่งโดยทั่วไปแล้วเมื่อนำขึ้นใช้งานจริงควรเป็นไฟล์ที่เป็นเวอร์ชั่น Minify ที่ทำการลดขนาดเรียบร้อยแล้ว ซึ่งเราสามารถลดขนาดไฟล์เหล่านี้แบบออนไลน์ได้จากเครื่องมือออนไลน์มากมายเช่น <a href&equals;"http&colon;&sol;&sol;javascriptcompressor&period;com" target&equals;"&lowbar;blank">http&colon;&sol;&sol;javascriptcompressor&period;com<&sol;a>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li>&NewLine;<h4>รวม Assets เป็นไฟล์เดียว<&sol;h4>&NewLine;<p>ไฟล์ javascript และไฟล์ CSS ในขั้นตอนของการพัฒนา โปรแกรมเมอร์อาจจะมีการโหลด Library&comma; framework ซึ่งแต่ละเฟรมเวิร์คหรือไลบรารี่อาจจะแยกทั้ง CSS และ JS ไว้ ทำให้หนึ่งโปรเจคหรือหนึ่งเว็บไซต์ในขั้นตอนของการพัฒนาจะมีไฟล์เหล่านี้อยู่เยอะแยะมากมายเต็มไปหมด แต่เมื่อนำขึ้นออนไลน์ใช้งานจริง ควรจะรวมเป็นไฟล์เดียวทำการ minify ไฟล์ให้มีขนาดเล็กที่สุด&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li>&NewLine;<h4>Compress ไฟล์รูปทั้งหมดในหน้าเว็บ<&sol;h4>&NewLine;<p>รูปภาพเป็นส่วนประกอบที่สำคัญของการทำเว็บไซต์ รูปที่สวย สามารถทำให้เว็บไซต์ดูน่าสนใจได้ง่ายขึ้น แต่ในอีกมุมหนึ่งเว็บไซต์ที่ใช้รูปภาพตกแต่งมักจะมีปัญหาเรื่องการโหลดหน้าเว็บไซต์ เพราะขนาดของรูปภาพที่มักจะหนักเกินไปสำหรับการโหลด เพราะฉะนั้นรูปที่นำไปใช้งานบนเว็บไซต์ควรที่จะผ่านการบีบอัด แต่เป็นการบีบอัดที่ยังรักษาคุณภาพและความคมชัดของรูปให้มากที่สุด วิธีลดขนาดของรูปภาพบนเว็บไซต์ ทั้งรูปขนาดเล็กและใหญ่ เป็นวิธีที่ได้ผลเห็นได้ชัดเจนมาก ว่าเว็บไซต์โหลดเร็วขึ้น เราสามารถใช้เครื่องมือลดขนาดรูปภาพแบบออนไลน์ได้ทั่วไป ซึ่งฟรีอยู่แล้ว เช่น <a href&equals;"https&colon;&sol;&sol;tinyjpg&period;com" target&equals;"&lowbar;blank">https&colon;&sol;&sol;tinyjpg&period;com<&sol;a>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li>&NewLine;<h4>ใช้งาน lazy load สำหรับรูปภาพและวีดีโอ<&sol;h4>&NewLine;<p>รูปภาพและวีดีโอเป็นไฟล์มีเดียที่มีขนาดใหญ่ที่สุดบนหน้าเว็บไซต์ 1 รูปภาพ อาจจะมีน้ำหนักเยอะกว่าหน้าเว็บไซต์ทั้งหมด เพราะฉะนั้นให้ลดภาระการโหลดหน้าเว็บไซต์โดยการกำหนดให้โหลดไฟล์ html&comma;css&comma;javascript ให้เสร็จก่อน เมื่อโหลดทั้ง 3 ส่วนเรียบร้อยแล้ว ค่อยไปโหลดรูปภาพและวีดีโอทีหลัง ซึ่งเราเรียกวิธีการแบบนี้กว่า การทำ lazy load สามารถดูวิธีการทำงานได้ที่กระทู้ <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;lazy-load-คืออะไร&sol;" target&equals;"&lowbar;blank">Lazy Load คืออะไร รู้จักกับความขี้เกียจที่มีประโยชน์<&sol;a>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li>&NewLine;<h4>เปิดใช้งาน cache สำหรับเว็บไซต์<&sol;h4>&NewLine;<p>กำหนด meta tag ให้ใช้งาน cache หมายความว่าถ้า visitor เคยเข้าเว็บไซต์ของเรามาก่อนแล้วและโหลดหน้าเว็บไซต์จนเสร็จเรียบร้อยแล้ว เมื่อ visitor เข้ามาอีกครั้งไม่ว่าจะวันไหน ๆ ในอนาคต ให้ใช้งาน cache ไฟล์ที่เคยโหลดไว้ในครั้งแรก วิธีนี้จะทำให้เว็บไซต์ของเราโหลดเร็วมาก ๆ สำหรับคนที่เคยเปิดหน้าเว็บไซต์มาก่อน แต่ก่อนจะเปิดใช้งานฟังก์ชั่นนี้ต้องมั่นใจว่าเว็บไซต์ของเราได้ปรับปรุงถูกต้องสมบูรณ์แล้ว ไม่เหมาะที่จะเปิดใช้งานถ้าเว็บไซต์อยู่ในขั้นตอนการพัฒนา เพราะจะทำให้ visitor เห็นหน้าเว็บไซต์เดิม ในครั้งแรกที่เข้ามา<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;meta name&equals;"expires" content&equals;"never" &sol;&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;