לפני כשבועיים כתבתי פוסט בנושא הקטנת זמן טעינה של אתרי אינטרנט, שבו הצגתי 5 דרכים להקטנת גודל קבצי CSS.
היום אני רוצה להמשיך ולכתוב עוד 5 אפשרויות נוספות.
1. איפוס CSS, שימוש בקובץ reset.css.
עם ריבוי הדפדפנים התחילה בעיה במיקום של תגי HTML. כל דפדפן קובע ערכים שונים עבור תגי HTML. כדי לבנות את קובץ CSS תואם את כל הדפדפנים חייבים לאפס את כל תגי HTML בעזרת CSS.
בשנת 2004 Andrew Krespanis המליץ להשתמש באיפוס גלובלי שבו הוא למעשה מאפס את margin ו padding לכל הפריטים ב HTML.
* { padding:0; margin:0; }
מאז עברו כמה שנים טובות, קובץ איפוס השתכלל והתפתח.
כיום לא נהוג להשתמש ב*, בגלל התאמה לקויה עם Internet Explorer, כמו כן הוא מקשה את העבודה של דפדפן. לדפדפן ברור יותר תג עצמו מאשר ערך מעורפל "כל התגים".
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
אני ממליץ להשתמש בקובץ נפרד ולא לשים את הקוד כחלק מ style.css מטעמי נוחות, כלומר לעשות פעם אחד ואז להשתמש בכל אתר.
2. לא להשתמש בפונקציה @import של css.
מתכנתים רבים משתמשים בפונקציה פנימית של css, שהיא למעשה ייבוא קובץ css נוסף (כמו לדוגמא reset.css). לא מומלץ לעשות את זה, הסיבה לכך היא שבזמן טעינת קובץ style.css דפדפן "רואה" את השורה import, נעצר טוען את הקובץ מיובא. ורק אז ממשיך את הטעינה של קובץ style.css. למעשה יש עיקוב של כמה עשיריות השנייה.
@import "reset.css";
הדרך הנכונה היא לטעון כל קובץ בנפרד.
3. שימוש בפריטים בעלי ערכים זהים.
במרקרים רבים אני משתמש ברשימת פריטים בעלי ערכים כמעט זהים, הדבר היחיד אולי שמשתנה זה צבע, רקע, מסגרת או משהוא אחר. במקרים כאלה עדיף לחשוב טוב על דרך הכתיבה.
לדוגמא אני אקח 3 פריטים עם מבנה זהה עם שינוי צבע מסגרת.
.first {margin:0; padding:0; border:solid 1px red}
.second {margin:0; padding:0; border:solid 1px green}
.third {margin:0; padding:0; border:solid 1px black}
כמו שניתן לראות, הדבר היחידי ששונה הוא צבע רקע (red, green, black). סה"כ 159 תווים.
.first, .second, .third {margin:0; padding:0; border:solid 1px red}
.second {border-color: green}
.third {border-color: black}
הקוד הזה זהה לחלוטין לקוד הקודם, הדבר היחידי שמשתנה הוא כמות התווים. סה"כ 124 תווים.
4. מיקום קישור לקובץ css.
תמיד, תמיד לשים את הפנייה לקובץ עיצוב בראש התג head, אני תמיד שם אותו מתחת לtitle.
<head> <title></title> <link href="reset.css" rel="stylesheet" media="all" /> <link href="style.css" rel="stylesheet" media="all" /> .... </head>
המטרה היא לתת לרוץ במקביל לטעינה של קבצי css ואלמנטים אחרים ביחד. קובץ css תמיד קל יותר Javascript-ים למינהם.
*חשוב מאוד לטעון את הקובץ reset.css לפני קובץ style.css (המטרה היא קודם לאפס, לאחר מכן לטעון את העיצוב).
5. קיבוץ css.
לאחר שסיימנו לבנות קובץ CSS הגיע זמן לקבץ אותו. ניתן לקבץ את הערכי css תוך כדי כתיבת הקוד או בסיומו. אתר csscompressor ואתר minifycss יכולים לסייע בזה.
אתרים האלה הופכים את הקוד לפחות יפה ונוח אבל לקל יותר(משקל הקובץ). בבדיקה שנעשתה מקובץ של 30kb קיבלתי קובץ של 20kb (הורדת 33% – שנייה בטעינת אתר).
אני ממליץ לעבוד בשיטה מאוד פשוטה: משאירים עותק קרי במחשב (כדי לא להסתבך בתיקונים או שינויים בעתיד) ואת העותק המקובץ לעלות לאתר. לקבץ תמיד ב Compression High או Highest.
סיכום
בשני פוסטים הצגתי 10 דרכי פעולה מאוד פשוטים שיכולים להוריד את המהירות משמעותית לפחות בשנייה אחת (שהיא לפעמים השנייה הקריטית).
