אחד הדברים המציקים ביותר בוורדפרס הוא תוספים ותבניות הטוענים סקריפטים וקבצי עיצוב (CSS & JS) משלהם ללא בדיקה או תנאי הקובע אם יש בכלל צורך לטעון אלו. לדוגמה מצב בו התקנתם תוסף הרלוונטי רק לממשק הניהול של וורדפרס שטוען את הסקריפטים שלו גם ב frontend (בעמודי האתר עצמו).
זו רק דוגמה אחת, תוספים טוענים נכסים אלו ללא תנאי ונוצר מצב בו קבצי ה JavaScript וה CSS נטענים בכל עמוד ועמוד באתר שלכם. כשמדברים על תבניות קנויות אז המצב אף הרבה גרוע יותר. תבניות אלו טוענות מספר רב של נכסים לאורך האתר ללא תלות כשלהי או בדיקה אם כלל יש צורך באלו.
מפתחי אותן תבניות מנסים לכוון לקהל כמה שיותר רחב, ולכן תבניות אלו מכילות המון אפשרויות והמון סוגים של אלמנטים, ומכאן המון קבצי JavaScript ו CSS שלא בהכרח נחוצים.
מכיוון ומפתח התבנית אינו יודע באיזה אלמנטים בעל האתר מתכוון להשתמש, הוא טוען את כל הנכסים כך שפונקציונליות התבנית תעבוד עבור כל אלמנט בתבנית שבעל האתר יחליט להשתמש בו.
לשמחתנו, וורדפרס מאפשרת דרך מאד פשוטה להסיר נכסים שאינם נחוצים בעזרת הפונקציות wp_dequeue_style ו wp_dequeue_script. הסרת קבצי JavaScript ו CSS שאינם נחוצים היא פעולה הכרחית בתהליך האופטימיזציה לביצועים ושיפור זמן הטעינה של אתרי וורדפרס. בואו נראה כיצד לעשות זאת.
מצאו את מזהה הנכס (ID)
השלב הראשון שעליכם לעשות הוא למצוא את המזהה הייחודי של אותו קובץ CSS (או סקריפט) שאתם רוצים להסיר. ניתן לעשות זאת במספר דרכים, הנה שניים מהם:
- בדקו את תגית ה
<style>או את תגית ה<script> - מצאו את קוד המקור האחראי לטעינת הסקריפט
הדרך הפשוטה ביותר למציאת המזהה הוא לבדוק את תגית ה <style> או <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=5.9.3' type='text/css' media='all' />ניתן לראות שה ID של אותו קובץ הוא contact-form-7-css. פשוט? כמעט… זהו אינו ה ID האמיתי של אותו קובץ וזאת מכיוון ווורדפרס מוסיפה את המחרוזת -css ל ID המקורי של קבצי CSS. בהקשר של סקריפטים וורדפרס תוסיף את המחרוזת -js.
מכאן, שה ID המקורי של הקובץ המדובר הינו contact-form-7. אם נסתכל על קובץ ה JS שתוסף זה טוען נראה את הקוד הבא:
<script type="text/javascript" src="https://savvy.co.il/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.3" id="contact-form-7-js"></script>מניח שכבר ברור שה ID המקורי של קובץ זה הינו גם כן contact-form-7 ואלו אותם ID שעליכם לזכור בכדי למנוע את הטעינה של קבצים אלו.
במקרה זה ה ID של קובץ ה CSS וקובץ ה JavaScript זהים, אך אין זה מחייב כלל. כך או כך, כעת כשברשותינו המזהה של קבצים אלו, בואו נראה כיצד למנוע את הטעינה שלהם…
בהתאם לגירסת התוסף בה אתם משתמשים ייתכן והתוסף טוען קבצים נוספים. תוכלו למצוא אלו בקלות על ידי מבט ב HTML ובשם התיקייה ממנה נטען קובץ כזה או אחר.
כיצד למנוע את טעינת הקבצים?
הסרת הקבצים מאד פשוט ברגע שיש לנו את המזהה שלהם. אם נמשיך עם הדוגמה של Contact Form 7, המזהה של קובץ ה JavaScript וקובץ ה CSS היו זהים ובשם contact-form-7. לכן, בכדי להסיר אותם עלינו להוסיף את הקוד הבא לקובץ functions.php:
// prevent contact form 7 script & style from loading
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 קיים פילטר שמפתח התוסף הוסיף בכדי לחסוך מכם את התהליך. תוכלו למנוע את טעינת אותם נכסים בפשטות על ידי הוספת הקוד הבא לקובץ functions.php:
function removeCf7Scripts() {
add_filter( 'wpcf7_load_css', '__return_false' );
add_filter( 'wpcf7_load_js', '__return_false' );
}
add_action( 'wp', 'removeCf7Scripts' );
שימו לב, פעולות אלו למניעת טעינת הנכסים, בין אם באמצעות הפילטר או ידנית כפי שתיארנו בהתחלה יסירו קבצים אלו מכל עמוד ועמוד באתר.
במרבית המקרים, תרצו להסיר אלו רק בעמודים ספציפים ולכן עליכם להשתמש בתנאי כלשהו. למשל, הדוגמה הבאה תסיר את הקבצים של Contact Form 7 מכל העמודים חוץ מכאלו המשתמשים בתבנית עמוד הנקראית contact-template.php:
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);עד כאן. אם אגב אתם מעוניינים לדעת איך טוענים קבצי JavaScript ו CSS באתרי וורדפרס אז תנו מבט בפוסט הבא.
