לבצע אופטימיזציה של הודעות לגבי קובצי cookie כדי לשפר את הביצועים ונוחות השימוש.
במסמך הזה מוסבר איך הודעות על קובצי cookie יכולות להשפיע על הביצועים, על מדידת הביצועים ועל חוויית המשתמש.
ביצועים
להודעות על קובצי Cookie יכולה להיות השפעה משמעותית על ביצועי הדף, כי הן בדרך כלל נטענות בשלב מוקדם של תהליך טעינת הדף, מוצגות לכל המשתמשים ועשויות להשפיע על הטעינה של מודעות ותוכן אחר של הדף.
כך הודעות לגבי קובצי cookie יכולות להשפיע על המדדים של Web Vitals:
המהירות שבה נטען רכיב התוכן הכי גדול (LCP): רוב ההודעות לבקשת הסכמה לשימוש בקובצי Cookie הן קטנות יחסית, ולכן בדרך כלל לא מכילות את רכיב ה-LCP של הדף. עם זאת, זה יכול לקרות - במיוחד במכשירים ניידים. במכשירים ניידים, הודעה על קובצי Cookie בדרך כלל תופסת חלק גדול יותר מהמסך. מצב כזה מתרחש בדרך כלל כשהודעה על קובצי cookie מכילה גוש טקסט גדול (בלוקי טקסט יכולים להיות גם רכיבי LCP).
מהירות התגובה לאינטראקציה באתר (INP): הודעות על קובצי Cookie יכולות בדרך כלל לגרום ל-INP גבוה, כי בדרך כלל הן מוסיפות הרבה סקריפטים של צד שלישי כשהם מקבלים אותן. בדרך כלל הבעיה העיקרית היא ביצוע האינטראקציה אישור, כי כתוצאה מכך נדרש עיבוד רב כדי להוסיף את הסקריפטים של צד שלישי בבת אחת. כדי לצמצם את הסיכון, כדאי לעיין בקטע השיטות המומלצות בהמשך.
Cumulative Layout Shift (CLS): הודעות בנושא הסכמה לשימוש בקובצי Cookie הן מקור נפוץ מאוד לשינויי פריסה.
באופן כללי, אפשר לצפות שלהודעה על קובצי cookie מספקי צד שלישי תהיה השפעה גדולה יותר על הביצועים, מאשר להודעה שאתם יוצרים בעצמכם באמצעות קובצי cookie. זו לא בעיה ייחודית להודעות על קובצי cookie, אלא באופי של סקריפטים של צד שלישי באופן כללי.
שיטות מומלצות
השיטות המומלצות בקטע הזה מתמקדות בהודעות לגבי קובצי cookie של צד שלישי. חלק מהשיטות המומלצות האלו, אבל לא כולן, רלוונטיות גם להודעות לגבי קובצי cookie מהדומיין הנוכחי.
הסבר על ההשפעה של הודעות על קובצי cookie על INP
כפי שצוין קודם, הלחצן אישור הוא בדרך כלל גורם מסוים לבעיות ב-INP בגלל כמות העיבוד הגדולה שמתרחשת כשלוחצים עליו.
צוות Chrome עבד עם כמה פלטפורמות לניהול הסכמה (CMP) כדי להניב תוצאות אחרי הלחיצה על 'אישור', וכך לאפשר לדפדפן לאשר במהירות את קבלת ההסכמה בשלב הבא. אפשר לראות דוגמה במקרה לדוגמה של PubTech.
אם פלטפורמת ה-CMP שלכם מושפעת מכך, נסו לפנות אליהם ולבדוק אם הם יכולים למנוע באופן דומה בעיות INP באתרים שמטמיעים אותה. כדאי לעיין במאמר בנושא אופטימיזציה למשימות ארוכות כדי לקבל הנחיות לגבי טקטיקה.
טעינת סקריפטים של התראות על קובצי cookie באופן אסינכרוני
יש לטעון את הסקריפטים של ההודעות על קובצי cookie באופן אסינכרוני. כדי לעשות את זה, מוסיפים את המאפיין async לתג הסקריפט.
<script src="https://cookie-notice.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.cookie-notice.com/">
טעינה מראש של התראות לגבי קובצי cookie לפי הצורך
חלק מהאתרים יפיקו תועלת משימוש ברמז המשאב preload לטעינת סקריפט ההודעה על קובצי cookie. הרמז למשאב preload שולח לדפדפן ליזום בקשה מוקדמת למשאב שצוין.
<link rel="preload" href="https://www.cookie-notice.com/cookie-script.js">
השימוש ב-preload הוא הכי יעיל אם השימוש בו מוגבל לאחזור של כמה משאבי מפתח בכל דף. לכן, התועלת של טעינה מראש של סקריפט ההודעה של קובצי cookie משתנה בהתאם לסיטואציה.
שימו לב להשפעה על הביצועים של הודעות בנוגע לקובצי cookie
התאמה אישית של העיצוב והסגנון של קובצי cookie של צד שלישי עשויה לגרום לעלויות ביצועים נוספות. לדוגמה, להודעות קובצי Cookie של צד שלישי אי אפשר תמיד להשתמש שוב באותם משאבים (כמו גופן אינטרנט) שנמצאים בשימוש בכל מקום אחר בדף. כמו כן, הודעות בנושא קובצי cookie של צד שלישי נוטות להיטען בסוף שרשראות בקשות ארוכות. כדי להימנע מהפתעות לא נעימות, כדאי לשים לב איך קובצי ה-cookie של קובצי ה-cookie נטענות ומחילים את העיצוב והמשאבים הקשורים.
נמנעים משינויים בפריסה
ריכזנו כאן כמה מהבעיות הנפוצות ביותר בנושא שינוי הפריסה שקשורות להודעות לגבי קובצי Cookie:
- הודעות על קובצי cookie בחלק העליון של המסך: הודעות על קובצי cookie בחלק העליון של המסך הן מקור נפוץ מאוד לשינוי הפריסה. אם הודעה על קובצי cookie מוכנסת ל-DOM אחרי שהדף שעבר רינדור, היא תדחוף את רכיבי הדף שמתחתם ל-DOM למטה בדף. אפשר למנוע שינוי כזה בפריסה על ידי שמירת מקום ב-DOM לבקשת ההסכמה. אם זה לא פתרון מעשי - לדוגמה, אם מידות ההודעה לגבי קובצי ה-cookie שונות במיקומים גיאוגרפיים שונים, כדאי להשתמש בכותרת תחתונה במיקום קבוע או בחלון מודאלי כדי להציג את ההודעה על קובצי ה-cookie. שתי הגישות החלופיות האלה מציגות את ההודעה בנושא קובצי cookie כ'שכבת-על' בחלק העליון של הדף, ולכן ההודעה בנושא קובצי cookie לא אמורה לגרום לתנודות בתוכן כשהוא נטען.
- אנימציות: הודעות רבות על קובצי cookie כוללות אנימציות. לדוגמה, "החלקה פנימה" הודעה על קובצי cookie היא תבנית עיצוב נפוצה. בהתאם לאופן שבו האפקטים האלה מוטמעים, הם עלולים לגרום לשינויים בפריסה. מידע נוסף זמין במאמר ניפוי באגים בשינויים בפריסה.
- גופנים: גופנים שנטענים מאוחרים יכולים לחסום את העיבוד ולגרום לשינויים בפריסה. התופעה הזו ברורה יותר בחיבורים איטיים.
אופטימיזציות מתקדמות של טעינה
ההטמעה של הטכניקות האלה דורשת יותר עבודה, אבל הן יכולות לשפר עוד יותר את הטעינה של סקריפטים של הודעות על קובצי cookie:
- שמירה במטמון והצגה של סקריפטים של קובצי Cookie של צד שלישי מהשרתים שלכם יכולים לשפר את מהירות ההעברה של המשאבים האלה.
- שימוש בכלי שירות (service worker) יכול להעניק שליטה רבה יותר על אחזור ושמירה במטמון של סקריפטים של צד שלישי, כמו סקריפטים של הודעות בנושא קובצי cookie.
מדידת ביצועים
התראות על קובצי Cookie יכולות להשפיע על מדידת הביצועים. בקטע הזה נדון בחלק מההשלכות האלה ובטכניקות לצמצום שלהן.
Real User Monitoring (RUM)
חלק מכלי ניתוח הנתונים וה-RUM משתמשים בקובצי cookie כדי לאסוף נתוני ביצועים. במקרה שבו משתמש מסרב להשתמש בקובצי cookie, הכלים האלה לא יכולים לתעד נתוני ביצועים.
האתרים צריכים להיות מודעים לתופעה הזו. כדאי גם להבין את המנגנונים שבהם כלי ה-RUM משתמשים כדי לאסוף את הנתונים. עם זאת, באתר האופייני שהפער הזה לא מהווה סיבה להתראה, בגלל הכיוון והגודל של הטיה בנתונים. השימוש בקובצי Cookie הוא לא דרישה טכנית למדידת ביצועים. ספריית ה-JavaScript של web-vitals היא דוגמה לספרייה שלא משתמשת בקובצי cookie.
בהתאם לאופן שבו האתר שלך משתמש בקובצי Cookie כדי לאסוף נתוני ביצועים (כלומר, אם קובצי ה-Cookie מכילים מידע אישי), ובהתאם לחקיקה הרלוונטית, יכול להיות שהשימוש בקובצי Cookie למדידת ביצועים לא יהיה כפוף לאותן דרישות חוק אתרים מסוימים בוחרים לחלק את קובצי ה-Cookie של ביצועים כקטגוריה נפרדת של קובצי Cookie כשמבקשים את הסכמת המשתמשים.
מעקב סינתטי
בלי הגדרה מותאמת אישית, רוב הכלים הסינתטיים (כמו Lighthouse ו-WebPageTest) ימדדו רק את החוויה של משתמש חדש שלא הגיב לבקשת הסכמה לשימוש בקובצי Cookie. עם זאת, לא רק שינויים במצב המטמון (למשל, ביקור ראשוני לעומת ביקור חוזר) צריכים להביא בחשבון בזמן האיסוף של נתוני הביצועים, אלא גם שינויים במצב קבלת קובצי ה-cookie – מאושר, נדחה או לא מגיב.
בדיקת הודעות של קובצי cookie באמצעות WebPageTest
בקטעים הבאים נדון בהגדרות של WebPageTest וב-Lighthouse שיכולות לעזור בשילוב הודעות על קובצי cookie בתהליכי העבודה למדידת הביצועים. עם זאת, התראות על קובצי cookie וקובצי cookie הן רק גורם אחד מתוך מגוון גורמים רבים שקשה לנו לבצע עבורם הדמיה מושלמת בסביבות שיעור Lab. לכן חשוב שנתוני 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 משתנה מעט בהתאם להקשר (כלי פיתוח, CLI או PageSpeed Insights).
DevTools
קובצי ה-Cookie לא נמחקים כשמריצים את Lighthouse מכלי הפיתוח. עם זאת, סוגים אחרים של אחסון נמחקים כברירת מחדל. אפשר לשנות את ההתנהגות הזו באמצעות האפשרות Clear Storage בחלונית ההגדרות של Lighthouse.
CLI
הרצת Lighthouse מ-CLI משתמשת במכונה חדשה של Chrome, כך שלא מוגדרים קובצי Cookie כברירת מחדל. כדי להריץ את Lighthouse מ-CLI עם קבוצה מסוימת של קובצי cookie, משתמשים בפקודה הבאה:
lighthouse <url> --extra-headers "{\"Cookie\":\"cookie1=abc; cookie2=def; \_id=foo\"}"
למידע נוסף על הגדרת כותרות של בקשות בהתאמה אישית ב-Lighthouse CLI, ראו הפעלת 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.
Granularity: הגישה הנפוצה ביותר להגדרת קובצי cookie היא לאפשר למשתמשים להביע הסכמה לקובצי cookie לפי 'קטגוריה' של קובץ cookie. דוגמאות לקטגוריות נפוצות של קובצי cookie: קובצי cookie פונקציונליים, קובצי cookie לטירגוט וקובצי cookie לרשתות חברתיות.
עם זאת, אתרים מסוימים יתקדמו צעד נוסף ויאפשרו למשתמשים להביע הסכמה על בסיס כל קובץ Cookie. לחלופין, דרך נוספת לספק למשתמשים אמצעי בקרה ספציפיים יותר היא לחלק קטגוריות של קובצי cookie, כמו 'פרסום', לתרחישים ספציפיים לדוגמה. לדוגמה, לאפשר למשתמשים להביע הסכמה בנפרד ל'מודעות בסיסיות' ול'מודעות בהתאמה אישית'.
