רשתות להעברת תוכן של תמונות (CDN) מצוינות באופטימיזציה של תמונות לאינטרנט. העברת האתר ל-CDN של תמונה יכולה להניב חיסכון של 40-80% בגודל קובצי התמונות, וברוב המקרים היא יכולה לבצע אופטימיזציה של התמונות טוב יותר מאשר סקריפט לאופטימיזציה של תמונות בזמן הבנייה.
מהו CDN של תמונות?
CDNs לתמונות מתמחים בטרנספורמציה, באופטימיזציה ובהצגה של תמונות. אפשר גם להתייחס אליהם כאל ממשקי API שמאפשרים גישה לתמונות שבהן משתמשים באתר וביצוע מניפולציות עליהן. בתמונות שנטענות מ-CDN של תמונה, כתובת URL של תמונה מציינת לא רק את התמונה שצריך לטעון, אלא גם פרמטרים כמו גודל, פורמט ואיכות. כך אפשר ליצור וריאציות של תמונה לתרחישים שונים לדוגמה.
קובצי CDN של תמונות שונים מסקריפטים לאופטימיזציה של תמונות בזמן ה-build בכך שהם יוצרים גרסאות חדשות של תמונות לפי הצורך. כתוצאה מכך, רשתות CDN בדרך כלל מתאימות יותר ליצירת תמונות שעברו התאמה אישית רבה ללקוחות בודדים מאשר סקריפטים של build.
כיצד רשתות CDN של תמונות משתמשות בכתובות אתרים כדי לציין אפשרויות אופטימיזציה
כתובות URL של תמונות שמשמשות רשתות CDN של תמונות מספקות מידע חשוב על התמונה ועל הטרנספורמציות והאופטימיזציות שצריך להחיל עליה. הפורמטים של כתובות URL משתנים בהתאם ל-CDN של התמונה שבו אתם משתמשים, אבל ברמה הכללית לכולם יש תכונות דומות. הנה כמה מהתכונות הנפוצות ביותר.
מקור
CDN של תמונה יכול להתקיים בדומיין שלכם או בדומיין של ה-CDN של התמונה. בדרך כלל, רשתות CDN של תמונות של צד שלישי מאפשרות להשתמש בדומיין מותאם אישית בתשלום. השימוש בדומיין שלכם מאפשר לכם להחליף בקלות רבה יותר את ה-CDN של התמונות מאוחר יותר, כי לא יהיה צורך לבצע שינויים בכתובות URL.
בדוגמה הקודמת השתמשנו בדומיין של התמונה CDN ("example-cdn.com") עם תת-דומיין מותאם אישית, במקום דומיין מותאם אישית.
תמונה
בדרך כלל אפשר להגדיר קובצי CDN של תמונות כך שיאחזרו באופן אוטומטי תמונות מהמיקומים הקיימים שלהם, במקרה הצורך. כדי לעשות זאת, בדרך כלל מוסיפים את כתובת ה-URL המלאה של התמונה הקיימת בכתובת ה-URL של התמונה שנוצרה על ידי ה-CDN של התמונה. לדוגמה, ייתכן שתראו כתובת URL שנראית כך: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
כתובת ה-URL הזו תאחזר ותבצע אופטימיזציה של התמונה הקיימת בכתובת https://flowers.com/daisy.jpg.
יכול להיות שפורמט הקובץ המבוקש (בדוגמה JPG) לא יהיה זהה לפורמט של קובץ התמונה שהוחזר (WebP, בדוגמה). כותרת ה-HTTP content-type מציינת לדפדפן באיזה פורמט נמצאת כתובת ה-URL, כדי שיוכל לעבד אותה כראוי. זה עלול לגרום לבלבול אם הקובץ נשמר בדיסק ונמצא בשימוש על ידי תוכנה אחרת שמצפה שהפורמט יתאים לסיומת הקובץ.
דרך נוספת להעלאת תמונות ל-CDN של תמונה היא לשלוח אותן בבקשת HTTP POST אל ה-API של ה-CDN של התמונה.
מפתח אבטחה
מפתח האבטחה מונע מאנשים אחרים ליצור גרסאות חדשות של התמונות שלכם. כשהתכונה הזו פועלת, לכל גרסה חדשה של תמונה נדרש מפתח אבטחה ייחודי.
אם מישהו ינסה לשנות את הפרמטרים של כתובת ה-URL של התמונה אבל לא יספק מפתח אבטחה תקף, הוא לא יוכל ליצור גרסה חדשה. ה-CDN של התמונה מטפל בפרטי היצירה והמעקב של מפתחות האבטחה.
טרנספורמציות
קובצי CDN של תמונות מציעים עשרות, ובמקרים מסוימים מאות, טרנספורמציות שונות של תמונות. הטרנספורמציות האלה מצוינות במחרוזת של כתובת ה-URL, ואין הגבלות על שימוש בכמה טרנספורמציות בו-זמנית. טרנספורמציות התמונה החשובות ביותר מבחינת ביצועי אתרים הן גודל, דחיסות פיקסלים, פורמט ודחיסה. הטרנספורמציות האלה הן הסיבה לכך שהמעבר ל-CDN של תמונה בדרך כלל מקטין את קובצי התמונות באתר.
מכיוון שבדרך כלל יש את ההגדרה הטובה ביותר באופן אובייקטיבי לטרנספורמציות של ביצועים, סוגים מסוימים של CDN של תמונות תומכים במצב אוטומטי בשביל הטרנספורמציות האלה. לדוגמה, במקום לציין שתמונות ישתנו לפורמט WebP, אפשר לאפשר ל-CDN לבחור ולהציג באופן אוטומטי את הפורמט האופטימלי. רשת CDN של תמונות יכולה לקבוע את הדרך הטובה ביותר לבצע טרנספורמציה של תמונה באמצעות האותות הבאים, בין היתר:
- רמזים ללקוחות (לדוגמה, אזור התצוגה, DPR ורוחב התמונה)
- הכותרת
Save-Data - כותרת הבקשה User-Agent
- Network Information API
לדוגמה, ה-CDN של התמונה עשוי להציג AVIF בדפדפן Chrome, את WebP בדפדפן Edge ואת JPEG בדפדפן ישן מאוד. ההגדרות האוטומטיות הן פופולריות, כי הן מאפשרות לכם לנצל את המומחיות של רשתות CDN לתמונות בלי שתצטרכו לשנות את הקוד כך שיוכלו לאמץ טכנולוגיות חדשות כש-CDN של התמונה מתחיל לתמוך בהן.
סוגים של תמונות CDN
יש שתי קטגוריות עיקריות של רשתות CDN לתמונות: בניהול עצמי ובניהול צד שלישי.
CDNs של תמונות בניהול עצמי
רשתות CDN בניהול עצמי יכולות להתאים לאתרים עם צוות מהנדסי תוכנה שמרגישים בנוח לתחזק את התשתית שלהם.
- Thumbor הוא ה-CDN הפופולרי ביותר של תמונות בניהול עצמי. זהו קוד פתוח והשימוש בו בחינם, אבל יש בו פחות תכונות מרוב ה-CDN המסחריים, והתיעוד שלו מוגבל במידה מסוימת. אתרים שמשתמשים ב-Tabs כוללים את ויקיפדיה, ריבוע ו99עיצובים. ראו כיצד להתקין את CDN של תמונה ממוזערת להוראות כיצד להגדיר אותו.
- דמיוני
- Imagor
CDNs של תמונות של צד שלישי
CDNs של תמונות של צד שלישי מספקים CDNs לתמונות כשירות. בדיוק כמו שספקי שירותי ענן מספקים תמורת תשלום שרתים ותשתיות אחרות, רשתות CDN של תמונות מציעות אופטימיזציה של תמונות ומסירה שלהן בתשלום. מכיוון שפלטפורמות תמונה של צד שלישי שומרות על הטכנולוגיה הבסיסית שלהן, בדרך כלל אפשר להתחיל להשתמש בהן במהירות, אם כי תהליך ההעברה המלא לאתר גדול עשוי להימשך זמן רב יותר. רשתות CDN של תמונות של צד שלישי מתומחרות בדרך כלל לפי רמות שימוש, ורוב רשתות ה-CDN של התמונות מספקות רמה ללא תשלום או תקופת ניסיון בחינם כדי לאפשר לכם לנסות את המוצר שלהם.
בחירת CDN לתמונה
יש הרבה אפשרויות טובות ל-CDN של תמונות. לחלק יש יותר תכונות מאחרות, אבל כל אחת מהן יכולה לעזור לכם לחסוך בייטים בתמונות וכך לטעון את הדפים מהר יותר. מלבד קבוצות התכונות, יש עוד גורמים שחשוב לקחת בחשבון בבחירת CDN של תמונה: העלות, התמיכה, התיעוד וקלות ההגדרה או ההעברה.
ההשפעות על Largest Contentful Paint (LCP)
תמונות הן חלק חיוני מחוויית המשתמש באתרים רבים, ולכן הן מהוות גורם חשוב במאפיין המהירות שבה נטען רכיב התוכן הכי גדול (LCP) באתר. הנה כמה דברים שכדאי לזכור אם אתם מחליטים להשתמש ב-CDN של תמונה:
- התמונות שמוצגות מ-CDN יכולות להגיע משרת חוצה-מקורות, וזה יכול להאריך את זמן הגדרת החיבור של האתר. כשהדבר אפשרי, כדאי לנסות להשתמש ב-CDN של תמונה שמועבר לשרת proxy דרך המקור הראשי, כדי שלא תוסיפו מקורות נוספים לדפדפן כדי להתחבר אליהם. יש לכך אותה השפעה כמו תמונות באירוח עצמי במקור הראשי.
- כדאי להשתמש בערך המאפיין
fetchpriorityשל"high"ברכיב התמונה מסוג LCP כדי שהדפדפן יוכל להתחיל לטעון את התמונה בהקדם האפשרי. - אם התמונה לא מופיעה מיד ב-HTML הראשוני, כדאי להשתמש ברמז
rel=preloadלתמונה התואמת ל-LCP כדי שהדפדפן יוכל לטעון אותה מראש. - אם אי אפשר להשתמש בשרת proxy דרך המקור, והדפדפן לא יידע איזו תמונה לטעון עד לשלב מאוחר יותר בטעינת הדף, עליכם להגדיר בהקדם האפשרי חיבור ל-CDN של התמונה ממקורות שונים כדי לקצר את שלב טעינת המשאב עבור תמונות פוטנציאליות של מודעות LCP.