איך להשתמש ב-Save-Data כדי ליצור אפליקציות מהירות וקלות

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

הצורך בדפים קלים

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

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

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

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

ה-request header של Save-Data

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

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

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

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

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

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

כשהמשתמש מפעיל את מצב חיסכון בנתונים בדפדפן, הדפדפן מוסיף את הכותרת 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, שמוטמע רק בדפדפנים Chrome, ‏Chrome ל-Android ו-Samsung Internet. משם, צריך רק לבדוק אם navigator.connection.saveData שווה ל-true, ואפשר להטמיע כל פעולה של שמירת נתונים בתנאי הזה.

הפעלת התוסף Data Saver ב-Chrome למחשב.

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

טיפ: אם אתם משתמשים ב-PageSpeed ל-Apache או ל-Nginx כדי לבצע אופטימיזציה של הדפים, כדאי לעיין בדיון הזה כדי ללמוד איך להפעיל חיסכון ב-Save-Data למשתמשים שלכם._

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

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

מתכונים

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

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

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

התחביר הספציפי לזיהוי הכותרת Save-Data בקוד בצד השרת תלוי בשפה שבה משתמשים, אבל הרעיון הבסיסי צריך להיות זהה לכל קצה עורפי של אפליקציה. לדוגמה, ב-PHP, כותרות הבקשות מאוחסנות במערך הגלובלי-העל $_SERVER באינדקסים שמתחילים ב-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 כדי לשנות את האופן שבו התמונות מוצגות. אפשר לשלוח תמונות רקע ברזולוציה נמוכה למסכים ברזולוציה גבוהה, כמו בדוגמה שלמעלה, או להשמיט משאבים מסוימים לגמרי.

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

חלק מהתמונות באינטרנט פשוט לא חיוניות. תמונות כאלה יכולות להוסיף לתוכן, אבל הן לא מתאימות למשתמשים שמנסים לנצל את חבילות הגלישה שלהם עד הסוף. במקרה הפשוט ביותר של 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 לא מופעל, לבין השמטה של אותן תמונות כש-Save-Data מופעל.

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

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

גופני אינטרנט בדרך כלל לא תופסים חלק גדול כל כך מהמטען הייעודי (payload) הכולל של דף נתון כמו תמונות, אבל הם עדיין פופולריים מאוד. הם גם צורכים כמות לא מבוטלת של נתונים. בנוסף, הדרך שבה דפדפנים מאחזרים ומעבדים גופנים מורכבת יותר ממה שאתם חושבים, עם מושגים כמו 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.