اگر سرعت وب‌سایت خود را با وورنک یا ابزارهای بررسی دیگری بررسی کرده‌اید، ممکن است توصیه‌هایی را دریافت کرده باشید که جاوا اسکریپت (JS) یا فایلهای شیوه نامه آبشاری (CSS) خود را کوچک کنید.
جاوا اسکریپت و CSS می توانند عالی باشند – آنها سایت شما را تعاملی (JS) و زیبا جلوه می دهند (CSS). اگر تا به حال سرعت سایت خود را به صورت آنلاین بررسی کرده باشید، ممکن است توصیه هایی را برای کوچک کردن این فایل ها دیده باشید.
کوچک سازی Minification چیست؟
بطور خلاصه کوچک‌سازی فرآیند حذف کاراکترهای غیرضروری از کد بدون تغییر نحوه عملکرد کد است.
این کاراکترهای غیرضروری معمولاً مواردی از این قبیل هستند:
-
کاراکترهای فضای خالی
-
خط جدید
-
کامنت ها یا نظرات
-
جداکننده های بلوک
مثلا شما کدی مانند این دارید:
/**
* 4.0 Header
* -------------------------------------------------------
*/
/* Ensure that there is no gap between the header and the admin bar for WordPress versions before 3.8. */
#wpadminbar{
Min-height: 32px;
}
.site-header {
top: 0;
left: 0;
width: 100%;
background: #fff;
}
body.admin-bar .site-header{
top: 32px;
}
.site-title {
float: left;
width: 18.965517241%;
margin: 0;
font-size: 18px;
font-size: 1.8rem;
font-weight: 400;
line-height: 28px;
line-height: 2.8rem;
}
چیزهای زیادی در این کد وجود دارد - کامنت ها، خطوط شکسته - که کمک می‌کند کد برای انسان خواناتر شود، اما برای خواندن صفحه برای مرورگر ضروری نیست.
پس از کوچک سازی، همان می تواند به شکل زیر باشد:
#wpadminbar{min-height:32px;} .site-header {top:0;left:0;width:100%;background:#fff}body.admin-bar .site-header{top:32px}.site-title{float: left;width:18.965517241%;margin:0;font-size:18px;font-size:1.8rem;font-weight:400;line-height: 28px;line-height: 2.8rem}
الحاق فایلها به یکدیگر
همچنین می توانید فایل ها را به هم متصل کنید. الحاق یا concatenate به معنای به هم پیوستن دو یا چند چیز به یکدیگر است. بنابراین الحاق به معنای پیوستن یک دسته کامل از فایل های مختلف به یک زوج است.
با این کار تعداد فایل هایی که باید دانلود شوند کاهش می یابد و سرعت لود سایت شما افزایش می یابد.
چگونه فایلهای یکی شده سریعتر لود می شود؟
همانطور که در بالا ذکر شد، مرورگرها همچنان باید تمام آن کاراکترهای اضافی در کد شما را بخوانند، چه از آنها استفاده کنند یا نه. این کاراکترهای اضافی نیز فضای یک فایل را اشغال می کنند و آن را بزرگتر از آنچه که باید باشد می کنند.
از آنجایی که رایانه‌ها برای خواندن به آن همه قالب‌بندی نیاز ندارند، می‌توانید آن را بدون تأثیر بر توانایی اجرای صحیح کد حذف کنید.
در واقع، کوچک کردن کد می تواند اندازه فایل را 30-40٪ کاهش دهد. گاهی حتی تا 50 درصد.
پیوستن فایل ها به کاهش بار روی سرور و شبکه شما نیز کمک می کند. ترکیب چند فایل در یک به سرور اجازه می دهد تا داده های بیشتری را در تعداد اتصالات کمتری ارسال کند.
چگونه کد خود را کوچک کنیم
اگر یک سایت وردپرس دارید، افزونه های زیادی وجود دارد که می توانید از آنها استفاده کنید که کد شما را کوچک می کنند.
اگر سایت وردپرس ندارید، ابزارهای دیگری وجود دارد که می توانید برای کوچک کردن انواع مختلف کد خود از آنها استفاده کنید:
-
ابزار کوچک کردن اچ تی ام ال: HTMLMinifier
-
ابزار کوچک کردن سی اس اس: CSSNano
-
ابزار کوچک کردن جاوا اسکریپت: UglifyJS