ראשי » אופטימיזציה » הגדרות מתקדמות ל- WP-Rocket

הגדרות מתקדמות ל- WP-Rocket

פורסם ב: 02/06/2022
עודכן לאחרונה: 12/01/2024
ב: אופטימיזציה, וורדפרס
זמן קריאה: 11 דקות
2 תגובות

זה לא סוד ש- WP Rocket הוא בין תוספי המטמון המובילים בעולם, נכון לכתיבת הפוסט הזה, עם מעל 2.2M התקנות פעילות, מרכז ידע עשיר ודוקומנטציה מצוינת. זהו תוסף המאפשר להמון משתמשים להגיע לתוצאות מעולות מבחינת מהירות טעינת האתר. הפעם נצלול לעומק מרכז הידע של התוסף ונמצא לנו כמה שפצורים והתאמות שיעזרו לנו עם אתר הוורדפרס שלנו.

מחפשים את תוכן העניינים?
הרכיב נמצא בתחתית המסך בצד שמאל 🙂

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

הפוסט תורגם ולוקט ממרכז הידע של התוסף WP Rocket

הפעלת White Label עבור Footprint, Dashboard ו- RocketCDN

HTML Comment Footprint

ניתן להסיר את האזכור של WP Rocket בטביעת הרגל של הערות HTML מקוד המקור של האתר:
תמונת ברירת מחדל:

This website is like a Rocket, isn't it? Performance optimized by WP Rocket.

ערכו את wp-config.php בבסיס התקנת וורדפרס והוסיפו את הקוד:

define ('WP_ROCKET_WHITE_LABEL_FOOTPRINT', true);

לאחר מכן ננקה את הקבצי מטמון (קאש)

היתרון הנלווה שזה מוריד את הלינק לאתר התוסף.

Dashboard & RocketCDN

ניתן להסיר את הקטע "החשבון שלי" מהכרטיסייה של "מרכז שליטה" בהגדרות שלנו

ערכו את wp-config.php בקבצי וורדפרס והוסיפו את הקוד הבא:

define ('WP_ROCKET_WHITE_LABEL_ACCOUNT', true);

במרכז השליטה לא יופיע יותר המקטע ה"חשבון שלי"

בנוסף, הקוד יסיר גם את הדברים הבאים מ- RocketCDN:

קטע RocketCDN בלשונית מרכז השליטה
ניהול מינוי בלשונית CDN
באנרים פרסומיים של RocketCDN

Always Purge URL(s)

כאשר פוסט או עמוד מתעדכנים, המטמון ינוקה חלקית, כלומר המטמון ינוקה רק עבור אותו פוסט או עמוד והתוכן הקשור אליו (למשל, ארכיון טקסונומיה). אם אתם מגלים שהתוכן הקשור לא מתעדכן בכמה דפים אחרים (למשל דף המפרט פוסטים בבלוג), אתם יכול להשתמש בתכונה Always Purge URL(s).

השתמשו באזור הטקסט 'ניקוי תמידי של כתובות אתרים' כדי לציין כתובות אתרים שברצונכם שתמיד יימחקו כמו בדוגמה:

Always Purge Urls Text Area To Specify Url That You Want Always To Be Purged — Always Purge URLs Text Area To Specify URL That You Want Always To Be Purged

הוסיפו מספר דפים עם תו כלל (wildcard = *) :

/events/(.*)

שימו לב שכל כתובות האתרים שהוזנו בשדה זה ייטענו מראש לאחר ניקוי מטמון (בהנחה שהתכונה הזו הופעלה).

האם אתם צריכים להשתמש באלכסון הנגרר?

אם תכללו או לא תכללו קו נטוי בסוף כתובת האתר תלוי באופן שבו האתר מוגדר. ניתן ללכת להגדרות ← קישורים קבועים ולהסתכל על המבנה שבו האתר משתמש. אם הוא מסתיים בקו נטוי (/), כגון /%postname%/ (שהוא האופייני ביותר), עליכם לכלול אותו בעת הוספת כתובות אתרים לתיבה זו.

התאמה אישית של הגישה לאפשרויות בהתאם לתפקידי המשתמש

כברירת מחדל, עליכם להיות משתמש אדמין כדי לקבל גישה לכל ההגדרות והאפשרויות של WP Rocket.

אבל ניתן להתאים את זה, ולהעניק לתפקידי משתמש אחרים גישה לחלק מהאפשרויות של WP Rocket או לכולן. ישנן 2 דרכים אפשריות לעשות זאת:

על ידי שימוש בתוסף User Role Editor
באמצעות קוד מותאם אישית

שימוש בתוסף User Role Editor

התקינו והפעילו את התוסף User Role Editor
עברו אל משתמשים > עורך תפקידי משתמש
בחרו איזה תפקיד משתמש לערוך
לחצו על WP Rocket מרשימת ה"קבוצה".
בחרו אילו יכולות לתת תפקיד משתמש זה

יכולות זמינות

ניתן להקצות את היכולות הבאות למשתמשים כדי לספק גישה להגדרות מאוד ספציפיות ב-WP Rocket:

rocket_purge_cache – למשתמש תהיה גישה לקישור נקה מטמון בסרגל הכלים של WP Rocket admin

rocket_purge_posts – המשתמש יוכל לנקות את המטמון מחלקי תוכן ספציפיים

rocket_purge_terms – המשתמש יוכל לנקות את המטמון של טקסונומיות ספציפיות כמו קטגוריות

rocket_purge_users – אם למשתמש ניתנה גישה לנהל משתמשים אחרים בוורדפרס, ו-User Cache מופעל ב-WP Rocket, הוא יוכל לנקות את המטמון של משתמשים ספציפיים

rocket_purge_cloudflare_cache – אם התוסף Cloudflare מופעל ב-WP Rocket, למשתמש תהיה גישה לקישור Clear Cloudflare Cache בסרגל הכלים של הניהול

rocket_purge_sucuri_cache – אם התוסף Sucuri מופעל ב-WP Rocket, והמשתמש קיבל גישה ל-rocket_manage_options, המשתמש יוכל לנקות את המטמון של Sucuri מהאזור המורחב ב-WP Rocket

rocket_preload_cache – אם Preload מופעל ב-WP Rocket, למשתמש תהיה גישה לקישור Preload cache בסרגל הכלים של הניהול

rocket_regenerate_critical_css – אם טעינת CSS אסינכרונית מופעלת ב-WP Rocket, למשתמש תהיה גישה לקישור Regenerate Critical Path CSS בסרגל הכלים של הניהול

rocket_manage_options

<<<<שימו לב!!! אין להקצות יכולת זו לבד, היא דורשת כמה יכולות נוספות כדי לעבוד בצורה נכונה.>>>>

המשתמש יוכל לגשת לדף ההגדרות של WP Rocket ולנהל אותו. בעת הקצאת יכולת זו, נדרש להקצות להם גם את היכולות הבאות:

rocket_regenerate_critical_css
rocket_purge_cache
rocket_purge_cloudflare_cache
rocket_purge_sucuri_cache
rocket_preload_cache

שימוש בקוד מותאם אישית

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

function wp_rocket_add_purge_posts_to_author() {
// gets the author role object
$role = get_role('author');
// add a new capability
$role->add_cap('rocket_purge_posts', true);
}
add_action('init', 'wp_rocket_add_purge_posts_to_author', 12);

דוגמה כיצד לתת לתפקיד מנהל חנות את היכולת לנקות מטמון:

/// add clear cache option to shop manager
function wp_rocket_add_purge_cache_to_shop_manager() {
// gets the shop owner role object
$role = get_role('shop_manager');
// add a new capability
$role->add_cap('rocket_purge_cache', true);
}
add_action('init', 'wp_rocket_add_purge_cache_to_shop_manager', 12);

מכאן "השמיים הם הגבול"

הגדרות תפקיד השונות:

editor
author
contributor
subscriber
shop_manager
customer

ניתן להוסיף משתמשים בהתאמה אישית בעזרת קוד

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

הסרת כותרת X-Powered-By: WP Rocket

אם תרצו להסיר את הכותרת x-powered-by: WP Rocket מהאתר, תוכלו להתקין את תוסף העזר.

הוראות ההתקנה פשוטות:

הורידו את קובץ ה-zip של תוסף העזר
התקינו את תוסף העזר באתר הרצוי – עברו אל תוספים → הוסף חדש → העלה תוסף ובחרו את קובץ ה-zip.
הפעילו את הפלאגין
נקו את המטמון של WP Rocket

שמירת מטמון של תוצאות דף החיפוש

כברירת מחדל, WP Rocket אינו שומר תוצאות של פונקציונליות החיפוש של וורדפרס.

על מנת לאפשר שמירה במטמון עבור תוצאות חיפוש, התקינו את תוסף העזר הבא

התאמת סף הטעינה עצלה (Lazy Load)

כברירת מחדל, LazyLoad טוען תמונות שנמצאות בטווח של 300 פיקסלים מנקודת התצוגה (חלון הדפדפן). עם זאת, אתם יכולים להתאים את הסף עם הפונקציה הבאה. בדוגמה זו הסף מוגדר ל-150px:

function rocket_lazyload_custom_threshold( $threshold ) {
return 150;
}
add_filter( 'rocket_lazyload_threshold', 'rocket_lazyload_custom_threshold' );

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

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

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

התאמת הסף היא במידה רבה עניין של העדפה ונוחות חוויית המשתמש.

Fade In Effect עבור תמונות שנמצאות בטעינה עצלה

לרוקט, כמו לכמעט כל תוסף מטמון בשוק, קיימת התכונה של LazyLoad עבור התמונות וה-iframes (כולל וידאו). משאבים אלה נטענים רק כאשר הם צריכים להיות מוצגים על המסך של המבקר האתר, מה שהופך את האתר שלכם לטעון הרבה יותר מהר. למרות שהתמונה לא מוצגת מיד, LazyLoad מספקת גם תג חלופי ל-SEO (מתואר להלן).

העקרון

הסקריפט LazyLoad משתמש בתכונה data-lazy-src כדי לאחסן את כתובת האתר של התמונה. זה גם שם תג תמונה מקורי בתג <noscript> מטעמי SEO ונגישות. כאשר התמונה צריכה להופיע (מכיוון שהמשתמש גולל), ערך התכונה data-lazy-src בא להחליף את הערך של תכונת src וגורם לתמונה להופיע בפתאומיות.

פתרון CSS3 פשוט

הודות ל-attribute selector, ניתן למקד לאלמנטים בהתאם לתכונות שבבעלותם. כאשר תכונת data-lazy-src מעבירה את ערכה לתכונת src של התמונה שלך, הראשונה נעלמת ומשאירה את תכונת ה-src המלאה.

קוד ה-CSS הבא מאפשר לגרום לתמונה לדעוך עם מעבר. הדביקו את הקוד הזה לתוך style.css של תבנית הבת שלכם:

/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
/* we set the opacity to 0 */
opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */
img.lazyloaded {
/* prepare the future animation */
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
/* we set the opacity to 1 to do the magic */
opacity: 1;
}

אם דפדפן האינטרנט של המשתמש אינו תומך במאפייני מעבר של CSS3, הקוד לא יעשה דבר.

תמונות בגדלים שגויים כאשר Lazy Load פעילה

לפעמים יכולה להיות התנגשות בין מציין המיקום של ה-SVG המשמש עבור LazyLoad לבין האופן שבו הדפדפן מטפל בכללי CSS שמשנים את גודל התמונות. התמונות עשויות להיראות בגודל שגוי אלא אם ישתנה גודל התצוגה.

הפתרון הוא לשנות את מציין המיקום המשמש עבור LazyLoad. ניתן לעשות זאת ע"י הוספת קטע הקוד הבא לקובץ פונקציות של תבנית הבת או בתוסף לניהול סניפטים:

function custom_wpr_lazyload_placeholder() {
return 'data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=';
}
add_filter( 'rocket_lazyload_placeholder', 'custom_wpr_lazyload_placeholder' );

הרחבת הפיצ'ר: הוספת מידות תמונה חסרות

כברירת מחדל, הפיצ'ר הוספת מידות תמונה חסרות לא יוחל על:

תמונות מאתרים חיצוניים, כלומר, תמונות שאינן מתארחות בדומיין שלכם
תמונות בתוך תגיות <picture>

אפשר לאלץ את הפיצ'ר להיות מיושם על אחת או שני סוגי התמונות האלה, על ידי שימוש בתוסף מסייע.

⚠️ החלת תכונה זו על תמונות שמתארחות חיצונית עשויה להגדיל את זמן יצירת המטמון.

שימו לב
נדרשת עריכת קוד ידנית לפני השימוש!

הורידו את קובץ ה-zip של תוסף העזר ואז פתחו אותו.
פתחו את קובץ ה-PHP בעורך טקסט.
כדי להחיל את התכונה על תמונות חיצוניות:
הסירו // בתחילת שורה 27
כדי להחיל על תמונות בתוך תגיות <picture>:
הסירו // בתחילת שורה 22
לאחר ביצוע העריכות, שמרו את קובץ ה-PHP
בצעו דחיסה מחדש לתיקיה. (Re-zip)
התקינו את תוסף העזר באתר – עברו אל תוספים → הוסף חדש → העלה תוסף ובחרו את קובץ ה-zip.
הפעילו את הפלאגין
נקו את המטמון של WP Rocket

ניקוי דומיין מלא

השתמשו בפונקציה rocket_clean_domain() כאשר אתם רוצים לנקות דומיין שלם מהמטמון, כלומר: ניקוי המטמון עבור כל האתר שלכם.

אם האתר שלכם הוא רב לשוני, ניתן לציין את השפה שיש לנקות.

// clean the default domain
rocket_clean_domain();// clean the English domain only
rocket_clean_domain( 'en' );

ניקוי מטמון לפוסט על פי ID

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

//clean post with ID 5
rocket_clean_post( 5 );

ניקוי מטמון לדף הבית

השתמשו בפונקציה rocket_clean_home() כאשר אתם רוצים לנקות את דף הבית של האתר מהמטמון.

אם האתר שלכם הוא רב לשוני, ניתן לציין את השפה לניקוי.

// clean home page
rocket_clean_home();// clean the English home page
rocket_clean_home( 'en' );

אי-הכללת סקריפטים של JS מ-Delay JavaScript רק בחלק מהדפים

תוסף עזר זה יאפשר לא לכלול קבצי JavaScript מאפשרות Delay JavaScript Execution רק בדפים ספציפיים במקום לא לכלול אותם באופן גלובלי.

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

לדוגמה, כאשר יש לך סליידר על 2 או 3 עמודים, מודאל על עמוד אחד וכו'.

שימו לב
נדרשת עריכת קוד ידנית לפני השימוש!

הורידו את קובץ ה-zip של תוסף העזר ואז פתחו אותו.
פתחו את קובץ ה-PHP בעורך טקסט.
ערכו שורה 35, שנו את ה-Slugs ("first-slug") לדפים שבהם ברצונכם להחיל את ההחרגות בלבד. אלו הן כתובות האתרים שבהן הסקריפטים לא יעוכבו. אפשר להוסיף עוד slugs לפי הצורך.
בשורה 62, הוסיפו את הסקריפטים שיש לא לכלול ב-Delay JavaScript רק בכתובות ה-URL שלעיל. כדי להוסיף מספר סקריפטים אתם יכולים לשכפל שורות אלה כמה פעמים לפי הצורך.
בצעו דחיסה מחדש לתיקיה.
התקינו את תוסף העזר באתר – עברו אל תוספים > הוסף חדש > העלה תוסף ובחרו את קובץ ה-zip.
הפעילו את הפלאגין.
נקו את המטמון של WP Rocket

טיפ בונוס

אם יש צורך לא לכלול סקריפטים על סמך כללים שונים, אתם יכולים להחליף את שורות 41 ו-42 בתנאים שונים, או להוסיף תנאים נוספים לפי הצורך, לדוגמה:

// Exclude scripts at the front page
is_front_page()// Exclude scripts at categories
is_category()

ניקוי מטמון כאשר הפרמלינק של הפוסט משתנה

שימוש ב-rocket_clean_files במקום rocket_clean_post מכיוון שכשנעשה שימוש ב-rocket_clean_post הפוסט המעודכן לא נטען מראש (באג).

// Fires before an existing post is updated in the database.
add_action( 'pre_post_update', function( $post_ID, $data ) {
// Compare slug, if changed clear cache.
if ( get_post_field( 'post_name', $post_ID ) != $data['post_name'] ) {
rocket_clean_files( get_the_permalink( $post_ID ) );
}
}, 10, 2 );

לינק לפוסט המקורי עם הקוד.

לטעון מראש אוטומטית את כל כתובות האתרים לאחר ניקוי כל המטמון באתר

/*** Preload all URLs after clearing all cache. ***/
add_action( 'after_rocket_clean_domain', function() {
run_rocket_bot();
run_rocket_sitemap_preload();
});

מקור וקוד נוסף מאותו הבלוג של הארי.

עוד פוסט שכדאי לבדוק של הארי, מאותו הבלוג, זה הקוד של "Tweaks" לתוסף WP-Rocket.

תיקונים ושיפצורים אחרונים לתוסף WP Rocket

בסניפט הבא, יש מספר פעולות שקורות, שכבר כתבנו עליהן למעלה
הסתרת המיתוג של WP Rocket, הסתרת מידע רישיון התוסף, הסתרת התגובת HTML של רוקט, הסתרת האפשרויות של התוסף בסרגל כלים העליון, הסתרת הכפתור "נקה מטמון מדף זה" בעמודים של וורדפרס, את הקוד הבא ניתן להוסיף לתוסף הסניפטים שלכם או לfunctions.php


/*** Clean Up WP Rocket ***/
add_action( 'init', function() {
// Hide account info.
defined( 'WP_ROCKET_WHITE_LABEL_ACCOUNT' ) or define( 'WP_ROCKET_WHITE_LABEL_ACCOUNT', true );
// Hide comment from HTML source code.
defined( 'WP_ROCKET_WHITE_LABEL_FOOTPRINT' ) or define( 'WP_ROCKET_WHITE_LABEL_FOOTPRINT', true );
// Remove "Cache options" metabox.
remove_action( 'add_meta_boxes', 'rocket_cache_options_meta_boxes', 10 );
// Remove "Clear cache" in the post submit area.
remove_action( 'post_submitbox_start', 'rocket_post_submitbox_start', 10 );// Clean from Admin Bar (top bar).
add_action( 'admin_bar_menu', function( $wp_admin_bar ) {
$wp_admin_bar->remove_node( 'purge-opcache' );
$wp_admin_bar->remove_node( 'docs' );
$wp_admin_bar->remove_node( 'faq' );
$wp_admin_bar->remove_node( 'support' );
}, PHP_INT_MAX );// Remove "Clear this cache" from Post list.
add_filter( 'post_row_actions', function( $actions ) {
unset( $actions['rocket_purge'] );
return $actions;
});// Remove "Clear this cache" from Page list.
add_filter( 'page_row_actions', function( $actions ) {
unset( $actions['rocket_purge'] );
return $actions;
});
});

מקורות נוספים

למשתמשי התוסף מטמון רוקט, עם העדכונים החדשים של רוקט, מאז שהציגו את הפיצ'ר של Remove Unused CSS & Delay all JS by default – עיכוב טעינת כל ה-JS כברירת מחדל והסרה של CSS שאינו בשימוש, מצריך ליצור לשני המקרים התאמה לתוספים שאנחנו משתמשים (ביניהם אלמנטור ותוספים משלימים לאלמנטור)

מצרף לינקים מתעדכנים של WP Rocket שבעצם מהווים מעין Safelist למניעת שגיאות JS ושגיאות CSS

אי הכללות תאימות לביצוע עיכוב טעינת JS

~~Safelist for Removed Unused CSS~~

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

נכון לכרגע, משתמש בכלי שפיתח תום טובאל – מחולל RUCSS Safelist שמחלץ את כל הקלאסים וה-ID מאלמנטים שנמצאים בגוף עמודי האתר על מנת לבצע החרגה בהגדרות התוסף.

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

המלצה להוסיף לכל כתובת את הפרמטרים שמבטלים את הטעינה של האופטימזציה של Rocket ?nowprocket=1 על מנת להציג את כל ה-HTML.

לסיכום:

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

#תגיות: WP-Rocket, אופטימיזציה

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

אליק זמליאנקין

אוהב אוטומציות ולהתייעל, מתעסק ב-PPC ו- SEO, לפעמים בונה אתרים בעזרת אלמנטור, נהנה ללמוד דברים חדשים בדיגיטל.

היכרות עם התוסף Doubly

אליק זמליאנקין 03/07/2022

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

לקריאת הפוסט

טיפ חברי: אל תאנדקסו את תוצאות החיפוש שלכם בגוגל

אליק זמליאנקין 06/09/2024

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