Google Fonts הוא שירות די אמין וניתן לומר כי ביצועי הרשת שלו מאד טובים – הוא מסתמך כמובן על ה CDN הגלובלי של גוגל.
עם זאת, הפעולה הפשוטה של ייזום בקשת HTTP לאותם פונטים יכולה לגרום ל Round Trip Times – RTT מיותרים לפני שהבקשה בפועל מנותבת לשרת וזאת מכיוון שעל הדפדפן לבצע מספר פעולות לפני שהבקשה מגיעה לשרת:
לא נרחיב במאמר זה על פעולות אלו, אך אותן פעולות (אליהן נתייחס כ DNS, TCP, TLS), משמעותן בין אחד לשלושה RTT הגורמים לעיכוב (latency) לפני שהבקשה עצמה מנותבת לשרת.
דפדפנים מודרנים, מנסים בכל כוחם לחזות אילו חיבורים נדרשים לפני שהבקשה לשרת מתבצעת בפועל. הדפדפן מנסה לפתוח את החיבורים הדרושים לפני שהבקשה לשרת מתבצעת על ידי ייזום preconnect לדומיינים מסויימים ובכך לבטל RTT יקרים של אותן בקשות מחלקו הקריטי העליון של העמוד (Critical Path).
למרות זאת, וככל שדפדפנים חכמים בימינו, הם לא יכולים לחזות בוודאות את כל הדומיינים להן preconnect יעזור בכל אתר ואתר.
החדשות הטובות הן שאנו יכולים לעזור לדפדפן במקרים אלו ובעצם לומר לו אילו דומיינים (נכון יותר לומר אילו sockets) אנו רוצים לפתוח לפני הבקשות עצמן בעזרתpreconnect hint הלא הוא rel="preconnect".
ניתן מבט על סיטואציה יומיומית בה נרצה להשתמש ב preconnect והיא הטעינה של Google Fonts וזאת על מנת לשפר את זמן הטעינה של אתר הוורדפרס שלכם.
פעולה ״אגרסיבית״ יותר מ preconnect היא preload וכנראה שזו עדיפה על preconnect לטובת פונטים. השתמשו ב preload יחד עם הגדרה נכונה של font-display ואתם מסודרים מבחינה זו.
אם אתם טוענים את Google Fonts לוקאלית מהשרת שלכם, השתמשו ב preload ולא ב preconnect – אין צורך בחיבור מוקדם לשרת צד שלישי.
מה הבעיה בטעינה סטנדרטית של google fonts?
ישנה בעיה אחת מבחינת הביצועים של טעינת הפונטים והיא שהם מתחילים להטען בשלב מאוחר יותר. הגרף הבא מראה את הבעיה בצורה מאד ברורה:
שימו לב כי בגרף זה, הדפדפן מושך את ה html ומגלה כי הוא צריך נכס css כלשהוא שנמצא בדומיין fonts.googleapis.com. כאשר מסיים להוריד css זה בונה את ה CSSOM ומבין כי לעמוד זה דרושים מספר פונטים אז יוזם בקשות לכל אחד מהן מהדומיין fonts.gstatic.com.
קודם לכן, כמובן שהוא חייב לבצע את התהליך שהראינו קודם והוא DNS, TCP & TLS ולכן, רק ברגע שסיים הבקשות יתקבלו ב multiplexing על גבי חיבור ה HTTP/2.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;700;800&display=swap" rel="stylesheet">שימו לב לשני preconnect hints – אחד עבור דומיין ה CSS API (fonts.googleapis.com) ואחד עבור דומיין קובצי הפונטים (fonts.gstatic.com). התכונה crossorigin נחוצה רק על השני מכיוון שקובצי פונטים הם משאבי CORS.
נוסיף preconnect לבלוג זה והנה התוצאה:
בגרף זה לעומת זאת, אנו מוסיפים preconnect hint למשוואה שאומר לדפדפן כי בכוונתו של אתר זה למשוך נכסים מסויימים מהדומיין fonts.static.com. כתוצאה מכך, הדפדפן יתחיל בפתיחת החיבור במקביל עם הקריאה לנכס ה css ויסיים זאת מוקדם יותר. ברגע שיגיע לקריאה לפונטים לא יהיו עכבות והוא יטען את הפונטים מיידית!
במקרה זה אנו חוסכים RTT מיותרים מחלקו העליון והקריטי של העמוד ומרוויחים כמה מאיות השנייה. שימו לב שהדפדפן גם מבצע את הבקשה מוקדם יותר לעומת המצב הראשון.
עבור אתרי וורדפרס, הנה הדרך להוסיף את שני ה preconnect hints כשטוענים Google Fonts. העדיפות מוגדרת ל 0 ב add_action כדי שההינטים יופיעו מוקדם ככל האפשר ב <head>.
<?php
function savvy_preconnect() { ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<?php
}
add_action('wp_head', 'savvy_preconnect', 0);Google Fonts משתמשים ב @font-face, ומכיוון שהספציפיקציות של אלו דורשות כי הקריאות יבוצעו ״בצורה אנונימית״ (CORS), יש להוסיף את התכונה crossorigin ל preconnect hint של
fonts.gstatic.com.
מה לגבי תמיכת דפדפנים?
preconnect נתמך בכל הדפדפנים המובילים כולל Chrome, Firefox, Safari ו-Edge. נכון לציין שלדפדפנים ישנה היכולת להחליט כיצד להתייחס לפעולה זו (לכן היא נקראת preconnect hint) – הדפדפן יכול להחליט לבצע רק חלק מפעולות ה DNS, TCP, TLS לבחירתו.
זהו גם ה fallback הטבעי: דפדפנים שלא תומכים באפשרות זו פשוט מתעלמים ממנה ללא כל תופעות לוואי שליליות. תוכלו לבדוק את נתוני תמיכת הדפדפנים העדכניים ב Can I Use.
שאלות נפוצות
שאלות נפוצות בנושא preconnect ו-Google Fonts:
preconnect אומר לדפדפן ליצור חיבור (DNS lookup, TCP handshake, TLS negotiation) לשרת לפני שנדרשת בקשה בפועל. עבור Google Fonts, החיבור ל-fonts.gstatic.com מוכן עד שהדפדפן מגלה שהוא צריך קובצי פונטים, וחוסך 100-300 מילישניות.fonts.googleapis.com מגיש את ה-CSS ו-fonts.gstatic.com מגיש את קובצי הפונטים עצמם. הוסיפו rel="preconnect" לשניהם, עם התכונה crossorigin רק על fonts.gstatic.com (מכיוון שקובצי פונטים הם משאבי CORS).preconnect מבצע את כל הגדרת החיבור: DNS resolution, TCP handshake ו-TLS negotiation. dns-prefetch מבצע רק DNS resolution. השתמשו ב-preconnect עבור מקורות צד שלישי קריטיים שאתם יודעים שתצטרכו, וב-dns-prefetch כחלופה קלה יותר עבור דומיינים פחות קריטיים.preconnect כדי לזרז את החיבור לשרתים שלהם. אם אתם מארחים את Google Fonts על השרת שלכם, השתמשו ב-preload במקום - אין מקור צד שלישי לבצע אליו preconnect, ו-preload יוזם ישירות את הורדת הפונט.@font-face דורשת שבקשות פונטים יבוצעו ״בצורה אנונימית״ (CORS). בלי התכונה crossorigin על ה-preconnect hint, הדפדפן פותח חיבור non-CORS שלא ניתן לשימוש חוזר עבור בקשות פונטים - ובכך מבזבז את ה-preconnect.השתמשו ב preconnect בחוכמה
preconnect הוא כלי חשוב לארגז הכלים שלכם, ולא רק לטעינת פונטים של גוגל. כפי שהדוגמא מעלה מראה, שימוש ב preconnect חוסך זמן roundtrips יקר מחלקו העליון והקריטי של האתר או האפליקציה שלכם, במקרים מסויימים חוסך אף קרוב לשנייה.
עם זאת, כל preconnect פותח socket שעולה כ-3 KB (תעודת TLS) בתוספת עומס CPU. דפדפנים סוגרים חיבורים שלא נעשה בהם שימוש לאחר כ-10 שניות. מומלץ להגביל את מספר ה preconnect hints ל-4-6 מקורות לכל היותר.
בדקו את ההשפעה באמצעות WebPageTest או Chrome DevTools. preconnect לדומיין שלא נעשה בו שימוש עושה יותר נזק מתועלת.
ניתן להשתמש ב preconnect עבור כל מקור צד שלישי – CDN, שרתי אנליטיקס, API endpoints – אם אתם יודעים שחיבור עומד להתבצע, תנו hint מוקדם.
אגב, אם אתם מעוניינים לוותר על כל התהליך בפוסט זה, באפשרותכם לטעון את הפונטים של גוגל לוקאלית מהשרת שלכם (או מה- CDN). תנו מבט במאמר טעינה לוקאלית של פונטים מגוגל אם מעניין אתכם הנושא.
מאחר ואני צולל לעולם זה לאחרונה, תתכוננו גם למאמרים בנושא dns-prefetch, preload & prerender בין היתר בזמן הקרוב 🙂 תרגישו חופשי לשתף מחשבות (ולשתף את המאמר!) על הדרך…
אנחנו מחפשים לעשות שיפור ואפטימיזציה לאתר. אנחנו באחסון של יופרס ומאוד מרוצים. מחפשים לשפר בעיקר את הטעינה במובייל.
מוסיפים את זה לקובץ function?
כן..
ניסיתי להוסיף את הקוד ל functions.php של HELLO THEME של אלמנטור אבל זה לא עבד (האתר הפסיק לעלות ונאלצתי למחוק את הקוד כדי שיחזור לפעול). מה יכל לגרום לזה?
היי צבי, שים לב שאינך מוסיף את תגית ה PHP הפותחת..