ประสิทธิภาพและความเร็วของเว็บ: เทคนิคที่ดีที่สุด
เผยแพร่แล้ว: 2021-08-30ความเร็วในการโหลดและประสิทธิภาพของเว็บอยู่ที่ปากของทุกคนในชุมชน SEO และเว็บเปอร์ และในวงกว้างมากขึ้นในด้านการตลาดอิเล็กทรอนิกส์และอีคอมเมิร์ซ
Andy Davies ที่ปรึกษาและข้อมูลอ้างอิงเกี่ยวกับประสิทธิภาพของเว็บ เตือนเราว่า:
“บริบทมีอิทธิพลต่อประสบการณ์
ประสบการณ์มีอิทธิพลต่อพฤติกรรม
พฤติกรรมมีอิทธิพลต่อรายได้ของธุรกิจ”
ดังนั้น ไม่ว่าคุณจะพยายามเพิ่มรายได้ ทำ SEO หรือทั้งสองอย่าง คุณก็ย่อมต้องรู้ว่าหน้าเว็บที่ทำงานได้รวดเร็วมีความสำคัญต่อคุณภาพของประสบการณ์ผู้ใช้ของคุณ ความเร็วยังช่วยส่งสัญญาณที่ถูกต้องไปยัง Google ซึ่งคำนึงถึงความเร็วตั้งแต่อัปเดต Page Experience
ดังที่คุณทราบแล้ว ไซต์ต้องตอบสนองความคาดหวังของผู้ใช้ก่อนที่จะพบกับบรรดาเสิร์ชเอ็นจิ้น ดังนั้น ความเร็วในการแสดงผลและการโต้ตอบจึงเป็นส่วนหนึ่งของข้อกำหนดเบื้องต้นสำหรับประสบการณ์ผู้ใช้ที่มีคุณภาพ โดยหลักๆ แล้วคือการส่งเสริมการมีส่วนร่วมและ Conversion! ตัวอย่างเช่น จากการศึกษาของ Google พบว่า 77% ของผู้ใช้อินเทอร์เน็ตมีแนวโน้มที่จะสั่งซื้อบนเว็บไซต์หรือแอปพลิเคชันที่ช่วยให้ดำเนินการซื้อได้อย่างรวดเร็ว
แต่เทคนิคใดที่มีผลกระทบต่อผู้เยี่ยมชมของคุณมากที่สุด เพื่อให้พวกเขาได้รับประสบการณ์การท่องเว็บที่ราบรื่นและสัมผัสได้ถึงความเร็วที่แท้จริง
นี่คือรายการตรวจสอบที่จัดโดยคันโยกการเพิ่มประสิทธิภาพ เพื่อความเร็วในการแสดงผลและการโต้ตอบที่ดียิ่งขึ้น
ปรับความเร็วในการแสดงผลของไซต์ให้เหมาะสม
ยิ่งหน้าที่มีน้ำหนักเบาก็ยิ่งต้องใช้เวลาในการแสดงน้อยลงเท่านั้น
นอกจากการเพิ่มประสิทธิภาพทรัพยากรแล้ว คุณยังสามารถกำหนดอัตราการแสดงและขนาดขององค์ประกอบต่างๆ ที่ประกอบเป็นหน้าเพื่อเพิ่มความรู้สึกของความเร็วและความสามารถในการใช้งาน นี่คือเทคนิคที่สำคัญบางประการ:
- การบีบอัดภาพให้อยู่ในรูปแบบที่มีประสิทธิภาพสูงสุด
รูปแบบ WebP รุ่นใหม่ (แนะนำโดย Google) และ AVIF (ซึ่งให้ผลลัพธ์ที่ดียิ่งขึ้นไปอีก) ช่วยให้คุณลดน้ำหนักของรูปภาพได้มากถึง 50% เมื่อเทียบกับ JPEG ในขณะที่ยังคงคุณภาพของภาพที่ดีที่สุด การที่รู้ว่าน้ำหนักของรูปภาพคิดเป็นประมาณ 50% ของน้ำหนักของหน้า จึงเป็นปัจจัยสำคัญในการทำให้หน้าเว็บของคุณทำงานได้รวดเร็ว - ปรับการแสดงสื่อและภาพให้เข้ากับหน้าจอต่างๆ
ปรับขนาดและกำหนดขนาดของสื่อและรูปภาพ ขึ้นอยู่กับว่าผู้ใช้เข้าชมไซต์ของคุณจากมือถือหรือคอมพิวเตอร์ - ลดน้ำหนักของทรัพยากรหน้า
ปรับโค้ดของคุณให้เหมาะสม: การลดขนาด (การนำอักขระที่ไม่จำเป็นออก) ของไฟล์ HTML, JS และ CSS และการบีบอัดทรัพยากร (รูปแบบ Gzip และ Brotli) และในบางกรณี การต่อข้อมูลเป็นแนวทางปฏิบัติที่ดีในการลดน้ำหนักของหน้าเว็บ และทำให้เร็วขึ้น การแสดงผลในเบราว์เซอร์ - ขี้เกียจโหลด
เทคนิคนี้ประกอบด้วยการโหลดเฉพาะสิ่งที่ปรากฏบนหน้าจอ แทนที่จะโหลดทั้งหน้า กล่าวอีกนัยหนึ่ง เบราว์เซอร์ให้ความพยายามที่จำเป็นอย่างยิ่งกับสิ่งที่ผู้เยี่ยมชมต้องการดูบนหน้าจอของเขาเท่านั้น - ปรับแบบอักษรให้เหมาะสม
คุณสามารถปรับรูปแบบฟอนต์ของคุณให้เหมาะสม (เช่น WOFF2 ซึ่งช่วยประหยัดขนาดไฟล์ได้ 30 ถึง 50%) และยังเลือกที่จะแสดงข้อความแม้ว่าเบราว์เซอร์จะยังไม่ได้โหลดฟอนต์ เพื่อเพิ่มความเร็วในการแสดงผล - กำจัดการบล็อกทรัพยากรและโหลดแบบอะซิงโครนัส
หลีกเลี่ยงการบล็อกการแสดงผลหน้าเว็บของคุณ: ชอบโหลดทรัพยากรแบบอะซิงโครนัส โดยเฉพาะอย่างยิ่งสำหรับ CSS (CSS วิกฤต), JS (async และ defer) และแบบอักษร (display:swap)
แน่นอน หากคุณไม่มีทางเลือกเนื่องจากทรัพยากรบางอย่างมีความสำคัญในช่วงเริ่มต้นของการโหลดหน้า ทรัพยากรเหล่านี้จะต้องเบาที่สุดเท่าที่จะทำได้ - ใช้กลยุทธ์การแคชที่เหมาะสม
ในการทำให้หน้าแสดงได้เร็วที่สุดสำหรับผู้ใช้ของคุณ ให้แคชองค์ประกอบแบบคงที่
ในการทำเช่นนี้ คุณต้องระบุเนื้อหาไดนามิกและเนื้อหาสแตติกล่วงหน้า และกำหนดกฎสำหรับการแคชเนื้อหาสแตติก: ระยะเวลา และแคช (เบราว์เซอร์ ต้นทาง หรือ CDN)
[กรณีศึกษา] การจัดการการรวบรวมข้อมูลบอทของ Google
อ่านกรณีศึกษาปรับปรุงการโต้ตอบ: หน้าตอบสนองทันที
นอกจากความเร็วในการแสดงองค์ประกอบในเบราว์เซอร์แล้ว ความสามารถในการโต้ตอบเป็นสิ่งสำคัญในการมอบความพึงพอใจสูงสุดให้กับผู้ใช้ของคุณ
มิเช่นนั้น คุณจะทำให้พวกเขารู้สึกหงุดหงิดที่แปลเป็นพฤติกรรม เช่น การคลิกด้วยความโกรธ การเลื่อนเมาส์อย่างบ้าคลั่งบนหน้า หรือการเลื่อนแบบสุ่มเพื่อตรวจสอบว่าหน้านั้นทำงานอยู่
ในกรณีที่เลวร้ายที่สุด ผู้เข้าชมของคุณกลับมาที่หน้าก่อนหน้า หรือออกจากเว็บไซต์ของคุณเพื่อทำการค้นหาใหม่บน Google หรือไปที่คู่แข่งของคุณ
โปรดจำไว้ว่า ในกรณีที่มีประสบการณ์ด้านลบ 43% ของผู้ใช้อินเทอร์เน็ตจะไปที่ไซต์ของคู่แข่งเพื่อซื้อในครั้งต่อไป ดังนั้น คุณต้องให้ตัวเองมีวิธีการดึงดูด แต่ยังต้องรักษาผู้เยี่ยมชมของคุณ
ส่วนใหญ่มักจะเป็นสคริปต์ของบุคคลที่สามและ Javascript ที่สามารถรับผิดชอบต่อการโต้ตอบที่ไม่ดี แท้จริงแล้ว ตราบใดที่เบราว์เซอร์ยุ่งกับการดึงข้อมูล แยกวิเคราะห์ และรัน JavaScript เบราว์เซอร์ก็ไม่สามารถตอบสนองต่อการโต้ตอบของผู้ใช้ได้
อีกครั้ง มีเทคนิคในการเพิ่มประสิทธิภาพโค้ดของคุณและบุคคลที่สาม และทำให้ผู้เยี่ยมชมได้รับประสบการณ์ที่ดีที่สุด:
- ลดผลกระทบจากบุคคลที่สามโดยทำให้การโหลดล่าช้า
คุณสามารถเริ่มโหลดและรันสคริปต์ได้หลังจากที่องค์ประกอบเนื้อหาที่มีลำดับความสำคัญแสดงบนหน้าของคุณ แต่ระวัง: โปรดจำไว้ว่าการเลื่อนการโหลด JavaScript ไม่ได้ทำให้ฟรีในแง่ของประสิทธิภาพ!
อาจเป็นเรื่องของการเลื่อนการโหลดของฟังก์ชันบางอย่าง (แชท วิดเจ็ต การติดตาม...) หลังจากแสดงองค์ประกอบหลักเพื่อสร้างความมั่นใจให้กับผู้ใช้ แต่ไม่ได้ยกเลิกเวลาที่เบราว์เซอร์ต้องใช้ในการประมวลผลโค้ด เพียงเปลี่ยนมันในเวลา - ลดเวลาดำเนินการจาวาสคริปต์
แบ่งงานที่ต้องใช้เวลาเบราว์เซอร์ของคุณ (งานยาว) และให้แน่ใจว่าได้ชอบการประมวลผลสั้น ๆ เพื่อตอบสนองต่อการโต้ตอบของผู้ใช้ (เช่น หลีกเลี่ยงการตั้งใจฟังเหตุการณ์บางอย่างเช่นการเลื่อน; และใช้ประโยชน์จากเวลาที่เบราว์เซอร์มี เวลาว่างในการประมวลผล JavaScript บางอย่าง) - ลดการทำงานของเธรดหลัก
เบราว์เซอร์จะสามารถตอบสนองได้เร็วขึ้นต่อการโต้ตอบโดยลดจำนวนคำขอและขนาดของการแลกเปลี่ยน
ประหยัดเวลาด้วย: ทำให้เทคนิคการเพิ่มประสิทธิภาพไซต์ของคุณเป็นแบบอัตโนมัติ
เราได้กล่าวถึงประสบการณ์ผู้ใช้ที่สำคัญมากสองประการ: ความเร็วในการแสดงผลและการโต้ตอบ ข่าวดีก็คือการเพิ่มประสิทธิภาพทั้งหมดที่เราเพิ่งกล่าวถึงในรายการตรวจสอบนี้สามารถทำได้โดยอัตโนมัติ!
นอกจากนี้ คุณอาจเชื่อมโยงกับ Core Web VItals สองรายการของ Google ที่ให้คุณประเมินลักษณะเหล่านี้ได้ตามลำดับ: Largest Contentful Paint และ First Input Delay
แน่นอน คุณควรคิดถึงการปรับปรุงความเสถียรของภาพในหน้าของคุณเพื่อประสบการณ์การใช้งานที่ดีที่สุด โดยทำงานกับคะแนน Cumulative Layout Shift
คุณควรรู้ว่าเมตริก 3 เหล่านี้ (LCP, CLS และ Total Blocking Time หรือ TBT ซึ่งเทียบเท่ากับ FID) คิดเป็น 70% ของคะแนนที่มาจาก PageSpeed Insights
ดังนั้น ตามหลักเหตุผลแล้ว สิ่งที่คุณทำเพื่อเพิ่มความเร็วหน้าเว็บและเพิ่มประสิทธิภาพเมตริกเหล่านี้จะส่งผลดีต่อผู้ใช้และคะแนนประสิทธิภาพของคุณ
กล่าวโดยย่อ คุณสามารถใช้แนวทางเดียวกันกับ UX ของคุณเหมือนกับที่ทำใน SEO: เนื้อหาที่มีคุณภาพและประสบการณ์รับประกันความพึงพอใจของผู้ใช้ และมีส่วนทำให้ Google จัดทำดัชนีได้ดีขึ้น
เช่นเดียวกับใน SEO การเพิ่มประสิทธิภาพ webperf จะต้องได้รับการบำรุงรักษาตลอดเวลา
ต้องใช้เวลาและความเชี่ยวชาญเนื่องจากเทคนิคและเมตริกมีวิวัฒนาการอย่างรวดเร็ว ยิ่งไปกว่านั้น แม้แต่ในทีมขนาดใหญ่ ทรัพยากรทางเทคนิคก็ไม่มีเวลาหรือความรู้ในการรักษาความเร็วของไซต์อย่างมีประสิทธิภาพเสมอไป และการใช้ทรัพยากรและพลังงานสำหรับปฏิบัติการคอมมานโดที่ตกลงมาเหมือนตีให้เป็นฟองนั้นน่าผิดหวังมากและทำให้ท้อใจ
ดังนั้น แทนที่จะเสียเวลาในการบำรุงรักษา กังวลถึงผลข้างเคียงในแต่ละวิวัฒนาการของไซต์ และการเพิ่มจำนวนปลั๊กอินที่เสี่ยงต่อการโอเวอร์โหลด จะดีกว่าถ้าใช้เทคนิคการเพิ่มประสิทธิภาพส่วนหน้าทั้งหมดโดยอัตโนมัติด้วยเครื่องมือเดียว!
คุณควรรู้ว่าในกรณีส่วนใหญ่ สำหรับไซต์อีคอมเมิร์ซที่มีการเข้าชมสูง ROI ของโซลูชันการเพิ่มประสิทธิภาพเว็บเพอร์ฟนั้นวัดได้ง่าย
อันที่จริง Google ได้ประมาณการว่าเวลาในการโหลด -0.1 วินาทีสามารถนำไปสู่ Conversion +8% ซึ่งโซลูชันการเพิ่มประสิทธิภาพส่วนหน้าสามารถทำได้ง่ายมาก
ที่ Fasterize เราพบว่าบ่อยครั้งที่อัตรา Conversion เพิ่มขึ้นน้อยกว่า 1 จุดก็เพียงพอแล้วที่จะรับประกัน ROI ของโซลูชัน SaaS ของเรา ไม่ต้องพูดถึงเวลาที่ทีมเทคนิคบันทึกไว้
ธุรกิจเป็นเส้นเอ็นแห่งสงครามคุณสามารถคำนวณได้ด้วยตัวเองและทำได้ง่าย! ช่วยให้คุณเข้าใจถึงความสนใจของการเพิ่มประสิทธิภาพการทำงานอัตโนมัติ และโน้มน้าวใจและมีส่วนร่วมกับทีมภายในของคุณ
ประหยัดเวลาในทุกด้าน!