שיפור מהירות טעינת Google Fonts באמצעות preconnect

כיצד לבטל roundtrips מיותרים בקריאה ל Google Fonts באמצעות preconnect?

Google Fonts הוא שירות די אמין וניתן לומר כי ביצועי הרשת שלו טובים מאד – הוא מסתמך כמובן על ה CDN הגלובלי של גוגל. עם זאת, הפעולה הפשוטה של ייזום בקשת HTTP לאותם פונטים יכולה לגרום ל Round Trip Times – RTT מיותרים לפני שהבקשה בפועל מנותבת לשרת וזאת מכיוון שעל הדפדפן לבצע מספר פעולות לפני שהבקשה מגיעה לשרת:

  • Resolving DNS
  • Performing TCP handshake
  • Negotiating TLS Tunnel – אם מדברים על בקשת HTTPS

לא נרחיב במאמר זה על פעולות אלו, אך אותן פעולות (אליהן נתייחס כ DNS, TCP, TLS), משמעותן בין אחד לשלושה RTT הגורמים לעיכוב (latency) לפני שהבקשה עצמה מנותבת לשרת.

דפדפנים מודרנים, מנסים בכל כוחם לחזות אילו חיבורים נדרשים לפני שהבקשה לשרת מתבצעת בפועל. הדפדפן מנסה לפתוח את החיבורים הדרושים לפני שהבקשה לשרת מתבצעת על ידי ייזום preconnect לדומיינים מסויימים, ובכך לבטל RTT יקרים של אותן בקשות מחלקו הקריטי של העמוד (critical path). למרות זאת, וככל שדפדפנים חכמים בימינו, הם לא יכולים לחזות בוודאות את כל הדומיינים להן preconnect יעזור בכל אתר ואתר.

החדשות הטובות הן שאנו יכולים לעזור לדפדפן במקרים אלו ובעצם לומר לו אילו דומיינים (נכון יותר לומר אילו sockets) אנו רוצים לפתוח לפני הבקשות עצמן בעזרתpreconnect hint הלא הוא rel="preconnect". ניתן מבט על סיטואציה יומיומית בה נרצה להשתמש ב preconnect והיא הטעינה של Google Fonts…

מה הבעיה בטעינה סטנדרטית של google fonts?

ישנה בעיה אחת מבחינת הביצועים של טעינת הפונטים והיא שהם מתחילים להטען בשלב מאוחר יותר. הגרף הבא מראה את הבעיה בצורה מאד ברורה:

google-fonts-no-preconnect
שימו לב כי בגרף זה, הדפדפן מושך את ה html ומגלה כי הוא צריך נכס css כלשהוא שנמצא בדומיין fonts.gogleapis.com. כאשר מסיים להוריד css זה בונה את ה CSSOM ומבין כי לעמוד זה דרושים מספר פונטים אז יוזם בקשות לכל אחד מהן מהדומיין fonts.gstatic.com. קודם לכן, כמובן שהוא חייב לבצע את התהליך שהראינו קודם והוא DNS, TCP & TLS ולכן, רק ברגע שסיים הבקשות יתקבלו ב multiplexing על גבי חיבור ה HTTP/2.

<link href='https://fonts.gstatic.com' rel='preconnect' crossorigin>
<link href="https://fonts.googleapis.com/css?family=Assistant:300,400,700,800" rel="stylesheet">

נוסיף את הקוד מעלה לבלוג זה והנה התוצאה:

google-fonts-preconnect

בגרף זה לעומת זאת, אנו מוסיפים preconnect hint למשוואה שאומר לדפדפן כי בכוונתו של אתר זה למשוך נכסים מסויימים מהדומיין fonts.static.com. כתוצאה מכך, הדפדפן יתחיל בפתיחת החיבור במקביל עם הקריאה לנכס ה css ויסיים זאת מוקדם יותר. ברגע שיגיע לקריאה לפונטים לא יהיו עכבות והוא יטען את הפונטים מיידית!

במקרה זה אנו חוסכים RTT מיותרים מחלקו העליון והקריטי של העמוד ומרוויחים כמה מאיות השנייה. שימו לב שהדפדפן גם מבצע את הבקשה מוקדם יותר לעומת המצב הראשון.

על הדרך, הצטרפו לרשימת התפוצה !

מכיוון וכולנו אוהבים וורדפרס, הנה הדרך להוסיף preconnect כשטוענים google fonts בוורדפרס, שימו לב לשורה 7 בה קבענו כי העדיפות להוק זה תהיה הכי גבוהה על ידי הוספה של המספר 0 ב add_action.

<?php
// BEGIN HERE //
function savvy_preconnect() { ?>
    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<?php
}
add_action('wp_head', 'savvy_preconnect', 0);

google fonts משתמשים ב fonts-face, ומכיוון והספסיפיקציות של אלו דורשות כי הקריאות יבוצעו ״בצורה אנונימית״, יש להוסיף את התכונה crossorigin ל preconnect hint שביצענו.

מה לגבי תמיכת דפדפנים?

preconnect נתמך בכרום ופיירפורס כבר הרבה זמן אך עם זאת איני רואה שימוש רחב באפשרות זו, במיוחד באתרים בארץ. נכון לציין אגב שלדפדפנים ישנה היכולות להחליט כיצד להתייחס לפעולה זו (לכן היא היא נקראית preconnect hint); באפשרות הדפדפן להחליט כי הוא יבצע רק חלק מפעולות ה DNS, TCP, TLS לבחירתו וזהו גם ה fallback בדפדפנים שאינם תומכים באפשרות זו.

אז לגבי תמיכת דפדפנים, נכון לרגע כתיבת המאמר אלו הגירסאות של הדפדפנים התומכים:

preconnect-browser-support

מיקרוספט כרגיל נמצאת מאחורה בכל מה שקשור לנושאים אלו, אבל אין זה מפתיע…

השתמשו ב preconnect בחוכמה

האפשרות של preconnect היא כלי חשוב לארגז הכלים שלכם ולא רק לטעינת פונטים של גוגל. כפי שהדוגמא מעלה מראה, שימוש ב preconnect חוסך זמן roundtrips יקר מחלקו העליון והקריטי של האתר או האפליקציה שלכם, במקרים מסויימים חוסך אף קרוב לשנייה. למרות הנאמר, השתמשו ב preconnect בחוכמה וודאו כי אינכם פותחים חיבור כלשהו שאין בו שימוש. כנהוג בנסיונות אופטימיזציה אלו, נכון יהיה לבדוק השפעת פעולות אלו על ידי הכלים הנכונים לבדיקות ולאופטימזציה.

מאחר ואני צולל לעולם זה לאחרונה, תתכוננו גם למאמרים בנושא dns-prefetch, preload & prerender בין היתר בזמן הקרוב… 🙂 תרגישו חופשי לשתף מחשבות (ולשתף את המאמר!) על הדרך…

 

רועי יוסף

מפתח ומעצב וורדפרס, מאמין ביצירת הזדמנויות לעסקים קטנים, סטארטאפים נועזים ואנשים עצמאים לשנות את העולם. אוהב טיפוגרפיה, צבעים וכל מה שבינהם ומכוון לספק אתרי וורדפרס עם ביצועים גבוהים, תמיכה בכל הדפדפנים, בעלי קוד ולידי, סמנטי ונקי. צרו איתי קשר.

תגובות פייסבוק

{ 3 תגובות… הוסף אחת }

השאירו תגובה

שיתופים
קראו גם את:
תבנית בת וורדפרס
מהן תבניות בת בוורדפרס ואיך ליצור אותן ?

תבניות הוורדפרס בימינו מדהימות ובעלות פונקציונליות ואפשרויות התאמה אישית לא מבוטלות, עם זאת, ישנם הרבה...