بهینه سازی فایل‌های CSS و JS در پلاگین‌های وردپرس

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

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

پلاگین چیست؟

پلاگین های وردپرس همانند برنامه های کاربردی سیستم عامل ها نظیر ویندوز، آندروید و IOS میباشد که شما با نصب آنها امکانات بیشتری در اختیار خواهید داشت. مثلا برای ویرایش عکس نصب فتوشاپ را ترجیح میدهید و یا برای استفاده از فضای ابری و پشتیبان گیری روی سیستم خود از GDrive استفاده میکنید و … پلاگین های وردپرس نیز دقیقا همین کارایی را برای یک سایت دارند. هنگامی که شما قصد دارید یک امکان اضافی روی سایت خود ارائه دهید، نیاز دارید تا پلاگین متناسب با نیاز خود تهیه و روی سایت وردپرسی خود نصب کنید. به عنوان مثال گالری تصاویر، سیستم کاربران سایت، قسمت تماس با ما، فروشگاه و …

عملکرد پلاگین ها به چه شکلی میباشد؟

هنگامی که یک سایت وردپرسی را باز میکنید بعد از لود سایت و فایل های اصلی، تمامی پلاگین های فعال بخش کاربری لود میگردند و امکاناتی که به سایت خود اضافه کرده اید نمایش و  یا قابل استفاده میگردد. مثلا وقتی شما پلاگینی جهت نمایش بهینه تصاویر روی وردپرس خود نصب میکنید که هنگام کلیک بر روی عکس ها با افکت جالب و یا انیمیشی آنها را نمایش دهد، فایل های CSS,JS پلاگین فوق بعد از لود شدن سایت لود میگردند و تصاویری که روی آنها کلیک میشود با افکت و یا تنظیماتی که در CSS,JS ها تنظیم شده است نمایش داده میشود.

پلاگین ها چطور میتوانند باعث کندی سایتهای وردپرسی گردند؟

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

چطور میتوانید فایل های لود شده توسط پلاگین ها در Front-End را مشاهده نمود؟

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

یکی ازبهترین ابزارهای بررسی این موارد، خود مرورگرها هستند. در مروگر Google Chrome برای اینکه بتوانید فایل های لود شده یک سایت را بررسی کنید میتوانید سورس آن سایت را بررسی کنید. ولی از این طریق بصورت ریل تایم نمیتوانید فایلهای لود شده را بررسی کنید. بدین منظور لازم هست از ابزار Inspect Element در این مرورگر استفاده کنید. برای این منظور در سایت مدنظر راست کلیک کنید و گزینه Inspect  را انتخاب کنید و همچنین از کلید های ترکیبی Ctrl+Shift+I نیز جهت مشاهده Inspect Element استفاده کنید.

بعد از لود شدن Inspect Element شما با کلیک بر تب Network میتوانید فایل های لود شده سایت را مشاهده کنید. برای این منظور بعد از لود شدن سایت و انتخاب گزینه Network باید مجددا صفحه را بارگذاری(Refresh) کنید تا فایل هایی که هنگام باز شدن سایت بارگزاری میگردد را مشاهده کنید.

 به تصویر زیر دقت کنید:

همانطوری که در تصویر فوق نیز مشاهده میکنید تمامی فایل هایی که لود میگردد قابل مشاهده میباشد. شما از این قسمت میتوانید فایل هایی که باعث لود دیرتر سایت شما میگردد را پیدا کنید. در ردیف Waterfall مدت زمانی که طول میکشد تا این فایل بصورت کامل بارگذاری گردد را نشان میدهد. همچنین در این قسمت از طریق تب Type میتوانید نوع فایل لود شده را مشاهده کنید. بدین ترتیب راحتر میتوانید فایل های مربوط به CSS,JS پلاگین ها را پیدا کنید. البته ضروری نیست آنها را پیدا کنید. فقط میتوانید چک کنید فایل یا بخشی در این قسمت هست که باعث دیر لود شدن سایت شما میشود یا خیر؟ همچنین در تب Size نیز میتوانید سایز فایل مدنظر را مشاهده کنید. با کلیک بر روی تب سایز میتوانید مرتب سازی را تغییر داده و مشاهده کنید که کدام فایل ها دارای حجم بیشتری میباشند. البته در برخی موارد ممکن است که سایز فایل مدنظر را نمایش ندهد و به جای آن From Memory Cache و یا From Disk Cache مشاهده کنید. این کلمات بدین معنی میباشد که فایل های لود شده از طریق نتورک لود نمیگردد و کش شده اند و در نتیحه دارای سایز قابل نمایش نمیباشند. برای مشاهده سایز این فایل ها با چندبار انتخاب ترکیبی Ctrl+F5 میتوانید فایل ها را مستقیم از سایت لود و سایز آنها را بدون کش مشاهده کنید.

در صورتی که برای یک پلاگین در این قسمت بیشتر از 5 فایل مشاهده میکنید، بهتر است که فایل ها را با دقت بررسی کنید و در صورت نیاز پلاگین جایگزین استفاده کنید. بهترین پلاگین ها معمولا کمتر از 5 فایل به سایت اضافه میکنند و در نتیجه تاثیر کندی زیادی روی سایت شما نمیگذارند.

غیر فعال کردن استایل های لود شده توسط پلاگین ها

در صورتی که علاقه دارید فایل های استایل پلاگین ها را غیرفعال کنید، ابتدا بایستی آنها را شناسایی کنید. برای این منظور لازم هست در قسمت Inspect وارد تب Elements  شوید و استایل های لود شده را پیدا کنید. برای راحتی بیشتر میتوانید قسمتی از صفحه را انتخاب کنید و سپس Inspect را انتخاب کنید تا مستقیم وارد بخش Elements شوید. به عنوان مثال در صورتی که علاقه دارید استایل های اضافی پلاگین Contact را غیر فعال کنید در سایت خود وارد این صفحه شده و با راست کلیک کردن در قسمتی از صفحه و Inspect گرفتن از آن فایل استایل های لود شده توسط این پلاگین را میتوانید مشاهده کنید.

بعد از پیدا کردن فایل های لود شده توسط پلاگین مدنظر میتوانید لود شدن آن را غیرفعال کنید. بدین منظور باید یک تکه کد به فایل Function.php سایت وردپرسی خود اضافه کنید و کدهای زیر را وارد کنید.

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

دقت کنید در این کد بایستی به جای fsp_styles-css کلید ID فایل css مدنظر که توسط پلاگین تحت بررسی اضافه شده است را وارد کنید. به عنوان مثال به خط زیر دقت کنید

<link rel="stylesheet" id=" fsp_styles-css " href="https://asset.faraso.org/test.css" media="all">

همانطوری که در کد فوق نیز مشاهده میکنید ID فایل استایلی که پیشتر در function.php غیر فعال کرده ایم برابر است با :

fsp_styles-css

در نظر داشته باشید که در کد بالا غیرفعال سازی فایل های CSS، میتوانید تعداد بیشتری از آنها را وارد کنید همانند کدهای زیر

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'fsp_styles-css' );
wp_deregister_style( 'fsp_contact' );
wp_deregister_style( 'fsp_gallery );

}

بدین ترتیب میتوانید تمامی فایل های Css که احساس میکنید باعث کند شدن لود سایت شما میگردد را شناسایی و آنها را با تکه کد ساده غیرفعال کنید.

غیرفعال کردن فایلهای JS

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

در صورتی که با روش ذکر شده برای CSS توانستید فایل های JS لود شده را شناسایی کنید میتوانید آنها را طبق روشی که در ادامه معرفی خواهد شد غیرفعال کنید. در غیر اینصورت میتوانید تکه کد زیر را در فایل function.php خود قرار دهید تا نام فایل های JS را در خروجی Inspect مشاهده کنید.

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'); 

بعد از وارد کردن تکه کدهای فوق در function.php میتوانید با استفاده از شورت کد  [pluginhandles] در هر صفحه ای که مدنظراست، لیست تمامی فایل های جاوا اسکریپت را که لود شده اند مشاهده کنید.

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

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

در کدهای فوق به جای contact-form-7 بایستی نام فایل جاوا اسکریپت مدنظر را وارد کنید. همچنین در صورتی که نیاز دارید چند فایل را بصورت همزمان غیرفعال کنید، همانند مثال CSS میتوانید در هر سطر یک فایل JS را جهت غیرفعال سازی انتخاب کنید. به عنوان مثال:

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' );
}

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

برای فعال کردن یک فایل JS در یک صفحه تکه کد زیر را در فایل function.php وارد کنید.

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

دقت کنید در مثال فوق contact-form-7 به عنوان فایل JS مدنظر میباشد، که قصد داریم در صفحه مدنظر لود آنرا فعال کنیم. صفحه ای که قصد داریم این JS فعال گردد Contact میباشد که شما میتوانید این صفحه را مطابق با سلیقه خود و پلاگین مدنظر فعال کنید. همچنین منظور از صفحه Contact در این مثال همان “نامک” میباشد که هنگام ایجاد برگه در وردپرس شما میتوانید آنرا تعیین کنید و به عنوان لینک صفحه نیز معرفی میگردد.

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