آموزش بهینه سازی Minify JavaScript and CSS

YSlow: کوچک کردن جاوا اسکریپت و سی اس اس

اسم فاکتور: کوچک کردن جاوا اسکریپت و سی اس اس
نوع فاکتور: css/js
اهمیت: متوسط
حد میانگین: 75 درصد

minify

بررسی اجمالی:

کوچک کردن جاوا اسکریپت و سی اس اس با از بین بردن کاراکترهای غیر ضروری در فایل‌های جاوا اسکریپت و سی اس اس برای سرعت بخشیدن به زمان دانلود سایت.

YSlow: Minify JavaScript and CSS

Overview

Strip unnecessary characters from JavaScript and CSS to speed up download times.

یاهو: کوچک کردن جاوا اسکریپت و سی‌اس‌اس

حذف کاراکترهای غیر ضروری و اضافی از فایل باعث کوچک سازی فایل می‌شود، و کوچک کردن فایل باعث کاهش زمان دانلود فایل و در نتیجه بهبود سرعت بارگذاری سایت می‌شود.وقتی فایلی کوچک سازی شده است که تمامی کامنت‌های برنامه نویسی درون فایل و کاراکترهای فضای خالی غیر ضروری ( کاراکترهای فضای خالی که برای سینتکس برنامه نویسی استفاده می‌شوند ضروری هستند در صورت حذف آنها دستورات اجرا نخواهند شد.) آن حذف شده باشد.کوچک کردن جاوا اسکریپت و سی اس اس باعث بهبود زمان دانلود فایل می‌شود.
دوتا از معروفترین ابزارهای کوچک کردن جاوا اسکریپت JSMin و YUI Compressor هست. که YUI Compressor قابلیت کوچک سازی فایل سی‌اس‌اس را دارد.

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

مبهم سازی کدها راه دیگر بهینه سازی کدها هست.مبهم سازی پیچیده‌تر از کوچک سازی است و به همین دلیل احتمال ایجاد باگ ( مشکل ) در این عملیات بیهنه سازی بیشتر از کوچک سازی است.در یک بررسی ده سایت برتر در کشور امریکا،21 درصد سایت‌ها از کوچک سازی استفاده برای بهینه سازی سرعت سایت استفاده کرده بودند و 25 درصد از مبهم سازی برای بهینه سازی سرعت سایت استفاده کرده بودند.اگر چه مبهم سازی سایز فایل را بیشتر کم می‌کند ( باعث کاهش حجم بیشتری می‌شود)، اما کوچک کردن سازی فایل خطر کمتری دارد.

علاوه بر کوچک سازی فایل‌های جاوا اسکریپت و سی‌اس‌اس خارجی، بهتر است که کدهای سی‌اس‌اس داخلی که بین تگ <style> و کدهای جاوا اسکریپت داخلی که بین تگ <script> قرار می‌گیرند هم کوچک سازی شود.
حتی اگر شما از gzip برای کاهش حجم فایل‌های جاوا اسکریپت و سی‌اس‌اس استفاده می‌کنید، کوچک سازی باعث کاهش 5درصد ( و بیشتر) حجم فایل gzip شده می‌شود.همانطور که استفاده از جاوا اسکریپت و سی‌اس‌اس باعث افزایش حجم سایت می‌شود، با کوچک سازی فایل‌های جاوا اسکریپت و سی‌اس‌اس سایتی زیبا با سرعت بارگذاری خوب داشته باشید.

Yahoo!: Minify JavaScript and CSS

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.
Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Obfuscation

Obfuscation is an alternative optimization that can be applied to source code. It’s more complex than minification and thus more likely to generate bugs as a result of the obfuscation step itself. In a survey of ten top U.S. web sites, minification achieved a 21% size reduction versus 25% for obfuscation. Although obfuscation has a higher size reduction, minifying JavaScript is less risky.

In addition to minifying external scripts and styles, inlined <script> and <style> blocks can and should also be minified. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more. As the use and size of JavaScript and CSS increases, so will the savings gained by minifying your code.

ده ابزار کوچک کردن جاوا اسکریپت و سی‌اس‌اس:

1.Minify JavaScript – Free JavaScript Compressor
2.Minify Javascript Online / Online JavaScript Packer
3.CSS Compressor, Free CSS Compressor and CSS Compression Tool
4.CSS Compressor – Online code compressor for Cascading Style Sheets
5.Huffman JavaScript Compression
6.CSS Drive Gallery- CSS Compressor
7.JavaScript Compression – Compress JavaScript Code Free with this JavaScript Compressor (CSS Too) – from Creativyst
8.minify – Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads. – Google Project Hosting
9.Online YUI Compressor
10.Minify Your Javascript/jQuery Code Online

منابع:

http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-10-minify-javascript-7208.html
https://developers.google.com/closure/?csw=1
http://gtmetrix.com/minify-javascript-and-css.html
آموزش بهینه سازی Minify JavaScript and CSS 4.43/5 - 7

نوشته شده توسط تیم سئو قالبفا در تاریخ 28 آگوست 2013 دسته : آموزش بهینه سازی سرعت سایت