מקטינים את המהירות מהירות טעינת אתר חלק ראשון – CSS

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

גם אני מקבל מיילים רבים עם בקשות לבדיקת מהירויות והורדת עומס מהשרת.

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

תודה, משה

כמובן שמהירות תלויה בהרבה מאוד פרמטרים שחלקם לא תלויים בנו באופן ישיר, כמו לדוגמא:

• אחסון
• ממשק מערכת
• תוכן רב באתר
• מהירות אינטרנט של גולש קצה.

ועוד.

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

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

לפעמים ניתן לראות אתר תדמיתי עם CSS של חנות וירטואלית עם קוד מיותר ולא שמיש.

כמה דרכים לשיפור אתר לשיפור זמן טעינה.

1. שימוש נכון באלמנטים של HTML ו CSS:

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

להלן דוגמא של מה שלא צריך לעשות:

<div id="footer1">
<ul>
	<li><a href="/">כל הזכויות שמורות</a></li>
	<li><a href="/">תקנון</a></li>
	<li><a href="/">מפת אתר</a></li>
</ul>
</div>

137 תוים בשפת HTML

.footer1 {
padding:20px;
border-top:solid 1px #cccccc;
border-bottom:solid 1px #cccccc
}
.footer1 ul {
list-style-type:none;
padding:0;
margin:0
}
.footer1 ul li {
margin-right:3px;
display:inline
}

198 תןי CSS

סה"כ 335 תוים.

קוד חלופי

<div class="footer2">

<a href="/">כל הזכויות שמורות</a>
<a href="/">תקנון</a>
<a href="/">מפת אתר</a>

</div>

סה"כ 107 תוים

.footer2 {
padding:20px;
border:solid 1px #ccc;
border-width:1px 0;
}
.footer2 p {
padding:0;margin:0
}
.footer2 a {
margin:0 3px 0 0
}

137 תוי CSS

סה"כ 244 תוים

מה שונה בין שתי דוגמאות:

1. שימוש ב אלמנטים li, במקרה הזה הוא מיותר וחוסך לנו 9 תוין בכל שורה. החלפה של אלמנט ul ל p. כמו כן ב CSS לא נידרש לעשות תצוגה בשורה אחד display:inline. 15 תוים מיותרים.
2. שינוי כתיבת ערכים למסגרות בחלק העליון והתחתון.
3. הקטנת צבע של מסגרת מ 6 תווים #cccccc לשלושה #ccc. התוצאה היא זהה, לכן אין צורך להשתמש בתווים נוספים.
4. שינוי מבני של padding ו margin לתצוגה טובה יותר בתג a.

ניתן לראות שהפרש רק בטיבה לכאורה הקטנה הזאת של קרדיטים באתר בזבזנו 91 תוים (כל תו כזה זה 1 byte). בחישוב גס, בכל אתר, אפילו באתר שלי יש לפחות 200-300 אלף תווים מיותרים. במונחים של זמן מדובר ב 2-3 הגדלת זמן טעינה.

2. להיפתר מרווחים מיותרים וטאבים שקיימים בתוך הקוד CSS.

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

.footer {
padding : 20px;
border : solid 1px #ccc;
border-width : 1px 0;
}

ספרתי 86 תווים ו3 טאבים.

.footer{padding:20px;border:solid 1px #ccc;border-width:1px 0;}

ספרטי 63 תווים ללא טאבים ורווחים.

3. עוד תו אחד מיותר בשורה:

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

המקור בדוגמא הקודמת ללא סגירה אחרונה.

.footer{padding:20px;border:solid 1px #ccc;border-width:1px 0}

לכאורה נראה חיסכון של תו אחד, אבל בפועל יש מעל 100-200 ערכים בקובץ CSS.

4. ללמוד את ה CSS.

הפטרון הטוב ביותר הוא לדעת מה אתה עושה ולא להעתיק את מה שעשו אחרים.
דוגמא שפגשתי ב CSS של אחד האתרים.

#header {width:auto; margin: 0 auto;}
#footer {margin: 0 0px 0 0px; padding:0 0 0px 0;}
#sidebar {
background-image: url(images/image.png);
background-position: center top;
background-color:transparent;
background-repeat: no-repeat;
}

בפועל margin:0; ו padding:0; זהים לשורה ראשונה.

ואת השורות 4-9 ניתן להחליף בערך זה

background:transparent url(images/image.png) no-repeat center top;

או

background:transparent url(images/image.png) no-repeat 50% 0;

5. תמיד להשתמש ב CSS חיצוני ולא חלק מ HTML.

ניתן לראות שחלק מהאתרים מדביקים את הCSS לתוך החלק העליון של הדף. אל תעשו את זה. עדיף להוציא לקובץ style.css ובהדר לשים קישור

כך CSS ניתען במקביל לHTML וחוסך לכם זמן טעינה.

סיכום:

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

כמובן שישנם עוד דרכים ואל זה אני אכתוב בהמשך.