אופטימיזציה לקוד האתר: איך ליצור עמודים עם מינימום זמן טעינה?

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

איך לבצע אופטימיזציה לקוד אתר בעצמכם?

  • צמצמו את מספר הקבצים המוטמעים בדף.
  • השתמשו בטכניקות CSS ואחדו את תמונות הרקע שלכם, מומלץ לאחד קובץ עם תמונות בעלות רקע דומה ושהגודל של הקובץ לא יעלה על 10k ולא יותר מ 20 תמונות בקובץ.
  • אחדו את אייקוני הממשק שלכם לתמונה אחת במקום לתמונות מרובות וכבדות.
  • הוסיפו לקבצים הסטטיים, אלו שמתעדכנים לעיתים נדירות, expires or a cache – control header, ברגע שתאריך הקובץ לא פג הדפדפן לא יבקש את הקובץ לאחר שטען אותו, ולא יבדוק האם הוא צריך לעדכן. התוצאה לא תאחר להגיע – אותו הדף ירונדר מהר ובקלות.
  • נהלו את ארכיטקטורת HTML בצורה יעילה.

איך מנהלים ארכיטקטורות HTML בצורה יעילה?

  1. שמרו על דף רזה ולא מסורבל.
  2. דאגו שקבצי ה-JS וה- SS ישבו בנפרד ממסמך ה-HTML  כך הם יוכלו לשרת מספר קבצים ויחסרו לכם את זמני הטעינה של כל אחד מה בנפרד.
  3. דרך פשוטה להאצת הדף היא שימוש בספריות JS המאוחסנות על השרתים של גוגל. ספריות כגון Jquery, Mootools וכו’.
    אם קובץ הJS שלכם יכול להתמקם בתחתית הדף, השתמשו ללא שום הגבלה בשירות של גוגל. הסיבה פשוטה, חוץ מכם עוד רבים קישרו לספריות שלהם, דבר שמבטיח לכם טעינה מהירה יותר של הדף עקב הימצאות קובץ הקאש של דפדפן המשתמש.
  4. הקפידו לציין גדלי תמונות. ברגע שגדלי התמונות מוגדרים לו מראש, גוגל לא צריך לחשב אותם והדף פשוט מבצע את פעולת הרינדור הרבה יותר מהר למסך.
  5. מקמו את הקריאות לקבצי ה CSS לפני הקריאות לקבצי ה JS וכך קבצי הCSS יחלו להיטען בצורה מקבילה ללא שום צורך בהמתנה לקבצי הCSS. קיצור תולדות הזמן במעשה ידיכם.
  6. אופטימיזציית JS אינה קשורה בהכרח למהירות עליית הדף, אך עדיין קיימים מצבים בהם הרצת הדף תלויה בכמה שורות JS מיותרות.
קרא עכשיו
קידום אתרים: איך מקדמים אתרים עם סקרימינג פרוג

עבור מקרים כאלה כדאי ללמוד ולהשתפשף בנושא, ובכלל. כל מנת לנתח את העמודים מומלץ להשתמש ב firebug ולהשתמש בו בשני כלים מצויינים: לשונית Net ו- סקריפט Profile. בנוסף מומלץ לנצל את זמנכם הפנוי ולהרחיב את הידע  על ידי קריאה בשני ספרים מעולים: High Performance Web Sites: Essential Knowledge for Front-End Engineers. ו-  Even Faster Web Sites: Performance Best Practices for Web Developers.

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

מתעניינים בדיגיטל? בקרוב מאוד תוכלו להיות בעלים של נכס דיגיטלי מניב משלכם! השאירו פרטים ונציג יחזור אליכם בהקדם:


אולי יעניין אותך
4515 ----- This is a test...