آموزش بهینه سازی فایل ها در افزونه WP Rocket راکت وردپرس – گام 3 از 10

[آموزش بهینه سازی فایل ها در افزونه WP Rocket راکت وردپرس – گام 3]. سلام. در گام سوم از آموزش افزونه WP Rocket به سراغ آموزش بهینه سازی فایل ها در افزونه راکت وردپرس می پردازیم. در گام اول و دوم از پس معرفی محیط افزونه و تنظیمات کش این بار به آموزش بهینه سازی فایل های مهم و اساسی یک وب سایت می پردازیم. در گام سوم از این آموزش که تحت عنوان بهینه سازی فایل ها نام دارد، در خصوص بهینه سازی فایل های css و جاوا اسکریپت بحث خواهد شد. با آموزش وردپرس در خصوص افزونه WP Rocket در وردپرس باران با ما همراه باشید.

بهینه سازی فایل ها در افزونه WP Rocket

این بخش از افزونه، حجم فایل های css و js سایت را تا حد امکان به ترتیب کاهش داده و در صورت امکان آن ها را با هم ترکیب نموده تا علاوه بر کاهش حجم، تعداد درخواست ها کاهش یافته در نتیجه موجب افزایش سرعت سایت وردپرس خواهد شد. در ادامه به تعریفی کلی از فایل های css و js در بهینه سازی فایل ها در افزونه راکت می پردازیم تا آن دسته از دوستانی که با این فایل ها آشنایی ندارند، آشنا شوند.

CSS چیست؟

css کوتاه شده سه کلمه‌ Cascading Style Sheets به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است. css یک زبان برنامه نویسی ظاهری (Style Sheet Language) است که برای ارائه زیباتر و قابل فهم‌تر یک سند تولید می شوند. فایل های css در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متن و دیگر تگ‌های HTML را تعیین می‌کنند.

JS چیست؟

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

• موتور V8 برای مرورگرهای اپرا و کروم
• موتور SpiderMonkey برای فایرفاکس
• موتورهای Trident و Chakra برای ورژن‌های مختلف اینترنت اکسپلورر
• موتور ChakraCore برای مرورگر Edge
• موتورهای Nitro و SquirrelFish برای مرورگر سافاری

فشرده سازی فایل ها در افزونه راکت وردپرس

در سمت راست افزونه WP Rocket پس از داشبورد و کش به بخش بهینه سازی فایل می رسیم. با کلیک بر روی آن وارد تنظیمات این بخش خواهید شد که در دو بخش می باشد. بخش ابتدایی تنظیمات که با عنوان “فایل‌های CSS” می باشد و بخش دوم این تنظیمات نیز با عنوان “فایل های جاوااسکریپت” است. در ادامه آموزش افزونه WP Rocket تنظیمات پیشرفته هر دو بخش، جهت فشرده سازی فایل ها به طور کامل توضیح خواهیم داد.

بهینه سازی فایل‌های CSS در افزونه WP Rocket

فشرده سازی فایل های CSS در افزونه WP Rocket

با فعال نمودن این گزینه در بهینه سازی فایل ها در افزونه WP Rocket فضای خالی و توضیحات بین کدهای نوشته شده در فایل های css حذف و در نتیجه حجم فایل کاهش می یابد. با کلیک بر روی این گزینه با پیغامی همانند تصویر زیر مشاهده خواهید نمود.

از آنجا که فایل های css یک فایل مهم برای ظاهر سایت می باشد و با فعال کردن این گزینه فایل های css فشرده سازی می شوند، ممکن است ظاهر سایت شما خراب شود. در این صورت شما می بایست این گزینه را در بهینه سازی فایل ها در افزونه راکت غیر فعال نمایید. برای فعالسازی این گزینه می بایست بر روی گزینه “فعالسازی فشرده سازی css” کلیک نمایید.

ترکیب فایل های CSS در افزونه موشک وردپرس

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

همانطور که در تصویر بالا می بینید با فعال کردن ترکیب فایل های css در افزونه WP Rocket، همه فایل های css با یکدیگر ترکیب می شوند. همان طور که مشخص است با فعال نمودن این گزینه پیغامی مبنی بر امکان ایجاد خطا بر روی ظاهر سایت همانند مرحله قبل مشاهده خواهید نمود.

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

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

برای بهینه سازی فایل های js این بخش دارای تنظیماتی می باشد که در ادامه هر کدام را برا شما توضیح خواهیم داد.

Remove jQuery Migrate

این فایل شامل مجموعه ای از کدهای منسوخ شده است و کمک می کند تا کدهای توسعه دهندگان در نسخه های فعلی و آینده jquery به درستی کار کنند. از وردپرس 3.6 به بعد، jquery migrate به صورت خودکار در تمام صفحات بارگذاری می شود. اکثر وبسایت هایی که از قالب ها و پلاگین های بروز استفاده می کنند نیازی به این فایل ندارند و می توانند آن را حذف کنند. با حذف این فایل، مرورگر یک فایل کمتر برای بارگذاری خواهد داشت و این موجب افزایش سرعت سایت وردپرس می شود. با فعالسازی این گزینه در بهینه سازی فایل ها در افزونه WP Rocket این فایل حذف خواهد شد.

فشرده سازی فایل های JavaScript

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

ترکیب فایل های JavaScript

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

بارگذاری JavaScript معوق

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

Delay JavaScript Execution

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