בחזרה אלינו
בסרטון ראינו את מאט קאטס טוען כי רלוונטיות היא הגורם המכריע בסופו של דבר ומהירות זמן טעינת האתר תכריע רק במצבים בהם מידת הרלוונטיות בין אתרים היא זהה. אמנם, יש לקחת בחשבון כי הסרטון יצא לפני למעלה מ 10 שנים בשנת 2010 ומאז גוגל שינתה מעט דברים (בלשון המעטה).
כמו למשל עדכון מובייל פירסט שיצא בשנת 2017 ומאז גוגל נותנת דגש רב לכל נושא הרספונסיביות וההתאמה למכשירים ניידים, אתרים שלא יתאימו עצמם למכשירים ניידים יענשו בתוצאות החיפוש.
כמו כן, עדכון Core Web Vitals שנכנס בשנת 2020 אל Google Search Console ושם דגש על חווית המשתמש של הגולשים בעמודי האתר לפי 3 פרמטרים עיקריים הקשורים בין היתר למהירות זמן טעינת עמודי האתר.
בקיצור, כמו שכבר הבנתם, נכון לכתיבת מאמר זה (יוני 2020) כללי המשחק השתנו.
מכשירים ניידים וחויית המשתמש – IN , מחשבים נייחים בדרך להיות OUT.
יאללה הגענו לתכל׳ס של המאמר, שתו כוס קפה ותהיו מרוכזים – בעוד מספר דקות אתם הולכים לשגר את ציון מהירות האתר שלכם – והכי חשוב, להבין מה אתם עושים ולמה.
רגע לפני שמתחילים…
בצעו בדיקת מהירות לאתר שלכם כעת, ולאחר שתסיימו את המדריך בצעו את הבדיקה בשנית.
תוכלו לעשות זאת באמצעות הכלי של גוגל לבדיקת מהירות –Google Page Speed Insights.
*בדיקת מהירות מתבצעת על עמוד אחד בלבד, לכן הכניסו את העמוד שעבורו הכי הרבה תרצו לשפר את המהירות.
מוכנים לשיגור? >> החזיקו חזק >>> ממריאים.
1. שרת + מערכת ניהול תוכן (CMS)
שרת:
א. ראשית, חשוב להבין היכן האתר שלכם מאוחסן, מי חברת אחסון האתרים שלכם?
תוכלו לבדוק זאת כאן.
לאחר שהזנתם את כתובת האתר שלכם – אתם תקבלו את התמונה הבאה:
שימו לב היכן האתר שלכם מאוחסן וכי השרת שעליו מאוחסן האתר שלכם נמצא בישראל (במידה וקהל הגולשים העיקרי שלכם הוא מישראל). חשוב להבין, ככל שהשרת קרוב יותר פיזית אל הגולשים כך עמודי האתר יטענו להם מהר יותר וחווית המשתמש שלהם תהייה טובה יותר.
אם גיליתם שהאתר שלכם מאוחסן בחו״ל וקהל הגולשים שלכם נמצא בישראל, או במידה וגילתם כי האתר שלכם מאוחסן בישראל אך קהל הגולשים שלכם נמצא בחו״לֹ, חשוב מאוד שתבדקו שיש לכם שרת CDN במדינה בה נמצא קהל הגולשים העיקרי שלכם. ניתן לבדוק זאת מול חברת אחסון האתר שלכם.
כמו כן, אם יש לכם לעיתים קרובות בעיות עם האתר (עמודים לא עולים, שגיאות 500 וכו׳) רצוי מאוד להחליף חברת אחסון אתרים מכיוון שזה פוגע בתהליך הקידום שלכם. מוזמנים לדבר איתנו בנושא.
ב. שנית, בדקו עם חברת האחסון שלכם כי נפח הזיכרון של השרת עליו מאוחסנים קבצי האתר שלכם הוא המירבי ביותר (256mb) + לשרת מוגדר מטמון אפליקטיבי + גרסאת הPHP של האתר היא העדכנית ביותר
(גרסא 7.4 נכון לכתיבת מאמר זה).
מערכת ניהול תוכן (CMS):
הגיע הזמן לבדוק באיזו מערכת ניהול תוכן האתר שלכם מנוהל.
אם אינכם יודעים באיזה CMS האתר שלכם מנוהל – הגיע הזמן שתדעו על מנת שתוכלו להיכנס ולבצע שינויים הכרחיים לקידום האתר. ניתן לדעת זאת בשניות בודדות על ידי הורדת תוסף לדפדפן כרום שנקרא wappalyzer.
אם גיליתם שמערכת ניהול האתר שלכם היא וויקס (WIX) או מערכת ניהול שהיא לא וורדפרס– עצרו הכל.
המדריך הבא הופך להיות פחות רלוונטי עבורכם, מכייון שבמדריך זה אנו שמים דגש על תוספים ודברים הקשורים לאתרי וורדפרס.
אתם עדיין מוזמנים להישאר ולהבין איך כל דבר שקשור למהירות האתר עובד,
אך בכל הנוגע ליישום הדברים במערכת ניהול התוכן שלכם תצטרכו ללמוד זאת ממקור אחר.
אם האתר שלכם על וויקס (ספציפית) וקידום אתרים אורגני זה משהו שחשוב לכם – מומלץ להעביר את האתר למערכת ניהול וורדפרס ולעשות למקדמי האתר שלכם את החיים קלים יותר וגם על מנת שתוכלו לקבל תוצאות קידום מירביות.
א. ראשית, בדקו כי גרסאת הוורדפרס שלכם היא העדכנית ביותר. כך תעשו זאת:
שדרוגים >>> עדכן עכשיו
ב. שנית, בדקו כי התוספים הם בגרסא העדכנית ביותר וכי אין תוספים כבויים, במידה ויש תוספים כבויים – מחקו אותם. כמו כן, בדקו אלו תוספים קיימים אצלכם באתר ואלו תוספים מאטים הכי הרבה את האתר שלכם. תוספים תופסים הרבה שורות קוד מיותרות (משקל נוסף) ועדיף להימנע מתוספים כל עוד ניתן והם לא באמת נחוצים.
כיצד ניתן לדעת איזה תוסף מאט הכי הרבה את האתר אתם שואלים?
התשובה פשוטה ומצחיקה… באמצעות תוסף 🙂
ניתן לדעת אלו תוספים מאטים הכי הרבה את מהירות זמן טעינת עמודי האתר שלכם באמצעות התקנת התוסף P3. הורידו את התוסף ותוך מספר דקות תוכלו לדעת אלו תוספים מכבידים הכי הרבה על האתר שלכם. במידה ואתם יודעים שאתם יכולים להסתדר ללא התוסף הבעייתי – תשקלו בחום למחוק אותו.
2. תמונות
תמונות זה אחד הגורמים שמשפיעים הכי הרבה על מהירות זמן טעינת האתר, ולכן חשוב להתמקד בנושא זה ולדעת כיצד לעבוד עם תמונות בצורה הטובה ביותר על מנת לקבל ציוני מהירות וחווית משתמש טובים ככל הניתן.
ישנם 4 גורמים שקשורים לתמונות שחובה להתמקד בכל אחד מהם.
1. משקל / גודל תמונה – תמונות במשקל / גודל העולה על kb100 מאטות את מהירות זמן טעינת העמוד ופוגעות בחוויית המשתמש של הגולשים,
בעיקר בכאלה הגולשים ממכשירים ניידים, ולכן חשוב לוודא כי כל התמונות שנמצאות באתר הן עד גודל של 100kb.
2. פורמט תמונה – הפורמט האידיאלי ביותר עבור תמונות באתרי אינטרנט הוא JPG או Webp (מכיוון שבפורמטים אלו מוחסרים כמות פיקסלים מהתמונה ברמה כזאת שעין אנושית לא תבחין בחסר וכך משקל התמונה יורד). כמו כן, כאשר אין ברירה נשתמש בפורמטים אחרים כגון PNG או GIF בשביל חווית משתמש טובה יותר. את 2 הסעיפים שצוינו מעלה ניתן לבדוק באמצעות התוכנה Screaming Frog.
3. רזולוציה – יש לוודא שהתמונות באתר הן בגודל המקסימלי שבאמת נחוץ להצגתן. כלומר אם תמונה מועלת לאתר ברזולוציה 1000×1000 אך בפועל מוצגת לגולשים בגודל של 500×300 – אין שום סיבה שהתמונה לא תעלה לאתר בגודל המירבי שהיא באמת מוצגת (500×300).
4. Lazy Load – כאשר גולש נכנס לאתר, אנחנו נרצה שדבר ראשון יופיע לו הטקסט (ששוקל הכי קצת ונטען הכי מהר) ורק לאחר מכן שיופיעו התמונות (ששוקלות הרבה ולוקח זמן עד שהן נטענות). בדיוק לשם כך, אנחנו נשתמש ב Lazy Load ע״י תוספי מהירות למיניהם כגון: A3 Lazy Load , Smush , W3 Total Cache וכו׳.
3. צמצום בקשות HTTP: הפניות 300 + עמודי שגיאה
א. בדקו אילו הפניות 301 ו 302 יש לכם באתר, והאם יש לכם עמודי שגיאה 404 באתר.
עמודי שגיאה 404 – עמודים אלה פוגעים מאוד בכל הקשור לחווית משתמש של הגולשים אצלכם באתר + בתקציב הזחילה של מנועי החיפוש. הדבר האחרון שאתם רוצים לעשות זה לשלוח גולשים וזחלנים של מנועי חיפוש לעמודי שגיאה 404. בזבזתם למנועי החיפוש גם זמן וגם כסף על סריקת שווא ולגולשים שלכם בזבזתם זמן ויצרתם תסכול. לכן, במידה ואיתרם עמודי שגיאה 404 יש לטפל בהם בהקדם על ידי מחיקת הקישורים שמפנים אליהם.
הפניות 300 – הפניות 301 ו 302 למשל שולחות את הזחלנים והגולשים לכתובת חדשה. פעולה זאת מצריכה בקשות HTTP נוספות לשרת ולכן מצריכות זמן המתנה רב יותר מצד הגולשים והזחלנים עד שהם מגיעים לכתובת הסופית. נסו להימנע ככל הניתן מהפניות שלא לצורך וטפלו זאת בהקדם. אם אינכם יודעים כיצד לעשות זאת בצורה נכונה מבחינת SEO, פנו לחברת פיתוח אתרים עם נסיון על מנת שלא תעשו לעצמכם נזק יותר גדול הרבה יותר מאשר ציון מהירות.
את 2 הסעיפים שצוינו מעלה ניתן לבדוק באמצעות התוכנה Screaming Frog.
4. אופטימיזציית קוד
הגענו לחלק המעניין והקריטי ביותר שעליו במרבית הפעמים מקבלים היערות בכלי מהירות שונים.
ראשית, יש להבין על אילו סוגי קוד אנחנו הולכים לדבר ומה הפעולות הקיימות לשיפור מהירות אתרים עבור כל סוג קוד, ולבסוף נציג עבורכם כיצד עושים כל דבר על מנת לשפר את מהירות האתר.
א. HTML – זהו בעצם הקוד שמכיל את תוכן האתר (טקסט, תמונות, סרטונים, כפתורים וכו׳).
אם תדמיינו לרגע בניין אז HTML זה היסודות של הבניין (המלט, הבטון וכו׳).
HTML זאת שפת תכנות וותיקה שעליה בנויים אתרי אינטרנט מאז יום הכנסת האינטרנט לשימוש פרטי של אזרחים (1993). ובקיצור, HTML זה הבסיס / תשתית של האתר שלכם.
אם מעולם לא ראיתם קוד HTML, הגיע הזמן להכיר. תוכלו לראות את קוד הHTML של האתר שלכם על ידי לחיצה במקלדת על F12 (בדפדפן כרום).
כך זה נראה:
כפי שאתם יכולים לראות, גם אם אינכם מבינים את התגיות (קוד) שאתם רואים, אתם יכולים להבין ברמה בסיסית מה שייך למה ואיפה כל דבר נמצא באתר, מה רשום באיזה חלק, מה הכותרת, מה טקסט וכו׳.
אך אם נעשה הפרדה רגע בין אדם למכונה (מחשב), אז המחשב או יותר נכון – הדפדפן שלכם לא באמת צריך רווחים, פסיקים, נקודות וסימנים תחבירים כמו אדם אנושי.
הוא יכול לקרוא את הקוד במלואו גם אם הכל יהיה מחובר ודחוס ללא שום רווחים וסימנים ובכך לחסוך מקום וזמן ברינדור (בניית) הקוד בכל פעם שאתם נכנסים לאתר.
וזה בדיוק מה שמביא אותנו לפעולת האופטימיזציה הראשונה שעליכם להכיר – Minify.
Minify – מכווץ את הרווחים והסימנים שמיועדים לבני אדם, ושאינם נחוצים לדפדפנים, ובכך חוסך לדפדפנים זמן ומאמץ לטעון את עמודי האתר.
Cache- הכוונה למטמון, כלומר גרסא שמורה של עמודי האתר.
כאשר גולש חוזר לאתר שלכם, אין שום סיבה שהדפדפן שלו יצטרך לטעון את כל האתר שלכם שוב פעם מחדש ובכך לבזבז לגולש זמן רב.
ובדיוק לשם כך הומצא ה Cache – על מנת לחסוך לגולשים חוזרים זמן בטעינת האתר ולהציג להם גרסא שמורה של עמודי האתר שלכם במהירות מירבית. במידה וביצעתם שינוי בעמוד מסויים באתר שלכם ואתם רוצים שגולשים החוזרים לאתר יראו זאת במהירות – יש למחוק Cache.
ב. CSS – חוזרים לדוגמת הבניין. אם HTML כאמור זה המלט והבטון אז CSS זה החלונות, הוילונות, הרעפים , או בקיצור : עיצוב הבניין.
CSS הנה שפת תכנות שהגיעה כתוספת ל HTML ודרכה אנחנו שולטים בכל מה שקשור לעיצוב קבצי האתר שלנו, למשל פונטים של טקסט, מסגרות של תמונות, צבעים, ועוד 1001 דברים.
למעשה באמצעות CSS אנחנו קובעים איך האתר יראה.
אם מעולם לא ראיתם קוד CSS, הגיע הזמן להכיר.
תוכלו לראות את קוד ה CSS של האתר שלכם בדיוק כפי שראיתם את קוד ה HTML – על ידי לחיצה במקלדת על F12 .
כך זה נראה:
Minify – גם כאן, בדיוק כמו ב HTML אין צורך ברווחים וסימנים תחביריים המיועדים לבני אדם, ולכן נגדיר Minify גם לקבצי CSS.
Inline – כאמור, CSS הומצא על מנת להוות תוספת לשפת התכנות הוותיקה HTML ולשנות את עיצוב האתרים (שהיה נורא) בימי בראשית של האינטרנט.
כאשר אנו מדברים על Inline הכוונה היא שבמקום שהדפדפנים יטענו 2 תיקיות נפרדות (HTML + CSS) שיטענו תיקייה אחת שתכיל בתוכה את כל הקבצים – גם HTML וגם CSS ובכך יחסך גם זמן וגם בקשות HTTP שהדפדפנים יצטרכו לבקש מהשרת.
אך החיסרון בדבר הוא שכל פעם שגולש יפתח עמוד חדש באתר שלכם הדפדפן שלו יטען את כל קבצי ה CSS של כל האתר כל פעם מחדש, למרות שבפועל אין לגולש צורך בזה, הוא צריך רק את קבצי ה CSS של העמוד שאליו הוא נכנס, ולכן הגדרה זו אינה מומלצת למרבית האתרים.
Combine – הפתרון האידיאלי לבעיית ה Inline. מכיוון שהאתר שלכם בנוי מהמון קבצים הנמצאים בתיקיות שונות, במקום שהדפדפן יגש כל פעם להמון תיקיות, הגדרת Combine מצמצמת את מספר התיקיות של קבצי האתר.
למעשה הגדרת Combine מעבירה את כל קבצי ה CSS של האתר לתיקייה אחת בלבד ובכך מצמצמת את מספר התיקיות (בקשות HTTP) ועל ידי כך הדפדפן של הגולשים ניגש כל פעם לתיקייה אחת בלבד (במקום ל10 תיקיות) ומוציא את הקבצים הנדרשים מתוך אותה תיקייה.
ג. JS – ג׳אווה סקריפט (Java Script) היא שפת תכנות שמשולבת בתוך קוד (בדר״כ בקוד HTML) ומאפשרת להוסיף אפקטים מיוחדים ש HTML לא מאפשר.
למשל, פתיחת חלון הודעה מתוך דף HTML, מילוי טפסים באתר, אלמנטים זזים/קופצים וכו׳.
ישנן 3 טכניקות אפשריות לרינדור (בניית) קבצי JS:
REGULAR – זאת השיטה הדיפולטית שדרכה דפדפנים מרנדרים קבצי JS.
הדפדפן מתחיל לרנדר את קבצי ה HTML עד שהוא נתקל בקובץ JS.
כאשר הוא נתקל בקובץ JS הוא מפסיק את רינדור ה HTML, מתחיל להוריד את קובץ ה JS,
מחכה שההורדה תסתיים, לאחר מכן הוא מריץ את קובץ הJS ורק אז חוזר להריץ את קבצי ה HTML עד שיתקל שוב בקובץ JS ויעשה בדיוק את אותה פעולה.
כך הדפדפן מרנדר בצורה טורית את כל ה DOM (מסמך הקוד) של העמוד עד שהוא מסיים.
מדובר בשיטה איטית ולא יעילה, בעיקר אם יש לכם הרבה קבצי JS באתר.
ASYNC – – בשיטה זו הדפדפן מתחיל לרנדר את קבצי ה HTML וכאשר הוא נתקל בקבצי JS הוא מוריד אותם תוך כדי המשך הרינדור של קבצי ה HTML, הוא לא עוצר.
הבעיה כאן היא שזאת שיטה א – סינכרונית, כלומר אין חשיבות למה שהדפדפן נתקל בו קודם. מה שסיים לרדת ראשון יוצג ראשון, כלומר, ברגע שקובץ JS מסוים הסתיים לרדת הדפדפן מריץ אותו. לא משנה אם זה קובץ שהתחיל לרדת ראשון או אחרון, אין סדר לדברים וזה יכול ליצור בלאגן אצל הגולשים ולהעלות להם את תכני האתר בסדר שונה כל פעם שהם נכנסים לאותו עמוד.
DEFER – זאת השיטה המומלצת ביותר עבור רינדור של קבצי JS. בשיטה זו הדפדפן מתחיל לרנדר קבצי HTML וכאשר נתקל בקבצי JS הוא מוריד אותם תוך כדי המשך הרינדור של קבצי ה HTML ושומר את הרצתם של קבצי ה JS לסוף הרינדור של קבצי ה HTML.
כמו כן, כאשר הוא סיים לרנדר את קבצי ה HTML הוא מריץ את קבצי ה JS לפי סדר הופעתם ב DOM, כלומר, הקובץ הראשון שהוא נתקל בו ראשון.
לסיכום, כל הפעלת קבצי ה JS יבוצעו אך ורק לאחר שקבצי ה HTML הסתיימו לרדת ולהיות מוצגים לגולשים. כלומר, בשיטה זאת יש עדיפות ברורה לקבצי HTML.
שהם התוכן הראשוני והקל ביותר (מבחינת משקל קבצים) שיש להציג לגולשים כאשר הם נכנסים לאתר.
קודם נציג את התוכן – טקסט ורק לאחר מכן, נציג לגולש את קבצי ה JS של האתר שנחשבים לכבדים יותר.
ויזואליים – זה בשבילכם
אם קראתם עד לכאן – כל הכבוד!
אנחנו יודעים שזה היה ארוך ולא פשוט…
אבל עכשיו אתם כבר מבינים איך הכל עובד ויודעים כיצד לשגר את ציון המהירות של האתר שלכם ולגרום לשיפור משמעותי במהירות האתר.
גם אם לא קראתם וסתם גללתם עד פה..
סיכום של פעולות אופטימיזציית שאתם צריכים לעשות באתר שלכם על מנת לשפר את המהירות!
* יש לציין שכל אתר זה עולם ומלואו, יש אתרים שמתאימות להם טכניקות שונות.
במידה וזה המצב – דברו איתנו.
את כל הפעולות שצוינו במאמר ניתן לעשות על ידי הכלים והתוספים הבאים:
א. בדיקת שרת אחסון אתר – https://www.whoishostingthis.com
ב. אופטימיזציה שרת ועדכון PHP – ע״י ממשק ניהול שרת / פנייה לחברת אחסון האתר
ג. בדיקת משקל תוספים – תוסף P3
ד. בדיקת תמונות (פורמט, משקל) + הפניות ועמודי שגיאה: Screaming Frog
ה. כיווץ תמונות ושינוי רזולוציה ופורמט: https://imageresizer.online/
ו. תוספי Cache מומלצים: W3 Total Cache, EZcache, WProcket|
ז. תוספי Lazy Load מומלצים: W3 Total Cache ,A3 Lazy load, Smush
ח. תוספי אופטימיזציית קוד מומלצים: W3 Total Cache, EZcache ,WProcket
זוכרים שבדקתם את ציון מהירות האתר שלכם אי שם בתחילת המאמר?
אז הגיע הזמן לבצע בדיקת מהירות שוב! (ודאו שאתם על מצב Incognito בדפדפן)
מקווים שהשיגור עבר בהצלחה ואתם מרוצים מהגבהים החדשים שהבאתם אליהם את האתר שלכם.
שתפו אותנו בכמה שיפרתם את ציון המהירות של האתר שלכם 🙂