שיפור מהירות אתר: המדריך המלא לשנת 2024

אדם ממוצע עובד 9 שעות ביום, נחשף לכ-50,000 פרסומות בשבוע וגולש, תחזיקו חזק – לא פחות מ-200 שעות מידי חודש באתרים שונים. פלא שאנחנו מגלים אפס סבלנות כלפי אתרים איטיים וכבדים? מיד תקראו בעצמכם כיצד אתר יפה ומושקע ככל שיהיה צולל לטמיון בעקבות בעיות מהירות וכיצד מיישמים שיפור מהירות אתר גם אצלכם.

הסיבות שהופכות את שיפור מהירות האתר שלכם לחובה

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

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

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

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

איך עובדת טעינת אתר?

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

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

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

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

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

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

איך בודקים מהירות אתר?

שיפור מהירות אתרים היא בפועל עבודה טכנית במהותה ולכן דורשת מומחיות ספציפית בשלב התיקון. את בדיקת מהירות האתר עצמה כל אחד יכול לבצע, על ידי Google PageSpeed Insights הנחשב לכלי המרכזי ביותר בעבודתו של כל מקדם אתרים.

Google PageSpeed Insights – כלי בדיקת המהירות של גוגל, מציע אוטומציה פשוטה לבירור מהירות האתר בדסקטופ ובמובייל, לצד דוחות והמלצות לשיפור הביצועים בכל עמוד שנבדק. מלבדו קיימים כלים נוספים לבדיקה כמו Pingdom, GTmetrix או WebPagetest, גם בהם תמצאו המלצות להפחתת זמן הטעינה של האתר ושיפור מהירותו.

איך מהירות טעינת אתר טובה תשפיע על חווית משתמש?

כפי שכבר ציינו קודם, למהירות האתר יש השפעה מכרעת על חוויית המשתמש, משום שטעינה איטית מביאה לנטישה גבוהה יותר של גולשים. למעשה, דף שנטען במשך 3-6 שניות מביא לשיעורי נטישה של כ-32%. מעבר לשש השניות, מדובר בשיעורי נטישה בערכים מוחלטים של 100%!

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

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

מה המרכיבים שגוגל בודק ומה משפיע על כל אחד מהם?

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

LCP  (Largest Contentful Paint)

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

• רכיבי תמונה (בתגית <img> או <img> בתוך <svg>
• רכיבי סרטון (<video> אם מתבצע שימוש בתמונה הראשית של הסרטון)
• רכיבי תמונת רקע
• רכיבים ברמת הבלוק המכילים הטמעת תוכן גרפי
• רכיבים נוספים בהתאם לבחינה נוספת מצד האלגוריתם בעתיד

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

CLS (Cumulative Layout Shift)

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

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

איך משפרים מהירות אתר: 5 פעולות הלכה למעשה

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

אופטימיזציה לתמונות

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

1. שינוי פורמט התמונה – הידעתם? קבצי JPG שוקלים פחות מקבצי PNG ולכן כדאי להעדיף אותם בשמירת התמונה שלכם. אם כבר יש באתר תמונות PNG פשוט העבירו אותן פורמט. לעבודה מול כמה תמונות בבת אחת השתמשו באתר הזה. שימו לב שבתמונות עם רקע שקוף (בעיקר לוגואים), הרקע הופך בתהליך ללבן. לכן עדיף לשמור אותן בפורמט SVG.

2. כיווץ תמונה במשקל גדול – מידות התמונה בפיקסלים משפיעות המון על המשקל שלה, מה שמצריך הקטנה במידות כך שהתמונה תגיע עד 100kb. בשלב הראשון צריך להשתמש בכלי לכיווץ כמו tinyjpg ואפילו דרך הצייר. פשוט חפשו בגוגל compress image או minimize image ותמצאו את הכלי שמתאים לכם. זכרו שהמשקל נובע גם מאיכות התמונה ולכן אם אתם משתמשים בפוטושופ, עליכם לכווץ תמונות ביחס זהה לרוחב והגובה כדי להימנע מפגיעה באיכות. באתרי וורדפרס אפשר גם להקטין את התמונות בעת העלאה דרך עורך המדיה.

אם כבר יש תמונות שהעליתם לאתר ואתם רוצים לדעת האם צריך לכווץ אותן, ניתן להשתמש בתוכנת screaming frog – פשוט מכניסים את ה-URL, עוברים ל-image tab ובפילטר בוחרים: over 100kb. כעת יוצגו לכם כל התמונות במשקל גדול מזה שצריך לטפל בהן.

3. המרה אוטומטית לwebp – פורמט התמונות WebP פותח בשנת 2010 על ידי גוגל ומספק אלטרנטיבה יעילה מאוד לפורמטים המקובלים JPG ו-PNG. הפורמט מציע איכות תמונה טובה ללא פגיעה, יחד עם גודל קובץ קטן בהרבה משני אלה (30% ו-25% פחות בהתאמה). ל- WebP יש פלאגינים מוצלחים כמו smush ו-imagify

4. תוספי אופטימיזציה לוורדפרס – וורדפס מתהדרים בתוספים לכיווץ משקל התמונות, כאשר חלקם חינמיים עד מכסה חודשית מסוימת וחלקם בתשלום. התוסף imagifyהוא דוגמה ל-freemium, כלומר חינמי בהתאם למכסה. להתקנה יש לפתוח יוזר באתר שלהם, לקבל API key, להזין אותו באתר ולשכוח שפעם הייתם צריכים להעלות תמונות עם התערבות בגודל והמשקל.

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

5. שימוש בתוספי lazy load – וורדפס מכילים תוספים שמסייעים להתגבר על טעינה עצלנית של אתרים המביאה לנטישה ולאובדן של פניות, על ידי שיפור מהירות אתרים באופן הבא: במקום שהדפדפן של הגולש ייאלץ להמתין עד שכל הנכסים של האתר ייטענו במלואם, הם ייטענו בכל פעם רק ברגע שהגולש מגיע בדיוק לאותה הנקודה באתר שבה הם מופיעים. כך הקריאות לשרת פוחתות והאתר מהיר יותר. התוספים המרכזיים כאן הם Lazy Load ו-BJ Lazy Load והם יתאימו לכל אתר שזקוק למגוון רכיבים ויזואליים מושכים לגולשים שלו.

שימוש ב CDN

CDN הם ראשי תיבות של Content Delivery Network – טכנולוגיה שמאפשרת לקבל את המידע מהאתר דרך כתובות של שרתים קרובים יותר לגולש פיזית ובאמצעותה ניתן להפחית משמעותית את העומס על השרת. CDN אידיאלי לאתרים שפועלים גם מעבר לים ושיש בהם המון מדיה, או שקצב הגדילה שלהם מאוד מהיר. הוא גם מתאים למקרים שבהם מהירות האתר לא השתפרה בדרכים אחרות, אך השימוש בו יקר. בסופו של דבר, מדובר בקלאוד שמציג בזמן אמת העתק מקבצי האתר דרך שרתים שונים.

לטכנולוגיה זו יש מספר ספקים עיקריים: SimpleCDN, KeyCDN, Akamai, CloudFlare ו- Fastly. ההמלצה החמה שלנו היא על Cloudflare החינמי שמציע פתרון CDN איכותי מאוד לצד פתרון אבטחה מוצלח (כולל תעודת SSL והגנה מפני מתקפות DDos). מעבר לתוכנית החינמית ניתן לרכוש את תוכנית הפרו, תוכנית עסקית או תוכנית אנטרפרייז לתאגידים ואתרים גדולים. השירות עובד גם עם תוכן סטטי ודינמי באמצעות קאשינג של כל המשאבים הקבועים לרבות JavaScript, CSS ותמונות.

שימוש בתוסף Cache

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

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

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

תוספי הקאש לוורדפרס מסייעים ותומכים במהירות האתר במגוון רחב של פונקציות. ezCache, Comet Cache או W3 Total Cache מציעים שמירת HTML, כיווץ קבצי JS ו-CSS וגם שליטה בהגדרות הקאש לעמוד הבודד, כל אלה מוצעים בחלק מהתוספים בחינם או בגרסת פרו עם אפשרויות דחיסה טובות יותר וגם שמירה אוטומטית ב-WebP). התוסף wp-rocket נחשב לאחד המקצועיים ביותר בשוק, הכולל אינדוקס מהיר יותר במנועי החיפוש לדפים הקיימים, ניקוי מסד הנתונים המשמש לרנדור, פתרון lazy load, תמיכה במולטי סייט וגם CDN בסיסי (שלא מחליף בשום מקרה את העבודה עם Cloudflare). מדובר בתוסף ידידותי מאוד לעבודה ועשיר מאוד בתכונות, אך הוא לא מגיע בגרסה חינמית.

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

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

כיום אחת האפשרויות הפופולריות בשוק היא להשתמש בשירותי האחסון של cloudways המציעה שירות לקוחות 24/7, במחירים נוחים ועם מגוון אפליקציות ללא הגבלה (מוורדפרס ועד דרופל ועוד המון). קלאודווייז מציעים גיבויים אוטומטיים ללא תוספת תשלום להבדיל משירותים אחרים, אבטחה מתקדמת ותעודות אבטחה חינמיות, מבחר מיקומי שרתים וספקים, העברת אתרים בקלות וגם CDN בסיסי בזול.

עיכוב בטעינת מרכיבים שמאטים את העמוד

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

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

שיפור ביצועים למתקדמים

מעבר לכל האפשרויות לשיפור מהירות אתר שהעלינו כאן, קיימים מרכיבים נוספים שמשפיעים על זמני הטעינה ומהירות הגלישה באתר. מרכיבים אלה מתקדמים בתכונותיהם ודורשים התערבות מצד מתכנת שמתמחה בנושא. בין האפשרויות שניתן לבצע מול המתכנת יהיו צמצום של CSS, דחייה או ביטול של קודים הנטענים במהלך העלאת האתר, קודים שנובעים מתבנית העמוד ויישום של המלצות שהועלו בבדיקת ה- page speed insight.

לסיכום

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

גילי ברוך-קלייסט

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