چگونه افزونه های وردپرس روی سرعت لود وبسایت شما تاثیر می گذارند؟ - قسمت دوم

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

اغلب کاربرهای حرفه ای وردپرس می توانند تعیین کنند که چگونه فایلهای مربوط به افزونه آنها روی وبسایت بارگذاری شود. برای انجام دادن این عملیات شما احتیاج به داشتن دانش درباره کد ها و دیباگ «رفع عیب» کردن آنها دارید. بهترین راه برای اضافه کردن کدهای سی اس اس و جاوا اسکریپت در وردپرس استفاده از تابع های زیر است.

wp_enqueue_style
wp_enqueue_script

اکثر توسعه دهندگان افزونه های وردپرس برای لود کردن فایل های اسکریپت و استایل مربوط به افزونه خود از این دستورات استفاده می کنند. وردپرس همچنین دستور هایی را برای جلوگیری از این کار ارائه داده است. به هر حال اگر شما از لود کردن این فایل ها داخل وردپرس جلوگیری کنید، افزونه شما با شکست مواجه خواهد شد و به درستی کار نخواهد کرد. برای حل کردن این مشکل هم راهکاری بسیار عالی وجود دارد. راهکار اینست که فایلهای استایل و  اسکریپت مربوط به افزونه ها را به قالب وردپرسی خود اضافه بکنید. این کار کمک می کند که کل اطلاعات مربوط به هر چیزی که برای لود شدن وبسایت شما لازم است، در یک آن لود شود. این کار همچنین باعث می شود که تعداد درخواست ها به پروتوکل انتقال HTTP کمتر شود و در نتیجه سرعت لود وبسایت شما افزایش یابد.
خب بزارید که بهتر با این آیتم آشنا شویم و با آن بتوانیم بهتر کار کنیم.

غیر فعال کردن استایل مربوط به افزونه در وردپرس

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

بعد از انجام اینکار شما باید کد زیر را به فایل function.php پوسته وردپرسی تان اضافه کنید.

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

راهنمایی:  gdwpm_styles-css آی دی مربوط به فایل سی اس اس است.
شما همچنین می توانید که چندین فایل سی اس اس را به صورت همزمان در این پروسه قرار دهید، به مثال زیر توجه کنید:

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

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

غیر فعال کردن جاوا اسکریپت مربوط به افزونه در وردپرس

درست مانند کاری که در قبل روی فایل های سی اس اس انجام دادید باید کدهای جاوا اسکریپت را نیز پیدا و مدیریت کنید. البته پیدا کردن این فایل ها با استفاده از ابزار  inspect امکان پذیر نیست. برای پیدا کردن آن قسمتی که به کمکش فایلهای جاوا اسکریپت لود می شوند، باید نگاه دقیق تری به فایل های افزونه بزنیم. خب اینکار شاید کمی سخت و زمان بر باشد، برای همین یک راه آسان تر برای اینکار وجود دارد. استفاده از فایل function.php مربوط به قالب می تواند کمک خوبی برای پیدا کردن افزونه هایی که فایلهای جاوا اسکریپت را هنگام اجرا لود می کنند، باشد. برای اینکار کدهای زیر را به فایل function.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( 'gdwpm_lightbox-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' );
}
}

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

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