תוסף MnCombine ואיך להשתמש בו כדי להאיץ את האתר שלכם

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

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

MnCombine – תוסף שמאחד קבצי JS וקבצי CSS

היום אני רוצה לדבר אתכם על תוסף אשר עושה "איחוד" או כפי שזה נקרא באנגלית combining של קבצי ג'וואה סקריפט לקובץ אחד לכמות מינימאלית ובדומה גם לקבציי CSS.

זה חשוב מאוד כי:

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

השאיפה הסופית היא:

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

פעולות ראשוניות:

1. הטמעתי את הסקריפט שיצרנו במדריך איזה קבצי Js וCSS נטענים באתר שלכם?
2. התקנתי את התוסף MnCombine
3. הפעלתי את התוסף בממשק הניהול של וורדפרס
4. עשיתי בדיקת מהירות ראשונית לאתר זמנהוף ב Pingdom

נקודת הפתיחה ומה היא מלמדת אותי:

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

הצעד הראשון הוא להכנס אל דף התוסף בממשק הניהול של האתר שלנו תחת התפריט תוספים > Asset Combine.

ראשית נבחר בלשונית Javascript

כעת עלינו לבחור את הקבצים

שימו לב לבחור את הקבצים תחת הרשימה Files To Combine

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

לדוגמה במקרה של האתר המדובר אני רוצה לשלב את הקבצים עם המזהים: gdsr_script, login-with-ajax, contact-form-7, wwowjs, growljs, miscscripts ולכן אחפש קבצי Javascript עם שמות דומים בקוד המקור (ctrl + u כדי לראות את קוד המקור של דף הבית.)

מבט זריז בקוד ומצאתי את כתובות הקבצים

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

שמרו את הקוד וצפו בתוצאה

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

לאחר ששמרתם תוכלו לרענן את דף הבית שלכם ולראות בעזרת הסקריפט שכתבתי עבורכם אילו סקריפטים נטענים כעת. התוצאה מדהימה! כעת נטענים אצלי רק 3 סקריפטים (הייתי משלב את כולם אך השניים הנותרים נטענים מCDN). זה אומר שחסכתי לעצמי 6 קבצי JS וחסכתי זמן טעינה.

שיפר את המהירות? הגיע הזמן לראות

הרצתי כעת עוד בדיקה בעזרת Pingdom והנה התוצאות.

והתוצאות?

התוצאות לאחר שילוב קבצי CSS

לאחר שלב זה?

עשו את אותו התהליך עם קבצי הCSS וסיימתם!

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

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