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

Dave Gash

Ilya Grigorik

Jeremy Wagner

כותרת הבקשה Save-Data client hint שזמינה בדפדפני Chrome,‏ Opera ו-Yandex מאפשרת למפתחים לספק למשתמשים אפליקציות קלות ומהירות יותר, אם הם בוחרים להפעיל בדפדפן שלהם את מצב חיסכון בנתונים.

למה צריך דפים קלים

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

למרות שמספר החיבורים לרשתות 2G סוף סוף נמצא במגמת ירידה, בשנת 2015, 2G הייתה עדיין טכנולוגיית הרשת הדומיננטית. הפריסה והזמינות של רשתות 3G ו-4G גדלות במהירות, אבל העלויות הכרוכות בבעלות על מכשירים והמגבלות של הרשתות עדיין משפיעות על מאות מיליוני משתמשים.

אלה טיעונים חזקים לאופטימיזציה של הדף.

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

כותרת הבקשה Save-Data

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

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

תמיכה בדפדפנים

• ‫Chrome 49 ואילך מפרסם Save-Data כשהמשתמשמפעיל את האפשרות 'חוסך הנתונים' בנייד או את התוסף 'חוסך הנתונים' בדפדפני מחשב.
• ‫Opera 35+‎ מפרסם Save-Data כשהמשתמש מפעיל את המצב Opera Turbo במחשב, או את האפשרות חיסכון בנתונים בדפדפני Android.
• מודעות ב-Yandex 16.2 ואילך מוצגות ב-Save-Data כשמצב טורבו מופעל בדפדפני אינטרנט במחשב או בנייד.

זיהוי ההגדרה Save-Data

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

כשהמשתמש מפעיל את מצב חיסכון הנתונים בדפדפן, אפליקציית הדפדפן מוסיפה את כותרת הבקשה Save-Data לכל הבקשות היוצאות (גם HTTP וגם HTTPS). בזמן כתיבת המאמר הזה, הדפדפן מפרסם רק טוקן אחד עם הערך on בכותרת (Save-Data: on), אבל יכול להיות שבעתיד הוא יורחב כדי לציין העדפות אחרות של המשתמש.

בנוסף, אפשר לזהות אם Save-Data מופעל ב-JavaScript:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

חשוב לבדוק אם האובייקט connection קיים באובייקט navigator, כי הוא מייצג את Network Information API (ממשק API למידע על הרשת), שמוטמע רק בדפדפני Chrome,‏ Chrome ל-Android ו-Samsung Internet. מכאן, צריך רק לבדוק אם navigator.connection.saveData שווה ל-true, ואפשר להטמיע בתנאי הזה פעולות לשמירת נתונים.

אם האפליקציה משתמשת ב-service worker, היא יכולה לבדוק את כותרות הבקשה ולהחיל לוגיקה רלוונטית כדי לשפר את חוויית המשתמש. לחלופין, השרת יכול לחפש את ההעדפות שפורסמו בכותרת הבקשה Save-Data ולהחזיר תגובה חלופית – סימון שונה, תמונות וסרטונים קטנים יותר וכן הלאה.

טיפים ושיטות מומלצות להטמעה

1. כשמשתמשים ב-Save-Data, צריך לספק כמה ממשקי משתמש שתומכים בו ומאפשרים למשתמשים לעבור בקלות בין חוויות. לדוגמה:
   • מודיעים למשתמשים ש-Save-Data נתמך ומעודדים אותם להשתמש בו.
   • לאפשר למשתמשים לזהות את המצב ולבחור אותו באמצעות הנחיות מתאימות ותיבות סימון או לחצני הפעלה/השבתה אינטואיטיביים.
   • כשבוחרים במצב חיסכון בנתונים, צריך להודיע על כך ולספק דרך קלה וברורה להשבית אותו ולחזור לחוויה המלאה אם רוצים.
2. חשוב לזכור שאפליקציות קלות משקל הן לא אפליקציות פחות טובות. הן לא משמיטות פונקציונליות או נתונים חשובים, אלא רק מודעות יותר לעלויות הכרוכות בכך ולחוויית המשתמש. לדוגמה:
   • אפליקציית גלריית תמונות עשויה לספק תצוגות מקדימות ברזולוציה נמוכה יותר, או להשתמש במנגנון קרוסלה עם פחות קוד.
   • אפליקציית חיפוש יכולה להחזיר פחות תוצאות בכל פעם, להגביל את מספר התוצאות שכוללות הרבה מדיה או לצמצם את מספר התלויות שנדרשות כדי להציג את הדף.
   • באתר חדשותי יכול להיות שיוצגו פחות כתבות, שקטגוריות פחות פופולריות לא יוצגו או שיוצגו תצוגות מקדימות קטנות יותר של מדיה.
3. צריך לספק לוגיקה של השרת כדי לבדוק את כותרת הבקשה Save-Data, ומומלץ לספק תגובה חלופית קלה יותר לדף כשהיא מופעלת – למשל, לצמצם את מספר המשאבים והתלות הנדרשים, להחיל דחיסה אגרסיבית יותר של משאבים וכו'.
   • אם אתם מציגים תגובה חלופית על סמך הכותרת Save-Data, אל תשכחו להוסיף אותה לרשימת Vary ‏– Vary: Save-Data – כדי לציין למטמון במעלה הזרם שעליו לשמור במטמון ולהציג את הגרסה הזו רק אם כותרת הבקשה Save-Data קיימת. מידע נוסף זמין במאמר בנושא שיטות מומלצות לאינטראקציה עם מטמון.
4. אם אתם משתמשים ב-service worker, האפליקציה יכולה לזהות מתי האפשרות לשמירת נתונים מופעלת. לשם כך, היא בודקת אם קיים Save-Data request header או בודקת את הערך של המאפיין navigator.connection.saveData. אם האפשרות הזו מופעלת, כדאי לבדוק אם אפשר לשכתב את הבקשה כדי לאחזר פחות בייטים, או להשתמש בתשובה שכבר אוחזרה.
5. מומלץ להוסיף ל-Save-Data אותות אחרים, כמו מידע על סוג החיבור והטכנולוגיה של המשתמש (ראו NetInfo API). לדוגמה, יכול להיות שתרצו להציג את הגרסה הקלה לכל משתמש עם חיבור 2G, גם אם Save-Data לא מופעל. לעומת זאת, העובדה שלמשתמש יש חיבור 4G מהיר לא אומרת שהוא לא מעוניין לחסוך בנתונים – למשל, כשהוא נמצא בנדידה. בנוסף, אפשר להשתמש ברמז הלקוח Device-Memory כדי להוסיף מידע על Save-Data ולהתאים את האתר למשתמשים במכשירים עם זיכרון מוגבל. זיכרון המכשיר של המשתמש מוצג גם בnavigator.deviceMemory client hint.

מתכונים

האפשרויות שלכם עם Save-Data הן בלתי מוגבלות. כדי לתת לכם מושג לגבי האפשרויות, נסביר בעזרת כמה תרחישים לדוגמה. יכול להיות שתחשבו על תרחישי שימוש נוספים משלכם בזמן שתקראו את המאמר הזה, אז אל תהססו להתנסות ולבדוק מה אפשר לעשות!

בדיקה אם יש Save-Data בקוד בצד השרת

אפשר לזהות את המצב Save-Data ב-JavaScript באמצעות המאפיין navigator.connection.saveData, אבל לפעמים עדיף לזהות אותו בצד השרת. יכול להיות ש-JavaScript לא יפעל במקרים מסוימים. בנוסף, זיהוי בצד השרת הוא הדרך היחידה לשנות תגי עיצוב לפני שהם נשלחים ללקוח, וזה חשוב לחלק מתרחישי השימוש המועילים ביותר של Save-Data.

התחביר הספציפי לזיהוי הכותרת Save-Data בקוד בצד השרת תלוי בשפה שבה נעשה שימוש, אבל הרעיון הבסיסי צריך להיות זהה לכל קצה עורפי של אפליקציה. לדוגמה, ב-PHP, כותרות הבקשות מאוחסנות במערך $_SERVER superglobal באינדקסים שמתחילים ב-HTTP_. כלומר, אפשר לזהות את הכותרת Save-Data על ידי בדיקת הקיום והערך של המשתנה $_SERVER["HTTP_SAVE_DATA"] באופן הבא:

// false by default.
$saveData = false;

// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
  // `Save-Data` detected!
  $saveData = true;
}

אם תציבו את הבדיקה הזו לפני שסימון כלשהו נשלח ללקוח, המשתנה $saveData יכיל את המצב Save-Data ויהיה זמין לשימוש בכל מקום בדף. אחרי שהסברנו את המנגנון הזה, נציג כמה דוגמאות לאופן שבו אפשר להשתמש בו כדי להגביל את כמות הנתונים שאנחנו שולחים למשתמש.

הצגת תמונות ברזולוציה נמוכה במסכים ברזולוציה גבוהה

תרחיש שימוש נפוץ בתמונות באינטרנט הוא הצגת תמונות בשני גדלים: תמונה אחת למסכים 'רגילים' (1x), ותמונה נוספת שגדולה פי שניים (2x) למסכים ברזולוציה גבוהה (לדוגמה, Retina Display). המסכים האלה ברזולוציה גבוהה לא מוגבלים בהכרח למכשירים מתקדמים, והם הופכים לנפוצים יותר ויותר. במקרים שבהם עדיפה חוויית שימוש קלה יותר באפליקציה, כדאי לשלוח למסכים האלה תמונות ברזולוציה נמוכה יותר (1x) ולא גרסאות גדולות יותר (2x). כדי להשיג את זה כשהכותרת Save-Data קיימת, אנחנו פשוט משנים את תגי העיצוב שאנחנו שולחים ללקוח:

if ($saveData === true) {
  // Send a low-resolution version of the image for clients specifying `Save-Data`.
  ?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
  // Send the usual assets for everyone else.
  ?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}

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

אפשר גם להרחיב את הרעיון הזה למאפייני CSS background-image על ידי הוספת מחלקה לרכיב <html>:

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

מכאן אפשר לטרגט את המחלקה save-data ברכיב <html> ב-CSS כדי לשנות את אופן הצגת התמונות. אפשר לשלוח תמונות רקע ברזולוציה נמוכה למסכים ברזולוציה גבוהה, כמו בדוגמה של HTML שלמעלה, או להשמיט משאבים מסוימים לחלוטין.

השמטה של תמונות לא חיוניות

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

<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
  // Only send this image if `Save-Data` hasn't been detected.
  ?><img src="meme.jpg" alt="One does not simply consume data."><?php
}

השיטה הזו יכולה להשפיע באופן משמעותי, כפי שאפשר לראות באיור הבא:

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

השמטה של גופני אינטרנט לא חיוניים

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

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

לדוגמה, נניח שכללתם באתר שלכם את הגופן Fira Sans מ-Google Fonts. ‫Fira Sans הוא גופן מצוין לטקסט, אבל יכול להיות שהוא לא כל כך חשוב למשתמשים שמנסים לשמור נתונים. אם מוסיפים את המחלקה save-data לרכיב <html> כשהכותרת Save-Data קיימת, אפשר לכתוב סגנונות שמפעילים את הגופן הלא חיוני בהתחלה, אבל מבטלים את ההפעלה שלו כשהכותרת Save-Data קיימת:

/* Opt into web fonts by default. */
p,
li {
  font-family: 'Fira Sans', 'Arial', sans-serif;
}

/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
  font-family: 'Arial', sans-serif;
}

בגישה הזו, אפשר להשאיר את קטע הקוד <link> מ-Google Fonts במקומו, כי הדפדפן טוען משאבי CSS (כולל גופנים לאינטרנט) באופן ספקולטיבי. קודם הוא מחיל סגנונות על ה-DOM, ואז הוא בודק אם יש רכיבי HTML שמפעילים משאבים בגיליון הסגנונות. אם מישהו נתקל ב-Save-Data, הגופן Fira Sans לעולם לא ייטען כי ה-DOM המעוצב אף פעם לא מפעיל אותו. במקום זאת, המערכת תשתמש בגופן Arial. היא לא יפה כמו Fira Sans, אבל יכול להיות שהיא תהיה עדיפה למשתמשים שמנסים לחסוך בתוכניות הנתונים שלהם.

סיכום

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

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

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

לפרטים נוספים על Save-Data ולדוגמאות מעשיות מצוינות, אפשר לעיין במאמר עזרה למשתמשים Save Data.