حذف فایل های اضافی برای افزایش سرعت صفحات وردپرس

یکی از راه های افزایش سرعت صفحات وردپرس، حذف فایل های اضافی JS,CSS در هنگام بارگذاری صفحات وب سایت است.

زمانی که یک صفحه از سایت وردپرس باز می شود، یکسری فایل های CSSوJS که توسط قالب یا افزونه های وردپرس اضافه شده اند در حال بارگذاری هستند. گاهی اوقات در برخی از صفحات سایت نیازی به وجود این فایل ها نیست. برای همین بهتر است از روشی که در ادامه به شما می گویم استفاده کنید و تا جای ممکن حجم صفحات سایت خود را به کمک این روش کم کنید تا کاربران تجربه بهتری در استفاده از سایت شما داشته باشند.

افزایش سرعت صفحات وردپرس و بهبود سئو سایت

همانطور که می دانید سرعت سایت ارتباط مستقیم با سئو دارد. هر چه قدر که سرعت بارگذاری صفحات وب سایت شما بالا باشد طبیعتا رتبه بهتری هم در موتورهای جستجو پیدا می کنید.

برای افزایش سرعت صفحات وردپرس راه های بسیار زیادی وجود دارد که شامل برخی از موارد زیر است:

• کاهش حجم تصاویر
• کش کردن صفحات سایت
• استفاده از یک پوسته سریع و سبک وردپرس
• استفاده از افزونه های افزایش سرعت سایت
• و …

موارد بالا راه هایی می باشد که به افزایش سرعت سایت کمک شایانی می کند. اما من در این مقاله قصد دارم روشی را که خودمان برای افزایش سرعت سایت مشتریان خدمات پشتیبانی وردپرس نیکان وردپرس انجام میدهیم را به شما بگویم تا در نهایت سرعت سایت شما هم افزایش پیدا کند.

نحوه بررسی حجم فایل های CSS و JS در هر صفحه سایت

همانطور که در تصویر بالا مشاهده می کنید، من به کمک ابزار Inspect مروگر گوگل کروم و تب Network تونستم فایل های css و js که در صفحه اول وب سایت نیکان وردپرس در حال بارگذاری هستند را پیدا کنم.

در تصویر بالا من با 3 رنگ بندی مختلف مشخص کردم که چه فایل هایی در حال بارگذاری شدن هستند(Name) و در نهایت سایز(Size) و مدت زمانی(Time) که مروگر منتظر دریافت این فایل ها می ماند چقدر است.

حالا شما حساب کنید که یک یا چند فایل CSS یا JS که در حال بارگذاری هستند هیچ استفاده ای در آن صفحه نمی شوند و بارگذاری شدنشان در هر صفحه باعث کاهش لود سرعت سایت می شود.

قطعا اگر از طریق این روش سری به یکسری صفحات سایت خود مثل حساب کاربری بزنید، متوجه خواهید شد که چرا باید در یک صفحه که فقط یک فرم ورود یا عضویت قرار گرفته است فایل های CSS و JS بالااستفاده بارگذاری شود.

نحوه حذف فایل های اضافی وردپرس برای افزایش سرعت وردپرس

نکته: قبل از هر چیزی باید بدانید منظور من از حذف فایل های اضافی، پاک کردن خود فایل نیست و صرفا جلوگیری کردن از لود شدن یا بارگذاری این فایل ها در یکسری صفحات است که به بارگذاری آن ها احتیاجی نیست.

برای اینکه بتوانید فایل های CSS و JS بارگذاری شده در هر صفحه را به شکل ساده تری پیدا کنید راه های مختلف یا شاید ساده تری هم وجود داشته باشد. اما روشی که در این مقاله گفته میشه از طریق قرار دادن یک کد آماده در قالب وب سایت است.

برای شروع کافیه که وارد پوشه قالب فعال سایتتان شوید و فایل functions.php را باز کنید و تکه کد زیر را در انتهای آن اضافه کنید:

نکته مهم: حتما روی لوکال هاست این کار رو انجام بدید و یا اگر قصد دارید به صورت زنده در سایتتان این کار رو انجام بدید به کمک تابع is_admin کد زیر را شرطی کنید تا فقط خودتان خروجی را مشاهده کنید.

/**
 * Finding css and js for dequeue pages
 * */
function nikanwp_display_script_handles() {
	global $wp_scripts;
	echo '<pre>';
	foreach( $wp_scripts->queue as $handle ) :
		$obj = $wp_scripts->registered [$handle];
		echo $filename = $obj->src;
		echo ' : <b>Handle for this script is:</b> <span style="color:green"> '.$handle.'</span><br/><br/>';
	endforeach;
	echo '</pre>';
}
add_action( 'wp_print_scripts', 'nikanwp_display_script_handles' );
function nikanwp_display_style_handles() {
	global $wp_styles;
	echo '<pre>';
	foreach( $wp_styles->queue as $handle ) :
		$obj = $wp_styles->registered [$handle];
		echo $filename = $obj->src;
		echo ' : <b>Handle for this script is:</b> <span style="color:green"> '.$handle.'</span><br/><br/>';
	endforeach;
	echo '</pre>';
}
add_action( 'wp_print_styles', 'nikanwp_display_style_handles' );

بعد از این که کد بالا را قرار دادید کافیست هر کدام از صفحات سایت را که مد نظرتان هست را باز کنید و مشابه تصویر زیر فایل های CSS و JS که توسط قالب وردپرس یا افزونه های استاندارد وردپرس اضافه شده اند را ببینید.

فایل های CSS در وردپرس به کمک تابع wp_enqueue_style و فایل های JS با تابع wp_enqueue_script به قالب ها و افزونه های استاندارد وردپرس اضافه می شوند.

به صورت پیش فرض ورودی اول هر دو تابع یک نام یونیک هست($handle) که به کمک آن میتوان فایل ها را شناسایی کرد.

بنابراین توابع یا تکه کدی که گفتم در فایل functions.php بگذارید با استفاده از همین handle خروجی گرفته شده است. پس اگر فایلی در وردپرس به کمک این تابع استاندارد وردپرس اضافه نشده باشد. باید به صورت دستی این فایل ها را پیدا کنید.

در ادامه باید به سراغ اصل ماجرا برویم. یعنی حذف یا عدم نمایش فایل های CSS و JS در صفحاتی که به آن ها احتیاجی نداریم.

برای انجام این کار دست شما باز است. من به شما یک نمونه کد و راهنمای استفاده را قرار میدهم و در نهایت می توانید به کمک توابع شرطی وردپرس این تکه کد را متناسب با نیاز کار خود تغییر یا توسعه دهید.

/**
 * Restrict scripts and styles
 */
function nikanwp_conditionally_load_js_css(){
	wp_dequeue_script('handle');
	wp_dequeue_style('handle');
	
}
add_action( 'wp_enqueue_scripts', 'nikanwp_conditionally_load_js_css' );

تکه کد بالا یک مثال ساده است که شما می توانید آن را توسعه دهید. اما برای توضیح بیشتر باید به شما بگویم که من یک تابع به اسم nikanwp_conditionally_load_js_css نوشتم که به wp_enqueue_scripts قلاب شده است.

داخل این تابع از توابع پیش فرض وردپرس: wp_dequeue_script و wp_dequeue_style استفاده شده است. کار این دو تابع حذف فایل های css و js است.

برای حذف فایل ها کافیست در ورودی هر تابع نام یا handle هر فایل را که در هر صفحه مشخص شده است را وارد کنید تا آن فایل حذف شود.

حالا شما میتونید از این دو تابع در کنار توابع شرطی وردپرس هم استفاده کنید. برای مثال اگر شما بخواهید یک فایل را در صفحه حساب کاربری وردپرس برای کاربرانی که وارد نشده اند لود نکنید کافیست از تابع is_user_logged_in() استفاده کنید.

برای درک بیشتر می توانید از تکه کد زیر الگو برداری کنید:

/**
 * Restrict scripts and styles
 */
function nikanwp_conditionally_load_js_css(){
	wp_dequeue_script('rank-math');
	
	if(is_account_page() and ! is_user_logged_in()){
		wp_enqueue_script( "page-min-js", NW_THEME_URI . "assets/js/page-min.js", array( "jquery" ), NW_THEME_VERSION, true );
	    wp_enqueue_script( "script-js", NW_THEME_URI . "assets/js/script.js", array( "jquery" ), NW_THEME_VERSION, true );
		wp_enqueue_script( "api-js", NW_THEME_URI . "assets/js/api.js", array( "jquery" ), NW_THEME_VERSION, true );
		wp_enqueue_script( "recaptcha__fa", NW_THEME_URI . "assets/js/recaptcha__fa.js", array( "jquery" ), NW_THEME_VERSION, true );
		
    }
	
    //Restrict js
    if(!is_account_page() || is_user_logged_in()){
	    wp_dequeue_script('iwp-ajax-account');
    }

    if(!is_account_page()){
	    wp_dequeue_script('wpst-theme-script');
	    wp_dequeue_script('wpst-admin-uploader');
    }

    if( !is_single() || is_product()){
	    wp_dequeue_script('kk-star-ratings');
	    wp_dequeue_style('kk-star-ratings');
    }

    if( is_account_page() || is_product() || is_home() || is_cart() || is_checkout()){
	    wp_dequeue_script('dwqa-attachments-button-upload-script');
	    wp_dequeue_script('dwqa-akismet-button-report-spam-script');
	    wp_dequeue_script('dwqa-mention-user-script');
	    wp_dequeue_script('woocommerce');
	    wp_dequeue_style('dwqa-font-awesome');
	    wp_dequeue_style('dwqa-style');
	    wp_dequeue_style('dwqa-style-rtl');
	    wp_dequeue_style('dwqa-attachments-style');
	    wp_dequeue_style('dwqa-akismet-button-report-spam-style');
	    wp_dequeue_style('dwqa_leaderboard');
	    wp_dequeue_style('ez-toc');
    }
	wp_dequeue_script('rank-math');
	wp_dequeue_style('rank-math');
}
add_action( 'wp_enqueue_scripts', 'nikanwp_conditionally_load_js_css' );

استفاده از این روش برای افزایش سرعت صفحات وردپرس به افرادی توصیه میشود که با برنامه نویسی PHP آشنایی دارند.