מקטינים את המהירות מהירות טעינת אתר חלק ראשון – 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 וחוסך לכם זמן טעינה.

סיכום:

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

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

מחפשים פתרונות תכנות מקצועיים?

אם יש לך צורך בעזרה של מפתח מקצועי ומנוסה, אשמח לשמוע ממך

4 תגובות

  1. היי אלכסנדר.
    יש לי חיבה גדולה לעניין שיפור המהירות באתרים, וחקרתי את הנושא זמן-מה.
    אני חושב שזו טעות גדולה לספור בייטים, וזה מאוד לא אפקטיבי בזמן הטעינה של האתר.
    כשכותבים html ו-css צריך לחשוב קודם על סמנטיקה, וכן על נוחות עדכון בעתיד.
    הדבר שהכי משפיע על מהירות טעינה, מהנסיון שלי, הוא מיקום השרת ביחס לגולש.
    בהנחה שאנחנו לא משנים את השרת ועדיין רוצים שיפור בביצועים ברמת הפרונט, יש כלי נהדר שקוראים לו yslow – פלאגין לפיירפוקס ולכרום, שמבצע אבחון מה אפשר לשפר באתר. זהו מקור טוב ללימוד.
    בתור התחלה אפשר לשנות את ה-htaccess – ולקבוע שם תאריכי תפוגה לקבצים והפעלת ג'יזיפ, כתבתי על זה פוסט: http://www.bakufsa.com/12-things-about-htaccess/
    יש את עניין המיניפיקציה שהזכרת בפוסט הבא. עדיף לעשות זאת באופן אוטומטי – יש פלאגין wp-minify לשם כך.
    במאמר מוסגר, אתרי וורדפרס יכולים להיות איטיים גם בגלל הזמן שלוקח להריץ את ה-php ולשם כך יש פלאגין wp super cache

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

      1. לא טענתי שגודל הקובץ חסר השפעה. אבל האפקט קטן מאוד, במיוחד כשעושים מיניפיקציה וג'יזיפ.
        בנוסף, כשקובעים מועד תפוגה לקבצים, מפחיתים משמעותית את זמן הטעינה.
        מסכים איתך באופן כללי לגבי פלאגינים, אך במקרה זה, הפלאגינים האלו עושים עבודה מצויינת.
        גודל הקובץ, אגב, אינו המשפיע היחידי – מספר הקבצים שמורידים משמעותו יותר בקשות http – שמאוד מורגשות כשהאתר מאוכסן במקום מרוחק, או כשגולשים במכשיר נייד.

        1. אני מסכים עם כל מה שאתה אומר, הבעיה היא במקום שבו יושב "מתכנת ווב" שלא יודע לכתוב נכון את הקוד, יוצר אלפי פריטים בתוך פריטים ואז מנפח גם את CSS וגם HTML. במיוחד זה בולט כשאר משתמשים במערכות קוד פתוח כמו וורדפרס או מקבילות לה, מערכול הללו גם כך "כבדות".
          אחסון זאת בעיה מאוד נפוצה, רוב האנשים רודפים אחרי מחירים זולים ולא בודקים מי הם ה"שכנים" בשרת כמו איפה השרת נמצא ולאחר מכן בוכים שאתר עובד לעט.
          לגבי קיבוצים, ג'יזיפ וכל מה שקשור לזה, בד"כ השרתים שהם זולים בכלל לא תומכים באפשרויות הללו, ואז יוצר מצב שיש עומס נוסף. אתר מחפש קיבוץ והוא לא קיים.
          בכל מקרה אני עוד אמשיך לפתח את זה לכיוון של אופטימיזציה ברמת השרת וקוד.
          אקבל כל הערה או המלצה בבכה 🙂

סגור לתגובות