انتقال جاوا اسکریپت به فوتر وردپرس برای افزایش سرعت سایت
- مقالات آموزشی
- بروزرسانی شده در
ازجمله مهمترین مواردی که میتواند تجربه کاربری بهتری را برای کاربران سایت شما ایجاد کند افزایش سرعت سایت است. شما با افزایش سرعت لود صفحات سایت خود میتوانید باعث شوید این تجربه خوشایند برای کاربران سایت شما پیش بیاید. این کار با استفاده از روشهای مختلفی انجام میشود، ما سعی میکنیم آنها را در آموزشهای مختلف در اختیار شما قرار دهیم. مقاله امروز درباره انتقال جاوا اسکریپت به فوتر سایت است.
در این مقاله ما به شما یکی از روشهای افزایش سرعت سایت که انتقال جاوا اسکریپت به پایین صفحه است را برای بهبود بخشیدن به زمان بارگذاری سایت و سرعت صفحه گوگل را آموزش میدهیم. این کار یکی از مجموعه اقدامهایی است که سرعت سایت شما را افزایش خواهد داد.
جاوا اسکریپت یک زبان برنامهنویسی است که با استفاده از این روش میتوانید توسط آن به بهبود سرعت لود سایت خود کمک کنید. شما باید بدانید که از این زبان در کجای سایت خود استفاده کنید که سبب بهرهوری بیشتر سایت شوید. بنابراین اگر قصد دارید این کار را انجام دهید تا پایان این مقاله را مطالعه کنید.
آنچه در این مقاله میخوانید
انتقال جاوا اسکریپت به فوتر وردپرس
زمانی که سرعت لود صفحات سایت شما بالا باشد نرخ پرش نیز از سایت شما کم میشود. تأخیر در هنگام لود صفحات میتواند مانع بازدید تعداد زیادی از کاربران به سایت شما شود. بنابراین این موضوع از اهمیت بالایی برخوردار است و باید حتماً به آن توجه داشته باشید.
از طرف دیگر زمانی که سرعت لود صفحات سایت شما بالا باشد رتبه شما در موتورهای جستجو بهبود پیدا میکند و برعکس با پایین بودن سرعت لود رتبه شما پایین میآید. این موضوع باعث میشود آمار بازید سایت شما نیز کاهش پیداکرده و کسبوکار شما از رونق بیفتد.
این نکته را در نظر داشته باشید زمانی که شما مرتباً با استفاده از یک سیستم وبسایت خود را چک میکنید سیستم شما فایلهای سایت شما را ذخیره کرده و با سرعت بیشتری آنها را لود میکند. بنابراین به خاطر کش شدن سایت شما صفحات سریع باز میشوند. به همین دلیل این تصور ممکن است برای کاربران تازهکار پیش بیاید که سرعت سایت آنها هیچ مشکلی ندارد. درصورتیکه اینطور نیست و برای کاربران دیگر چنین امکانی وجود ندارد.
دلیل انتقال جاوا اسکریپت به فوتر
جاوا اسکریپت یک زبان برنامهنویسی سمت سرویس گیرنده است. این زبان توسط مرورگر وب کاربر اجرا میشود. وقتی جاوا اسکریپت را در بالا قرار دهید ممکن است مرورگر قبل از بارگذاری بقیه صفحه آن را اجرا کند؛ اما زمانی که مرورگر به انتهای صفحه برود سرور بهسرعت صفحه را ارائه میدهد و مرورگر کاربر جاوا اسکریپت را اجرا میکند. ازآنجاکه تمام رندرهای سمت سرور انجامشدهاند، جاوا اسکریپت در پسزمینه بارگذاری سریعی خواهد داشت.
این کار امتیاز سرعت را هنگام تست با سرعت صفحه گوگل بهبود میبخشد. اکنون گوگل و دیگر موتورهای جستجو سرعت صفحه را بهعنوان کارایی ماتریس زمان نمایش نتیجه جستجو در نظر دارند. این بدین معنا است که بارگذاری سریع وبسایت درنتیجه جستجو بسیار مؤثر است.
شما قادر هستید در سیستم مدیریت محتوای وردپرس این کار را بهراحتی انجام دهید. در ادامه این آموزش شما میتوانید روش انجام این کار را مشاهده کنید.
روش مناسب برای افزودن جاوا در پایین صفحه
همانطور که توضیح دادیم وردپرس یک سیستم قوی است که به ارائهدهندگان قالب و افزونه اجازهی افزودن اسکریپتهای خود در صف و در صورت نیاز بارگذاری آنها را میدهد. اسکریپتها و استایلهای مناسب میتوانند سرعت صفحه بارگذاری را بهبود بخشند. برای نمایش یک مثال ساده یک جاوا اسکریپت به وردپرس اضافه خواهیم کرد. جاوا اسکریپت را در فایل .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 استفاده کنید که این کارها را بهصورت خودکار برای شما انجام خواهد داد.
پیروز و سربلند باشید. 🙂
سلام رضا جان وقت بخیر
من توی ایندکس تصاویرم مشکل دارم
تصاویر داخل محتوام توی گوگل ایندکس نمیشن حتی وقتی با site: میرم قسمت تصاویر کلا تصاویر درون محتوام مثل تصاویر شاخصم ایندکس نمیشن با این که اورجینالن و خودم ساختمشون
توی یک منبع خارجی گفته بود گوگل نمیتونه در موج اول جاوااسکریپتو بخونه بنابراین اگه با بلاک کردن جاوا اسکریپت در صفحه تصاویر لود نشدن مشکل ازونه
با پلاگین کروم تست کردم دیدم کلا تصاویر سایتم بالا نمیاد
مگه وردپرس از جاوا اسکریپت برای لود شدنش استفاده می کنه؟
سایت شما رو تست کردم واقعا بدون مشکل میود یعنی حتی یک پیکسل هم صفحه بهم نمی ریخت
آیا واقعا مشکل از جاوا اسکریپته؟
اگه گوگل نتونه ببینه تصاویرمو، مقالاتم امتیازی که از تصاویر درون محتوا دریافت می کنه رو از دست میده؟
چجوری جاوااسکریپتو جدا کنم از لود تصاویر؟
سلام شاید گزینه lazy load js رو فعال کردین رو سایتتون
ممنونم درست شد
لود تنبل رو در راکت غیر فعال کردم و درست شد
اما سرعتم یکم کاهش پیدا کرد
راهی هست که لیزی لود رو بدون جاوا اسکریپت انجام بده؟
خودتون که از راکت استفاده می کنید ،
آیا از لود تنبل خود راکت استفاده می کنید؟
خواهش میکنم. نیازی به فعالسازی نیست مرورگرها همشون توی نسخه جدید پیشفرض فعال دارن لیزی لود رو.
با درود، من توی افزونه راکت ، تیک تاخیر اجرای جاوا اسکریپت رو که فعال میکنم سرعت سایت در جی تی متریکس بیشتر میشه و خطایی هم نمیده اما عکسهای سایت لود نمیشن… وقتی هم ک تیک رو بر میدارم سرعت سایت میاد پایین تر و خطای لود فایل های جاوا اسکریپت بعد از لود محتوا رو میده… راه حل چیه>؟ باید فایل های جاوا اسکریپت انتقال داده بشن به هدر؟ چجوری
سلام گزینه lazyload رو غیرفعال و تست کنید.
با سلام من اینکارو انجام دادم عکسای سایتم لود نمیشن چیکار کنم عکسا لود بشن؟
سلام
باید js مربوط به lazyloading را از حالت لود معوق خارج کنید
سلام تشکر از مطلب عالیتون
سلام خواهش میکنیم
موفق باشید .
با سلام. وقتی لود معوق جاوا اسکریپت را توی راکت فعال می کنم در صفحه اصلی سایت یک مشکل به وجود می آید. مشکل اینجاست که منوی اصلی سایت و اسلایدر نشان داده نمی شوند و باید سایت دو بار لود شود تا نشان داده شوند. این مشکل را چگونه می توانیم حل کنیم؟
سلام
بله اغلی با فعال کردناین گزینه به چنین مشکلاتی بر میخورید. برخی امکانات و پلاگین ها برای اینکه صحیح کار کنند نباید کدهایشان فشرده شود. این تیک را فعال نکنید و از سایر تنظیمان افزونه استفاده کنید. فرق چندانی نخواهد داشت.
بله همه مراحل رو درست انجام دادم ، و rocket هم کانفیگ کردم .منظورم این است که باز هم نیاز به فشرده سازی کد های css وjs هست؟ . و یا js به پایین صفحه منتقل بدم
افزونه wp-rocket تنها کد های شما را فشرده سازی میکند و جایگاه کد ها را تغییر نمیدهد.
بطور پیشفرض برنامه نویس قالب اصول کدنویسی را رعایت میکند و js را در انتهای کد ها قرار میدهد.
پیشنهاد این است که تغییری ایجاد نکنید.
سلام جناب حسینی راد ، بنده هم دارم از rocket استفاده میکنم و هم از افزونه Imagify برای بهینه سازی عکس ها باز هم تو gtmetrix سرعت سایتم پایین هست ، شما میفرمایید چیکار کنم؟
درود مراحل رو درست انجام بدید رتبه میاد بالا. آموزش جی تی متریکس رو توی دوره های سایت ببینید
پس چرا اسکریپت های خودتون توی هدر اجرا میشه !
ما از افزونه راکت وردپرس استفاده می کنیم سایتمون رو توی gtmetrix بررسی کنید متوجه خواهید شد
سلام تشکر از مطلب عالیتون