מדריך למתחילים לדפים ניידים מואצים (AMP)

דפים ניידים מואצים היא יוזמה של גוגל כי בכוונתו לפתור את הבעיה הגדולה ביותר של האינטרנט הנייד - מהירות. חוויית המשתמש המדהימה שאנו מעצבים בזהירות רבה, מאיימת על הנייד.

איטיות היא לא רק בעיה UX, אבל גם מקטין את שיעורי ההמרות, ו פוגעת בנגישות על ידי אי הכללת משתמשים עם חיבורי אינטרנט איטיים יותר. AMP הוא מאמץ צוות שהושק במטרה לאפשר לבעלי אתרים ליצור תוכן מותאם ניידים פעם אחת, ו יש לטעון אותו באופן מיידי בכל מקום.

מאז ההשקה, מו"לים רבים כמו ה- BBC, האקונומיסט, גרדיאן ניוז והפייננשל טיימס יישמו את היוזמה, כך שעכשיו אנחנו יכולים להניח בבטחה ש- AMP הוא חדשנות שראוי לשקול לכל מי שרוצה להישאר תחרותי בנייד אינטרנט.

AMP בפעולה

לפני צלילה לתוך הפרטים, הנה הדגמה של AMP, אז אתה יכול לראות אותו בפעולה. הדגמה ניתן לגשת על הקישור הזה.

כדי לראות AMP בפעולה, עליך לעשות שני דברים:

1. הצג את ההדגמה במכשיר נייד או בסימולטור נייד, למשל. סימולטור מכשיר נייד של Chrome.
2. הפעל שאילתת חיפוש בסרגל החיפוש. כמו גוגל AMP כרגע עובד בעיקר עם אתר חדשות, הבחירה הטובה ביותר היא סיפור חדשותי טרי.

על צילום המסך למטה, אתה יכול לראות מה קיבלתי כאשר השתמשתי מונח החיפוש ריו האולימפיאדה.

כפי שניתן לראות, דפי AMP מופיעים כ כרטיסים עשירים של Google, א קרוסלת תמונה ממוטבת לנייד, כי גוגל פרסמה בחודש מאי 2016.

שים לב כיצד Google מבדיל בין דפי AMP לבין דפים אחרים המותאמים לנייד באמצעות 2 תוויות שונות: AMP ונייד ידידותי. כדאי גם ללחוץ על חלק מהתוצאות כדי לראות כיצד נראה דף אינטרנט של AMP, וכמה מהר הוא פועל בנייד.

רקע טכני

AMP הוא תקן אינטרנט המבוססת על טכנולוגיות אינטרנט קיימות, ומתמקדת בתכנים סטטיים. יש לזה 3 חלקים שוניםYou

1. AMP HTML: HTML עם שינוי (1) את ההגבלה של מסוימים HTML רגיל / CSS תכונות ו (2) את ההקדמה של תגיות מותאמות אישית חדשה (רכיבים)
2. AMP JS: אוכפת שיטות עבודה מומלצות כדי להקטין את זמן הטעינה של הדף
3. AMP CDNYou מטמון עם מערכת אימות מובנית, כי עוד מייעל את האתר שלך

אם אתה רוצה לדעת יותר על רקע טכני של דפי AMP, לבדוק את הווידאו להלן שבו פולוס Bakus של גוגל נותן שיחה ראשונית על AMP.

אם אתה רוצה לצלול עמוק יותר, זה גם שווה להבין מה טכניקות אופטימיזציה של AMP משתמש כדי להאיץ את הביצועים על הנייד. בסרטון להלן, Malte Ubl, להוביל AMP הנדסה מסביר אנטומיה של AMP בפירוט.

AMP HTML

דפים ניידים מואצים הם דפי HTML רגילים כי צריך פעל לפי כללים על מנת להפוך את הדפים לטעון מהר יותר ולספק עם ביצועים אמינים.

בואו נסתכל על הדברים החשובים ביותר שאתה צריך לדעת על זה. אתה יכול גם להסתכל על מפרט מלא AMP HTML.

להחליט אם אתה רוצה נפרד AMP דף

עבור אותו דף תוכן סטטי, אתה יכול לקבל 2 גרסאות נפרדות - אחד עבור AMP ואחד עבור הגרסה הלא AMP. אתה יכול גם לבחור לקבל רק גרסה אחת - את דף AMP, ולהשתמש בו בכל מקום. לגבי תמיכה בדפדפן, דף Github של AMP טוען:

אם אתה עדיין מודאג מתמיכה בדפדפן, בדוק את הפוסט של פול אירי של גוגל על ​​Stackoverflow.

במקרה שאתה רוצה להיות שני עמודים (AMP ו- AMP שאינם), אתה צריך קישור לכל אחד מהם כדי להודיע ​​על מנועי החיפוש על קיומו של שתיים גרסאות.

הוסף את הקוד הבא אל קטע של הדף שאינו AMPYou

כמו כן, הוסף את השורה הבאה של דף AMPYou

אם יש לך רק דף AMP אחד, אתה עדיין צריך לקשר אותו מעצמו בדרך הבאהYou

מתחיל Boilerplate

AMP הפרויקט מציע שונה החל boilerplates אתה יכול להשתמש כדי להתחיל. תסתכל על AMP HTML הפשוט ביותר AMP להלן:

          שלום עולם!  

אתה יכול לראות את boilerplate קישורים דף HTML רגיל באמצעות תג. ה > תג מוסיף ספריית AMP JS.

ה

אתה יכול רק אחד גיליון סגנונות מוטבע, ויש גם רבים חוקי סגנון אסור, למשל אתה לא יכול להשתמש !חשוב במוקדמות, את @import שלטון, ופסאודו.

אל תשכח לבדוק את הגבלות הסגנון לפני שתתחיל לכתוב CSS עבור דפי AMP שלך.

יש עוד דבר חשוב לדעת על כללי סגנון AMP: אתה לא ניתן להשתמש בכל פריסה שאתה רוצה - כמו שזה אחד העקרונות של AMP כדי לאפשר את הדפדפן לחשב את השטח של כל אלמנט על הדף מראש.

תסתכל על הפריסות הנתמכות ולא נתמכות.

AMP JS

מסמכים AMP יכול לכלול לא כל מחבר שנכתבו, ולא כל JavaScripts צד שלישי, אולם אין פירוש הדבר שדפים ניידים מואצים אינם משתמשים ב- JavaScript כלל. ספריית ה- JavaScript של AMP (זמן הריצה של AMP) אחראית לטעינה והעמקה של דפי AMP במהירות אכיפת שיטות הביצועים הטובים ביותר.

רכיבי AMP

רכיבי AMP הם המוגדר על ידי זמן ריצה של AMP. הם הנ"ל תגי HTML ספציפיים ל- AMP אתה צריך להשתמש במקום עמית קבוע שלהם, כגון במקום ה תג.

כל רכיב AMP מכיל משאב חיצוני מסוים (תמונה, וידאו, הטמעה וכו '). משאבים חיצוניים נוטים להאט אתרי אינטרנט. המטרה העיקרית של פתרון זה היא לנהל את הטעינה של משאבים חיצוניים באופן סביר על ידי הפעלת אותם בתוך ארגזי חול.

AMP מספק לך 2 סוגים של רכיביםYou

1. רכיבים מובנים: הם תמיד זמינים בכל מסמך AMP, הם שנבנה ממש עד זמן ריצה של AMP. כיום יש חמישה מהם:
   1. להצגת מודעות
   2. עבור תמונות, הוא משמש במקום תג
   3. עבור פיקסלים למעקב (המשמשים לספירת תצוגות דף)
   4. עבור HTML ישיר וידאו קובץ embeds, מחליף את תג
   5. עבור רכיבים מוטבעים (ניתן להשתמש במקום במקרים מסוימים)
2. רכיבים מורחבים: מרכיבים נוספים, עליך במפורש לכלול אותם לתוך מסמך AMP שלך. ישנם שימושיים רבים, כגון ו , ראה את הרשימה המלאה. רבים מהם יכולים לשמש להטביע תוכן משירותי צד שלישי, כגון מ- Twitter או Instagram.

שים לב שכל המשאבים הטעונים חיצונית, כגון ו חייב להיות ידוע ו תכונה על מנת לאפשר את הדפדפן לחשב את הפריסה מראש.

AMP CDN

ה AMP CDN הוא בעצם מטמון, שנקרא מטמון של Google AMP. זה מביא מסמכים AMP חוקי, מטמון ו טוען אותם. AMP CDN יש גם מובנית מערכת אימות.

זה שווה בדיקת דפי AMP שלך לפני שהם נותנים להם ללכת באינטרנט כדי בבטחה להעביר את validator. אתה יכול לעשות את זה בדרכים רבות ושונות.

זה טוב לדעת כי AMP CDN משתמש בפרוטוקול HTTP / 2 כדי להשיג את הביצועים הטובים ביותר האפשריים.

AMP כלים

יש כמה כלים נהדרים שיכולים לעזור לך ליישם דפים מואצים ניידים, בואו נסתכל על כמה מהם.

Google מספקת למנהלי אתרים פתרון נוח כלי דיווח מצב AMP זה מראה ספירה של דפי AMP בהצלחה, ו- AMP הקשורים גם שגיאות.

ללא שם: של Lullabot ספריית AMP PHP מאפשר לך להמיר את דפי HTML שלך ל- AMP HTML, וכן מדווח על תאימות של כל מסמך HTML עם תקני AMP.

אם אתה רוצה להשתמש AMP באתר וורדפרס שלך, לקרוא את המדריך של Yoast על איך להגדיר וורדפרס עבור AMP, וכיצד AMP עובד עם תוסף SEO Yoast.

אתה יכול גם לבדוק את Automattic של תוסף AMP המאפשר לך לאפשר דפי אינטרנט מואצים באתר וורדפרס שלך.

שיקולים נוספים

אם אתה עדיין לא משוכנע, תסתכל על וידאו על מבחן מהירות מהירה להלן.

ג'ונתן אברמס, מייסד ה"נוזל ", טוען עוד יותר, שכן הוא טוען שגם אתרים המותאמים לניידים כמו הניו יורק טיימס נטענים מהר יותר באופן משמעותי - במקום לקחת שלוש שניות לטעינת הדף הממוצע, הדף נטען פחות מחצי שנייה כאשר דפי האינטרנט המהירים של Google מופעלים.

תוכל גם לקרוא מאמר מעניין ב- Verge לגבי התחרות של Google AMP ו- Instant Articles של Facebook. אם אתה עדיין מחפש תשובה עבור "מה זה לתפוס?", לבדוק את ההודעה של יואסט אשר מזכיר חששות כי AMP הוא בעצם מחזיר אותנו אל זמן באינטרנט לפני 2000, ושאלות אם זה באמת תקן פתוח.

.