ในการแสวงหาความเร็วของหน้าอย่างต่อเนื่อง เรามักจะพบว่าตัวเองวนกลับไปที่จุดเดิม แม้ว่าทีมผลิตภัณฑ์ การตลาด และการเติบโตจะพยายามกระตุ้นทีมเทคโนโลยี แต่งานที่สามารถปรับปรุงประสิทธิภาพของไซต์ก็มักจะถูกเลื่อนออกไปเนื่องจากจำเป็นต้องปรับโครงสร้างใหม่ และแม้ว่าจะเสร็จสิ้นแล้ว แต่ก็ไม่ได้ผลลัพธ์ที่สมบูรณ์เสมอไป ในรอบนี้ การพิจารณามุมมองเชิงลึกบางประการเกี่ยวกับการบรรลุผลการปฏิบัติงานจริงจะเป็นประโยชน์ ตัวอย่างเช่น เราสามารถเรียนรู้บทเรียนอะไรได้บ้างจากความเร็วของ React.js และ Vue.js หรือส่วนขยาย SSR (การเรนเดอร์ฝั่งเซิร์ฟเวอร์) เช่น Next.js และ Nuxt.js เมื่อเปรียบเทียบกับแพลตฟอร์มอื่นๆ ถึงเวลาเพิ่มประสิทธิภาพ MB ของไฟล์ jQuery และ CSS แล้วหรือยัง? เมื่อใดบริษัทขนาดใหญ่ที่เสียสละประสิทธิภาพเว็บของตนให้กับนักพัฒนาส่วนหน้าที่ไม่ได้รับข้อมูลจะตื่นขึ้นเมื่อใด มาตอบคำถามเหล่านี้กันทีละข้อ
เหตุใดไซต์ที่ใช้ Next.js และ Nuxt.js จึงรวดเร็ว
แพลตฟอร์ม Next และ Nuxt ซึ่งเป็นโครงสร้างที่เป็นมิตรกับ SEO ที่สร้างขึ้นบน React และ Vue โดดเด่นด้วยประสิทธิภาพด้านความเร็ว แต่ทำไมแพลตฟอร์มเหล่านี้ถึงเร็วมาก?
React.js และ Vue.js เป็นเฟรมเวิร์กแบบอิงคอมโพเนนต์ที่แบ่งแต่ละหน้าออกเป็นคอมโพเนนต์ย่อย ดังที่แสดงด้านล่าง
เรามายกตัวอย่างจากโลกแห่งความเป็นจริงเพื่ออธิบายประเด็นนี้: หน้ารายการอีคอมเมิร์ซ หน้ารายการนี้ถือได้ว่ามีองค์ประกอบย่อยดังต่อไปนี้:
- ส่วนหัว
- รายชื่อ
- ข้อมูลรายการเข้า
- ชื่อหน้า
- เกล็ดขนมปัง
- จำนวนสินค้า
- ตัวกรอง
- ตัวกรองหมวดหมู่
- กรองราคา
- ...
- การเรียงลำดับ
- บัตรผลิตภัณฑ์
- ภาพสินค้า
- รายละเอียดสินค้า
- ชื่อสินค้า
- ราคาสินค้า
- ราคาขีดทับ
- ลดราคา
- อัตราส่วนลด
- ข้อมูลแคมเปญ
- การให้เลขหน้า
- เนื้อหาหมวดหมู่
- ข้อมูลรายการเข้า
- ฟุตบอล
เมื่อสร้างแอปพลิเคชันแบบอิงคอมโพเนนต์ด้วย Nuxt.js แต่ละคอมโพเนนต์เหล่านี้จะถูกเข้ารหัสแยกกันและรวมอยู่ในเพจหลัก ตัวอย่างเช่น พิจารณาไฟล์ชื่อ ProductPhoto.js ไม่ว่าฟังก์ชันใดก็ตามที่จำเป็นสำหรับภาพถ่ายผลิตภัณฑ์ (ภาพหมุน การแสดงภาพที่ตอบสนอง ฯลฯ) โค้ด JS จะถูกเขียนไว้ภายในส่วนประกอบนี้ ในทำนองเดียวกัน เฉพาะไฟล์ CSS ที่ใช้โดยคอมโพเนนต์นี้เท่านั้นที่จะรวมอยู่ด้วย ซึ่งหมายความว่าเฉพาะไฟล์ที่ต้องการโดยแต่ละส่วนประกอบเท่านั้นที่จะถูกดำเนินการหากใช้ส่วนประกอบนั้น
ปัจจุบันกระบวนการนี้ได้รับการจัดการอย่างไรบนแพลตฟอร์มเว็บส่วนใหญ่?
ไฟล์ script.js มีโค้ดสำหรับทุกสิ่งตั้งแต่การเป็นสมาชิก ตัวกรอง และหน้าตะกร้าสินค้า ไปจนถึงเมนูซึ่งแสดงในทุกหน้า ผลลัพธ์?
เว็บไซต์ที่มี ไฟล์ JS ขนาด 3 MB และ CSS ขนาด 1.5 MB ไฟล์. ปัญหาหลักไม่ใช่แค่ขนาดไฟล์ แต่เป็นความจริงที่ว่าคุณไม่สามารถคาดหวังได้ว่า CPU ของอุปกรณ์มือถือ Android โดยเฉลี่ยจะรันโค้ดหลายพันบรรทัดภายในมิลลิวินาที ด้วยการรันเฉพาะโค้ดที่คุณต้องการ คุณจะได้รับประสิทธิภาพที่เพิ่มขึ้น
จะกำจัดทรัพยากรที่บล็อกการเรนเดอร์ได้อย่างไร
ปัจจุบัน 32% ของเว็บไซต์ชั้นนำ 1 ล้านเว็บไซต์ใช้ไลบรารีแบบอักษร Font Awesome ซึ่งมีขนาดเฉลี่ยประมาณ 250 KB เมื่อพิจารณาว่าการโหลดแบบอะซิงโครนัสนั้นไม่เป็นที่ต้องการเนื่องจากเอฟเฟกต์การสะบัด ลองพิจารณาว่าจะมีแบบอักษรจำนวนเท่าใดที่มองเห็นได้ในหน้าจอแรกของหน้าเว็บเมื่อเปิดบนมือถือหรือเดสก์ท็อป การศึกษาสั้นๆ บน 50 แพลตฟอร์มที่แตกต่างกัน พบว่ามีการใช้ไอคอนโดยเฉลี่ย 3.4 ไอคอน (โดยทั่วไปคือ รถเข็น ผู้ใช้ เมนู การแจ้งเตือน) ดังนั้นหากต้องการโหลดเพียงสี่ไอคอนโดยไม่มีปัญหา เราจึงโหลดไลบรารีทั้งหมด
กรอบงาน JS ขั้นสูงจัดการสิ่งนี้ได้อย่างไร ด้วยการนำเข้าเฉพาะรูปแบบ SVG ของไอคอนที่ใช้ในองค์ประกอบที่เกี่ยวข้อง ทำให้ไม่จำเป็นต้องโหลดแบบอักษรหรือไลบรารี CSS ทั้งหมด
การใช้ Bootstrap กับ React JS บอกอะไรเราบ้าง
ไลบรารี Bootstrap JS มีส่วนแบ่งการตลาด 26% ในทุกไซต์ทั่วโลก ในขณะที่การใช้งาน React อยู่ที่ประมาณ 4% Bootstrap ได้รับความนิยมในด้านความยืดหยุ่นและความสะดวกในการใช้งาน ทำให้สามารถพัฒนาได้อย่างรวดเร็ว อย่างไรก็ตาม ความยืดหยุ่นนี้มาพร้อมกับค่าใช้จ่าย: ฟังก์ชัน JS ทั่วไป การครอบคลุมโค้ดที่ครอบคลุม และฟังก์ชันสำหรับคุณสมบัติที่คุณไม่เคยใช้จะรวมอยู่ในโปรเจ็กต์ของคุณ
ลองถามดูว่าการใช้งานเพิ่มขึ้นมากกว่า 100% จากอะไร ระบุไซต์ 10,000 อันดับแรกถึง 1,000 อันดับแรก- มันแสดงให้เห็นว่าสิ่งที่ดีที่สุดคือการเปลี่ยนรายละเอียดให้เป็นประโยชน์ให้ดียิ่งขึ้น
โดยสรุป แทนที่จะเขียนเว็บไซต์ของเราใหม่ด้วยเทคโนโลยีเช่น ถัดไป Nuxt เชิงมุม โต้ตอบ Vueฯลฯ เราควรเข้าใจว่าเทคโนโลยีเหล่านี้ทำอะไรได้บ้างเพื่อความรวดเร็ว และใช้แนวทางปฏิบัติที่ดีที่สุดเหล่านี้กับเว็บแอปพลิเคชันของเรา
