חיפוש

מה זה AMP והאם שווה את המאמץ

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

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

פרויקט AMP  – גוגל לוקחת את העניינים לידיים

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

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

גוגל החליטה, כאמור, שלא להשלים עם חווית השימוש הזאת, וקידמה, ביחד עם שותפות לא מעטות נוספות את פרויקט AMP – Accelerated Mobile Pages. הפרויקט הזה מציע טעינה מהירה ביותר של דפי אינטרנט במכשירים ניידים, אולם יש לו תג מחיר.

 

פרויקט AMP – יתרונות וחסרונות

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

עם זאת, לשימוש ב- AMP באתר ישנם לא מעט חסרונות:

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

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

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

 

צוללים פנימה – ההיבטים הטכניים של AMP

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

 

ביצוע אסינכרוני של פונקציות Javascript

השימוש ב- javascript באתרי אינטרנט מודרניים הפך לסטנדרט מקובל בשנים האחרונות. Javascript מאפשרת להרחיב את היכולת של שפת ה- HTML (השפה בה בנויים אתרי אינטרנט), ולאפשר הרצה של יישומונים שונים. Javascript רצה בצד הלקוח, כלומר בדפדפן המותקן על המכשיר בו גולש המשתמש. במהלך הריצה של תוכניות javascript מתבצעות, כל הזמן, קריאות לפונקציות אשר מבצעות תתי מטלות מתוך המשימה הכוללת שבה אמורה לתמוך התוכנית. בגדול, קיימים שני סוגים של קריאות לפונקציות javascript: קריאות סינכרוניות וקריאות אסינכרוניות. קריאות סינכרוניות הן קריאות טוריות, ובמהלכן ממתינה טעינת העמוד על גבי הדפדפן עד להחזרת תשובה מן הפונקציה הפעילה. קריאות אסינכרוניות לא ממתינות להחזרת תשובה כזאת, ומסוגלות לרוץ במקביל.

 

איך זה בדיוק קשור ל- AMP?

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

 

הגדרת גדלים קבועים עבור תמונות

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

 

הגבלות החלות על סקריפטים צד שלישי

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

 

שימוש ב- inline css

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

עם זאת, זה לא באמת חייב להתנהל בצורה הזאת.

אתרי אינטרנט שלמים יכולים להיות כתובים בקובץ html אחד, ופקודות ה- css המיועדות לעיצוב הפרויקטים השונים יכולות להיות כתובות בתצורת inline, כלומר, בתוך קובץ ה- html עצמו. בפועל, ההשלכה הטכנית של תצורת המימוש הזאת, היא שניתן יהיה להסתפק בקריאת https אחת כדי לטעון את כלל הדף.

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

 

עיבוד גרפי של אנימציות

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

 

טעינת דפים מראש

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

 

פלאגינים שיהפכו את אתר הוורדפרס שלכם לתומך AMP

AMP

AMP for WP – Accelerated Mobile Pages

AMP WP – Google AMP For WordPress

 

לסיכום

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

ראשי התיבות של AMP הם: Accelerated Mobile Pages – דפי מובייל מואצים.

פרויקט AMP הוא פרויקט מיוחד של גוגל אשר נועד לשפר את חווית הגלישה מהמובייל ולהאיץ את זמני הטעינה של הדפים.

האצת הטעינה של דפי המובייל השונים מתבצעת באמצעות ביצוע אסינכרוני של פונקציות Javascript, הגדרת גדלים קבועים עבור תמונות, הגבלות החלות על סקריפטים צד שלישי, שימוש ב- inline css, ועוד.

הטמעת AMP באתר מתאפשרת באמצעות מספר שיטות שונות. היכנסו למאמר המלא ולימדו כיצד לעשות זאת נכון.

מה זה AMP והאם שווה את המאמץ
שלחו לחבר קישור למאמר, הוא חייב לקרוא אותו!
שלחו לחבר קישור למאמר
הוא חייב לקרוא אותו!
עשהאל דרייר
עשהאל דרייר

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

מאמרים נוספים מומלצים לקריאה עבורך:

המדריך המלא להקמת אתרי לידים

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

כדאי להשקיע ב-SEO בזמן מלחמה?

מדינת ישראל נמצאת במלחמה (נכון להיום – 6.11.23). אני כותב את זה בגוף ראשון כמי שלוקח בה חלק פעיל. אין ספק שמלחמה היא עניין מורכב

בדיקת מהירות אחסון אתרים קלאודוויז
עשהאל דרייר
היי כאן עשהאל ואני רוצה להמליץ לך באופן אישי לפתוח שרת בקלאודוויז ולהנות מאתרים מהירים, תמיכה 24/7 וממשק נוח. אני מאחסן למעלה מ-400 אתרים בעצמי וממליץ בחום ובלב שלם, לאחר מספר שנות ניסיון
תוכנת מעקב הדירוגים הטובה בעולם!
בואו לעקוב אחרי מיקומים של כל אתר, מכל מקום בעולם, כולל הפרדה בין מיקומי דסקטופ ומובייל, תנועה, תיעוד עבודה ואפילו תוכלו לשלוח ללקוחות שלכם לינק לדשבורד שמתעדכן אונליין!
הטבה לגולשי האתר:
14 ימי ניסיון ו-25% הנחה לחודשיים