ביצוע אופטימיזציה של ההודעות בנושא קובצי 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 בזמן איסוף נתוני המעקב.
כדי להוסיף סקריפט, עוברים לכרטיסייה Script. הסקריפט הבא מנווט לכתובת ה-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 header (כותרות מותאמות אישית):
שינוי מיקום הבדיקה
כדי לשנות את מיקום הבדיקה שבו משתמש WebPageTest, לוחצים על התפריט הנפתח Test Location בכרטיסייה Advanced Testing.
בדיקת הודעות בנושא קובצי cookie באמצעות Lighthouse
הגדרת קובצי cookie במהלך הפעלה של Lighthouse יכולה לשמש כמנגנון להעברת דף למצב מסוים לצורך בדיקה על ידי Lighthouse. התנהגות קובצי ה-cookie ב-Lighthouse משתנה מעט בהתאם להקשר (DevTools, CLI או PageSpeed Insights).
כלי פיתוח
קובצי ה-Cookie לא נמחקים כשמפעילים את Lighthouse מ-DevTools. עם זאת, סוגים אחרים של אחסון נמחקים כברירת מחדל. אפשר לשנות את ההתנהגות הזו באמצעות האפשרות ניקוי האחסון בחלונית ההגדרות של 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 שהם מאשרים.
חוויית משתמש: בדרך כלל, אמצעי הבקרה להגדרת השימוש בקובצי cookie מוצגים באמצעות חלון דו-שיח נפרד שנפתח כשהמשתמש משיב להודעת ההסכמה הראשונית לשימוש בקובצי cookie. עם זאת, אם יש מספיק מקום, בחלק מהאתרים הפקדים האלה יוצגו בתוך ההודעה הראשונית בנושא הסכמה לשימוש בקובצי cookie.
Granularity: הגישה הנפוצה ביותר להגדרת קובצי cookie היא לאפשר למשתמשים להביע הסכמה לקובצי cookie לפי 'קטגוריה' של קובץ cookie. דוגמאות לקטגוריות נפוצות של קובצי cookie כוללות קובצי cookie פונקציונליים, קובצי cookie לטירגוט וקובצי cookie של רשתות חברתיות.
עם זאת, באתרים מסוימים ירחיבו את האפשרות הזו ויאפשרו למשתמשים להביע הסכמה לכל קובץ cookie בנפרד. לחלופין, דרך נוספת לספק למשתמשים אמצעי בקרה ספציפיים יותר היא לחלק קטגוריות של קובצי cookie, כמו 'פרסום', לתרחישים ספציפיים לדוגמה. לדוגמה, לאפשר למשתמשים להביע הסכמה בנפרד ל'מודעות בסיסיות' ול'מודעות בהתאמה אישית'.
