לפני כשבועיים כתבתי פוסט בנושא הקטנת זמן טעינה של אתרי אינטרנט, שבו הצגתי 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 דרכי פעולה מאוד פשוטים שיכולים להוריד את המהירות משמעותית לפחות בשנייה אחת (שהיא לפעמים השנייה הקריטית).
אם אתה משתמש בוורדפרס, יש תוספים שעושים את הקיבוץ באופן אוטומטי.
התוסף W3 Total Cache, למשל, מאפשר לקבץ את ה-HTML בנפרד, את ה-CSS בנפרד ואת ה-JS בנפרד. הוא אפילו מאחד באופן אוטומטי מספר קבצי CSS ו/או קבצי JS לקובץ אחד.
יחד עם זאת, כתיבה נכונה של CSS היא דבר חשוב, וכל אחד צריך להכיר את הנקודות שציינת.
אתה צודק לגבי התוספים, רק יש לי היסטוריה לא מוצלח בעבודה עם W3 Total Cache. כמה פעמים השתמשתי בו והוא לא עבד בצורה טובה. לא זוכר מה הסיבה הייתה, אבל היו בעיות עם CSS. יכול להיות שתבנית לא היה בנויה בצורה טובה.
בכל מקרה, אני עקרונית לא אוהב תוספים :).
נ.ב. התגובה שלך הגיע לספאם ע"י Akismet, רק עכשיו שמתי לב לזה. אני מכווה שזה רק אצלי כך.
התייחסת למיקום של קבצי CSS בנוגע לסדר טענה וזמני טעינה. תוכל להתייחס באופן יותר מפורט לסדר הטעינה של כל הרכיבים בדף אינטרנט – מה נטען לפני מה – לדוגמה JS או CSS, תגיות סקריפט בתוך הדף לעומת תגיות עם קישור לסקריפט חיצוני, מה שנמצא ה head ומה שנמצא ב body וכו'. בקצור סקירה כללית של התהליך שמתרחש מהרגע שהמשתמש מבקש את הדף עד שהוא מקבל אותו בשלמות. כדי לחקור טוב יותר שיפורי ביצועים צריך להכיר היטב את התהליך כולו…
מקווה שהבנת מה אני מחפשת.
תודה מראש!
התחום של מהירות הוא מאוד מורכב. אני מכין סדרת פוסטים על שיפור מהירות, אבל זה יהיה לארח שאסיים את הפוסטים בנושא של ריספונסיביות.