טעינה מוקדמת של פונטים, תמונות ועוד

אחד הדברים שגוגל יתריעו בבדיקה של Lighthouse הוא לבצע טעינה מוקדמת לנכסים שמשתמשים איתם בהמשך מה שנקרא Preload key. הדבר נגרם כשבן שלישי בשרשרת אמור להטען ועד שהוא לא יטען, טעינת הדף לא תושלם. דוגמה לזה היא פונט שמוגדר כ font-face ב css, עד שהקובץ לא ירד בשלמות והדפדפן יפרסר אותו, הוא לא ירד.

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

preload מחייב את הדפדפן להתייחס לבקשה בשונה מ prefetch או preconnect. זה טוב לנו כשאנחנו משתמשים בכוונה אבל צריך להיזהר לא להשתמש כשלא צריך כדי לחסוך משאבים. עוד דבר מצוין הוא ש preload יוריד לנו את המשאב אבל במקרה של js או css הוא לא יריץ את הקוד מה שיכול לעזור במקרים של critical css\js.

איך עושים preload? אנחנו צריכים להכניס שורה ל head שאומרת לדפדפן לבצע preload לנכס המבוקש. זה יכול להיות פונט, קובץ css ודברים נוספים.

כדי שהקוד יהיה בהדר, אנחנו נכניס אותו בתבנית הבת לקובץ header.php תחת תגית head. מי שנוח לו יותר יכול להשתמש בתוסף של הכנסת קוד לתבנית.

לדוגמה כדי לעשות טעינה מוקדמת לפונט (דוגמה מאוד נפוצה), נכתוב את הקוד הבא:

<link rel="preload" href="/wp-content/your_path_to_fonts/font.woff2" as="font" type="font/woff2" crossorigin>

התאימו את הנתיב לזה שלכם כמובן. חשוב לא לשכוח לכתוב as לפי ה type (תמונה, פונט, style, js) וכן crossorigin כשצריך (למשל לפונטים). תוכלו לכתוב את זה בכמה צורות:

crossorigin
crossorigin="anonymous"
crossorigin=""

אופציה עדיפה היא להכניס את ה preload ל http header כך הדפדפן לא יצטרך לפרסר את הבקשה ל preload. נעשה את זה כך בקובץ function.php:

 add_action( 'send_headers', 'add_http_header_link' );
function add_http_header_link() {
    header("Link: </css/styles.css>; rel=preload; as=font; type=font/woff2; crossorigin");
}

שרתים שמשתמשים ב htaccess אפשר להכניס את זה גם שם תחת <IfModule mod_headers.c>

זה פותר את הבעיה אבל הפתרון לא מלא. מה קורה אם יש משאב כלשהו שאנחנו רוצים לעשות לו preload אבל רק בדף מסוים? נניח בדף הבית יש שימוש באיזה קובץ ואנחנו רוצים לטעון מוקדם אבל בכל שאר האתר אין שימוש בו? במקרה כזה נראה אזהרה בכרום שטענו משהו עם preload אבל בסוף לא השתמשנו בו (זה קורה 3 שניות לאחר הטעינה).

כדי לפתור את זה, נכניס את הקוד הבא לקובץ functions.php

add_action( 'wp_head', 'add_font_preload', 5);
function add_font_preload()
{
    if (is_front_page()){
         echo '<link rel="preload" href="/wp-content/your_path_to_fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">';
    }
}