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