حذف کد های JS و CSS اضافه در افزونه های نصب شده وردپرس

حذف کد های JS و CSS اضافه در افزونه های نصب شده وردپرس

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

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

سرعت سایت هم یکی از موارد های مهمی می باشد که شما باید به آن توجه کنید چرا که سرعت پایین وب سایت باعث می شود که نرخ پرش و یا همان نرخ بازدید سایت شما کم شود و بازدیدکننده ها به دلیل اینکه سرعت سایت شما پایین است از سایت شما خارج شود و پس به همین دلیل شما باید سعی کنید که عملکرد سرعت سایت خود را در نظر داشته باشید.

راستی ! اگر که سرعت سایت شما بالا باشد شما می توانید رتبه خوبی از نظر موتور های جستجو برای سایت خود داشته باشید و آمار بازدید سایت خود را بالا ببرید و به این ترتیب شما می توانید وب سایت کسب و کار خودتان را نیز گسترش دهید و در آمد بیشتری از وب سایت خود داشته باشید و ما در این مقاله در میهن آکادمی به شما آموزش می دهیم که چطور می توانید کد های JS و CSS افزونه های سایت خود را کاهش دهید.

پلاگین های وردپرس چگونه کار می کنند :

همانطور که می دانید در میهن آکادمی یک مقاله ای کامل در مورد اینکه این افزونه های وردپرس چطور کار می کنند قرار داده ایم و شما می دانید که این افزونه های وردپرس شبیه به برنامه های برای سایت شما به حساب می آیند و شما این افزونه ها را مانند برنامه های که بر روی کامپیوتر نصب می کنید ، در سایت خود نصب می کنید تا بتوانید از امکانات آن ها استفاده کنید

با نصب یک افزونه شما می توانید از ساده ترین موارد به فرض مثال ، فرم های تماس با ما و گالری های تصاویر یا سنگین ترین آن ها یک فروشگاه با ووکامرس در سایت وردپرسی خود بسازید و نمایش دهید و در مرحله اول شما برای اینکه بتوانید در سایت خود از این افزونه ها استفاده کنید باید آن را در سایت خود بارگذاری کرده یا در سایت خود نصب کنید تا بتوان از آن ها استفاده کنید

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

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

تاثیر نصب پلاگین های وردپرس در سرعت سایت :

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

این افزونه های نصب شده علاوه بر اینکه حجمی بر روی هاست شما را اشغال می کنند نیز حجمی بر روی دیتابیس سایت شما را اشغال می کند که بتواند امکانات آن افزونه را در سایت شما بارگذاری یا لود کند ، این افزونه ها یک درخواست به دیتابیس شما می فرستند و بعد از آن دیتابیس شما هم یک درخواست به http شما برای اجرای آن بخش ارسال می کند و به همین دلیل سرعت بارگذاری سایت شما کاهش پیدا می کند و کند تر می شود

در ضمن باید در نظر داشته باشید که هر درخواست زمان بارگذاری سایت را افزایش می دهد و اگر که این عملیات در سایت شما به درستی انجام شده باشد ، این مورد باعث تاثیر چندانی بر عملکرد وب سایت شما نخواهد داشت و با این حال اگر که شما از چند افزونه به صورت همزمان استفاده می کنید باید تعداد زیادی از درخواست های http برای بارگذاری فایل ها ایجاد کند و در نهایت عملکرد نصب این افزونه ها برای تجربه کاربر تاثیر خواهد داشت

بررسی فایل های لود شده توسط افزونه های وردپرس :

حالا مهم ترین نکته اینجاست که باید بفهمید که این فایل های که در سایت ما توسط وردپرس لود می شوند به چه شکلی می باشد و بنابراین برای اینکه شما بتوانید این فایل های که توسط پلاگین یا افزونه های وردپرسی آپلود شده اند را مشاهده و بررسی کنید باید این کار را انجام دهید و این ابزار جزء ابزار های محبوب مرورگر گوگل کروم شما می باشد

انجام این مرحله بسیار ساده و آسان است و به سادگی می توانید زمان بارگذاری سایت خود را نیز مشاهده کنید و برای انجام این کار شما باید وارد سایت وردپرس خود شوید و در مرورگر سایت خود کلیک راست کرده و بر روی گزینه Inspect کلیک کنید و بعد از اینکه بر روی این دکمه کلیک کنید یک بخش مانند تصویر زیر برای شما نمایش داده می شود

خب حالا که بر روی دکمه inspect کلیک کردید و یک کادر مانند تصویر بالا به شما نمایش داده شد ، باید بر روی گزینه NetWork کلیک کنید تا فایل ها از جمله فایل های CSS تا فایل های JS برای شما نمایش داده شود و خیلی راحت می توانید آن فایل های که در سایت شما اجرا می شود را مشاهده کنید

هر افزونه دارای بی نهایت فایل برای اجرا می باشد :

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

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

خب این قسمت بالا در همان بخش inspect می باشد و شما زمانی که کلیک راست کردید و بر روی آن دکمه کلیک کردید در قسمت اول آن یعنی بخش Elements می توانید فایل های اجرا شده در سایت خود را مشاهده کنید و ببینید چه فایل های در سایت شما در حال لود و استفاده هستند و همه افزونه های که برای بهینه سازی سایت به شما کمک می کند تا بتوانید فایل های که شما لود کرده اید را حفظ کنند و با این روش که همه افزونه های وردپرسی دقیق نیستند

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

حذف فایل های JS و CSS اضافه افزونه های سایت وردپرس :

محبوب ترین چیزی که در سایت وردپرس می توانید انجام دهید و به آن توجه داشته باشید این است که فقط افزونه های را در سایت خود نصب و فعالسازی کنید که به درستی کد نویسی شده اند و اگر که سایت شما یک افزونه استفاده می کنید که تاثیرات منفی در سایت شما دارد باید سریع این افزونه را غیرفعال کرده و یک افزونه دیگر را جایگزین این افزونه کنید

اشتباه نکنید ! اگر که افزونه های حرفه ای نال شده یا کرک شده استفاده می کنید سریع آن را حذف و از سایت خود آن را پاک کنید تا باعث کم بود رم هاست سایت شما نشود چرا که این افزونه های نال باعث می شود عملکرد سایت شما را مختل و یا از بین ببرد و شما می توانید برای افزایش سرعت لود سایت خود از سرویس های کش و CDN استفاده کنید

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

بهینه سازی پلاگین های وردپرس به صورت دستی

کاربران پیشرفته مثل همیشه باید سعی کنند که این موضوع را در سایت خود به خوبی مدیریت کنند و اینکه چگونه فایل افزونه های مختلف وردپرس در سایت آن ها لود یا بارگذاری می شود و صد البته انجام این کار نیاز به داشتن کمی دانش برنامه نویسی و کمی مهارت برای اشکال زدایی می باشد و روش مناسب برای بارگذاری و یا لود اسکریپت های سایت و شیوه نامه ها در وردپرس استفاده از تابع Wp_Enqueue_Style and Wp_Enqueue_Script می باشد که مورد استفاده قرار می گیرد

اکثریت افرادی که به توسعه افزونه یا پلاگین های وردپرسی می پردازند از این فایل ها استفاده می کنند و همچنین وردپرس با استفاده از تابع های آسان اسکریپت و فایل های Style.css را لغو می کند

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

آموزش غیرفعال کردن CSS افزونه ها در وردپرس

خب برای اینکه شما بتوانید فایل های css خود را غیرفعال کنید باید اول از همه نام یا مدیر شیوه نامه که قصد لغو کردن آن را دارید را از طریق بخش Inspect گوگل خود تعیین کنید و پس از پیدا کردن فایل سی اس اس مورد نظر خود شما باید یک تکیه کد به فایل Functions.php قالب سایت خود فایل سی اس اس مورد نظر خود را غیرفعال کنید

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'mihanacademy-css' );
}

همانطور که شما می بینید بسیاری از Style ها که همانطور درون این تابع بنویسید و مجدد آن را لغو کنید که باز نمایش داده شود و به فرض مثال اگر که شما بیشتر از یک افزونه دارید که می خواهید شیوه نامه یا همان فایل Style.css لغو کردید می توانید آن را بازگشت دهید و در ضمن به یاد داشته باشید که با لغو کردن این کد های مشخص شده باز سرعت سایت شما کاهش پیدا می کند ، و تاثیرات کد ها از بین می رود و شما باید این فایل ها را از این کد بالا حذف نکنید

آموزش غیرفعال کردن JS افزونه ها در وردپرس

مانند توضیحات بالا ، شما در این قسمت نیاز است که برای لغو کردن فایل های جاوا اسکریپت در حال اجرا باید آن فایل ها را پیدا کرده و برای پیدا کردن این فایل ها شما باید بر روی ماوس خود کلیک راست کرده و از بخش Inspect در قسمت Element فایل های جاوا اسکریپت در حال اجرا را مشخص کرده و آن را به کمک کد نویسی در فایل Functions.php قالب سایت خود قرار دهید

function wpb_display_pluginhandles() {
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles');

خب حالا شما می توانید با استفاده از شورت کد [pluginhandles] برای نمایش لیست افزونه های خود استفاده کنید و حال اگر شما از می خواهید فقط یک فایل از افزونه مشخص را غیرفعال کردن که کد های جاوا اسکریپت آن نمایش داده نشود می توانید با استفاده از کد زیر آن را لغو کنید

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
 
function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

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

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
 
function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'mihanacademy-script' );
wp_deregister_script( 'another-plugin-script' );
}

نمایش فایل های افزونه مشخص روی صفحات سایت :

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

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
 
function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

با استفاده از کد بالا شما می توانید فقط و فقط فرم تماس با ما 7 را بر روی تمام صفحات یا برگه های مورد نظر بارگذاری می شود و به غیر این صفحه تماس با ما دیگر باقی اسکریپت ها غیرفعال می شوند.

موفق و سربلند باشید 👍