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

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

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

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

אופטימיזציה לתמונות בוורדפרס – איך עושים את זה נכון?

בחירת פורמט תמונה

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

• JPEG – מתאים בעיקר לתמונות "מצולמות"
• PNG – מתאים בעיקר ללוגואים ואייקונים ולתמונות עם רקע שקוף.
• WebP – פורמט תמונה מודרני שפותח על ידי גוגל, מתאים לרוב השימושים. מציע כיווץ אוטומטי מעולה טוב יותר מקודמיו כמעט מבלי לפגוע באיכות התמונה. נתמך על ידי כמעט כל הדפדפנים.
• AVIF – פורמט מתקדם עם הדחיסה הטובה ביותר – עדיין לא נתמך בצורה מושלמת בדפדפני Safari.

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

אם אתם צריכים לעשות המרה למספר רב של תמונות, שקלו להשתמש בכלי כמו Bulk resize photos

התאמת מימדי התמונה לגודל בו היא מוצגת בפועל

אחת הטעויות הנפוצות היא העלאת תמונות שגדולות משמעותית מהמידה שבה הן מוצגות באתר. לדוגמה תמונה ברוחב של 2000px שמוצגת בתוך בלוק של 400px תשקול הרבה יותר ממה שנחוץ. כדי לבדוק את הגודל בו מוצגת התמונה בפועל אפשר להשתמש בdev tools בדפדפן או לבדוק עם מתכנת האתר.

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

כיווץ תמונה

הדרך היעילה ביותר לכווץ תמונות באתר וורדפרס היא באמצעות שימוש בתוסף לכיווץ תמונות, כמו Smush, Imagify, EWWW ועוד. התוספים האלו עושים עבודה מצוינת ששום כלי ידני לא יכול לעשות בצורה יעילה. כשמעלים תמונה לאתר וורדפרס, המערכת לא שומרת רק את התמונה שהעלנו. היא יוצרת באופן אוטומטי כמה עותקים של התמונה בגדלים שונים (משתנה בהתאם לתבנית) שמוצגים במקומות שונים באתר בתור thumbnails. התוספים האלו מכווצים גם את העותקים האלו וזה קריטי למהירות הטעינה בעמודים שונים באתר.

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

חשוב לציין שיש מגבלות על הגרסאות החינמיות של התוספים וכדי לפתוח את כל הפיצ'רים יש לרכוש את התוסף בעלות של דולרים בודדים לחודש.

Lossless VS Lossy

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

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

Lossy – (איבוד נתונים מזערי): זוהי האפשרות המומלצת לרוב האתרים. זהו כיווץ חכם שמסיר מידע מהתמונה שהעין האנושית הממוצעת כלל לא מסוגלת להבחין בו. התוצאה היא תמונה שנראית מעולה, אך במשקל נמוך משמעותית (לעיתים חיסכון של 70-80% בהשוואה למקור). אל תחששו להשתמש באופציה זו – הרווח במהירות עצום לעומת הפגיעה הבלתי נראית באיכות.

טעינה עצלה  (Lazy Loading)- אל תטענו את מה שלא רואים

טעינה עצלה היא אחד הפיצ'רים הקריטיים ביותר לשיפור מהירות הטעינה הראשונית של העמוד. הרעיון פשוט: אין סיבה שהדפדפן יטען את כל התמונות בעמוד מיד עם הכניסה אליו, כולל תמונות שנמצאות הרחק בתחתית העמוד. בשיטת "טעינה עצלה" הדפדפן טוען תחילה רק את התמונות שנמצאות בחלק העליון שהגולש רואה מיד. שאר התמונות נטענות רק כאשר הגולש מתחיל לגלול מטה ומתקרב אליהן. וורדפרס מציעה יכולת זו באופן מובנה (Native Lazy Loading) החל מגרסה 5.5, אך מומלץ מאוד להשתמש בתוספי אופטימיזציה כמו WP Rocket או תוספי התמונות שהוזכרו קודם שמציעים מנגנון חכם, מהיר ויעיל יותר של טעינה עצלה ממה שוורדפרס מציע דיפולטיבית

CDN

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

איך מודדים הצלחה?

כדי לדעת שהאופטימיזציה שלכם באמת עובדת, חשוב למדוד. לפני שאתם מתחילים בתהליך, הריצו בדיקת מהירות לעמודים המרכזיים באתר באמצעות כלים כמו Google PageSpeed Insights או GTmetrix. שימו לב לציון הכללי, אך חשוב מכך – הביטו בנתון של "משקל העמוד הכולל" (Total Page Size) ובמשקל של סך כל התמונות בעמוד. לאחר ביצוע הפעולות שהוזכרו במאמר, הריצו את הבדיקה שוב. אתם אמורים לראות ירידה דרסטית במשקל העמוד ושיפור במדדי המהירות (כמו LCP).

לסיכום

כדי לעשות סדר בכל הכלים והשיטות, הנה סדר הפעולות יעיל לטיפול  וביצוע מיטוב לתמונות באתרי וורדפרס:

1. לפני העלאת התמונות לאתר: בדקו מה הגודל המקסימלי הנדרש לתמונה באתר והקטינו את התמונה במחשב לגודל הגיוני ומתאים לגודל בו התמונה מוצגת בפועל באתר.
2. הגדרת תוסף: התקינו תוסף כיווץ תמונות והגדירו אותו לבצע כיווץ אגרסיבי (Lossy) וודאו שמופעלת האפשרות ליצירה אוטומטית של גרסאות WEBP/AVIF. ודאו שהתוסף ממשיך בכיווץ התמונות באופן אוטומטי גם עבור תמונות חדשות שאתם מעלים למדיה.
3. ודאו שיש באתר Lazy loading ושהתמונות מוגשות מCDN

יישום השלבים הללו יבטיח שהאתר שלכם יהיה מהיר יותר, חסכוני יותר במשאבי שרת ונעים יותר לגלישה עבור המשתמשים שלכם.