טעינה לוקאלית של גוגל פונטס

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

תוכן עניינים

מה הבעיה עם גוגל פונטס

למה בכלל לשקול טעינה לוקאלית של גוגל פונטס?

כדי להשתמש בגוגל פונטס עלינו לבקש את הפונט מגוגל. כל בקשה של פונט היא בקשת HTTP חיצונית (כלומר DNS שונה) שהיינו יכולים לחסוך בשביל שיפור מהירות. מדובר בבקשות ל- font.gstatic.com ול- fonts.googleapis.com.

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

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

בנוסף, כרום כבר לא יסתמך על קאש שהגיע מאתר אחר, כלומר אם יש לכם פונט מסוים בגלל שבקרתם באתר 1, ביקור באתר 2 שמשתמש באותו פונט לא יוכל לנצל את הקאשינג ונצטרך להוריד את הפונט שוב, מה שעוד יותר מבטל את ה cache hit ratio לגוגל פונטס.

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

  • צמצום משפחות וגדלי הפונטים שבשימוש באתר
  • שימוש בפרמטרים subset ו text (תודה לדרור לימר)
  • שימוש ב-unicode-range
  • שימוש ב preconnect
  • שימוש ב swap – ואז אולי נתמודד עם FOUT במקום FOIT אז לשיקולכם.

FOUT – Flash of Unstyled Text
תופעה הנגרמת כשהעיצוב האמיתי של הפונט (נכון גם לאלמנטים אחרים) לא קיים עדיין ובינתיים הדפדפן מציג עיצוב דיפולטי. לגולש זה יתבטא בהופעה של הטקסט בפונט לא רצוי ואחרי שבריר שניה עיצוב הפונט ישתנה.

FOIT – Flash of Invisible Text
התופעה הנגדית ל FOUT, אם לא נגדיר לדפדפן להציג ברירת מחדל לפונט לא קיים, הטקסט לא יראה ואז הוא יפויע בעיצוב הנגון כשיהיה זמין. לגולש זה יתבטא בשבריר שניה של קטע ריק ופתאום יופיע שם הטקסט.

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

טעינה לוקאלית של גוגל פונטס

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

שלב ראשון

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

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

יש כמה דרכים נוחות כדי לבדוק באלו פונטים אתם משתמשים באתר. אני ארשום 3 מהם.

  1. היכנסו לעמוד באתר שלכם בגוגל כרום ולחצו על F12 כדי להגיע ל Developr Tools. שם עברו למסך Networking וסננו לפי fonts.
  2. הורידו תוסף לכרום בשם WhatFont, היכנסו לאחד העמודים באתר שלכם ולחצו על התוסף. כעת עברו על כל אחד מהפונטים ויהיה כתוב לכם מאיזה סוג הוא.
  3. בגוגל כרום לחצו על F12, הנכסו להגדרות ובתפריט experimental אפשרו CSS overview. כעת צאו מהמסך וחזרו ל developer tools ויופיע לכם טאב שנקרא CSS overview איפה שהטאב של network וכל שאר הטאבים. שם תוכלו לראות באלו פונטים משתמשים.
google fonts chrome developer tools

שלב שני

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

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

שימו לב שיש אפשרות לחפש רק פונטים שהם variable fonts אבל אין כאלה בעברית כרגע. כבר יש כזה בעברית לפונט Heebo.

google fonts

שלב שלישי

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

כעת יופיע לכם קוד CSS. בחרו באפשרות Modern Browsers אם אין לכם ענין לתמוך בדפדפנים ישנים, כמו"כ ניתן לבחור את התיקיה שבה הפונטים ישמרו אצלכם כדי שה CSS יג'ונרט בהתאם.

העתיקו את הקוד והדביקו אותו בקובץ Style.css של תבנית הבת שלכם.

חשוב! עדכנו את הנתיבים ב CSS להיכן שתשמרו את הפונטים אצלכם באתר.

google fonts helper
google fonts helper css

שלב רביעי

הורידו את הפונטים ואכסנו אותם אצלכם בעזרת FTP. זכרו שהם אמורים להיות בתיקיה אליה אתם מפנים מקובץ ה CSS בשלב הקודם. אני ממליץ לשמור בתיקית fonts תחת תיקיית התבנית שלכם או תחת תיקיית assets של התבנית שלכם.

בדיקת תקינות

רוקנו מטמון (זכרו לרוקן בכל המקומות – מקומי, CDN, שרת). עברו לדף בו אתם משתמשים בפונט של גוגל וודאו באמצעות Chrome developer tools שהפונט לא נטען מהשרת של גוגל.

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

add_filter('elementor/frontend/print_google_fonts', '__return_false');

Variable Fonts

פתרון נוסף שאפשר ליישם הוא שימוש ב variable fonts.

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

אבל אם אתם לא אתר שמשתמש בטיפוגרפיה מטורפת ושני פונטים באתר מספיקים לכם אז אין לזה כל כך יתרון.

אם בכל זאת תרצו ללמוד איך להשתמש בזה תוכלו להיכנס לאחד הקישורים הבאים: 1, 2, 3, 4.

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

סיכום

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

שיפור מהירות וביצועים של אתרים באינטרנט

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

תוכן עניינים

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

הרשמה
Notify of
0 תגובות
Inline Feedbacks
הצג את כל התגובות

גם הפוסטים הבאים יעניינו אותך

0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx