שיטות מומלצות לעבודה עם קובצי cookie

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

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

ביצועים

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

כך התראות על קובצי cookie יכולות להשפיע על מדדי Web Vitals:

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

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

• Cumulative Layout Shift ‏(CLS): הודעות בקשת הסכמה לשימוש בקובצי Cookie הן מקור נפוץ מאוד לשינויי פריסה.

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

שיטות מומלצות

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

הסבר על ההשפעה של הודעות בנושא קובצי cookie על INP

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

צוות Chrome עבד עם מספר פלטפורמות לניהול הסכמה (CMP) כדי לאפשר לדפדפן לאשר את ההסכמה במהירות בצביעה הבאה, אחרי הלחיצה על 'אישור'. מקרה לדוגמה של PubTech

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

טעינה אסינכרונית של סקריפטים של הודעות בנושא קובצי cookie

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

<script src="https://example.com/script.js" async>

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

טעינת סקריפטים של הודעות בנושא קובצי cookie ישירות

יש לטעון סקריפטים של הודעות בנושא קובצי Cookie "ישירות" על ידי הצבת תג הסקריפט ב-HTML של המסמך הראשי, במקום לטעון אותם באמצעות מערכת ניהול תגים או סקריפט אחר. שימוש במנהל תגים או בסקריפט משני להחדרת הסקריפט של הודעת ההסכמה לשימוש בקובצי cookie מעכב את הטעינה של הסקריפט של הודעת ההסכמה לשימוש בקובצי cookie: הוא מסתיר את הסקריפט מפני מנתח ה-lookahead של הדפדפן ומונע את הטעינה של הסקריפט לפני ביצוע ה-JavaScript.

יצירת חיבור מוקדם למקור של ההודעה בנושא קובצי cookie

כל האתרים שטעונים את הסקריפטים של הודעות ההסכמה לשימוש בקובצי cookie ממיקום של צד שלישי צריכים להשתמש בהצעות המשאבים dns-prefetch או preconnect כדי ליצור חיבור מוקדם למקור שמארח את המשאבים של הודעות ההסכמה לשימוש בקובצי cookie. אפשר לקרוא מידע נוסף במאמר יצירת חיבורי רשת מוקדם יותר כדי לשפר את מהירות תפיסת הדפים.

<link rel="preconnect" href="https://cdn.example.com/">

טעינת הודעות בנושא קובצי cookie מראש לפי הצורך

חלק מהאתרים יפיקו תועלת משימוש ברמז המשאב preload לטעינת סקריפט ההודעה על קובצי cookie. הרמז למשאב preload שולח לדפדפן ליזום בקשה מוקדמת למשאב שצוין.

<link rel="preload" href="https://www.example.com/cookie-script.js">

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

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

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

נמנעים משינויים בפריסה

ריכזנו כאן כמה מהבעיות הנפוצות ביותר בשינויי הפריסה שקשורים להודעות על קובצי cookie:

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

אופטימיזציות מתקדמות של טעינה

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

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

מדידת ביצועים

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

מעקב אחר משתמשים אמיתיים (RUM)

חלק מכלי ניתוח הנתונים וה-RUM משתמשים בקובצי cookie כדי לאסוף נתוני ביצועים. אם משתמש דוחה את השימוש בקובצי cookie, הכלים האלה לא יכולים לתעד נתוני ביצועים.

בעלי אתרים צריכים להיות מודעים לתופעה הזו, וגם כדאי להבין את המנגנונים שבהם נעשה שימוש בכלי ה-RUM כדי לאסוף את הנתונים. עם זאת, באתרים רגילים, אי ההתאמה הזו לא אמורה להדאיג, בהתאם לכיוון ולמידת הסטייה של הנתונים. השימוש בקובצי cookie הוא לא דרישה טכנית למדידת הביצועים. ספריית JavaScript של web-vitals היא דוגמה לספרייה שלא משתמשת בקובצי cookie.

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

מעקב סינתטי

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

בדיקת הודעות בנושא קובצי cookie באמצעות WebPageTest

בקטעים הבאים נדון בהגדרות של WebPageTest וב-Lighthouse שיכולות לעזור בשילוב הודעות על קובצי cookie בתהליכי העבודה למדידת הביצועים. עם זאת, קובצי cookie והתראות על קובצי cookie הם רק אחד מגורמים רבים שקשה מאוד לדמות בצורה מושלמת בסביבות מעבדה. לכן חשוב להשתמש בנתוני RUM כבסיס לבדיקת הביצועים, במקום בכלים סינתטיים.

שימוש בסקריפטים

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

כדי להוסיף סקריפט, עוברים לכרטיסייה סקריפט. הסקריפט הבא מנווט לכתובת ה-URL שצריך לבדוק ואז לוחץ על רכיב ה-DOM עם id=cookieButton.

combineSteps
navigate    %URL%
clickAndWait    id=cookieButton

כשמשתמשים בסקריפט הזה, חשוב לזכור:

• הערך combineSteps מורה ל-WebPageTest "לשלב" את התוצאות של שלבי הסקריפטים הבאים לקבוצה אחת של מעקבים ומדידות. כדאי גם להריץ את הסקריפט הזה בלי combineSteps – שרטוטים נפרדים מאפשרים לראות בקלות אם המשאבים נטענו לפני או אחרי אישור קובצי ה-cookie.
• %URL% הוא כלל של WebPageTest שמתייחס לכתובת ה-URL שנבדקת.
• clickAndWait מורה ל-WebPageTest ללחוץ על הרכיב שמצוין ב-attribute=value ולהמתין להשלמת הפעילות הבאה בדפדפן. הוא בפורמט clickAndWait attribute=Value.

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

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

הגדרת קובצי Cookie

כדי להריץ את WebPageTest עם קבוצת קובצי cookie, עוברים לכרטיסייה Advanced ומוסיפים את כותרת קובץ ה-cookie לשדה Custom headers:

שינוי מיקום הבדיקה

כדי לשנות את מיקום הבדיקה שמשמש את WebPageTest, לוחצים על התפריט הנפתח Test Location בכרטיסייה Advanced Testing.

בדיקת הודעות בנושא קובצי cookie באמצעות Lighthouse

הגדרת קובצי cookie במהלך הפעלה של Lighthouse יכולה לשמש כמנגנון להעברת דף למצב מסוים לצורך בדיקה על ידי Lighthouse. התנהגות קובצי ה-cookie ב-Lighthouse משתנה מעט בהתאם להקשר (DevTools,‏ CLI או PageSpeed Insights).

כלי פיתוח

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

CLI

הרצת Lighthouse מ-CLI משתמשת במכונה חדשה של Chrome, כך שלא מוגדרים קובצי Cookie כברירת מחדל. כדי להריץ את Lighthouse מה-CLI עם קבוצת קובצי cookie מסוימים, משתמשים בפקודה הבאה:

lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"

למידע נוסף על הגדרת כותרות בקשה בהתאמה אישית ב-CLI של Lighthouse, ראו הפעלת Lighthouse בדפים מאומתים.

PageSpeed Insights

כשמריצים את Lighthouse מ-PageSpeed Insights, נעשה שימוש במכונה חדשה של Chrome ולא מוגדרים קובצי cookie. אי אפשר להגדיר ל-PageSeed Insights להגדיר קובצי cookie ספציפיים.

חוויית משתמש

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

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

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

מיקום המודעה

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

הודעות בנושא קובצי cookie בכותרת העליונה, בכותרת התחתונה ובתוך הטקסט

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

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

מודלים

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

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

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

יכולת הגדרה

ממשקי ההודעות על קובצי cookie מעניקים למשתמשים רמות שונות של שליטה על קובצי ה-cookie שהם מאשרים.

אין אפשרות להגדרה

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

אפשרות הגדרה מסוימת

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

יכולת הגדרה מלאה

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

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

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

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