אתר מותאם למובייל: מה גוגל בודק, מה זה רספונסיבי, ואיך בודקים לבד

Google סורק ומדרג דפים לפי גרסת המובייל שלהם באמצעות smartphone agent, במדיניות שנקראת mobile-first indexing, ומודד ביצועים לפי האחוזון ה-75 של הגולשים. יותר מ-40 אחוז מהאתרים ברשת רצים על וורדפרס, שם תוספים שבורים מחריבים עימודים ניידים. מי שלא מעמיד גרסה ניידת תקינה פשוט נעלם מהתוצאות.

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

שלוש תצורות לבניית אתר

Google מונה שלוש דרכים עיקריות להקמת אתר שמתאים לטלפונים ניידים. האפשרות הראשונה היא עיצוב רספונסיבי, השנייה היא הגשה דינמית המכונה Dynamic serving, והשלישית היא החזקת כתובות נפרדות, Separate URLs, לדסקטופ ולנייד. התצורה המומלצת הרשמית של גוגל היא עיצוב רספונסיבי, מפני שהיא הפשוטה ביותר ליישום ולתחזוקה שוטפת.

בעיצוב רספונסיבי מגישים בדיוק את אותו קוד HTML ובאותה כתובת URL לכל המכשירים, והתוכן משנה את פריסתו לפי שטח המסך. לעומת זאת, בהגשה דינמית ובכתובות נפרדות, השרת מסתמך על זיהוי דפדפן, user-agent sniffing, ועל כותרת HTTP מסוג Vary: user-agent כדי להחזיר קוד שונה או לבצע הפניה. לא הייתי נוגע בכתובות נפרדות בשום מצב. הפיצול הזה יוצר שגיאות הפניה, מכפיל את עלויות התחזוקה ומסבך בדיקות תקינות ללא שום יתרון אמיתי.

זה כאב ראש מיותר.

איך עובד עיצוב רספונסיבי

עיצוב רספונסיבי, RWD, הוא גישה שמבטיחה שדפי אינטרנט יוצגו היטב בכל גודל מסך ורזולוציה, מושג שטבע Ethan Marcotte בשנת 2010. השיטה התבססה במקור על מבנה של גריד גמיש, תמונות גמישות עם הגדרת max-width של 100%, ושאילתות מדיה המכונות media queries. תמונות גמישות מתכווצות כשהעמודה נהיית צרה יותר, אך אינן גדלות מעבר לגודלן הטבעי, מה שמונע עיוותים וטשטוש.

בעבר נאלצו מפתחים להשתמש ב-CSS float ובנקודות שבירה מרובות המכונות breakpoints כדי להתאים כל מקטע תצוגה. כיום פריסות CSS מודרניות, בפרט Flexbox ו-CSS Grid, הן רספונסיביות מעצם טבען ומפזרות את השטח הפנוי בצורה חכמה בין האלמנטים בהתאם למסגרת. שאילתות מדיה מאפשרות להחיל כללים ייחודיים לפי רוחב המסך, כאשר המנהג המקובל הוא לבנות בשיטת mobile first, כלומר לתכנן עמודה אחת למסך צר ורק אז להרחיב לתצוגות רחבות.

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

בלי ההגדרה הזו, האתר יקרוס.

מדדי Core Web Vitals

Google מודד את חוויית המשתמש בפועל באמצעות שלושה מדדי יסוד: Largest Contentful Paint למהירות טעינה, Interaction to Next Paint לתגובתיות, ו-Cumulative Layout Shift ליציבות ויזואלית. הנתונים נמדדים אצל גולשים ממשיים דרך Chrome User Experience Report או בכלי מעבדה כמו Chrome DevTools, דוחות PageSpeed Insights ו-Lighthouse.

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

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

ציון מעבר נקבע כאשר עומדים ברף המומלץ באחוזון ה-75 של הביקורים, בנפרד למשתמשי נייד ובנפרד למחשב. כדי לתעד את הנתונים בזמן אמת, מפתחים משתמשים בספריית web-vitals הזמינה ב-npm, ושולחים את המדידות אל שרת או כתובת API באמצעות פקודת navigator.sendBeacon או קריאת fetch.

טעויות סריקה ושגיאות נפוצות

מנהלי אתרים רבים שמחזיקים שתי גרסאות מסירים לעיתים מידע מעמודי הנייד כדי לחסוך מקום, ופוגעים ישירות בנוכחות שלהם במנועי החיפוש. Google דורש שהתוכן המרכזי, כותרות ה-page title, תיאורי meta description ונתונים מובנים (Structured data) יהיו זהים לחלוטין בין המחשב לנייד שלכם.

אם חסמתם תמונות בקובץ robots.txt, או שהעליתם תמונות באיכות ירודה או ברזולוציה זעירה לנייד, התמונות לא יופיעו בתוצאות החיפוש. יש לוודא שטקסט חלופי (alt text) קיים בשתי הגרסאות בצורה תואמת, כדי לא לפגוע באינדוקס התמונות שלכם. תקלה חמורה נוספת היא השארת תגית noindex בגרסה הניידת, שמובילה להסרה מלאה של העמוד.

זהירות עם הפניות.

באתרים עם כתובות נפרדות רואים לא פעם הפניה של כל עמודי המחשב ישירות אל עמוד הבית של הנייד, במקום לעמוד המקביל המתאים. תקלות נוספות כוללות עמודי שגיאה ייעודיים בנייד, כתובות עם מקטעי עוגן, anchor fragment, או חסימת גרסת הנייד ב-robots.txt. מצבים כאלה מייצרים שגיאות סריקה, פוגעים בעומס השרת המכונה hostload, ומונעים מרובוט הסריקה להגיע אל המידע.

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

מקורות

• developers.google.comhttps://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
• web.devhttps://web.dev/articles/vitals

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