ดูข้อมูลเกี่ยวกับประโยชน์และข้อดีข้อเสียของการรองรับ AMP ในแอป Next.js
AMP เป็นเฟรมเวิร์กคอมโพเนนต์เว็บที่ช่วยปรับปรุงเวลาในการโหลดหน้าเว็บ Next.js มีการรองรับ AMP ในตัว
สิ่งที่คุณจะได้เรียนรู้
คู่มือนี้จะอธิบายสั้นๆ ก่อนว่า AMP ช่วยให้การโหลดหน้าเว็บรวดเร็วได้อย่างไร จากนั้นจะอธิบายวิธีต่างๆ ที่คุณสามารถรองรับ AMP ในแอป Next.js แล้วช่วยคุณตัดสินใจว่าวิธีใดเหมาะกับคุณที่สุด
กลุ่มเป้าหมายที่ต้องการสำหรับคู่มือนี้คือนักพัฒนาเว็บที่ตัดสินใจใช้ Next.js แต่ไม่แน่ใจว่าจะรองรับ AMP หรือไม่
วิธีที่ AMP ช่วยให้โหลดหน้าเว็บได้อย่างรวดเร็ว
AMP มีกลยุทธ์หลัก 2 ข้อในการรับประกันความเร็ว ได้แก่
- AMP HTML: รูปแบบ HTML ที่ถูกจำกัดซึ่งทำให้การเพิ่มประสิทธิภาพบางอย่างเป็นสิ่งจำเป็น และห้ามใช้รูปแบบสถาปัตยกรรมที่ทำให้เกิดความล่าช้า ดูวิธีการทำงานของ AMP เพื่อดูภาพรวมระดับสูงของการเพิ่มประสิทธิภาพและข้อจำกัด
- เซิร์ฟเวอร์แคช AMP: แคชเนื้อหาที่เครื่องมือค้นหาบางอย่างใช้ เช่น Google และ Bing ซึ่งใช้การแสดงผลล่วงหน้าเพื่อเร่งความเร็วในการโหลดหน้าเว็บ ดูเหตุผลที่ต้องมีเซิร์ฟเวอร์แคช AMP เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับประโยชน์และข้อเสียของแคช และหน้า AMP ของฉันได้รับการแคชอย่างไรเพื่อทำความเข้าใจวิธีที่หน้า AMP ของคุณได้รับการแคช
วิธีใช้ AMP ใน Next.js
การใช้ AMP ใน Next.js มี 2 วิธีดังนี้
- แนวทาง Hybrid AMP ช่วยให้คุณสร้างหน้า AMP ที่มาพร้อมกับหน้า Next.js ได้
- แนวทางเฉพาะ AMP ช่วยให้คุณกำหนดให้ AMP เป็นตัวเลือกเดียวสำหรับหน้าเว็บได้
แม้ว่า Next.js มักจะถือว่าเป็นเฟรมเวิร์ก React แต่สิ่งสำคัญคือต้องเข้าใจว่าเมื่อคุณใช้ Next.js เพื่อแสดงหน้า AMP คุณจะเรียกใช้คอมโพเนนต์ React ฝั่งไคลเอ็นต์ไม่ได้อีกต่อไป เนื่องจากคอมโพเนนต์ React ไม่ใช่คอมโพเนนต์ AMP ที่ถูกต้อง กล่าวคือ Next.js ไม่ใช่เฟรมเวิร์ก React อีกต่อไป แต่เป็นเครื่องมือสร้างเทมเพลตฝั่งเซิร์ฟเวอร์สําหรับสร้างหน้า AMP
วิธีตัดสินใจว่าจะใช้แนวทาง AMP แบบผสมหรือ AMP เท่านั้น
หากคุณให้ความสำคัญกับประสิทธิภาพการโหลด หน้าเว็บแบบ AMP เท่านั้นอาจเป็นวิธีที่ดีในการทำให้หน้าเว็บโหลดเร็วและคงความเร็วไว้ได้ แต่มีข้อจำกัดอยู่ว่า เพื่อให้มั่นใจในความเร็ว AMP จึงห้ามใช้รูปแบบสถาปัตยกรรมและองค์ประกอบ HTML บางอย่างที่มักทำให้หน้าเว็บโหลดช้า ตัวอย่างเช่น AMP ไม่อนุญาตให้ใช้ JavaScript แบบซิงโครนัสที่กำหนดเอง เนื่องจากทรัพยากรที่บล็อกการแสดงผลเป็นสาเหตุที่พบบ่อยของการโหลดหน้าเว็บช้า
หากต้องการทราบว่าแนวทางแบบ AMP เท่านั้นเหมาะกับคุณหรือไม่ คุณต้องพิจารณาว่าโค้ดส่วนหน้าทั้งหมดสามารถแสดงใน AMP HTML ได้หรือไม่
- อ่านวิธีการทำงานของ AMP เพื่อทำความเข้าใจข้อจำกัดด้านสถาปัตยกรรมระดับสูงและการเพิ่มประสิทธิภาพที่จำเป็นของ AMP
- อ่านแท็ก HTML เพื่อดูว่าแท็ก HTML ใดที่ AMP อนุญาตและไม่อนุญาต เรียกดูแคตตาล็อกคอมโพเนนต์ AMP เพื่อดูคอมโพเนนต์ที่กำหนดเองซึ่งชุมชน AMP สร้างขึ้นเพื่อแก้ปัญหา Use Case ทั่วไป และดู amp-script เพื่อดูวิธีใช้ JavaScript ที่กำหนดเองเพื่อใช้ฟีเจอร์ที่ AMP ยังไม่รองรับในปัจจุบัน
แม้ว่าแนวทางที่ใช้ AMP เพียงอย่างเดียวจะใช้ไม่ได้กับหน้าเว็บของคุณ แต่ก็อาจเป็นความคิดที่ดีที่จะใช้ AMP เมื่อเป็นไปได้ เนื่องจากความเร็วของ AMP HTML และเซิร์ฟเวอร์แคช AMP แนวทาง AMP แบบผสมใน Next.js ช่วยให้แสดงหน้า AMP แบบมีเงื่อนไขได้ อย่างไรก็ตาม วิธีนี้ยังทำให้มีค่าใช้จ่ายในการบำรุงรักษาสูงขึ้นด้วย เนื่องจากคุณต้องดูแลรักษาหน้าเว็บแต่ละหน้าถึง 2 เวอร์ชัน
บทสรุป
AMP ช่วยให้เว็บไซต์ของคุณโหลดเร็วและคงความเร็วไว้ได้โดยการบังคับใช้รูปแบบที่ทำให้โหลดเร็วและห้ามใช้รูปแบบที่ทำให้โหลดช้า AMP HTML และเซิร์ฟเวอร์แคช AMP เป็น 2 วิธีหลักที่ AMP ใช้เพื่อรับประกันความเร็ว แต่ก่อนที่จะนำ AMP มาใช้ คุณควรตรวจสอบว่า AMP สามารถรองรับข้อกำหนดทั้งหมดของเว็บไซต์ได้