همه چیز در مورد فشرده سازی کدهای سایت
1401/01/03اگر در زمینه طراحی وب فعالیت کرده باشید، حتما نام Minify، مینیفای به گوشتان خورده است. یکی از بهترین راه های افزایش سرعت وبسایت فشرده سازی کدهاست.
هنگامی که پروژه وبسایت شما روی سیستم خودتان به صورت لوکال درحال اجرا هست و همه منابع سیستم شما در خدمت پروژه شماست، سایت شما بدون بهینه سازی نیز به سرعت اجرا میشود، اما اگر همین پروژه بر روی سرور برود، دیگر همه سرور در اختیار آن نیست و از طرفی دیگر پروژه باید بتواند به افراد مختلف در سراسر دنیا (ایران) پاسخ دهد. اینجاست که بحث اهمیت فشرده سازی کدهای وبسایت پیش میآید، در واقع این فشرده سازی زمان اجرای دستورات سایت را بسیار کاهش میدهد و تجربه بهتری را برای کاربران فراهم میآورد.
در دنیای واقعی، سرعت یک وبسایت فقط به قدرت سرور یا کیفیت اینترنت کاربر وابسته نیست؛ بلکه بخش مهمی از آن به نحوه نوشته شدن، ساختاردهی و ارسال فایلهای پروژه مربوط میشود. فایلهای CSS، JavaScript و HTML اگر بدون نظم، بدون فشردهسازی و بدون بهینهسازی در اختیار مرورگر قرار بگیرند، باعث افزایش حجم صفحه، بالا رفتن تعداد درخواستها و در نهایت کندتر شدن تجربه کاربر میشوند.
بهینهسازی کدهای وبسایت از آن دسته کارهایی است که شاید در پروژههای کوچک چندان چشمگیر به نظر نرسد، اما در پروژههای بزرگ، فروشگاههای اینترنتی، پنلهای کاربری، سایتهای محتوایی و وبسایتهایی با بازدید بالا، میتواند تفاوتی کاملاً محسوس در سرعت، مصرف منابع و حتی رتبه سئو ایجاد کند. به همین دلیل، مینیفای کردن و باندلسازی دیگر یک کار تزئینی نیست، بلکه بخشی از فرایند حرفهای توسعه وب محسوب میشود.
جذابترین والپیپرهای برنامهنویسیاهمیت سرعت وبسایت
ابتدا باید فواید افزایش سرعت وبسایت رابررسی کنیم، سپس با هوش و حواس کامل به مبحث مهم فشرده سازی کدها در سایت که بسیار در سرعت سایت تاثیر گذار است بپردازیم. انسان ذاتا موجودی عجول است و دوست ندارد وقت محدود خود را در لودینگ صفحات وبسایت ما بگذراند! بسیاری از ما تجربه کردهایم که وقتی یک سایت را از گوگل باز میکنیم اگر سرعت لودش طول بکشد سریعا آن را بسته و به سراغ سایت دیگری میرویم که سرعت بالاتری دارد. همچنین ترجیح میدهیم از سایتهایی با سرعت بالاتر دانلود کنیم تا سایتهایی با سرعت دانلود کم. اینها همه اهمیت سرعت وبسایت را برای ما گوش زد میکنند.
سرعت وبسایت مستقیماً روی اولین برداشت کاربر از برند یا پروژه شما اثر میگذارد. کاربری که برای ورود به سایت چند ثانیه منتظر میماند، قبل از اینکه محتوای شما را ببیند، در ذهن خود یک قضاوت اولیه انجام میدهد. اگر این انتظار طولانی باشد، احتمال خروج کاربر بسیار زیاد میشود. این مسئله مخصوصاً در صفحات فرود، فروشگاههای آنلاین و سایتهای خدماتی اهمیت بیشتری دارد؛ زیرا هر ثانیه تأخیر میتواند به معنای از دست رفتن یک مشتری بالقوه باشد.
از طرف دیگر، سرعت بالا فقط برای کاربران مفید نیست؛ بلکه برای خود وبسایت نیز مزایای فنی دارد. وقتی فایلها سبکتر باشند، پهنای باند کمتری مصرف میشود، فشار روی سرور کاهش پیدا میکند و مرورگر کاربر سریعتر میتواند منابع موردنیاز صفحه را دریافت، پردازش و نمایش دهد. این موضوع در موبایل اهمیت دوچندان دارد، چون بسیاری از کاربران با اینترنت موبایل و شرایط ناپایدار وارد سایت میشوند.
سرعت سایت فقط زمان لود کامل نیست
یکی از اشتباهات رایج این است که سرعت سایت را فقط با زمان لود کامل صفحه بسنجیم. در عمل، معیارهای مهمتری نیز وجود دارند؛ مثلاً اینکه اولین محتوای قابل مشاهده چه زمانی نمایش داده میشود، کاربر چه زمانی میتواند با صفحه تعامل کند و چقدر طول میکشد تا فایلهای اصلی JavaScript اجرا شوند. بنابراین فشردهسازی کدها تنها یک عدد را بهتر نمیکند، بلکه تجربه کلی کاربر را روانتر میسازد.
اهمیت سرعت سایت بر سئو
چند سالی است که سرعت سایت یکی از مهمترین اولویتهای گوگل برای رتبهبندی صفحات مختلف موجود در سرچ گوگل شده است. در واقع گوگل به سایتهایی که سرعت لود بالاتری دارند اهمیت بیشتری میدهد و آنها را جز نتایج اول گوگل میآورد. پس اگر سرعت وبسایت شما کم است، باید اهمیت ویژهای به سرعت سایت خود دهید یا اینکه قید ایندکس شدن بین 5 نتیجه اول گوگل را بزنید!
البته سرعت سایت تنها فاکتور رتبهبندی نیست، اما یکی از عوامل مهم در تجربه کاربری و کیفیت فنی صفحه محسوب میشود. گوگل تلاش میکند صفحاتی را به کاربران پیشنهاد دهد که علاوه بر محتوای مناسب، تجربه مناسبی نیز ارائه کنند. اگر دو صفحه از نظر کیفیت محتوا نزدیک به هم باشند، صفحهای که سریعتر، سبکتر و کاربرپسندتر باشد، شانس بهتری برای عملکرد بهتر در نتایج جستجو خواهد داشت.
از دید سئو، سرعت پایین میتواند نرخ پرش یا Bounce Rate را افزایش دهد. وقتی کاربر قبل از مشاهده محتوا سایت را ترک میکند، این رفتار میتواند نشانهای از تجربه نامناسب باشد. علاوه بر آن، اگر خزندههای موتور جستجو با صفحات سنگین و کند مواجه شوند، ممکن است فرایند بررسی صفحات سایت نیز با کیفیت پایینتری انجام شود. بنابراین بهینهسازی سرعت، هم برای کاربر و هم برای موتور جستجو اهمیت دارد.
نقش فایلهای CSS و JavaScript در سرعت سئو
فایلهای CSS و JavaScript معمولاً از مهمترین منابعی هستند که روی زمان نمایش صفحه تأثیر میگذارند. اگر این فایلها حجیم باشند یا تعداد زیادی درخواست جداگانه ایجاد کنند، مرورگر برای دریافت و پردازش آنها زمان بیشتری نیاز خواهد داشت. به همین دلیل، مینیفای کردن و باندلسازی این فایلها میتواند نقش قابل توجهی در بهبود سرعت و در نتیجه بهبود شرایط سئوی فنی سایت داشته باشد.
مینیفای کردن یعنی چه
حال که به اهمیت سرعت وبسایت پی بردیم، وقت آن است که به یکی از موثرترینها و ساده ترین روشهای افزایش سرعت وبسایت بپردازیم. به صورت بسیار ساده مینیفای کردن کدهای وبسایت یعنی فشرده سازی کدها به صورتی که هیچ تغییر در روند اجرای آنها ایجاد نشود. در واقع ما کدها را به گونهای کاهش میدهیم که نتیجه تغییری نکند. در پاراگرافهای بعدی به مهمترین روشهای مینیفای کردن میپردازم، با من همراه باشید.
در فرایند مینیفای، مواردی مانند فاصلههای اضافه، شکست خطوط، کامنتها، نامگذاریهای غیرضروری و برخی ساختارهای طولانی تا جای ممکن کوتاه میشوند. نکته مهم اینجاست که خروجی نهایی از نظر عملکرد باید دقیقاً همان کاری را انجام دهد که نسخه اصلی انجام میداد. یعنی مینیفای کردن نباید منطق برنامه، ظاهر سایت یا رفتار المانها را تغییر دهد.
برای درک بهتر، تصور کنید مرورگر قرار است یک فایل CSS شامل چند هزار خط را دریافت کند. فاصلهها، تبها و کامنتها برای برنامهنویس مفید هستند، اما مرورگر برای اجرای کد به بسیاری از آنها نیاز ندارد. بنابراین در نسخه نهایی پروژه میتوان این موارد را حذف کرد تا فایل سبکتر شود و سریعتر به دست کاربر برسد.
تفاوت کد خوانا و کد مینیفای شده
کد خوانا برای توسعه، نگهداری و دیباگ مناسب است؛ اما کد مینیفای شده برای انتشار در محیط واقعی یا Production کاربرد دارد. بنابراین بهترین روش این است که همیشه نسخه اصلی و خوانای فایلها را نگه دارید و فقط نسخه خروجی را مینیفای کنید. به این ترتیب هم توسعه پروژه آسان میماند و هم کاربران نسخه سبکتر و سریعتری از سایت را دریافت میکنند.
/* نسخه خوانا برای توسعه */
.button {
background-color: red;
color: white;
padding: 10px 20px;
}
/* نسخه مینیفای شده برای انتشار */
.button{background:red;color:#fff;padding:10px 20px}پاکسازی فضاهای خالی در کدهای وبسایت
اولین اقدام برای مینیفای کردن وبسایت، پاک کردن فضاهای سفید(White-Space) ما بین کدها، سرخطها و فاصههای ایجاد شده به وسیله تب است. هرچه این فاصلهها کمتر شوند، مرورگر سریع تر صفحه را لود میکند و الکی مشغول عبور کردن از فضاهای خالی نمیشود. اصولا ویرایش کردن اینجور کدهای ماینیفای شده بسیار مشکل است، پس از قبل از فرایند پاکسازی فضاهای خالی یک نسخه از فایل js یا css یا... تهیه کنید و سپس اقدام به حذف فضاهای خالی کنید.
فضاهای خالی، شکست خطوط و تبها برای چشم انسان بسیار مفید هستند، چون خوانایی کد را بالا میبرند. اما در محیط نهایی، این کاراکترها حجم فایل را افزایش میدهند بدون اینکه تأثیری روی اجرای کد داشته باشند. حذف همین موارد ساده، مخصوصاً در فایلهای بزرگ، میتواند حجم نهایی را به شکل قابل توجهی کاهش دهد.
برای مثال، کد زیر از نظر مرورگر یک نتیجه یکسان دارد، اما نسخه دوم حجم کمتری دارد:
/* قبل از حذف فضاهای خالی */
.card {
width: 300px;
height: 200px;
background: #ffffff;
border-radius: 12px;
}
/* بعد از حذف فضاهای خالی */
.card{width:300px;height:200px;background:#fff;border-radius:12px}البته باید توجه داشت که حذف فضاهای خالی همیشه هم بیخطر نیست. در برخی زبانها یا برخی موقعیتها، فاصله ممکن است بخشی از ساختار کد باشد. برای همین بهتر است مینیفای کردن با ابزارهای معتبر انجام شود و پس از آن، عملکرد سایت در مرورگرهای مختلف تست شود.
آیا حذف کامنتها هم ضروری است؟
در نسخه توسعه، کامنتها بسیار ارزشمند هستند، چون توضیح میدهند هر بخش از کد چه کاری انجام میدهد. اما در نسخه نهایی سایت، بیشتر کامنتها برای کاربر و مرورگر کاربردی ندارند و فقط حجم فایل را افزایش میدهند. بنابراین حذف کامنتها در زمان خروجی گرفتن از پروژه یک اقدام منطقی است.
/* این کامنت در نسخه نهایی نیازی نیست */
.menu {
display: flex;
gap: 20px;
}
/* نسخه نهایی */
.menu{display:flex;gap:20px}خلاصه سازی دستورات
متاسفانه در نظر بسیاری از برنامه نویسان، برنامه نویسی قوی تر است که پروژهاش تعداد بسیار زیادی خط کد داشته باشد! این تصور بسیار غلط است. در واقع برنامه نویسی حرفهای تر است که با صرف کمترین خط کد به نتیجه مطلوب خود برسد. نمونههایی از این مورد را میگذارم که متوجه شوید چقدر ساده میتوان کدهای وبسایت را کاهش داد، بدون اینکه کوچکترین تغییری در نیتجه حاصل شود.
کدنویسی کوتاهتر همیشه به معنای بهتر بودن نیست، اما کدی که هم کوتاه، هم خوانا و هم استاندارد باشد، معمولاً نگهداری سادهتری دارد. هدف از خلاصهسازی این نیست که کد را پیچیده و غیرقابل فهم کنیم، بلکه هدف این است که دستورات تکراری و طولانی را با ساختارهای استاندارد و مختصر جایگزین کنیم. این موضوع مخصوصاً در CSS بسیار رایج است.
برای مثال در فایل استایل این دستورات کاملا یکی هستند و نتیجه شان فرقی نمیکند، پس بهتر است از موردی استفاده کنیم که کوتاه تر است :
Background-color:red
Background:redالبته در نگارش استاندارد CSS بهتر است نام ویژگیها با حروف کوچک نوشته شوند. بنابراین نمونه تمیزتر و استانداردتر به شکل زیر است:
background-color: red;
background: red;استفاده از کد Hex برای تعیین رنگ المان به جای اسم آن رنگ نیز یکی از روشهای موثر در کاهش کدهای وبسایت است؛ برای مثال:
color : SaddleBrown
color : #8b4513در مواردی که امکان کوتاهسازی بیشتر وجود داشته باشد، حتی میتوان برخی کدهای رنگی را کوتاهتر نوشت. برای مثال اگر مقدار رنگ از الگوی تکراری تشکیل شده باشد، کد ششرقمی Hex به کد سهرقمی تبدیل میشود:
color: #ffffff;
color: #fff;
border-color: #000000;
border-color: #000;شاید در نگاه اول بگویید، اینکار که تنها چند کاراکتر را کم میکند و اثر زیادی ندارد، درست است ولی اگر پروژه شما بزرگ شود، خواهید دید که در طول یک پروژه بزرگ این روش مقدار بسیار زیادی حجم کد را کم کرده است.
خلاصه سازی کدهای چندخطی در یک خط که بیشتر در padding ، margin و Border و... مرسوم است، برای مثال قطعه کدهای زیر کاملا یکسان هستند:
Margin-top : 3px
Margin-Bottom :5px
Margin-left: 4px
Margin-right :1px
Margin: 3px 1px 5px 4pxبرای درک بهتر ترتیب مقادیر در margin و padding، باید قانون جهت عقربههای ساعت را به خاطر بسپارید. مقدار اول مربوط به بالا، مقدار دوم مربوط به راست، مقدار سوم مربوط به پایین و مقدار چهارم مربوط به چپ است. یعنی اگر بنویسیم margin: 3px 1px 5px 4px، مرورگر آن را به ترتیب top، right، bottom و left تفسیر میکند.
/* ساختار کلی */
margin: top right bottom left;
/* مثال */
margin: 3px 1px 5px 4px;و همین طور در Border و Pdding و Flex و... به جای اینکه صفات مختلف آنها را در چند خط کد مشخص کنیم، آنها را در یک خط کد میآوریم.
برای مثال در border میتوان به جای نوشتن چند ویژگی جداگانه، همه مقادیر اصلی را در یک خط مشخص کرد:
/* حالت طولانی */
border-width: 1px;
border-style: solid;
border-color: #ddd;
/* حالت خلاصه */
border: 1px solid #ddd;در background نیز همین موضوع وجود دارد. بسیاری از ویژگیهای مربوط به پسزمینه را میتوان در یک دستور خلاصه کرد:
/* حالت طولانی */
background-color: #222;
background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
/* حالت خلاصه */
background: #222 url("image.jpg") no-repeat center/cover;خلاصهسازی در جاوااسکریپت
در JavaScript نیز میتوان با رعایت خوانایی، برخی کدها را کوتاهتر و تمیزتر نوشت. البته در این بخش باید محتاط بود، چون کوتاهنویسی بیش از حد ممکن است خوانایی کد را کاهش دهد. هدف اصلی باید حذف تکرار و استفاده از ساختارهای استانداردتر باشد.
// حالت طولانی
let isActive;
if (userStatus === "active") {
isActive = true;
} else {
isActive = false;
}
// حالت خلاصه
const isActive = userStatus === "active";یا برای مقداردهی پیشفرض میتوان از عملگرهای کوتاهتر و خواناتر استفاده کرد:
// حالت طولانی
let username;
if (user.name) {
username = user.name;
} else {
username = "Guest";
}
// حالت خلاصه
const username = user.name || "Guest";ابزارهای آنلاین مینیفای
اگر در گوگل عبارت Minify را جستجو کنید، به وبسایتهای زیادی بر میخورید که عمل مینیفای را به سرعت انجام میدهند و چند هزار خط کد را در کسری از ثانیه خلاصه سازی میکنند. نکتهای بسیار مهم درباره این این ابزارها وجود دارد که آن این است که؛ این ابزارها هنور آنقدر پیشرفت نکردهاند که با هوش مصنوعی بتوانند همه قواعد مینیفای را پیاده سازی کنند. اینجور ابزارها تنها توانایی حذف فضاهای سفید، حذف سیمیکالن آخر در آخرین دستور css موجود در یک بلاک و نهایتا تبدیل کدهای رنگی rgb و اسمی به Hex را دارند و نمیتوانند الباقی الگوریتمهای فشرده سازی کدها را انجام دهند، و این کار بر عهده خود شخص برنامه نویس است.
ابزارهای آنلاین برای پروژههای کوچک، تست سریع یا زمانی که میخواهید چند قطعه کد محدود را فشرده کنید بسیار کاربردی هستند. اما در پروژههای حرفهای بهتر است فرایند مینیفای بخشی از روند build پروژه باشد. یعنی هر بار که نسخه نهایی سایت آماده میشود، ابزارهای مخصوص به صورت خودکار فایلها را فشرده، ترکیب و آماده انتشار کنند.
برای مثال در پروژههای مدرن از ابزارهایی مانند Webpack، Vite، Parcel، Rollup و ابزارهای مشابه استفاده میشود. این ابزارها فقط فاصلههای خالی را حذف نمیکنند، بلکه میتوانند فایلها را باندل کنند، کدهای بدون استفاده را حذف کنند، خروجی بهینه برای مرورگر بسازند و حتی فایلها را برای کش شدن بهتر نامگذاری کنند.
نمونه مینیفای با ابزارهای خط فرمان
اگر پروژه شما مبتنی بر Node.js باشد، میتوانید از ابزارهای خط فرمان برای مینیفای استفاده کنید. برای نمونه، ابزارهای مختلفی برای فشردهسازی CSS و JavaScript وجود دارند که در فرایند build پروژه قرار میگیرند.
// نمونه دستور فرضی برای فشردهسازی فایل CSS
npx clean-css-cli -o style.min.css style.css
// نمونه دستور فرضی برای فشردهسازی فایل JavaScript
npx terser app.js -o app.min.js -c -mمزیت این روش این است که دیگر نیازی نیست هر بار به صورت دستی کدها را داخل یک سایت آنلاین کپی کنید. همچنین احتمال خطا کمتر میشود و تمام اعضای تیم میتوانند خروجی یکسان و استانداردی تولید کنند.
نکات امنیتی هنگام استفاده از ابزارهای آنلاین
اگر کدهای شما شامل اطلاعات حساس، منطق اختصاصی، کلیدهای API یا بخشهای محرمانه پروژه است، بهتر است آنها را در ابزارهای آنلاین ناشناس قرار ندهید. هرچند بسیاری از این ابزارها معتبر هستند، اما از نظر حرفهای بهتر است کدهای مهم پروژه در محیط کنترلشده و ابزارهای محلی یا داخلی تیم پردازش شوند.
مبحث مهم باندل سازی
تا اینجا آموختیم که هرچه کدهای سایت ما فشرده تر شوند، اجرای آنها سریع تر است و سرور را کمتر به دردسر میاندازد، اما مبحث مهم دیگری نیز وجود دارد که آن باندل سازی یا مجتمع سازی فایلهای خارجی استفاده شده در پروژه است، به بیان بسیار ساده، دو تا یکی کردن فایلهای پروژه، این کار تعداد درخواستهای ارسال شده به سرور را به شدت کاهش داده و همین امر باعث افزایش چشم گیر سرعت وبسایت ما میشود. برای مثال اگه ما چند فایل css در پروژه استفاده کردیم، همه آنها را دستی یابا استفاده از روشهای ساده تر یکی میکنیم. من این قول رو میدهم که حتما در مورد مبحث باندل کردن در فریمورک Asp.Net مقالهای را در سایت منتشر کنم.
باندلسازی به این معناست که چند فایل جداگانه را در یک یا چند فایل نهایی منظم و بهینه ترکیب کنیم. مرورگر برای دریافت هر فایل باید یک درخواست جداگانه به سرور ارسال کند. اگر سایت شما دهها فایل CSS و JavaScript داشته باشد، تعداد درخواستها بالا میرود و همین موضوع میتواند سرعت بارگذاری را کاهش دهد. با باندل کردن، تعداد این درخواستها کمتر میشود و مدیریت منابع سایت سادهتر خواهد شد.
البته در وب مدرن، باندلسازی باید هوشمندانه انجام شود. گاهی بهتر است همه فایلها در یک فایل بسیار بزرگ قرار نگیرند، چون ممکن است کاربر برای مشاهده یک صفحه ساده مجبور شود کل کدهای بخشهای دیگر سایت را هم دانلود کند. در چنین شرایطی از روشهایی مانند Code Splitting استفاده میشود تا فقط کدهای مورد نیاز همان صفحه یا همان بخش بارگذاری شوند.
مثال ساده از باندلسازی فایلهای CSS
فرض کنید در یک پروژه چند فایل CSS جداگانه دارید:
reset.css
layout.css
buttons.css
forms.css
responsive.cssدر حالت عادی، مرورگر باید برای هرکدام از این فایلها یک درخواست جداگانه ارسال کند. اما پس از باندلسازی، میتوانید همه آنها را به یک فایل نهایی تبدیل کنید:
style.bundle.min.cssسپس در HTML به جای چند لینک جداگانه، فقط یک فایل نهایی را فراخوانی میکنید:
<link rel="stylesheet" href="style.bundle.min.css">مثال ساده از باندلسازی فایلهای JavaScript
در JavaScript نیز همین منطق وجود دارد. به جای اینکه چند فایل جداگانه در صفحه قرار دهید، میتوانید خروجی نهایی را به شکل یک فایل باندلشده منتشر کنید:
<script src="jquery.js"></script>
<script src="slider.js"></script>
<script src="modal.js"></script>
<script src="app.js"></script>
<!-- حالت بهینهتر پس از باندلسازی -->
<script src="app.bundle.min.js"></script>این کار علاوه بر کاهش درخواستها، مدیریت نسخهها و کش مرورگر را هم سادهتر میکند. وقتی فایل نهایی تغییر کند، میتوان با تغییر نام یا افزودن hash به نام فایل، مرورگر را مجبور کرد نسخه جدید را دریافت کند.
تفاوت مینیفای و فشردهسازی سمت سرور
گاهی مینیفای کردن با فشردهسازی سمت سرور مانند Gzip یا Brotli اشتباه گرفته میشود. این دو مفهوم به هم مرتبط هستند اما یکسان نیستند. مینیفای یعنی کاهش حجم خود کد از طریق حذف موارد غیرضروری، اما Gzip و Brotli فایل را هنگام ارسال از سرور به مرورگر فشرده می&z
سرعت شما که حرف نداره آقا😅
مرسی مچکر، من خیلی به سرعت سایت اهمیت میدم، همیشه وقتی میخوام یه قسمت سایتو تغییر بدم اول از همه چک میکنم که یه موقع اون تغییر تاثیری تو سرعت سایت نزاره خدایی نکرده...😁