מידע על היתרונות והחסרונות של תמיכה ב-AMP באפליקציית Next.js
AMP היא מסגרת של רכיבי אינטרנט שמבטיחה טעינה מהירה של דפים. ב-Next.js יש תמיכה מובנית ב-AMP.
מה נלמד?
במדריך הזה נסביר בקצרה איך טכנולוגיית AMP מבטיחה טעינה מהירה של דפים, לאחר מכן מוסברות הדרכים השונות שבהן אפשר לתמוך ב-AMP באפליקציית Next.js, ואז תוכלו להחליט איזו גישה מתאימה לכם ביותר.
המדריך מיועד למפתחי אתרים שהחליט להשתמש ב-Next.js, אבל לא בטוח אם הוא תומך ב-AMP.
איך טכנולוגיית AMP מבטיחה טעינה מהירה של דפים
ל-AMP יש שתי אסטרטגיות עיקריות להבטחת מהירות:
- AMP HTML: פורמט HTML מוגבל שמחייב אופטימיזציות מסוימות, ואסור להשתמש בתבניות אדריכליות שמובילות להאטת האתר. למידע כללי על האופטימיזציות וההגבלות, קראו את המאמר איך AMP פועל.
- מטמון AMP: מטמון תוכן שמשמש מנועי חיפוש מסוימים, כמו Google ו-Bing, שמשתמש בעיבוד מראש כדי לזרז את טעינת הדפים. במאמר למה קיימים מטמון AMP תוכלו לקרוא מידע נוסף על היתרונות והיתרונות של המטמון ואיך דף ה-AMP נשמר במטמון? כדי להבין איך דפי ה-AMP נכנסים למטמון.
איך משתמשים ב-AMP ב-Next.js
יש שתי דרכים להשתמש ב-AMP ב-Next.js:
- הגישה AMP היברידי מאפשרת ליצור גרסת AMP נלווה לכל דף Next.js.
- הגישה של AMP בלבד מאפשרת להפוך את AMP לאפשרות היחידה בדף.
בדרך כלל, Next.js נחשב כ-React framework, אבל חשוב להבין שכאשר משתמשים ב-Next.js להצגת דפי AMP, כבר אי אפשר להריץ רכיבי React בצד הלקוח כי רכיבי React הם לא רכיבי AMP חוקיים. במילים אחרות, Next.js כבר לא משמש כ-React framework, אלא כמנוע ליצירת תבניות בצד השרת ליצירת דפי AMP.
איך להחליט אם להשתמש בגישה היברידית מסוג AMP או ב-AMP בלבד
אם אתם מתייחסים ברצינות לביצועי טעינה, דף AMP בלבד יכול להיות דרך טובה להבטיח שהדף שלכם יתפקד במהירות וימשיך לפעול במהירות. הנה הלכידה: כדי להבטיח יציבות האתר, AMP אוסר על תבניות ארכיטקטורה מסוימות ורכיבי HTML שבדרך כלל מובילים לדפים איטיים. לדוגמה, טכנולוגיית AMP לא מאפשרת שימוש ב-JavaScript סינכרוני בהתאמה אישית, כי משאבים שחוסמים עיבוד הם סיבה נפוצה לטעינת דפים איטית.
כדי שתוכלו לדעת אם גישת AMP בלבד מתאימה לכם, עליכם לבדוק אם אפשר לייצג את כל קוד הקצה ב-AMP HTML:
- קראו איך טכנולוגיית AMP פועלת כדי להבין את ההגבלות הארכיטקטוניות ברמה הגבוהה של AMP ואת האופטימיזציות הנדרשות.
- קוראים את תגי HTML כדי לראות מה מותר ומה אסור לעשות ב-AMP, מעיינים בקטלוג רכיבי ה-AMP כדי לראות את הרכיבים המותאמים אישית שקהילת AMP יצרה כדי לפתור תרחישים נפוצים, ומעיינים ב-amp-script כדי ללמוד איך להשתמש ב-JavaScript בהתאמה אישית כדי להטמיע תכונות ש-AMP לא תומך בהן כרגע.
גם אם גישה של AMP בלבד לא מתאימה לדף שלכם, יכול להיות שכדאי להשתמש ב-AMP כשאפשר, בגלל היציבות המובטחת של AMP HTML ושל מטמון ה-AMP. הגישה של AMP היברידי ב-Next.js מספקת דרך להציג דפי AMP באופן מותנה. עם זאת, היא גם יוצרת עלות תחזוקה גבוהה יותר כי היא מחייבת אתכם לתחזק שתי גרסאות של כל דף.
סיכום
טכנולוגיית AMP מבטיחה שהאתר שלכם יתפקד במהירות וימשיך לפעול במהירות, על ידי אכיפת דפוסים שמובילים למהירות ואיסור על דפוסים שמובילים לאיטיות. מטמון AMP ל-HTML ומטמון AMP הם שתי הדרכים העיקריות שבהן AMP מבטיח יציבות. אבל לפני שמתחילים להשתמש ב-AMP, צריך לוודא שהוא יכול לתמוך בכל הדרישות של האתר.