אופטימיזציה של גופני רשת: טקסט מהיר בלי תזוזות פריסה מיותרות

אופטימיזציה של גופני רשת מצמצמת תווים וסגנונות שנשלחים, משאירה טקסט קריא בזמן ההורדה ומתאימה את הגופן החלופי לגופן הסופי. WOFF2, קבוצות תווים וטעינה מוקדמת ממוקדת מטפלים בהעברה ובגילוי; font-display ומידות הגופן החלופי מטפלים בהצגה. מדדו קריאות ראשונית ויציבות יחד: הורדה מהירה לבדה אינה מונעת תזוזה בהחלפת גופן מאוחרת.

מצאו את העיכוב לפני החלפת הגופן

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

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

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

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

צמצמו גופנים ותווים שנשלחים

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

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

יצירת subset מפיקה קובץ קטן עם תווים נבחרים והטבלאות הדרושות להצגתם. unicode-range מצהיר על נקודות הקוד שגופן מכסה, אך אינו מוחק תווים מהקובץ עצמו. לחיסכון בתעבורה, הקובץ שאליו מפנים חייב להיות קבוצה מצומצמת אמיתית.

הדוגמה הלטינית מניחה שהקובץ קיים וכולל את התווים המוצהרים.

@font-face {
  font-family: "Editorial Sans";
  src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
body {
  font-family: "Editorial Sans", Arial, sans-serif;
}

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

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

בחרו font-display כמדיניות קריאה

font-display הוא מתאר בתוך @font-face. הוא קובע מה קורה כשהגופן אינו זמין; הגדרתו על body אינה מגדירה גופן מסוים. הבחירה מאזנת בין קריאה מיידית, שימוש מאוחר בגופן המיועד והחלפה נראית.

הדפדפן קובע את משכי הזמן המדויקים, ואין כאן שעון זהה בכל סביבה.

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

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

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

טענו מראש רק גופן קריטי באמת

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

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

<link rel="preload"
      href="/fonts/editorial-sans-latin-regular.woff2"
      as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: "Editorial Sans";
    src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
</style>

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

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

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

התאימו את מידות הגופן החלופי

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

size-adjust משנה קנה מידה של קווי מתאר ומידות. המתארים ascent-override, descent-override ו-line-gap-override מתאימים מידות אנכיות. חשבו ערכים לצמד האמיתי; אין אחוז שמתאים לכל גופן ומערכת.

זו דוגמת תחביר עם ערכים להמחשה, ולא התאמה מדודה לגופן אמיתי בשם “Editorial Sans”. החליפו אותם אחרי מדידה.

@font-face {
  font-family: "Editorial Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
.article-body {
  font-family: "Editorial Sans", "Editorial Fallback", sans-serif;
  line-height: 1.6;
}

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

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

השוו גופן משתנה לסגנונות שבאמת נדרשים

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

ההצהרה מספקת משקלים מ-100 עד 900, בהנחה שהקובץ תומך בטווח.

@font-face {
  font-family: "Editorial Variable";
  src: url("/fonts/editorial-variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
h1 { font-family: "Editorial Variable", sans-serif; font-weight: 650; }

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

תכננו קוריאנית, עברית וגופני מערכת

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

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

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

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

אמתו שינוי טיפוגרפי במצבים אמיתיים

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

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

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