سرعت سایت رو با حذف کدهای اضافی js و css افزایش دهید !
- آموزش • آموزش وبمستر
- ۱۵ فروردین ۱۴۰۲
- 2,222 بازدید
همیشه گفتیم که سرعت یکی از مهم ترین شاخصه های هر وبسایت موفقه ! فرض کنید سرعت سایت دیجی کالا بالای 10 ثانیه بود . یعنی برای دیدن یکی از صفحاتش باید حدود 12 ثانیه منتظر بمانیم . آیا شما واقعا منتظر میمانید تا وبسایت آن این همه مدت از شما رو بگیره ! قطعا توی همون چند ثانیه اول خسته میشوید و بیخیال دیدن صفحات میشید . در نتیجه کاربران تون کم میشدند . پس از آن فروش شما کاهش شدیدی پیدا میکنه . در نهایت هم چندان موفق نخواهید بود . اما وبسایت بزرگی مانند دیجی کالا ، یکی بهترین شاخصه های آن سرعت آن است . علاوه بر تجربه کاربری و رابط کاربری فوق العاده ایی که داره ، سرعت بی نظیری داره . یعنی نیاز نیست بالا چندین ثانیه منتظر بمانیم . در ثانیه دوم کل صفحه برای ما لود شده است !
آنچه در این پست میخوانید
افزایش سرعت سایت با حذف اضافیات !
این مقدمه چینی رو بالاتر انجام دادم تا بگم سرعت یکی از مهم ترین ارکان وبسایته ! درکنار امنیت و سئو باید به سرعت سایت هم اهمیت بدهید . در طول مدت زمان طولانی هم باید حواستان باشد تا سرعت سایت کاهش نداشته باشد . بلکه روز به روز سرعت آن افزایش یابد . یکی از عواملی که باعث افزایش سرعت وبسایت میشود ، حذف کردن کدهای اضافی است که بروی صفحات لود میشوند . برخی افزونه ها ، به صورت پیش فرض کدهای سی اس اس و جاوااسکریپتی رو به صفحات ما الحاق میدهند که این باعث میشود صفحات وبسایت ما در هنگام لود شدن ، اونهارو هم لود کنه . در نتیجه سرعت کلی وبسایت کاهش میابد . توی این مقاله از وبیت میخواهیم راجب این صحبت کنیم که چطوری کدهای اضافی و فایل های اضافی رو از صفحاتتون حذف کنید .
حذف CSS و JS اضافی افزونه وردپرس
همیشه سعی کنید از افزونه های اصل و نصب دار استفاده کنید . منظورم افزونه هایی است که نال نباشد ! همچنین کدهای تر تمیز و خوبی داشته باشد . نه اینکه کدهای بهم ریخته و مخرب آن باعث فروپاشی وبسایت شود . در نتیجه باید از سایتهای معتبر افزونههای خود را دریافت کنید. چراکه افزونههای نال شده عملکرد سایت شما را مختل میکنند. برای راهنمایی بیشتر ، شما میتوانید جهت بهبود عملکرد و سرعت سایت خود از Caching و CDN استفاده کنید.
بهینهسازی افزونه وردپرس بهصورت دستی
اون دسته از وبمسترانی که به کدنویسی و برنامه نویسی وردپرس یا همون توسعه دهندگی وردپرس علاقه مند هستند ، باید سعی کنند این موضوع را مدیریت کنند که چگونه فایل افزونههای مختلف در سایت آنها بارگذاری میشود. همانطور که میدانید برای انجام همین کار ، نیاز به داشتن دانش برنامهنویسی و مهارت دیباگ دارید. روش مناسب برای بارگذاری اسکریپتها و شیوهنامه در وردپرس توسط تابع Wp_Enqueue_Style و Wp_Enqueue_Script مورداستفاده قرار میگیرد.
غیرفعال کردن CSS افزونه در وردپرس
غیرفعال کردن سی اس اس های یک افزونه ، واقعا میتونه به وبسایت ما برای افزایش سرعت آن کمک کند. این کار کاملا اساسیه ! چون با حذف این کدها ، وبسایت ما دیگه نیاز به لود آنها ندارد . در نتیجه میتوانیم سرعت سایت را افزایش دهیم . برای انجام این کار در مرحله اول شما لازم است نام یا مدیر شیوهنامهای که قصد لغو کردن آن را دارید را پیدا کنید. شما میتوانید با استفاده از ابزار Inspect مرورگر خود آن را تعیین کنید. پس از پیدا کردن مدیریت شیوهنامه، شما میتوانید با اضافه کردن این کد به فایل functions.php قالب خود یا یک افزونه سایت آن را لغو کنید.
add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() { wp_deregister_style( 'gdwpm_styles-css' ); }
حتما دقت داشته باشید که باید محتویات هر شیوهنامه که لغو کردهاید را کپی کنید و در شیوهنامه پوسته وردپرس خود جایگذاری کنید؛ یا آن را بهعنوان CSS سفارشی اضافه کنید.
غیرفعال کردن JS افزونه در وردپرس
مانند مرحله قبل که شیوه نامه های سی اس اس افزونه را غیرفعال کردیم ، شما برای جاوااسکریپت هم باید همین کار رو بکنید . با این تفاوت که برای لغو کردن آنها فایلهای جاوا اسکریپت را غیرفعال کنید. بااینحال شما نمیتوانید آنها را از طریق Inspect پیدا کنید. شما برای انجام این کار باید در درون فایلهای افزونه جستجو کنید. روش دیگری نیز برای پیدا کردن همه مدیریتهای استفادهشده توسط افزونهها با اضافه کردن کد زیر داخل فایل 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' ); }