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

 

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

 

ابزارهای آنلاین :

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

  • JavaScript Compressor and Comparison Utility
    ابزاری برای فشرده سازی فایل‌های js با کمک ابزارهای معروف JSMin, Dojo, ShrinkSafe, YUI Compressor, Packer می‌توانید یک اسکریپت را فشرده کنید و حجم نتیجه‌ها را با هم مقایسه کنید...
  • YUI CompressorYUI Compressor Online JavaScript/CSS, ...
    این ابزارهای آنلاین (همانطور که از نامشان پیداست) همگی بر مبنای فشرده‌ساز یاهو (YUI Compressor) کار می‌کنند و هم فایل css و هم فایل js را می‌توانند فشرده کنند.
  • Google Closure compiler
    برنامه‌های بهینه‌ساز زیادی برای js وجود دارد که برخی از آنها در صفحه حاضر معرفی شده اما هیچکدام آنها از نظر حرفه‌ای بودن به پای کامپایلر Google Closure نمی‌رسد. حجم خروجی این کامپایلر بی‌نظیر است چرا که فقط به نامکذاری متغیرها و حذف اضافات بسنده نمی‌کند بلکه اسکریپت را واقعا تفسیر می‌کند و مثلا اگر یک شرط همواره غلط باشد، محتویات آن را حذف می‌کند و ...
    شما به وسیله curl می‌توانید از این برنامه روی هاست خودتان استفاده کنید که یک نمونه کد مربوط به آن، به همراه ccsMin (که برای بهینه سازی css است و در ادامه اشاره می‌شود) توسط زید رشوانی که یک برنامه‌نویس سوریه‌ای است، در این آدرس ارائه شده است.

 

ابزارهای آنلاین که در هاستی غیر از هاست شماست

  • BoxJS, BoxCSS
    با کمک این دو ابزار، می‌توانید یک یا چند فایل css یا js را به صورت یک فایل فشرده تحویل کاربر نهایی دهید.
    این مجموعه همچنین یک سرویس آنلاین تغییر سایز تصاویر نیز دارد که برای افرادی با پردازشگر و پهنای باند محدود می‌تواند مناسب باشد.
  • Cloud Flare
    CDNها علاوه بر خدماتی که در زمینه توزیع محتواها و فایل‌های استاتیک شما می‌کنند، خدمات دیگری هم ارائه می‌دهند هرچند معمولا رایگان نیستند. کلودفلیر که جزو بهترین CDN های رایگان است، علاوه بر CDN بودن از نظر امنیتی سایت شما را نیز تا حدود زیادی محافظت می‌کند و همچنین فایل‌های js, css سایت شما را در صورت تمایل، فشرده می‌کند.

 

ابزارهای آنلاین که در هاست شما نصب می‌شود

  • minify
    یک ابزار ساده برای minify کردن css, js و سرو آن بدون فواصل و توضیحات اضافه به همراه gzip و header مربوط به کش مناسب در سمت کاربر
  • WEBO (web optimizator)
    یک ابزار پیشرفته‌تر از قبلی که علاوه بر css, js به بهینه‌سازی تصاویر نیز می‌پردازد...
  • php speedy
    یک ابزار بهینه ساز حجم و gzip و کش و ... که البته برای من خوب عمل نکرد اما کدهای PHP آن برای ایده‌گرفتن خوب است.
  • CleanCSS
    این دو کد نیز برای node.js نوشته شده است و همانطور که از نامش پیداست یکی برای css و دیگری برای js کاربرد دارد.
  • rJSmin
    این هم یک ابزار نوشته شده به زبان پایتون که برای بهینه سازی فایل‌های js نوشته شده.
  • CssMin
    CssMin یک کتابخانه ساده PHP است که به کمک آن می‌توان به سادگی یک فایل css را minify کرد:
$result = CssMin::minify(file_get_contents("path/to/source.css"));

 

 

 

در ادامه به توضیح مختصری در مورد ابزارهایی که در بالا ذکر شده است داده می شود:

ابزار YUI :

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

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

از قسمت File Type می تونید JS رو برای جاوا اسکریپت و CSS رو برای فایل های استایل انتخاب کنید و در قسمت Options هم تنظیماتی برای جاوا اسکرپیت و CSS داره که به چه نحوه فشرده شوند و یا مثلا کاراکتر های غیر ضروری حذف شوند.

 

Microsoft Ajax Minifier

یک ابزار رایگان جهت فشرده سازی فایل‌های جاوا اسکریپت و شیوه نامه‌ها است. شما می‌توانید این ابزار را از صفحه خانگی آن در سایت asp.net دریافت کنید. جهت استفاده از این ابزار می‌توان از طریق خط فرمان عمل کرد. اما روش ساده‌تر که هدف اصلی این مطلب است به شرح زیر است:
1. در VisualStudio.NET از طریق منو به مسیر Tools, Options, Projects and Solutions بروید و گزینه Always show solution را تیک بزنید.

 سپس از Solution Explorer بر روی عنوان پروژه کلیک راست کرده و گزینه Unload Project را انتخاب نمایید.

 

مجدداً روی عنوان پروژه کلیک راست کرده و گزینه Edit را انتخاب کنید و دستورات زیر را قبل از بسته شدن تگ Project اضافه کنید:

دوباره بر روی عنوان پروژه کلیک راست کرده و گزینه Reload Project را انتخاب کنید.
توجه کنید که با این کار ما یک MSBuild task با عنوان ajaxmini به پروژه اضافه کردیم. این وظیفه که در زمان Build پروژه اجرا خواهد شد فایل‌های جاوا اسکریپت را فشرده و با پسوند .min.js و همچنین فایل‌های CSS را پس از فشرده سازی با پسوند .min.css در همان مسیر فایل مادر بطور خودکار ذخیره می‌کند.
 
 
 

نکته:

اگر به دستورات تنظیمات فوق نگاه دقیقتری بیندازیم، متوجه عبارات Include و Exclude می شویم. توسط این دو صفت شما می‌توانید الگوهایی را جهت فشرده سازی و یا عدم فشرده سازی تعریف کنید. بدین معنا که توسط الگوی‌های ذکر شده در تنظیمات فوق از فشرده سازی فایل‌های با پسوند .min.css و .min.js خودداری می‌شود.
در این شرایط در حین توسعه برنامه، شما می‌توانید از فایل‌های با کد خوانا استفاده نمایید و زمان انتشار و Build پروژه بصورت خودکار آنها را با فایل‌های فشرده جایگزین کنید.
این ابزار تمامی فضاهای خالی، ';‌' و '{ }'‌های اضافی و توضیحات را از کدهای شما حذف می‌کند. متغیر‌ها و توابع شما را به اسامی کوجک‌تر تغییر نام می‌دهد. و ...  
همچنین شما از کتابخانه این پروژه می‌توانید در زمان اجرا و سورس برنامه خود استفاده کنید. جهت اطلاعات بیشتر می‌توانید به سایت مربوطه  مراجعه نمایید.
 

 

 

 

لیست مطالب مرتبط

نحوه اکسترکت کردن فایل zip در zPanel

چرا از GZIP باید استفاده کنیم؟

فعال کردن فشرده سازی gzip در cpanel

پرداختن به مقوله  امنيت سيستم های عامل ، همواره از بحث های مهم در رابطه با ايمن سازی اطلاعات در يک سيستم کامپيوتری بوده که امروزه ...

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

برای این کار وارد cPanle شوید، سپس در بخش "Software / Services" روی "Optimize Website" کلیک کنید.