ดูประโยชน์และข้อดีของการรองรับ 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 เท่านั้นเหมาะกับคุณหรือไม่ คุณต้องคิดก่อนว่าโค้ดฟรอนท์เอนด์ทั้งหมดสามารถแสดงใน AMP HTML ได้หรือไม่
- อ่านวิธีการทำงานของ 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 คุณควรตรวจสอบว่า AMP รองรับข้อกำหนดทั้งหมดของเว็บไซต์ได้