האתר שלכם נטען לאט? ככה תפחיתו את זמן הטעינה שלו!
סבלנות זו תכונה נהדרת אך למרבה הצער היא לא תמיד חלה באופן מקוון. בעולם המקוון, אפילו עיכוב של שניה בטעינת הדף יכול להפחית בצורה דרסטית את שביעות הרצון של הלקוחות ולהקטין את אחוזי ההמרות. מהירות האתר שלכם יכולה אפילו להשפיע על דירוג האתר בתוצאות החיפוש האורגניות.
שאלתם את עצמכם פעם מה משפיע על מהירות האתר?
אם שאלתם את עצמכם מה הגורם המשפיע ביותר על מהירות האתר שלכם, התשובה היא משקל. לדפדפנים לוקח זמן להוריד את הקוד שמרכיב את העמוד שלכם, ולו רק בגלל שיש המון נתונים כמו תמונות, סקריפטים, גיליונות סגנון ועוד. ככל שמשתמשי האינטרנט מצפים לעיצובים מעניינים יותר של אתרים, גודל הקבצים באתר רק ימשיך לגדול ולגדול. כל תכונה חדשה מחייבת סקריפט חדש, או גיליון סגנונות חדש שרק יכבידו על האתר יותר ויותר.
איך תוודאו, אם כן, שהאתר שלכם מהיר?
יש כמה וכמה דרכים לעשות זאת, ומספר כלים שיעזרו לכם להגיע לתובנות חשובות בנושא, כמו למשל Website Grader HubSpot או PageSpeed Insights, כלים פופולריים שיעזרו לכם לנתח את המהירות של דף האינטרנט שלכם, יציגו בפניכם את נקודות התורפה הקיימות ולאחר מכן אף יעלו הצעות לשיפור ביצועי המהירות של הדף.
לתשומת ליבכם – קחו בחשבון שהתוצאות יכולות להיראות מעט מאיימות לפעמים, ובכל זאת, חשוב לזכור שמרבית התיקונים יחסית קטנים ופשוטים. יתכן שתבחרו שלא לתקן את כל ההמלצות שקיבלתם, אך עליכם לתקן מספיק בכדי לשפר את חוויית השימוש באתר לטובת המבקרים שלו.
זה הזמן להגביר את הקצב וללמוד איך להאיץ את האתר שלכם!
בעוד שכמה מערכות ניהול תוכן מודרניות מיישמות אפשרויות לשיפור מהירות, מערכות נפוצות יותר כמו וורדפרס או ג'ומלה, דורשות מעט עבודות כפיים כדי להגיע לתוצאה הרצויה. כעת בואו נבחן מספר פתרונות חיוניים שכל מנהל אתרים צריך להכיר:
אז איך להפחית את זמן טעינת העמודים?
גודל התמונות שלכם
התמונות הן אחד הגורמים המשפיעים ביותר על רוחב הפס שלכם. הדרך הראשונה והעיקרית למטב את התמונות שלכם היא לשנות את הגודל שלהן, כך שהן לא ישפיעו על זמן טעינת העמודים באותה המידה. מנהלי אתרים רבים מעלים תמונות ואז משקללים אותן באמצעות CSS. מה שהם לא מבינים הוא שהדפדפן עדיין טוען אותן בגודל המלא.
עליכם לבצע אופטימיזציה לתמונות שלכם על ידי הקטנת קנה המידה של התמונה. כאשר אתם עושים זאת יכול מאוד להיות שאיכות התמונה תפגע והתמונות יהיו מטושטשות יותר. אם זה בדרך כלל קורה לכם, באפשרותכם לעבוד עם אפשרות נוספת והיא דחיסה.
דחיסת תמונות תפחית באופן דרסטי את גודל התמונה אך מבלי לאבד את האיכות. ישנם המון כלים מקוונים שיכולים לעזור לכם בזאת ללא עלות, או לחלופין אפליקציות ייעודיות לכך. כאשר הדחיסה איכותית ניתן להקטין את התמונה באחוז ניכר אך מבלי לפגוע באיכותה המקורית.
שמרו את הדפדפן שלכם לאחסון נתונים
מדוע לגרום למבקרים להוריד את אותם הדברים בכל פעם שהם טוענים דף? הפעלת זיכרון מטמון תאפשר לכם לאחסן נתונים מסוימים באופן זמני במחשב של המבקרים, כך שהם לא יצטרכו לחכות הרבה לטעינת העמוד בכל פעם שהם מבקרים בדף שלכם. זמן האחסון של הנתונים תלוי בתצורת הדפדפן שלהם ובהגדרות המטמון בצד השרת.
צמצמו את זמן הטעינה של ה-CSS
ה- CSS נטען עוד לפני שהמבקרים רואים את האתר שלכם. ככל שנדרש יותר זמן להוריד את ה- CSS כך הם יחכו זמן רב יותר. המשמעות של CSS אופטימלי היא שהקבצים שלכם ירדו מהר יותר ויעניקו למבקרים גישה מהירה יותר לדפים שלכם. התחילו בלבדוק את אתם משתמשים בכל הקבצים שלכם. אם לא היפטרו מהקודים המיותרים. כל מידע מבוזבז שלא נמצא בשימוש יכול להאט את האתר משמעותית ולהבריח את המבקרים. כמו כן באפשרותכם לצמצם את הקבצים באמצעות דחיסה או באמצעות שינוי הגדרות ברירת המחדל וייעול הקבצים.
העברת סקריפטים אל מתחת לקפל – Below the fold
הביטוי Fold הוא פשוט הדרך להגיד "כל מה שנטען במסך שלכם לפני שאתם צריכים לגלול למטה" ומתייחס לכל מה שמעל ה"קפל" לאחר שגללתם הגעתם לאיזור שנקרא מתחת ל"קפל".
למה קפל באתר אינטרנט? זהו מושג שמגיע מעולם העיתונות המודפסת וכאשר היו מחלקים אותם, העיתונים היו מקופלים כך שהמידע הכי חשוב נמצא בחלק שמעל הקפל ואותו רואים ראשון.
קבצי JavaScript יכולים להיטען אחרי שאר הדף שלכם, אולם אם תשימו את כולם לפני התוכן שלכם, כפי שעושות חברות רבות, הם יטענו לפני התוכן שלכם. משמעות הדבר היא שהמבקרים באתר שלכם יצטרכו לחכות עד לטעינת קבצי ה-JavaScript החיצוניים שלכם לפני שהם רואים את האתר שלכם. הפתרון הפשוט ביותר הוא פשוט למקם את קבצי ה-JavaScript בתחתית העמוד, מתחת לקפל. בדרך זו האתר יוכל להיטען מהר יותר מהסקריפטים שלכם.
שיטה נוספת אשר מאפשרת שליטה רבה יותר היא להשתמש בתכונות דחייה או אסינכרון, שיטות אלו מאוד יעילות בלטעון את הסקריפטים בזמן ששאר הדף נטען, אך שימו לב שאתם מבינים כיצד להשתמש בהן, כי הן יכולות להיות הרסניות עבור סקריפטים מסוימים.
לדוגמה, נניח שבאחד הדפים באתר יש סרטון וידאו מעל הקפל, טקסט מתחת וכמה תמונות בתחתית. אם אתם מפעילים תגיות אסינכרוניות בעמוד זה, הטקסט יטען תחילה, אחר כך התמונות והסרטון יהיה האחרון להיטען. הקובץ הגדול ביותר, קובץ הווידאו, הוא גם זה שהמשתמשים אמורים ליצור אתו אינטראקציה וכשהוא נטען אחרון, לא תהיה לו את אותה ההשפעה על המבקרים. תכונת הדחיה לעומת זאת טוענת את הסקריפטים לאחר טעינת התוכן, מה שגם מריץ את הסקריפטים לפי הסדר. באופן כללי כאשר אתם משתמשים בסקריפטים מומלץ לבדוק את התכונה של כל סקריפט כדי לוודא שאותה תכונה לא תפגע באתר שלכם.
לסיכום, סקריפטים חיוניים יזדקקו לתכונה של אסינכרון כדי שיטענו מהר מבלי לעכב את טעינת שאר התוכן באתר, לעומת סקריפטים לא חיוניים שצריכים להיטען בסוף כדי להבטיח שהמבקרים יראו את הדף כמה שיותר מהר.
הוספת עמודים אסינכרוניים
מרבית דפי האינטרנט מורידים תכנים ממקורות שונים. לדוגמה, גוף הדף נטען על ידי הדפדפן. עם זאת, ראש הדף מועבר על ידי מקורות חיצוניים כמו למשל קובץ העיצוב (CSS) או סקריפט המשמש לטעינת טקסט ותמונות.
הדפדפן שטוען את הדף מתחילתו ועד סופו, מהראש לגוף, לוקח את הזמן, ואם חלק אחד של הדף זקוק לפונקציה מסוימת כדי להיטען, סביר להניח שפונקציה זו כבר טוענת חלק אחר של הדף, מה שאומר שהטעינה הראשונית חייבת להסתיים לפני שעוברים למשימה הבאה. בינתיים המבקר שהגיע לאתר שלכם מחכה שדף האינטרנט יופיע מולו, ולמרות שמתחת לפני השטח קורה המון, לאותו מבקר נראה כאילו שהכל פשוט עומד מלכת.
טעינה אסינכרונית מזהה את הסקריפטים שניתן לטעון בו זמנית ומבטלת תכונות סינכרוניות. כאשר עמודים מסוימים נטענים בו זמנית, תוך ביטול שרשרת פקודות הפונקציה שצוינה לעיל, ניתן לטעון צדדים אחרים של הדף, כמו למשל ראש העמוד. ניתן ליישם דפים אסינכרוניים רק עד ידי הוספת מספר שורות קוד ב- CSS של הדף שלכם.
צמצום הפניות מחדש
כמה הפניות מחדש יש באתר שלכם? אם ביצעתם לאחרונה העברה לאתר או שרכשתם תת דומיינים, סביר להניח שיש לכם בקשת HTTP או שתיים, וההפניות מחדש גם הן גורמות לדפים לקחת את הזמן בעת הטעינה.
הפניות מחדש כמו "שגיאה: 404 לא נמצאו" צצות כאשר משתמשים מקלידים כתובת אינטרנט שגויה או מועברים לקישור שבור באתר. כאשר דף מופנה מחדש, עמוד אחר ממלא את מקומו או לחלופין עמוד ריק עם הודעת השגיאה יופיע על המסך. המבקרים יצטרכו לשבת מול מסך HTTP ולהמתין בזמן שהם מנותבים מחדש, מה שיגדיל את משך הזמן שיידרש לטעינת הדף.
נניח שדף ה- "אודות" הועבר לתת-דומיין אחר. כאשר המבקרים מקלידים את כתובת האתר יש לקחת אותם מיד לדף זה. במקום זאת הכתובת שהוקלדה מובילה אותם לדף HTTP, ואז עליהם לעבור דרך דף נוסף רק כדי להגיע ליעדם המיועד. אז במקום לארח הפניות מרובות, פשוט הסירו אותן, פעולה זו תפעל לטובתכם.
לסיכום, זכרו, נדרש עיכוב של שנייה בלבד כדי לאבד יתרון. ככל שמשתמשים מקוונים דורשים חוויה מקוונת עשירה יותר, כך העמודים באתר ימשיכו לגדול. תמיד יהיו JavaScript טובים יותר, טריקים נוספים של CSS ופונקציות שיכבידו על אתרי האינטרנט שלנו. יחד עם זאת עם מעט תשומת לב תוכלו להתעדכן, לעמוד בקצב ולהפוך את חוויית השימוש לטובה יותר.
