کاهش حجم قالب با فشرده سازی فایل ها

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

 

چرا باید فایل های JS و CSS قالب رو فشرده سازی کنیم ؟؟ 

 

خوب جواب به این سوال بسیار ساده هستش با فشرده سازی حجم فایل های کاهش پیدا میکنه و سرعت لود و خواندن اونها توسط مرورگر بالاتر میره و سایت سریعتر باز میشه . فشرده سازی یا بهینه سازی به معنای اون نیست که در فایل های ما تغییری ایجاد بشه در واقع به معنای این هستش که فضا های خالی از بین برن . در CSS وقتی کدهای خودمون رو Minify میکنیم در واقع تمامی کدها علاوه بر اینکه فاصله اونها کم میشه استایل نویسی اونها هم به صورت هوشمند کاهش پیدا میکنه .

 

به طور مثال من یک قطعه کد به این شکل دارم 

 

 

در این دوتا کلاس CSS من دو بار federtion رو فراخوانی کردم و بهش استایل دادم . خوب این کار هم حجم قالب رو بالا میبره هم سرعت خوندن کدهای ما رو توسط مرورگر کند تر میکنه چون مرورگر مجبوره کدهای بیشتری رو بخونه و به همین دلیل سرعت لود سایت ما کاهش پیدا میکنه . اما حالا من این کد رو با استفاده از سرویس آنلاین CSS Minifer کاهش حجم میدم و نتیجه این خواهد شد .

 

همونطور که میبینید علاوه بر این که فاصله کدهای ما برداشته شد استایل نویسی هم خلاصه شده ، اگر خوره طراحی وب باشید میدونید که اگر حجم وسیعی از چنین کدهایی در CSS سایت شما وجود داشته باشه با استفاده از این سرویس تا حد ۵۰ درصد از کدهای شما بهینه و کم حجم و خلاصه میشن و این یک امتیاز مثبت و عالی برای سایت شما در سئو خواهد بود .

 

ما با چند روش میتونیم فایل های جاوا اسکریپت و استایل خودمون رو بهینه سازی کنیم یکی به صورت استاتیک و استفاده از سرویس های آنلاین Minify کننده فایل ها و استفاده از افزونه برای فشرده سازی . که هر دوی این روش ها مناسب و کاربردی هستند .

فشرده سازی توسط سرویس ها آنلاین :

یکی دیگر از روش های بدون دردسر و سریع استفاده از سرویس های فشرده سازی هستش که من سایت CSS Minifer رو برای کد های CSS بهتون پیشنهاد میدم همچنین سایت freeformatter برای جاوا اسکریپت و HTML چون امکانات و ابزار های بسیار زیاد دیگه ایی هم داره در منوی سمت چپ میتونید و در قسمت Code Minifiers  کد های CSS و JS خودتون رو Minify کنید . همچنین قابلیت فشرده سازی و زیبا سازی کد های HTML رو هم دارا هستش و کلی ابزار و امکانات عالی .

 

همچنین سرویس CSS Minifer دارای یک پلاگین برای ادیتور محبوب Sublime Text هم هست که دیگه با نصب این پلاگین نیازی به رفتن سایت این سرویس نخواهید داشت و همیشه به صورت آفلاین در دسترس خواهد بود برای دانلود این پلاگین میتونید از طریق این صفحه Github اون رو دریافت کنید و روی ادیتور خودتون نصب کنید .

 

فشرده سازی توسط افزونه :

 

برای کسانی که از سیستم مدیریت محتوای وردپرس استفاده میکنند افزونه Better WordPress Minify رو پیشنهاد میکنم . این افزونه به صورت کاملا داینامیک تمامی لینک های جاوا اسکریپت و استایل قالب سایت شما رو فشرده سازی میکنه . این افزونه حتی تمامی لینک های فراخوانی شده توسط افزونه های محتلف در قالب رو هم فشرده سازی و Minify خواهد کرد . و این یکی از قابلیت های خیلی خوب این افزونه هستش .

 

پس از نصب و فعال سازی افزونه در قسمت پنل تنظیمات میتونید تیک های Minify فایل های جاوا اسکریپت و CSS رو فعال کنید .

 

 

همچنین این افزونه قادره که تمامی فایل های جاوا اسکریپت و استایل رو کش کنه و به سرور های CDN متصل کند . اما متاسفانه فقط از سرویس تجاری MaxCDN پشتیبانی میشه و سرویس های رایگانی مثل CloudFlare رو پشتیبانی نمیکنه . که شما باید به صورت جداگانه پلاگین CloudFlare رو نصب کنید .

 

از قابلیت های دیگه این افزونه امکان تعیین زمان برای کش شدن فایل های قالب  هستش .

 

حتی شما میتونید در قسمت Manage enqueued Files لینک فایل های جاوا اسکریپت و استایل افزونه ها رو مدیریت کنید مثلا اونها رو از قالب حذف کنید و یا به فوتر سایت و یا هدر قالب سایت منتقل کنید و عملیات فشره سازی رو در یک فایل خاص افزونه ها که ممکنه با فشرده سازی مشکلی برای اون پیش بیاد غیر فعال کنید .