אופטימיזציה של Font Awesome ואלמנטור

הבעיה עם Font Awesome

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

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

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

פתרונות לבעיה

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

הפתרון הטוב יותר הוא פשוט. נוכל להמשיך להשתמש ב FA רק בדרך יעילה יותר. אם אנחנו משתמשים רק ב 2 אייקונים באתר או ב-10 או אפילו ב- 40 בואו נכין קובץ שמכיל רק אותם! קובץ כזה נקרא סט אייקונים מותאם אישית וכך נטען קובץ אחד בלבד אבל קטן יותר, רק של האייקונים שבאמת בשימוש.

יצירת סט אייקונים מותאם אישית

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

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

1. היכנסו לאתר icomoon.io – אם ברצונכם לעבוד על פרויקט מתמשך, יצרו משתמש והתחברו לאתר.
2. במסך הראשי אמורה להופיע לכם אפשרות בחירה של אייקונים ובדיפולט תהיה שם הרשימה של IcoMoon – Free. בחרו משם אם תרצו את האייקונים הרלונטיים.
3. בתחתית המסך לחצו על Add Icons From Library – שם תראו מספר ספריות אייקונים – חלקן בתשלום – בחרו בספריות שאתם רוצים להוסיף לאפשרויות הבחירה.
4. בחרו מהספריות את כל האייקונים שאתם צריכים לאתר.
5. אם יש אייקון מסוים שאתם רוצים ולא קיים שם, תוכלו להוסיף אותו בקלות.
   1. היכנסו לאתר כלשהו שנותן להוריד אייקונים מסג svg, בחרו את האייקונים הרצויים והעלו אותם ל-icomoon באמצעות כפתור Import Icons.
   2. אם אין לכם אפשרות למצוא את האייקון שלכם כ-svg לא נורא, הורידו את האייקון כ-png והמירו אותו ל-svg בעזרת אתר כמו זה או זה.
6. אחרי שסיימתם לבחור את כל האייקונים שאתם צריכים לחצו על Generate Fonts ואז על גלגל השיניים. תנו שם לסט האייקונים ותנו שם ייחודי כ-Class Prefix – שני אלה חשובים להמשך כשתרצו להשתמש בהם. תוכלו להוריד את התמיכה ב- IE8 אם אין לכם צורך. לסיום לחצו כפתור Download.

איך משתמשים באייקונים באתר שלנו

1. בתוך קובץ הזיפ שהורדתם יש קובץ style.css ותיקיית fonts שבתוכה יש קובץ עם סיומת woff (ועוד שני קבצים, ttf, svg שתוכלו לעלות או לא להעלות בהתאם לשימוש שלכם). את קובץ style העלו לתיקיה x, יכולה להיות התיקיה הראשית של האתר שלכם לדוגמה.
   את קובץ woff העלו לתיקית fonts תחת התיקיה הראשית. במקרה ששמתם את קובץ ה-style ב- wp-content אז קובץ ה-woff יהיה בנתיב הבא: wp-content\fonts\icon-set-name.woff.
   הנתיבים לא מוכרחים להיות כך זוהי דוגמה. באותה מידה תוכלו ליצור תיקיית custom-icons ושם תכניסו את תיקיית ה-fonts וקובץ הstyle. וכן כל סידור אחר. מה שחשוב הוא שהנתיבים בקובץ style יהיו נכונים.
2. בקובץ functions.php של תבנית הבת שלנו הוסיפו את הקוד שמונע טעינת FA של אלמנטור (ואם יש צורף גם טעינה של הפונטים שלנו). כדי לדעת איך לעשות את זה היכנסו לפוסט שכתבתי על שיפור ביצועים באלמנטור או כנסו לגיסט הזה.
3. השלב האחרון הוא האפשרות להשתמש בסט שלנו מתוך העורך של אלמנטור. אתם לא צריכים לעשות את זה אבל מי שנוח לו ככה, יכול. תחת תפריט אלמנטור בחרו ב"אייקונים מותאמים", העלו את קובץ הזיפ שהורדתם בסעיף 6 ולחצו "עדכון". אם תרצו קצת לחסוך בגודל התיקיה שתעלו, תוכלו למחוק את קבצי הדמו. תיקיית הזיפ חייבת להכיל רק את קובץ selection.json ואת הפונטים עצמם והסטייל.
4. בשימוש בווידג'ט תומך אייקונים, בחרו על הוספת אייקון ובמסך של בחירת האייקונים כעת אמור להופיע לכם סט האייקונים שלכם. בחרו משם אייקון כלשהו ותיהנו.

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

בעיות ופתרונן

האייקון לא נראה בתצוגה של אלמנטור וגם לא בדף

לפעמים שם האייקון כתוב בצורה כזאת שאלמנטור לא מתמודד איתו כראוי. למשל אם השם מחולק לשתי מילים: name1, name2. כדי שלא תהיה בעיה, לפני שאתם מורידים את הסט שלכם (סעיף 6 ב"יצירת סט אייקונים") מחקו את השם השני.

עוד בעיה שיכולה לקרות היא שקידומת ה CSS לא תואמת (CSS Prefix). לאחר שאתם מעלים את האייקונים וודאו שבעמודת קידומת CSS קיים הערך הנכון (במיוחד וודאו שאין נקודה מיותרת). אם הערך לא נכון, תוכלו להוריד שוב את האייקונים עם ולכתוב את הערך הנכון או – פושט יותר – תוכלו להיכנס לקובץ selection.json ולשנות את הערך בהתאם לprefix הנכון.

איך להשתמש באייקונים בוידג'ט שלא נותן אפשרות בחירת אייקון

באלמנטור לדוגמה יש את ווידג'ט כפתורי שיתוף (Social share buttons) בו אין אפשרות לבחור אייקונים אלא אוטומטית משתמשים באייקוני הברנד. אם תרצו להחילף אותם באייקונים שלכם תצטרכו לכתוב css מותאם בווידג'ט (אפשרי באלמנטור פרו) או במקום אחר. את ה css הנכון תוכלו לקחת מדף ההורדה של האייקונים שם אם תעמדו על אייקון מסוים ותלחצו על Get Code תראו את הקוד הנכון.

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

.fab.fa-facebook:before {
   content: "\e909"; /*change to correct icon class*/
   font-family: "your icons family";
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #1877f2;
}