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

שרת אחסון -SERVER:

– נתחיל באחסון טוב, מהיר, יציב ומאובטח כדוגמת שרתי VUTLR או Digital Ocean בניהול חברת קלאודווייז (Cloudways)
בקישור הבא תוכלו לקבל 25% על כל תוכנית שתבחרו למשך 4 חודשים ! קישור לחברת אחסון מומלצת.

שרתי קלאודוויז משדרים בפרוטוקול מאובטח הכי חדיש ב HTTP/3 | HTTP/2
לעומת המון אחרים שעדיין משתמשים בשרת עם פרוטוקול מיושן http/1.1 שלא תומך במקביליות ודחיסה.

גרסת PHP בשרת:

– לאחר שיש לנו אחסון טוב אנחנו נצטרך לוודא את גרסאות ה PHP ואת גרסאות ה DATABASE (דאטה-בייס=בסיס נתונים)
למשל גרסת ה PHP האחרונה לשעת כתיבת המאמר היא PHP 8 למרות שעדיין לא מומלץ להשתמש בה בגלל תאימות ותמיכת פלאגאינים שונים וכו' אז נכון לעכשיו רצוי להחיל את גרסת PHP 7.4 ובגרסת ה DB אנחנו נבחר ב MariaDB 10.4.

חיבור CDN:

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

תוסף מטמון-קאש (Cache):

– השלב הרביעי שהוא מאוד חשוב יהיה התקנת תוסף קאש Cache (מטמון) ראוי ומומלץ כדוגמת: WP-ROCKET, 
הרוקט בעצם יעזור לנו לנהל JS ו CSS בצורה הטובה ביותר, החל מניקוי (Minify) לאיחוד (Combine) וגם השהייה (Delay), נושא ההשהיות והחרגות יכול להיות טיפה טריקי וזאת הסיבה שצריך מומחה לשיפור וקידום אתרים שיתאים הכל כמו שצריך ללא שגיאות קונסול (Console) שניתן לראות ב F12  של כרום (Chrome)

טיפול בקבצי JS ו קבצי CSS של המערכת

– חלק מאוד חשוב ואולי הכי חושב וקריטי הוא ניקוי (minify), איחוד (combine), והשהייה (delay) של סקריפטים.
אחרי שהסרנו את כל הסקריפטים שלא נצרכים בכלל לתפעול האתר על ידי שימוש ברוקט ועוד תוסף מומלץ: Asset CleanUp
אנחנו נאחד את כל מה שלא הצלחנו להסיר ונבצע combine js/css

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

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

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

לייזי-לואוד = עיכוב טעינת תמונות עד לרגע שצריך אותם (Lazy Load):

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

פרילואוד = טעינה מוקדמת (Preload):

– האיזור הבא ברוקט יעזור לנו לבצע פרילואוד (Preload) טעינה מוקדמת לכל מיני פונקציות באתר כמו:
  – טעינה מוקדמת לזכרון מטמון (Preload Cache) 
  – טעינה מוקדמת ללינקים (Preload Links)
  – טעינה מראש של בקשות DNS שנקרא (Prefetch DNS Requests)
  – טעינה מוקדמת של פונטים (Preload Fonts)

HeartBeat:

– HeartBeat – מומלץ מאוד להדליק את "קוצב הלב" שהוא בעצם גורם לצמצום או השבתה של פעילות ה-API של Heartbeat
שיכולה לעזור לחסוך חלק ממשאבי השרת ולשפר ביצועי שרת.

ADD-ONS – אינטגרציות וחיבור רוקט עם יישומים צד ג':

עכשיו הגענו לאיזור שנקרא ADD-ONS אחרי שדילגנו על CDN כי בעצם אנחנו כבר משתמשים בקלאודפלייר
ולכן אין לנו צורך בסעיף הזה, ובסעיף של ADD-ONS אנחנו יכולים בעצם לחבר ולבצע אינטגרציה של רוקט לקלאודפליר כדי שנוכל לנקות קאש ונהל את האתר בצורה יותר טובה מה שצריך כדי לחבר קלאודפליר לרוקט הוא:
מפתח API גלובלי
Account email
Zone ID
שאותם ניתן להשיג מתוך ממשק הקלאודפליר ללא בעיה, לחץ כאן למדריך המלא על קלאדופליר.

IMAGE  OPTIMAZATION – כיווץ ודחיסת תמונות:

– החלק הבא שנגע בו הוא אופטימזציה של תמונות, כיווץ, דחיסת נפח ובאיזה סוגי פורמטים מומלצים ועדיפים לשימוש על פני אחרים.
נדלג על החלק ברוקט של IMAGE OPTIMAZATION כי אנחנו נגע בו עם כלי אחר ויעיל הרבה יותר! 

התוסף נקרא ShortPixel, שורט פיקסל הוא תוסף מעולה וכנראה הכי טוב שיש כיום בשוק כרגע לטיפול בתמונות,
החל מדחיסת נפח וגודל הקובץ ומסתיים בהמרת פורמטים מיושנים (PNG JPEG) לפורמטים עדכניים ומומלצים (WebP ו  AVIF) 

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

– *עוד טיפ קטן* לפני שאתם מעלים לאתר תמונות רצוי וראוי להשתמש באתר TinyPNG כדי לכווץ לפני העלאה
 ורק אז לתת לתוסף לסיים את המלאכה.

ניקוי כללי של SPAM באתר:

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

טיפים כלליים להתנהלות ובניית אתר נכונה 

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

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

אבל לצערנו השהיה של JS שקשור ל JET-MENU למשל תשבור את התפריט ואז נצטרך להחריג אותם מהשהייה מה שיתקע אותנו עם כמות ענקית של JS ו CSS לא רצויים בכל טעינת דף (כי ההידר והתפריט משותף לכל האתר).

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

Google Analytics, Tag Manager, FACEBOOK PIXEL ושאר סקריפטים למעקב נתונים:

מומלץ שלא להשתמש בתוספים להכנסת סקריפטים כדוגמת אנליטיקס ותאג מנג'ר כמו :
Pixel Your Site
Duracell
Google Tag Manager for WordPress
אלא מומלץ להכניס ולהטמיע את כל הסקרפטים בהידר(HEADER) בצורה ידנית .

טיפול בפונטים :

זה אולי נשמע פרט שולי אבל ממש לא, פונטים זה חלק מאוד קריטי לזמני טעינה, יש פונטים ששוקלים 300KB ואם לא שמים לב אכלנו אותה בלשון המעטה, מומלץ להשתמש אך ורק בסוג פונט אחד ומקסימום 2/3 משקלים למשל פונט Assistant  במשקלים 400/600/BOLD יהיה מצוין ! כמה שפחות יותר טוב !

לאחר מכן, אחרי שסידרנו את כמות הפונטים והמשקלים אנחנו נטען את הפונטים לוקאלית בשרת במקום שיבוא מדומיין צד ג כמו: fonts.gstatic.com, אלא אנחנו ניעזר בפלאגאין דוגמת OMGF כדי לטעון אותם ישירות מהשרת ובך לחסוך זמני בקשות (Requests)

שגיאות קונסול F12:

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