افزایش سرعت سایت با انتقال JavaScript به فوتر وردپرس

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

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

برای مطالعه مطالب بیشتر، به صفحه بلاگ سایت دکتر گرافیک مراجعه کنید.

افزایش سرعت سایت با انتقال JavaScript به فوتر وردپرس

زمانی که سرعت لود صفحات سایت شما بالا باشد نرخ پرش نیز از سایت شما کم می‌شود. تأخیر در هنگام لود صفحات می‌تواند مانع بازدید تعداد زیادی از کاربران به سایت شما شود. بنابراین این موضوع از اهمیت بالایی برخوردار است و باید حتماً به آن توجه داشته باشید.

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

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

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

این کار امتیاز سرعت را هنگام تست با سرعت صفحه گوگل بهبود می‌بخشد. اکنون گوگل و دیگر موتورهای جستجو سرعت صفحه را به‌عنوان کارایی ماتریس زمان نمایش نتیجه جستجو در نظر دارند. این بدین معنا است که بارگذاری سریع وب‌سایت درنتیجه جستجو بسیار مؤثر است.

شما قادر هستید در سیستم مدیریت محتوای وردپرس این کار را به‌راحتی انجام دهید. در ادامه این آموزش شما می‌توانید روش انجام این کار را مشاهده کنید.

مقالات مرتبط با افزایش سرعت سایت:

– آموزش افزایش سرعت لود وردپرس با چند راهکار

– راه های افزایش سرعت سایت وردپرس

– آموزش حذف CSS و JS اضافی در وردپرس برای افزایش سرعت

روش مناسب برای افزودن جاوا در پایین صفحه

همان‌طور که توضیح دادیم وردپرس یک سیستم قوی است که به ارائه‌دهندگان قالب و افزونه اجازه‌ی افزودن اسکریپت‌های خود در صف و در صورت نیاز بارگذاری آن‌‌‌‌‌ها را می‌دهد. اسکریپت‌ها و استایل‌های مناسب می‌توانند سرعت صفحه بارگذاری را بهبود بخشند. برای نمایش یک مثال ساده یک جاوا اسکریپت به وردپرس اضافه خواهیم کرد. جاوا اسکریپت را در فایل .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 استفاده می‌کنیم.

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

یافتن منبع جاوا اسکریپت

ابتدا سایت خود را در مرورگر بازکنید و “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 استفاده کنید که این کارها را به‌صورت خودکار برای شما انجام خواهد داد.

امیدواریم که از این آموزش بهره کافی را برده باشید. اگر سوالی داشتید، در بخش نظرات با ما در میان بگذارید. سپاس از همراه شما…

منابع: wikipedia – wordpress.org – mihanwp – youtube