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

اگر در زمینه طراحی وب فعالیت کرده باشید، حتما نام Minify، مینیفای به گوشتان خورده است. یکی از بهترین راه های افزایش سرعت وبسایت فشرده سازی کدهاست.

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

اهمیت سرعت وبسایت

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

اهمیت سرعت سایت بر سئو

چند سالی است که سرعت سایت یکی از مهمترین اولویت‌های گوگل برای رتبه‌بندی صفحات مختلف موجود در سرچ گوگل شده است. در واقع گوگل به سایت‌هایی که سرعت لود بالاتری دارند اهمیت بیشتری می‌دهد و آن‌ها را جز نتایج اول گوگل می‌آورد. پس اگر سرعت وبسایت شما کم است، باید اهمیت ویژه‌ای به سرعت سایت خود دهید یا اینکه قید ایندکس شدن بین 5 نتیجه اول گوگل را بزنید!

مینیفای کردن یعنی چه

حال که به اهمیت سرعت وبسایت پی بردیم، وقت آن است که به یکی از موثرترین‌ها و ساده ترین روشهای افزایش سرعت وبسایت بپردازیم. به صورت بسیار ساده مینیفای کردن کدهای وبسایت یعنی فشرده سازی کدها به صورتی که هیچ تغییر در روند اجرای آن‌ها ایجاد نشود. در واقع ما کدها را به گونه‌ای کاهش می‌دهیم که نتیجه تغییری نکند. در پاراگراف‌های بعدی به مهمترین روش‌های مینیفای کردن می‌پردازم، با من همراه باشید...

پاکسازی فضاهای خالی در کدهای وبسایت

اولین اقدام برای مینیفای کردن وبسایت، پاک کردن فضاهای سفید(White-Space) ما بین کدها، سرخط‌ها و فاصه‌های ایجاد شده به وسیله تب است. هرچه این فاصله‌ها کمتر شوند، مرورگر سریع تر صفحه را لود می‌کند و الکی مشغول عبور کردن از فضاهای خالی نمی‌شود. اصولا ویرایش کردن اینجور کدهای ماینیفای شده بسیار مشکل است، پس از قبل از فرایند پاکسازی فضاهای خالی یک نسخه از فایل js یا css یا... تهیه کنید و سپس اقدام به حذف فضاهای خالی کنید.

خلاصه سازی دستورات

متاسفانه در نظر بسیاری از برنامه نویسان، برنامه نویسی قوی تر است که پروژه‌اش تعداد بسیار زیادی خط کد داشته باشد! این تصور بسیار غلط است. در واقع برنامه نویسی حرفه‌ای تر است که با صرف کمترین خط کد به نتیجه مطلوب خود برسد. نمونه‌هایی از این مورد را می‌گذارم که متوجه شوید چقدر ساده می‌توان کدهای وبسایت را کاهش داد، بدون اینکه کوچکترین تغییری در نیتجه حاصل شود.

برای مثال در فایل استایل این دستورات کاملا یکی هستند و نتیجه شان فرقی نمی‌کند، پس بهتر است از موردی استفاده کنیم که کوتاه تر است :

استفاده از کد Hex برای تعیین رنگ المان به جای اسم آن رنگ نیز یکی از روشهای موثر در کاهش کدهای وبسایت است؛ برای مثال:

شاید در نگاه اول بگویید، اینکار که تنها چند کاراکتر را کم می‌کند و اثر زیادی ندارد، درست است ولی اگر پروژه شما بزرگ شود، خواهید دید که در طول یک پروژه بزرگ این روش مقدار بسیار زیادی حجم کد را کم کرده است...

خلاصه سازی کدهای چندخطی در یک خط که بیشتر در padding ، margin و Border و... مرسوم است، برای مثال قطعه کدهای زیر کاملا یکسان هستند:

و همین طور در Border و Pdding و Flex و... به جای اینکه صفات مختلف آن‌ها را در چند خط کد مشخص کنیم، آن‌ها را در یک خط کد می‌آوریم.

ابزارهای آنلاین مینیفای

اگر در گوگل عبارت Minify را جستجو کنید، به وبسایت‌های زیادی بر می‌خورید که عمل مینیفای را به سرعت انجام می‌دهند و چند هزار خط کد را در کسری از ثانیه خلاصه سازی می‌کنند. نکته‌ای بسیار مهم درباره این این ابزارها وجود دارد که آن این است که؛ این ابزارها هنور آنقدر پیشرفت نکرده‌اند که با هوش مصنوعی بتوانند همه قواعد مینیفای را پیاده سازی کنند. اینجور ابزارها تنها توانایی حذف فضاهای سفید، حذف سیمیکالن آخر در آخرین دستور css موجود در یک بلاک و نهایتا تبدیل کدهای رنگی rgb و اسمی به Hex را دارند و نمی‌توانند الباقی الگوریتم‌های فشرده سازی کدها را انجام دهند، و این کار بر عهده خود شخص برنامه نویس است.

مبحث مهم باندل سازی

تا اینجا آموختیم که هرچه کدهای سایت ما فشرده تر شوند، اجرای آنها سریع تر است و سرور را کمتر به دردسر می‌اندازد، اما مبحث مهم دیگری نیز وجود دارد که آن باندل سازی یا مجتمع سازی فایل‌های خارجی استفاده شده در پروژه است، به بیان بسیار ساده، دو تا یکی کردن فایل‌های پروژه، این کار تعداد درخواست‌های ارسال شده به سرور را به شدت کاهش داده و همین امر باعث افزایش چشم گیر سرعت وبسایت ما می‌شود. برای مثال اگه ما چند فایل css در پروژه استفاده کردیم، همه آن‌ها را دستی یابا استفاده از روش‌های ساده تر یکی می‌کنیم. من این قول رو می‌دهم که حتما در مورد مبحث باندل کردن در فریمورک Asp.Net مقاله‌ای را در سایت منتشر کنم.

حرف آخر

امروزه سرعت یکی از مهمترین عناصر زندگی انسانها شده است، سرعت اتوموبیل، سرعت اینترنت، سرعت کامپیوتر، سرعت پختن غذا و سرعت وبسایت و... از مهمترین اولویت‌های زندگی انسانها هستند، کاربران خدماتی را می‌پسندند که با سرعت بالاتری انجام شوند، پس ما به عنوان یک توسعه دهنده وبسایت باید توجه ویژه ای به سرعت و زمان لود شدن وبسایت خود کرده و به آن اهمیت ویژه ای دهیم، تا هم کاربران را راضی نگه داریم و هم سود بهتری در فروش محصولات خود به دست آوریم. امیدوارم این مقاله براتون مفید بوده باشه.