שיפור מהירות האתר: 4 טריקים ליישום מיידי

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

מאת: עמית אדלר

מחקרים מעידים כי 40% מהצרכנים ינטשו את האתר אם הוא נטען במשך יותר מ-3 שניות.

זמן טעינה של כ- 7 שניות מעלה את הסיכוי לנטישה ב-113%, כך לפי אתר בדיקת המהירות של גוגל.

כל שנייה אחת של עיכוב בטעינה עלולה לעלות בהפסד של 7% מההמרות או ההכנסות באתר.

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

איך בודקים מהירות טעינה של אתר?

פשוט מאוד, בוחרים אחד מהכלים החינמיים הזמינים באינטרנט:

Google Test My Site
GT Metrix
Pingdom
Speedom – כלי ישראלי שפותח על ידי חברת Upress

תשכחו מכל הציונים שהכלים האלה מחלקים, ובדקו רק את זמן הטעינה עצמו. זמן טעינה סביר הוא עד 3 שניות בדרך כלל (ויש האומרים גם עד 5 שניות, כל עוד מדובר ב- Full Load Time).

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

טריק 1 – שמירת מטמון בדפדפן (Browser Caching / Expire Headers)

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

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

לשם כך יש לגשת לקובץ HTACCESS היושב בשרת (אם מדובר באתר וורדפרס עם תוסף Yoast, יש לכם גישה אוטומטית לקובץ בלי להתאמץ). בקובץ עצמו נוסיף את הקוד הבא, שמפעיל את מטמון הדפדפן:

## Start browser caching ##

ExpiresActive On
ExpiresByType image/jpg “access 1 month”
ExpiresByType image/jpeg “access 1 month”
ExpiresByType image/gif “access 1 month”
ExpiresByType image/png “access 1 month”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”

## End browser caching ##

שימו לב לזמני התפוגה בקוד (חודש, שנה וכן הלאה) ושנו אותם בהתאם לצרכים שלכם. לדוגמה – אם אתם מעדכנים תוכן טקסטואלי כל שבוע, שנו את זמן התפוגה של text/html לפורמט 1 week וכן הלאה. אם בכל זאת יש לכם תוסף קאש באתר, ודאו שהחלק של Browser Caching אכן מופעל.

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

טריק 2 – דחיסת קוד (Minification)

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

אם אינכם מפתחים או אנשי קוד, ככל הנראה תצטרכו להשתמש בתוסף שעושה את העבודה (כגון W3 Total Cache). לחילופין אפשר לעשות זאת ידנית באמצעות אתרים המסייעים בכיווץ הקוד: cssminifier.com או javascript-minifer.com לדוגמה. פשוט מדביקים את הקוד המקורי, מקליקים על "בצע" ומקבלים קוד נקי שאותו יש להדביק ידנית באתר.

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

טריק 3 – כיווץ GZIP

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

האם באתר שלך מופעלת אופציית GZIP?
כאן ניתן לבדוק: checkgzipcompression.com

במידה ש-GZIP לא מופעל או שאין אפשרות להפעיל אותו, ניתן להוסיף אותו ידנית לקובץ HTACCESS עם הקוד הבא:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

טריק 4 – כיווץ והקטנה של תמונות

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

יש אינספור כלים חינמיים לכיווץ והקטנת תמונות, ודי אם נמנה רק כמה בודדים מהם: תוסף ShortPixel לאתרי וורדפרס, שמכווץ את כל התמונות באתר; Tiny JPG; Compressor.io ורבים אחרים. כלי נוסף בשם Fast Stone Photo Resizer מאפשר לכווץ את כל התמונות בו זמנית, ולאחר מכן להעלות את כולן חזרה לשרת (דורש הורדה של תיקיית התמונות למחשב).

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

לאחר שכיווצנו והקטנו את התמונות הבעייתיות, נוודא שמעתה והלאה כל תמונה שתעלה לאתר תהיה במשקל נמוך (לא יותר מ-70 KB) וכן בממדים הנכונים. לא מומלץ שתמונה קטנה תתפרש על פני חצי עמוד או להפך.

רגע לפני סיום

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

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

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

בהצלחה!