מהיר ועדכני – איך לשפר את מהירות האתר וביצועיו?


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

ואם כך,
מהם הצעדים הבסיסיים שכל בעל אתר צריך לעשות כדי לוודא שמהירות האתר שלו תהיה טובה עד מעולה?

שימוש בשרת מהיר

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

שימוש ברשת לשליחת תוכן (CDN)

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

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

בין הרשתות הנפוצות לשליחת תוכן ניתן למצוא את Cloudflare הפופולארית, Cloudwatch וכן Amazon CloudFront.

שימוש ב- Caching

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

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

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

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

הקטנת קבצי CSS, JavaScript ו-HTML

אופטימיזציה של קוד האתר היא דבר מומלץ גם בהקשר של מהירות אתר וגם בהקשר של קידום אתרים. ככל שיש פחות קוד בדף קל יותר לרובוטי הסריקה של המנועים הן לסרוק את הקוד והן להבין ביתר קלות מה התוכן החשוב שהוא מכיל.
הקטנת קבצי CSS, JavaScript ו-HTML יכולה להגביר את מהירות האתר בצורה משמעותית.
כלים מומלצים להקטנת הקבצים המדוברים כוללים את UglifyJS ו- CSSnano.
בעלי אתרי וורדפרס יכולים להשתמש בתוסף WP Rocket או Autoptimize שעושים עוד כמה דברים חוץ מהקטנת קבצים, למשל lazy loading, caching, CDN ועוד.

הסרת render-blocking JavaScript

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

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

צמצום מספר ההפניות

כל פעם שדף באתר מפנה לדף אחר הגולש באתר נאלץ להמתין יותר זמן לטעינת הדף הרצוי לו. כיוון שכך מומלץ לדאוג מראש למינימום הפניות וכן כל כמה שבועות לעבור על ההפניות באתר ולמחוק את אלו שאינן הכרחיות.
למשל, אם יש לכם הפנייה מדף mysite.com/old-page לדף mysite.com/new-page והדף הישן כבר לא מאונדקס בגוגל ואין לו שום קישורים (לא בתוך האתר ולא מחוצה לו) – אפשר להסיר את ההפנייה.

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

אופטימזיציה למדיה

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

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