אם יש לכם favicon באתר ואתם צורכים אותו בקריאה נפרדת אולי שמתם לב להופעה המעצבנת שלו במפל המים לקראת סוף הטעינה שבדרך כלל יש מרווח עד הקריאה אליו מה שמגדיל את ה fully loaded time.
מכיוון ש favicon הוא בדרך כלל תמונה קטנטנה ללא הרבה פרטים, ניתן בקלות להמירה ל svg (אם היא לא כבר כזאת) או להמירה ל webp ולדחוס אותה כמה שאפשר (גם ככה היא לא כזאת בולטת). אם נעשה את זה ונגיע לקובץ תמונה מספיק קטן – נגיד לא יותר מ 1000 ק"ב, נוכל להטמיע אותה בהדר וכך להציגה מבלי לבצע קריאה נוספת בסוף הטעינה.
אני בכוונה כותב להקטינה כמה שיותר, כי השיטה להטמיע אותה בהדר היא להמירה לקידוד base64 ודבר זה בדרך כלל יגדיל עוד קצת את התמונה ואם זה ייצא גדול מדי לא בטוח שההטמעה שווה את זה. היכולת לקודד (decode) תמונה לייצוג base64 מאפשר לנו לקחת תמונה ולייצג אותה על ידי סטרינג ארוך (מחרוזת טקסט ארוכה) כך שהדפדפן יוכל לפענח (decode) אותה ולהציגה. כך למשל גם ניתן לשמור תמונה ב DB.
בשלב ראשון כאמור תגיעו למצב שיש לכם תמונה קטנה מאוד – במקרה של הדוגמה שלי היא בפורמט webp. לאחר מכן גשו לאחר מהאתרים שמקודדים ל base64 – לדוגמה האתר הזה והמירו את התמונה. את המחרוזת שהאתר יצר לכם העתיקו ושמרו בצד. כעת ניגש לקוד, הכניסו אותו לקובץ functions.php או בדרך אחרת שעדיפה עליכם.
function add_favicon() {
echo '<link rel="shortcut icon" type="image/webp" href="data:image/webp;base64,paste here the base64 decoded string"/>';
}
add_action('wp_head', 'add_favicon');