פלאגין רוקט לוורדפרס – wp-rocket שיפור מהירות אתר

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

אחד הנושאים הכי לוהטים בזמן האחרון בתחום הקידום נקרא Core Web Vital והוא מדבר על כל ה Performance של האתר שלכם – חווית המשתמש ומהירות הטעינה. אחת מהדרכים לבצע שיפור מהירות באתר שלכם הוא באמצעות קאשינג נכון – קאשינג אומר – שהמחשב שומר אצלו קבצים שקשורים לעיצוב כמו קבצי CSS, JAVA ועוד, הוא שותל אותם כעוגיות בדפדפן של הגולשים שלכם וברגע שהם נכנסים פעם נוספת לאתר הדפדפן שלהם לא נדרש לטעון את הקבצים הללו שוב – הוא טוען אותם כבר מהמחשב וחוסך לגולש המון זמן של טעינת הקבצים מחדש מהשרת. אותו הדבר קורה גם בשרת עצמו – במקום לבנות כל פעם את הקבצי עיצוב מחדש – הם כבר קיימים בשרת ובנויים בצורה יעילה מאד וחסכונית כך שהם מאפשרים לטעון ולהציג את העיצוב ואת התוכן במהירות וככה משפרת את חווית המשתמש. 

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

הרוקט עולה כסף והוא שווה כל שקל (או דולר), המחירים נעים בסביבות 50$ לרישיון שימוש שנתי לאתר 100$ לשלושה אתרים ו 250$ לבלי הגבלה – למה אני רושם בסביבות? כי יש הרבה מבצעים ואפשר למצוא גם מחירים יותר זולים בכל מיני מבצעים שהם עושים. הרישיון הוא לשנה – אומנם לאחר שנה ניתן עדיין להמשיך להשתמש בפלאגין אבל לא ניתן לעדכן אותו יותר והדבר משמעותי כיוון שבתחום הזה יש כל הזמן עדכונים ושיפורים – אם אתם שואלים אותי זה אחד מהפלאגינים שכן כדאי להשקיע בו ולשלם עבורו.

ניתן לרכוש את הפלאגין רוקט כאן, גילוי נאות – זהו קישור אפיליאציה.

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

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

מפה נמשיך בתפריט ל FILE OPTIMIZATION – כאן אנחנו נסמן את 2 האפשרויות הראשונות – כווץ קבצי CSS ו enable minify css file – יכול להיות שתקבלו שם אזהרה לפני זה שזה יכול לשבור את האתר – מאשרים ובודקים אחר כך האם יש בעיות באתר – אם יש – מורידים את הסימון וזה אמור לחזור חזרה לקדמותו.

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

משם אנחנו מסמנים את optimize css delivery שזה גורם לעמוד לטעון רק את הקבצים שהוא צריך בזמן שהגולש נכנס אליו. כאן יש 2 אפשרויות לסימון – תצטרכו לבדוק מה עובד הכי טוב עבור האתר שלכם קודם תבחרו ב remove unused css – שימו לב שהוא כרגע בגירסת בטא. תבדקו שזה לא שובר לכם את האתר כי כמו שרשום זה בטא ויש הרבה תופעות מוזרות עם זה, אבל כשזה עובד – זה עובד כמו ענק. לאחר מכן תבדקו עם ה pagespeed של גוגל לראות את הציון שקיבלתם. אחרי זה תשנו את זה ל load css asynchronously ותראו אם הציון השתנה לטובה, איפה שתקבלו ציון יותר טוב (ובמקביל הכל יהיה תקין באתר כמובן) אז על האופציה הזאת תלכו.

נגלול למטה ונעבור ל javascript, נסמן את minify javascript files ולמטה את load javascript deferred , ניתן לעשות ניסיון ולהפעיל גם את האפשרות ביניהם של combine ולראות אם יש שיפור מהירות ולא נשבר כלום באתר – אצלי זה שובר את התפריט אז לא הפעלתי.

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

נמשיך בתפריט לחלק של המדיה. שם נסמן את כל האפשרויות. מה אנחנו מסמנים בעצם זאת אופטימיזציה לתמונות ווידיאו – טעינה מהירה יותר ובסרטוני וידיאו לדאוג שתהיה תמונת קאבר ולא הסרטון עצמו כדי שלא סתם  הוא יטען ויאט את העמוד אלא רק כשהגולש באמת רוצה לראות את הסרטון וילחץ עליו הוא יטען. בנוסף יש שם למטה הוספה של גדלי תמונות במקרה ולא מוגדר בקוד על מנת שלא לטעון גדלים שלא צריך. אגב – בעניין הזה תמיד עדיף שתשימו תמונות בגודל שאתם מציגים אותם ולא לשים תמונה עם גודל של 1000X2000 ולהציג בפועל על 100X200 כי תמונה עם רזולוציה וגודל גדול יותר שוקלת גם יותר ואם לא צריך אז ניתן להקטין אותה וזה גם יחסוך במשקל – אגב גם פה יש פלאגינים שעושים זאת – אני עוד אעשה סקירה גם על זה.

אחרי שנשמור נעבור בתפריט לטעינה מראש – שם נסמן את האפשרות הראשונה של activate preloading ונשמור.

נעבור מכאן ל heartbeat ונשנה שם את כל האפשרויות לבלי הגבלה (do not limit). ונשמור.

אלו ההגדרות הבסיסיות שיש לעשות – לאחר שתסיימו את ההגדרות וראיתם שהכל תקין באתר כדאי להריץ שוב בדיקת מהירות אתר ולראות את השיפור.

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

אני ממליץ לכם גם לקרוא את המאמר 10 טיפים לשיפור מהירות האתר שלכם.