איך להסיר קבצי CSS ו JS הנטענים על ידי תוספים ותבניות

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

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

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

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

מפתחי אותן תבניות מנסים לכוון לקהל כמה שיותר רחב. תבניות אלו מכילות המון אפשרויות וסוגי אלמנטים, ומכאן המון קבצי JavaScript ו-CSS שלא בהכרח נחוצים.

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

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

מצאו את מזהה הנכס (Handle)

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

• בדקו את תגית ה-<link> או <script> בקוד המקור של העמוד
• מצאו את קוד המקור האחראי לטעינת הנכס

הדרך הפשוטה ביותר היא לבדוק את קוד ה-HTML של העמוד. למשל, נניח שאתם רוצים לבטל את טעינת קובץ ה-CSS של התוסף Contact Form 7. מבט ב-HTML יראה לנו markup דומה לזה:

<link rel='stylesheet' id='contact-form-7-css' href='https://savvy.co.il/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.0.6' type='text/css' media='all' />

תכונת ה-id מציגה contact-form-7-css. אבל זהו אינו ה-handle האמיתי. וורדפרס מוסיפה את המחרוזת -css ל-handle של קבצי CSS ואת המחרוזת -js לסקריפטים באופן אוטומטי.

כך שה-handle האמיתי של הקובץ הוא contact-form-7. אם נסתכל על קובץ ה-JavaScript שתוסף זה טוען:

<script type="text/javascript" src="https://savvy.co.il/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.0.6" id="contact-form-7-js"></script>

ה-handle של הסקריפט הוא גם כן contact-form-7. במקרה זה ה-handle של קובץ ה-CSS וקובץ ה-JavaScript זהים, אך אין זה מחייב כלל עם תוספים אחרים.

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

כיצד למנוע את טעינת הקבצים?

ברגע שיש לכם את ה-handle, הסרת הנכס פשוטה. בהמשך לדוגמה של Contact Form 7, הוסיפו את הקוד הבא לקובץ functions.php של התבנית שלכם (או עדיף – ל-functions.php של תבנית בת):

function sv_disable_scripts_styles() {
    wp_dequeue_style( 'contact-form-7' );
    wp_dequeue_script( 'contact-form-7' );
}
add_action( 'wp_enqueue_scripts', 'sv_disable_scripts_styles', 100 );

עבור קבצי עיצוב אנו משתמשים בפונקציה wp_dequeue_style() ועבור סקריפטים אנו משתמשים בפונקציה wp_dequeue_script().

במקרה של התוסף Contact Form 7 ספציפית, מפתח התוסף הוסיף פילטרים מובנים להשבתת הנכסים. תוכלו למנוע את טעינתם על ידי הוספת הקוד הבא במקום:

function sv_remove_cf7_assets() {
    add_filter( 'wpcf7_load_css', '__return_false' );
    add_filter( 'wpcf7_load_js', '__return_false' );
}
add_action( 'wp', 'sv_remove_cf7_assets' );

אם אתם רוצים לקחת את האופטימיזציה של CF7 צעד נוסף, עיינו במדריך שלנו על אופטימיזציה של Contact Form 7 לביצועים טובים יותר.

Dequeue מותנה

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

לדוגמה, הקוד הבא מסיר את הנכסים של Contact Form 7 מכל העמודים מלבד כאלו המשתמשים בתבנית עמוד ספציפית:

function sv_disable_scripts_styles() {
    if ( ! is_page_template( 'contact-template.php' ) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'sv_disable_scripts_styles', 100 );

תוכלו להשתמש בכל תגית תנאי של וורדפרס: is_front_page(), is_single(), is_page(), is_post_type_archive() ועוד.

Dequeue לעומת Deregister

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

• wp_dequeue_style() / wp_dequeue_script() – מסירים את הנכס מטעינת העמוד הנוכחי, אך שומרים אותו רשום בוורדפרס. תוסף או תבנית אחרים יכולים עדיין לטעון אותו מחדש.
• wp_deregister_style() / wp_deregister_script() – מסירים את הנכס לחלוטין מהרישום של וורדפרס. לא ניתן לטעון אותו שוב אלא אם ירשם מחדש.

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

function sv_fully_remove_asset() {
    wp_dequeue_style( 'some-handle' );
    wp_deregister_style( 'some-handle' );
}
add_action( 'wp_enqueue_scripts', 'sv_fully_remove_asset', 100 );

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

אם אתם רוצים ללמוד על מערכת ה-enqueue המלאה, כולל איך לטעון נכונה סקריפטים וקבצי עיצוב משלכם, עיינו בפוסט שלנו על הוספת נכסים (קבצי JavaScript ו-CSS) באתרי וורדפרס.

שאלות נפוצות

שאלות נפוצות בנושא הסרת קבצי CSS ו-JS בוורדפרס:

סיכום

תוספים ותבניות טוענים לעתים קרובות קבצי CSS ו-JavaScript בכל עמוד באתר הוורדפרס שלכם, גם היכן שאין בהם צורך. השתמשו ב-wp_dequeue_style() וב-wp_dequeue_script() עם ה-handle הנכון ו-priority גבוה כדי להסיר נכסים מיותרים. שלבו עם תגיות תנאי כדי לשמור נכסים רק בעמודים שבאמת צריכים אותם. זהו אחד הצעדים היעילים ביותר שאתם יכולים לנקוט כדי לצמצם בקשות HTTP ולשפר את זמן הטעינה של האתר.