אופטימיזציית מהירות עמוד – איך לייצר עמוד סופר מהיר?
מהירות עמודי אינטרנט תמיד הייתה חלק משמעותי וחשוב ב-SEO. במציאות בה יותר חברות ועסקים עושים את המעבר לפעילות אונליין, אופטימיזציה הופכת לחשובה יותר מתמיד. אך אופטימיזציית מהירות עמוד היא נושא מורכב ואשר נוטה להיות מאוד טכני. מהם הדברים הקריטיים ביותר שעליכם להבין לגבי מהירות העמודים באתר שלכם ואיך אתם יכולים להתחיל לשפר את המהירות הזו? כדי לעזור לכם לענות על שאלות חשובות אלו הכנו לכם מדריך מיוחד וייעודי לשיפור מהירות עמודי האתר.
מקווים שהמדריך יהיה מלמד ומעשיר ושתתחילו ליישם את הדברים בהקדם כדי לתרום ליעילות ולקידום האתר שלכם במרחב הדיגיטלי. רוצים לשמוע עוד וללמוד מה אנחנו ב-SEO-Rush יכולים לעשות בשבילכם, גם בהקשר לאופטימיזציית מהירות עמוד וגם בהקשר הכולל של קידום אתרים ושיווק דיגיטלי, פנו אלינו היום!
כיצד עמוד אינטרנט נטען ועולה למשתמש
משתמש ניגש לדפדפן אינטרנט, מקליק על קישור לאתר שלכם וזה מפעיל בקשת DNS. בקשה זה מצביעה על ספק שם הדומיין שלכם ומכאן התהליך ממשיך בהכוונת הדפדפן לשרת בו מאוחסנים קבצי האתר שלכם, כאן העניינים הופכים למעניינים. עכשיו ה-DOM שלכם מתחיל לטעון את כל קבצי ה-HTML, ה-CSS וה-JavaScript של האתר. אך נדיר מאוד שפעולה זו לבדה של משיכת כל הסקריפטים הדרושים לאתר מספיקה כדי להעלות ולהציג עמוד אינטרנט.
באופן טיפוסי, ה-DOM יצטרך לבקש משאבים נוספים מהשרת שלכם כדי לגרום להכל לקרות ולעלות כמו שצריך טכנית וויזואלית, ובשלב זה הפעולות השונות מתחילות ממש להאט את האתר שלכם. הרקע הטכני הזה אמור לעזור לכם לטפל בנושאים אלו בכלי אופטימיזציה של מהירות אתר.
בעיות שעשויות להאט את האתר שלכם
מיהם כמה מהאשמים הנפוצים ביותר בהאטת אתרי אינטרנט?
- בראש ובראשונה תמונות. קבצי תמונות גדולים וכבדים הם האשמים הגדולים ביותר בהאטת מהירות טעינת עמודים באתר.
- פתרון האחסון עשוי לגרום לבעיות מהירות.
- תוספים (פלאגאינים), אפליקציות ווידג’טים למיניהם. באופן כללי כל סקריפט של צד שלישי המותקן ורץ באתר יכול להאט את זמני הטעינה.
- תבנית האתר או קבצים גדולים אחרים מעבר לכך ואשר יכולים מאוד להאט טעינת עמוד.
- הפניות (Redirects) – מספר הקפיצות הדרושות כדי להגיע לעומד אינטרנט גם יאטו את הטעינה והצגת התוכן.
- ה-JavaScript, מיד ניכנס לזה יותר לעומק.
כל הדברים שציינו להלן יכולים להיות קשורים ולהשפיע על מהירות טעינת עמודי האתר. לכן אנו צריכים לעבור על כמה משאבים וכלים הקשורים לנושא, על כמה מדידות חשובות של מהירות האתר ומה המשמעות שלהן ולבסוף גם על כמה מהדרכים שיכולות לשפר את מהירות טעינת העמודים באתר שלכם.
כלים ומשאבים לגבי מהירות עמודי אינטרנט
המשאבים העיקריים שנציין ונשתמש בהם כאן הם כלים והצעות אופטימיזציה מטעם גוגל. מה שמעניין במשאבים ובנתונים המתקבלים הוא שאנו זוכים לראות מה הדאגות של מנוע החיפוש עצמו בכל הנוגע למהירות אתרים וממש מתחילים לראות את השינוי לכיוון חוויית המשתמש עצמה. בכל מקרה עלינו לחשוב על זה כאשר אנו בונים אתר, יוצרים תוכן ומקדמים אתר. אך מבחינת מהירות טעינת האתר, בראש ובראשונה יש לשאול ולהבין, כיצד זה משפיע על הגולשים המגיעים לאתר שלכם, ושנית איך נוכל לקבל את היתרון הכפול מכך שגוגל יתפוס את האתר כאיכותי יותר?
אנו יודעים כי גוגל מציע שאתר ייטען בטווח זמן מירבי של 2-3 שניות. כמה שיותר מהר, יותר טוב כמובן. אך זהו הטווח הכללי שאנחנו מכוונים אליו, לכל הפחות. אנו גם לגמרי מציעים להסתכל על זה מנקודת מבט תחרותית. הכניסו כמה מהמתחרים הישירים שלכם לכמה מכלי בדיקת מהירות אתר אלו ודרגו את מטרות המהירות שלכם בהשוואה לתוצאות של התחרות בתעשייה שלכם.
דו”ח חוויית המשתמש של כרום
כאן מדובר על נתונים ממשיים ממשתמשים בדפדפן כרום. למרבה הצער, פיצ’ר זה לא זמין לאתרים גדולים ופופולאריים, אך בהחלט אפשר לקבל מהכלי נתונים ממש טובים. הכלי הזה נמצא בתוך ממשק BigQuery, כך שנדרש ידע מסוים ב-SQL.
Lighthouse
מערכת Lighthouse היא מהמועדפות שלנו, היא זמינה ישירות בכלי הפיתוח של כרום (Dev Tools) וגם כתוסף לכרום. אם אתם בעמוד אינטרנט ואתם מקליקים על Inspect Element (בדוק אלמנט) ופותחים את ה-Dev Tools של כרום, בלשונית הימנית ביותר תחת תגית Audits, אתם יכולים להריץ דו”ח Lighthouse ישירות מהדפדפן שלכם.
מה שאנחנו אוהבים במערכת של Lighthouse הוא שהיא נותנת דוגמאות ספציפיות מאוד ודברים שתוכלו לתקן כדי לשפר את מהירות האתר. עובדה מעניינת היא שהמערכת ממוקדת מראש על משתמשי מובייל ושהיא מוגדרת אוטומטית על דימוי גלישה מסביבת 3G. אצלנו אוהבים גם לבצע בדיקה תחת ההגדרה של Applied fast 3G, כי כך Lighthouse מבצעת בדיקת הרצה אמיתית של טעינת אותו עמוד. זה לוקח יותר זמן אך נראה שכך מתקבלות תוצאות מדויקות יותר. טיפ שטוב לדעת.
Page Speed Insights – תובנות מהירות עמוד
המערכת של Page Speed Insights היא ממש מעניינת. היום היא משלבת גם דו”ח חוויית משתמש של כרום. אבל אם אתם לא אתר גדול, זה כנראה אפילו לא ימדוד את מהירות האתר המעשית שלכם. המערכת תסתכל כיצד האתר שלכם מוגדר ובנוי ותספק משוב בהתאם לכך וגם תדרג אותו. פרט חשוב להיות מודעים אליו. למרות המגבלות לאתרים קטנים יותר, הכלי של Page Speed Insights עדיין מספק ערך טוב.
בדקו את מהירות וביצועי האתר שלכם במובייל
במסגרת ממשק Think with Google קיים כלי ייעודי לבדיקת מהירות טעינת אתרים בסביבת מובייל, אשר נקרא Test My Site. זהו כלי מעולה מכיוון שהוא מודד ספציפית את מהירות האתר שלכם במובייל. אחרי הרצת הבדיקה על כתובת האתר שלכם, תוכלו לגלול למטה ולקבל הצעות ומידע מעניין הקשור ישירות ל-ROI של האתר שלכם מבחינת המרות ושיפור חוויית המשתמש. בכלי הזה רואים את גוגל ממנפים מדידות מהעולם האמיתי וקושרים אותו הלאה לאחוז האנשים שאתם מאבדים בגלל שהאתר שלכם איטי.
כלים נוספים ואיכותיים, אך שאינם כלים חינמיים של גוגל, הם למשל Pingdom ו-GTmetrix. הם מספקים נתונים ומידע שהכלים של גוגל לא נותנים ובכך מציגים תמונה מקיפה ומדויקת יותר לגבי אפשרויות אופטימיזציית מהירות עמוד.
נתוני מדידות מהירות אתר
מהם מדידות מהירות האתר המרכזיות ומה המשמעות של מדידות ובדיקות אלו? עכשיו נסביר.
מה זה First Paint?
הכוונה בנתון זה היא המהירות בה מופיע על המסך האלמנט הראשון שאינו ריק. זה יכול להיות השינוי בפיקסל הראשון על המסך וזה יכול להיחשב כ-First Paint.
מה זה First Contentful Paint?
מדידה המציגה כמה מהר התוכן הראשון בעמוד נטען ומופיע למשתמש. זה יכול למשל להיות חלק מתפריט החיפוש או הניווט או כל אלמנט תוכן שלם ונפרד באתר.
Time to Interactive – זמן לאינטראקטיביות
מדידת Time to Interactive משמעותה מתי האתר שלכם ניתן לשימוש וליצירת אינטראקציה איתו מבחינה ויזואלית. כולנו נכנסו לעמוד אינטרנט כלשהו ונראה שהוא סיים להיטען, אך אנו עדיין לא יכולים לגמרי להשתמש בעמוד. בנקודה זו מדידה זו נכנסת לתמונה. שוב, שימו לב כמה המדדים השונים – כמו זה למשל – מתמקדים במשתמש ובאיכות החוויה שלו.
DOM Content Loaded – טעינת תוכן DOM
בנתון ה- DOM Content Loaded הכוונה היא מתי כל תוכן ה-HTML בעמוד נטען במלואו. כך שמדובר על נתון טוב ושימושי שכדאי לשים עליו עין באופן כללי.
דרכים לשפר את מהירות עמודי האתר שלכם
שימוש בפרוטוקול HTTP/2
הגדרת האתר לפי פרוטוקול HTTP/2 בהחלט יכולה לזרז עניינים. מבחינת היקף ההשפעה על מהירות האתר, אתם די צריכים ליישם ולמדוד את השינוי על האתר הספציפי שלכם.
חיבור מקדים, הבאה מקדימה וטעינה מקדימה – Preconnect, Prefetch, Preload
אלמנטים מאוד מעניינים ובעלי השפעה על אופטימיזציית מהירות אתר. אנחנו אפילו רואים את גוגל מיישמת זאת בעמוד תוצאות החיפוש שלה. אם תבחנו אלמנטים בעמוד ה-SERP של גוגל תראו שמנוע החיפוש משיג מראש כמה מה-URL’s כדי שאלו תהיינה זמינות מהר יותר עבור המשתמש עבור כמה מהתוצאות העמוד. אפשר ליישם זאת באופן דומה באתר שלכם וזה עוזר למהירויות הטעינה והאצת התהליך של הצגת האתר.
אפשרו יכולות Caching והשתמשו ברשת הפצת תוכן (CDN)
הפעלת Caching היא מאוד, מאוד חשובה להאצת טעינת עמודי אינטרנט. בהחלט חשוב שתבצעו מחקר מעמיק ומתאים כדי שתהיו בטוחים שאפשרות ה-Caching של קבצי האתר מוגדרת נכון ויעיל. אותו הדבר לגבי שימוש ב-CDN כדי להציג את האתר שלכם למשתמשים מהר יותר, גם כאן מדובר על כלי בעל ערך רב באופטימיזציית מהירות עמוד. אך גם במקרה של CDN, קריטי לוודא שהכל מוגדר ומותקן כמו שצריך.
שני שירותים מומלצים ופופולאריים ל-caching ול-CDN לאתרי וורדפרס הם תוסף WP-Rocket וה-CDN של CloudFlare המחזיקה אפילו שרת כאן בתל אביב.
כווצו תמונות
אחת הדרכים הקלות והמהירות ביותר שיש לכם לשפר את מהירות טעינת עמודי האתר שלכם היא פשוט לכווץ את התמונות באתר. מדובר על צעד טכני מאוד פשוט ליישום. יש שלל כלים חינמיים כדי לכווץ ביעילות את הנפח של קבצי תמונה, מבלי לפגוע באיכות. דוגמא אחת היא למשל Optimizilla. אתם אפילו יכולים להשתמש בכלים החינמיים המותקנים מראש על המחשב שלכם, שמרו לשימוש בסביבת WEB וכווצו בהתאם.
הקטנה וכיווץ משאבים – Minify Resources
אתם יכולים גם להגדיר הקטנה וכיווץ (Minify) של משאבים באתר. חשוב להבין מה המשמעות המעשית והטכנית של הקטנת משאבים, איחוד משאבים וכיווץ משאבים כדי שתוכלו לנהל שיחות טכניות מוצלחות יותר עם מפתח האתר שלכם או כל אחד שעובד על האתר שלכם.
זו הייתה סקירה ברמה גבוהה של מהירות אתר ומהירות טעינת עמודים. יש עוד המון שאפשר להסביר ולכסות, אך אלו עיקר הדברים. נשמח לשמוע מכם משוב איך והאם התוכן הזה עזר לכם עם אופטימיזציית מהירות עמודי האתר שלכם וכמובן שנשמח לשתף פעולה ולהעיף את האתר שלכם למעלה.
