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