افزایش سرعت سایت با انتقال جاوا اسکریپت به پایین صفحه
در این مقاله ما به شما روش انتقال جاوا اسکریپت به پایین صفحه را برای بهبود بخشیدن به زمان بارگذاری سایت و سرعت صفحه گوگل را آموزش میدهیم. این کار یکی از مجموعه اقدام هایی هست که سرعت سایت شما را افزایش خواهد داد.
چرایی انتقال جاوا اسکریپت به پایین صفحه
جاوا اسکریپت یک زبان برنامه نویسی سمت سرویس گیرنده است,توسط مرورگر وب کاربر اجرا میشود. وقتی جاوا اسکریپت را در بالا قرار دهید ممکن است مرورگر قبل از بارگذاری بقیه صفحه آنرا اجرا کند اما زمانیکه مرورگر به انتهای صفحه برود سرور به سرعت صفحه را ارائه میدهد و مرورگر کاربر جاوا اسکریپت را اجرا میکند. از آنجا که تمام رندرهای سمت سرور انجام شده اند جاوا اسکریپت٬ در پس زمینه بارگذاری سریعی خواهد داشت.
این کار امتیاز سرعت را هنگام تست با سرعت صفحه گوگل بهبود میبخشد. اکنون گوگل و دیگر موتورهای جستجو سرعت صفحه را بعنوان کارایی ماتریس زمان نمایش نتیجه جستجو در نظر دارند. این بدین معناست که بارگذاری سریع وب سایت در نتیجه جستجو بسیار موثر است.
راه مناسب برای افزودن جاوا در پایین صفحه
وردپرس یک سیستم قوی است که به ارائه دهندگان قالب و افزونه اجازه ی افزودن اسکریپت های خود در صف و در صورت نیاز بارگذاری آنها را میدهد. اسکریپت ها و استایل های مناسب میتوانند سرعت صفحه بارگذاری را بهبود بخشند. برای نمایش یک مثال ساده یک جاوا اسکریپت به وردپرس اضافه خواهیم کرد, جاوا اسکریپت را در فایل .js ذخیره کرده و در فایل js. در دایرکتوری قالب js قرار دهید.
اگر قالب شما برای جاوا اسکریپت دایرکتوری ندارد یک دایرکتوری ایجاد کنید. پس از قرار دادن فایل اسکریپت قالب فایل functions.php را ویرایش کرده و کد زیر را اضافه کنید.
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
در این کد از wp_register_script() function استفاده کرده ایم,این تابع دارای پارامترهای زیر است:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
برای افزودن اسکریپت در انتهای صفحه وردپرس تنظیم پارامتر $in_footer بدرستی میباشد. همچنین از توابع دیگری مانند () get_template_directory_uri استفاده میکنیم که آدرس را برای دایرکتوری قالب برمیگرداند. این تابع برای اسکریپت های ثبت نام و استایل قالب در وردپرس استفاده میشود. برای افزونه ها از تابع ()plugins_url استفاده میکنیم.
مشکل
مشکل اینجاست که گاهی افزونه های وردپرس جاوا اسکریپت های خود را به بالای صفحه <head> یا درون بدنه صفحه اضافه میکنند. برای انتقال جاوا اسکریپت به انتهای صفحه باید فایل افزونه را ویرایش کرده و اسکریپت را به انتهای صفحه ببرید.
یافتن منبع جاوا اسکریپت
سایت خود را در مرورگر باز کنید و page source را ببینید. لینک فایل جاوا اسکریپت را خواهید دید که نشان دهنده ی مکان اصلی فایل است. بعنوان مثال تصویر زیر به ما نشان میدهد که جاوا اسکریپت متعلق به افزونه ای به نام ‘test-plugin101’. میباشد و محل فایل اسکریپت در دایرکتوری js میباشد.
گاهی میبینید که جاوا اسکریپت بطور مستقیم در صفحه اضافه میشود و با فایل جداگانه ی js. پیوند داده نشده است. در این حالت باید تمام افزونه ها را غیر فعال کنید. اگر جاوا اسکریپت پس از غیر فعال کردن افزونه ها ناپدید نشد تلاش کنید که آنرا به قالب دیگری انتقال دهید.
ثبت و در صف قرار دادن اسکریپت
پس از یافتن قالب یا افزونه ای که جاوا اسکریپت را به بخش هدر اضافه کرده باید مکانی که افزونه برای فایل صدا زده میشود را بیابید. در یکی از فایل های PHP قالب یا افزونه فراخوان فایل js. را خواهید دید. اگر افزونه یا قالب برای افزودن فایل جاوا اسکریپت استفاده میشود نیاز دارید تابع wp_register_script در افزونه یا قالب تغییر دهید و پارامتر $in_footer را مانند زیر اضافه کنید:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
فرض کنید افزونه یا قالب شما جاوا اسکریپت را به بالا یا بین محتوا اضافه کرده است. کد جاوا اسکریپت را در فایل افزونه یا قالب پیدا کنید و در فایل js. کپی و ذخیره کنید. سپس از تابع ()wp_register_script برای انتقال جاوا اسکریپت به پایان متن استفاده کنید.
این نکته مهم است که درک کنید که در هنگام ایجاد تغییر در فایل اصلی و آپدیت افزونه این تغییرات باز نویسی نخواهند شد. بهترین کار برای انجام این عمل ثبت اسکریپت و دوباره ثبت نام آن در فایل functions.php پیوسته میباشد. گذشته از حرکت اسکریپت به بالا و پایین صفحه شما باید از یک افزونه رسانه سریعتر اجتماعی و بارگذاری تنبل تصویر استفاده کنید.همچنین برای بهبود سرعت سایت از wp rocket استفاده کنید که این کارها را بصورت خودکار برای شما انجام خواهد داد.
ارسال دیدگاه