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

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

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

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

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

انتقال کد های جاوا اسکریپت به فوتر وردپرس

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

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

یکی از نکته های که شما باید همیشه در نظر داشته باشید این است که شما می توانید با استفاده از یک سیستم چکر وب سایت ، سایت خود را مرتب بررسی کرده و سیستم شما فایل های سایت خود را ذخیره کرده تا سرعت سایت شما بیشتر شود و بنابراین به خاطر کش شدن سایت شما سرعت سایت بیشتر می شود

دلیل انتقال کد های جاوا اسکریپت به فوتر وردپرس

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

افزایش سرعت بارگذاری صفحه: یکی از دلایل اصلی انتقال کدهای جاوا اسکریپت به فوتر این است که بارگذاری اسکریپت‌ها در ابتدای صفحه باعث تأخیر در بارگذاری سایر بخش‌های صفحه می‌شود. زمانی که کدهای جاوا اسکریپت در فوتر قرار می‌گیرند، مرورگر می‌تواند ابتدا محتوای HTML و CSS را بارگذاری کرده و پس از آن کدهای جاوا اسکریپت را اجرا کند، که این امر به بارگذاری سریع‌تر و تجربه کاربری بهتر منجر می‌شود.

مناسب برای تجربه کاربری بهتر (UX): با بارگذاری سریع‌تر صفحه، کاربر تجربه‌ای روان‌تر و سریع‌تر از سایت خواهد داشت. این امر به‌ویژه برای سایت‌هایی که دارای محتوای غنی یا تصاویری با حجم بالا هستند بسیار مهم است. جاوا اسکریپت‌ها معمولاً برای انجام تعاملات پویا با کاربر و نمایش محتوا به‌طور داینامیک استفاده می‌شوند، اما بارگذاری آن‌ها در فوتر، از ایجاد تأخیر در نمایش محتوا جلوگیری می‌کند.

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

SEO و رتبه‌بندی بهتر: سرعت بارگذاری صفحه یکی از عوامل مؤثر در رتبه‌بندی سایت‌ها توسط موتورهای جستجو مانند گوگل است. بنابراین، قرار دادن جاوا اسکریپت‌ها در فوتر می‌تواند به افزایش سرعت بارگذاری و در نتیجه بهبود SEO سایت کمک کند.

واکنش‌گرایی و عملکرد بهتر در موبایل: در دستگاه‌های موبایل، سرعت بارگذاری به‌ویژه اهمیت زیادی دارد. با بارگذاری جاوا اسکریپت در فوتر، این امکان فراهم می‌شود که محتوای اصلی سایت سریع‌تر بارگذاری شده و تجربه کاربری بهتری بر روی دستگاه‌های همراه به‌دست آید.

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

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

چگونه کد های جاوا اسکریپت را به فوتر انتقال دهیم

همانطور که می دانید وردپرس یک سیستم مدیریت محتوا قوی است که دارای هزاران قالب و افزونه رایگان می باشند که توسط ارائه دهندگان وردپرسی طراحی شده و در دسترس کاربران وردپرسی قرار داده می شود و این افزونه ها و قالب ها دارای فایل های کد نویسی شده زیادی می باشند که یک سری از کد های آن جاوا اسکریپت می باشد و حالا می خواهیم که این کد های جاوا اسکریپت را در سایت خود به فوتر قالب سایت خود انتقال دهیم

در نظر داشته باشید که اگر قالب سایت وردپرسی شما فایل جاوا اسکریپت ندارد یک فایل جاوا اسکریپت ایجاد کنید و این فایل های جاوا اسکریپت با پسوند 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.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 استفاده کنید به صورت خود برای شما این کار را انجام می دهد.

به طور کلی، انتقال کدهای جاوا اسکریپت به فوتر وردپرس، علاوه بر افزایش سرعت بارگذاری و بهبود تجربه کاربری، به بهینه‌سازی عملکرد سایت کمک می‌کند و می‌تواند تأثیرات مثبتی در SEO و تعاملات کاربری داشته باشد.

موفق و پیروز باشید