10 วิธีง่ายๆ ในการเพิ่มความเร็วเว็บไซต์ในปี 2020

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

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

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

ทำให้เซิร์ฟเวอร์ของคุณทำงานแทนคุณ

การตั้งค่าเซิร์ฟเวอร์ของคุณอย่างถูกต้องสามารถปรับปรุงประสิทธิภาพความเร็วได้อย่างมาก การตั้งค่าง่ายๆ สองอย่างที่คุณต้องแน่ใจว่าคุณมี:

1. เปิดใช้งานการบีบอัด – ตรวจสอบให้แน่ใจว่าคุณเปิดใช้งานการบีบอัด GZIP สำหรับไฟล์ข้อความทั้งหมดของคุณ (HTML, JS, CSS, ETC….)
2. HTTP2 – หากเซิร์ฟเวอร์ของคุณรองรับ HTTP2 ได้ ตรวจสอบให้แน่ใจว่าเปิดใช้งานแล้วเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสิทธิภาพโดยไม่ต้องเปลี่ยนแปลงอะไรในไซต์
   ดูการสาธิตที่ยอดเยี่ยมของ HTTP2 โดย Vodien

ใช้การโหลดแบบขี้เกียจ

การโหลดแบบขี้เกียจคือขั้นตอนการโหลดเนื้อหาเฉพาะเมื่อกำลังจะเข้าดูเท่านั้น วิธีนี้จะลดการดาวน์โหลดเนื้อหาพิเศษจำนวนมากที่ผู้ใช้อาจไม่เคยเข้าถึง และทำให้เบราว์เซอร์ว่างลงเพื่อปรับปรุงประสิทธิภาพอย่างมาก ข่าวดีก็คือมีแพ็คเกจสำเร็จรูปจำนวนมากที่สามารถช่วยให้คุณโหลดเนื้อหาแบบขี้เกียจได้อย่างรวดเร็ว ที่ดียิ่งขึ้น ตั้งแต่ Chrome 76 (กรกฎาคม 2019) เป็นต้นมา Lazy Loading ยังมาพร้อมกับ HTML เพียงเพิ่มLoading=”lazy ” ในแท็ก เท่านี้ก็เสร็จแล้ว

ทำให้ไฟล์ของคุณมีขนาดเล็กลง

การลด ขนาด – นี่คือกระบวนการลบช่องว่างและความคิดเห็นออกจากโค้ดสิ่งเหล่านี้มีความสำคัญต่อการทำให้โค้ดสามารถอ่านได้สำหรับมนุษย์ แต่คอมพิวเตอร์ไม่ต้องการสิ่งเหล่านี้ การย่อขนาดสามารถลดขนาดไฟล์ได้มากกว่า 70% คุณควรลดขนาดไฟล์ HTML, CSS และ JS ทั้งหมดของคุณ เพียงให้แน่ใจว่าคุณเก็บต้นฉบับไว้ในกรณีที่ต้องการเปลี่ยนแปลง วันนี้ IDE หลักทุกตัวมีปลั๊กอินที่จะย่อขนาดไฟล์ให้คุณ หากคุณใช้แพ็คเกจเช่น React การย่อขนาดจะมาพร้อมกับการเขย่าต้นไม้ในตัว

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

ปรับภาพให้เหมาะสม

ปรับขนาดรูปภาพให้ถูกต้อง – การออกแบบเว็บที่ตอบสนองได้กลายเป็นบรรทัดฐานที่นำไปสู่การแสดงรูปภาพในขนาดต่างๆ ขึ้นอยู่กับหน้าจอเราสามารถใช้สิ่งนั้นเพื่อประโยชน์ของเราและรักษาขนาดต่างๆ ไว้สำหรับรูปภาพของเรา ไม่จำเป็นต้องดาวน์โหลดไฟล์ขนาดใหญ่หากรูปภาพนั้นไม่สามารถแสดงพิกเซลเหล่านั้นได้ทั้งหมด แท็กรูปภาพและแอตทริบิวต์srcsetช่วยให้ทำได้ง่ายมาก

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

รูปแบบยุคหน้า – รูปแบบ ภาพใหม่ที่รองรับในเบราว์เซอร์ส่วนใหญ่ในขณะนี้สามารถลดขนาดไฟล์ได้อย่างมาก (ไม่เฉพาะสำหรับภาพถ่าย)ตัวอย่างเช่น รูปแบบ Open WebP ของ Google สามารถลดขนาดไฟล์ได้ระหว่าง 64% ถึง 92% ในกรณีด้านล่าง เราใช้ไฟล์ WebP ใน 2 ขนาดที่แตกต่างกัน และเพิ่มรูปภาพสำรองเป็น jpg สำหรับเบราว์เซอร์ที่ไม่สนับสนุน webP

สไปรต์รูปภาพ – สไปรต์รูปภาพคือรูปภาพที่ประกอบด้วยรูปภาพขนาดเล็กจำนวนมากการใช้สไปรต์รูปภาพสำหรับปุ่ม\โลโก้ทั้งหมดของคุณจะลดจำนวนการเรียกใช้เซิร์ฟเวอร์ที่คุณต้องโหลดหน้าเว็บ หากคุณใช้ HTTP/1.1 สิ่งนี้จะช่วยปรับปรุงเวลาในการโหลด

ใช้นโยบายแคชฝั่งไคลเอ็นต์

เวลาในการโหลดหน้าเว็บสามารถปรับปรุงได้อย่างมากโดยขอให้เบราว์เซอร์เก็บไฟล์ที่ดาวน์โหลดไว้แล้ว สิ่งนี้เกี่ยวข้องกับไฟล์ทั้งภายในและภายนอก

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

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

ใช้ประโยชน์จากการแคชฝั่งเซิร์ฟเวอร์

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

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

ใช้ CDN

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

หลีกเลี่ยงการเปลี่ยนเส้นทาง

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

หากคุณพบว่าตัวเองกำลังใช้การเปลี่ยนเส้นทาง อย่าลืมหลีกเลี่ยงการเปลี่ยนเส้นทางแบบเชื่อมโยง การเปลี่ยนเส้นทางแบบลูกโซ่คือการเปลี่ยนเส้นทางที่นำไปสู่การเปลี่ยนเส้นทางอื่น หากคุณต้องเปลี่ยนเส้นทาง ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนเส้นทางเพียงครั้งเดียว!

จัดลำดับความสำคัญและลบกิจกรรมการปิดกั้นการเรนเดอร์

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

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

เลือกพันธมิตรของคุณอย่างชาญฉลาด

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

เรียนรู้ต่อไป

ในบทความนี้ เราได้กล่าวถึงเคล็ดลับสั้นๆ เพียงไม่กี่ข้อเท่านั้น ดังนั้น อย่าลืมลงลึกเพื่อประสิทธิภาพที่เพิ่มขึ้น นอกจากนี้ ระบบนิเวศของเรายังพัฒนาอย่างต่อเนื่อง ถ้าคุณมาไกลขนาดนี้ คุณคงรู้ว่ามีสิ่งใหม่ให้เรียนรู้อยู่เสมอ

ฉันแนะนำให้คุณดูสองลิงค์ด้านล่าง ฉันคิดว่าพวกเขาเป็นจุดเริ่มต้นที่ดี

https://www.udacity.com/course/browser-rendering-optimization–ud860

https://medium.com/swlh/what-the-amp-augmenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8