מידע על היתרונות והחסרונות של תמיכה ב-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, אבל חשוב להבין שכשמשתמשים ב-Next.js כדי להציג דפי AMP, אי אפשר יותר להריץ רכיבי React בצד הלקוח כי רכיבי React הם לא רכיבי AMP תקינים. במילים אחרות, Next.js כבר לא מסגרת של React, אלא מנוע תבניות בצד השרת ליצירת דפי AMP.
איך מחליטים אם להשתמש בגישה של AMP היברידי או בגישה של AMP בלבד
אם אתם רוצים לשפר את ביצועי הטעינה, דף AMP בלבד יכול להיות דרך טובה לוודא שהדף ייטען במהירות ויישאר מהיר. אבל יש לזה צד שלילי: כדי להבטיח מהירות, ב-AMP אסור להשתמש בתבניות ארכיטקטוניות מסוימות ובאלמנטים מסוימים של HTML, שבדרך כלל מובילים לדפים איטיים. לדוגמה, בדפי AMP אסור להשתמש ב-JavaScript סינכרוני בהתאמה אישית, כי משאבים שגורמים לחסימת הרינדור הם גורם נפוץ לאיטיות טעינה של דפים.
כדי להבין אם הגישה של AMP בלבד מתאימה לכם, עליכם לבדוק אם כל הקוד של חזית האתר יכול להיות מיוצג ב-AMP HTML:
- מומלץ לקרוא את המאמר איך פועל AMP כדי להבין את ההגבלות הארכיטקטוניות ברמה גבוהה ואת האופטימיזציות החובה של AMP.
- במאמר תגי HTML מפורטות ההגבלות וההיתרים של AMP לגבי תגי HTML. בקטלוג הרכיבים של AMP מפורטים הרכיבים המותאמים אישית שקהילת AMP יצרה כדי לפתור תרחישים לדוגמה נפוצים. בamp-script מוסבר איך להשתמש ב-JavaScript בהתאמה אישית כדי להטמיע תכונות ש-AMP לא תומכת בהן כרגע.
גם אם הגישה של AMP בלבד לא מתאימה לדף שלכם, כדאי להשתמש ב-AMP בכל הזדמנות אפשרית בגלל המהירות המובטחת של HTML AMP ומטמון ה-AMP. הגישה המשולבת של AMP ב-Next.js מספקת דרך להציג דפי AMP באופן מותנה. עם זאת, האפשרות הזו יוצרת עלות תחזוקה גבוהה יותר כי צריך לתחזק שתי גרסאות של כל דף.
סיכום
בעזרת AMP אפשר להבטיח שהאתר שלכם יהיה מהיר ויישאר מהיר, על ידי אכיפת דפוסים שמובילים למהירות ואיסור על דפוסים שמובילים לזמן טעינה ארוך. AMP HTML ומטמון AMP הן שתי הדרכים העיקריות שבהן AMP מבטיח מהירות. עם זאת, לפני שמתחילים להשתמש ב-AMP, חשוב לוודא שהוא יכול לתמוך בכל הדרישות של האתר.