AMP รับประกันความรวดเร็วในแอป Next.js ได้อย่างไร

ดูประโยชน์และข้อดีข้อเสียของการรองรับ 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 วิธีดังนี้

• วิธีการ 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 HTML ได้หรือไม่ เพื่อทำความเข้าใจว่าแนวทางแบบ AMP เท่านั้นเหมาะสำหรับคุณหรือไม่

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

แม้ว่าวิธีที่จะใช้ AMP อย่างเดียวจะใช้ไม่ได้กับหน้าเว็บของคุณ แต่การใช้ AMP ทุกครั้งที่เป็นไปได้ก็เป็นความคิดที่ดี เนื่องจาก AMP HTML และแคช AMP มีความรวดเร็ว แนวทาง AMP แบบไฮบริดใน Next.js เป็นวิธีที่แสดงหน้า AMP อย่างมีเงื่อนไข แต่ก็จะทำให้มีค่าใช้จ่ายในการบำรุงรักษาสูงขึ้น เนื่องจากคุณจะต้องดูแลรักษาแต่ละหน้าให้ครบ 2 เวอร์ชัน

บทสรุป

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