עשהאל-דרייר

מה זה 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.

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

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

תג כותרת (TITLE)

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

תג קנוניקל

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

חווית משתמש טובה – 19 הכללים

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

זמן שהייה באתר – כל מה שצריך לדעת

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

תג Alternate

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

לשליחת הודעה
מקצועיות זה אנחנו
השירותים שאנו מספקים

שתף את המאמר עכשיו!

שיתוף ב facebook
שיתוף ב google
שיתוף ב twitter
שיתוף ב linkedin

הצטרפו

לקבוצת הפייסבוק שלנו BLACK & GREY SEO | קידום אתרים אורגני למתקדמים

והשארו מעודכנים בכל החדשות !