۳ روش اصلی Minification و تاثیر آن در لودینگ و سئو سایت

۳ روش اصلی Minification و تاثیر آن در لودینگ و سئو سایت

Minification به فرایند کاهش حجم فایل های HTML، CSS و JavaScript بدون تغییر در عملکرد آنها گفته می شود. این کار باعث می شود سرعت بارگذاری صفحات وب افزایش یافته و بهبود عملکرد وب سایت را در بر داشته باشد که در تعریف حرفه ای همان سئو یا بهینه سازی موتورهای جستجو است (به فرایند افزایش دیدگاه وب سایت در نتایج جستجو گفته می شود.) سئو شامل فنون و راهکارهایی است که به وب سایت کمک می کند تا برای کلمات کلیدی مرتبط با محتوای خود رتبه بالاتری کسب کند.

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

برای انجام minification هم تعدادی ابزار آنلاین وجود دارد و هم تعدادی افزونه برای سایتهای وردپرسی طراحی شده است. این ابزارها کمک می کنند تا فایلهای CSS , HTML , JS  سایت خود را فشرده کرده و کدهای اضافی ، فاصله ها، توضیحات و نشانه گذاری های غیرضروری را انجام دهید.

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

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

• HTML Minifier:

یک ابزار ساده و رایگان برای فشرده سازی فایل های HTML.

• JavaScript Minifier:

یک ابزار کارآمد و مطمئن برای فشرده سازی فایل های JavaScript.

• CSS Minifier:

یک ابزار قدرتمند برای فشرده سازی فایل های CSS

 افزونه های وردپرس برای minification

• Autoptimize:

یک افزونه رایگان و محبوب برای بهینه سازی فایل های HTML، CSS و JavaScript در وب سایت های وردپرس.

• WP Rocket:

یک افزونه حرفه ای و پولی برای بهینه سازی کلی عملکرد وب سایت های وردپرس، که شامل قابلیت minification نیز می شود.

• WP Fastest Cache:

یک افزونه رایگان و ساده برای بهبود سرعت لود سایت های وردپرس، که دارای گزینه minification برای فایل های HTML، CSS و JavaScript است.

متدهای Minify کردن CSS

روش اول

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

https://www.minifier.org

https://cssminifier.com

https://www.cleancss.com/css-minify

https://www.toptal.com/developers/cssminifier

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

روش دوم

ابزار دستوری (Command-line tools)

در شرایطی که دسترسی به اینترنت ندارید، گزینه ای دیگر برای minify کردن فایل css دارید و ان هم با کمک ابزار دستوری است. اگر پکیج npm یا yarn را در سیستم خود نصب داشته باشید با نصب و فعال کردن CSSNANO این مورد قابل انجام خواهد بود.

npm init -y
npm install cssnano --save-dev
OR:
yarn add install cssnano -D

از انجاییکه CSSNANO جزو ابزارهای PostCSS است؛ حتما باید postcss-cli را هم نصب کنید:

npm install postcss-cli --save-dev
OR
yarn add install postcss-cli -D

در مرحله بعد باید فایل postcss.config.js  را ایجاد کنید:

module.exports ={
  plugins: [
     require ('cssnano')({
         preset: 'default',
      }),
  ],
};

در واقع در این فایل به postcss گفته می شود که از cssnano به عنوان یک پلاگین استفاده کند.

سپس می توانید فایل package.json را ویرایش نموده و با یک اسکریپت در ابتدای آن ، فایل css مدنظر جهت minify کردن را معرفی کنید:

"scripts": {
"minify-css": "postcss src/css/main.css > src/css/main.min.css"
}..
"devDependencies": {
"cssnano": "^5.1.15", "postcss-cli": "^10.1.0"
}

بعد از معرفی فایل css نیاز است در دایرکتوری های مربوط به پروژه فایل های css جهت minify را از طریق ترمینال تغییر دهید:

npm run minify-css
OR yarn minify-css  

بعد از این مرحله هر دو فایل css پیش / پس از minify را از نظر حجم و سرعت بارگذاری در سرور بررسی کنید. 

برای این بررسی ابزار Developer tools مرورگر بهترین راهنمای شما خواهد بود.

روش سوم

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

چگونه می توان سطح minification را تنظیم کرد؟

سطح minification را می توانید با توجه به نیاز و هدف خود تنظیم کنید. برای مثال، اگر می خواهید سرعت لود سایت خود را به حداکثر برسانید، می توانید از سطح بالای minification استفاده کنید که باعث می شود فایل های خود را به شدت فشرده سازی کنید. اما اگر می خواهید کد های خود را قابل خواندن و ویرایش نگه دارید، می توانید از سطح پایین یا متوسط minification استفاده کنید که باعث می شود فقط کدهای غیر ضروری را حذف کنید 

برای تنظیم سطح minification می توانید از گزینه های مختلف ابزارها یا افزونه های minification استفاده کنید. برخی از این گزینه ها عبارتند از:

• حذف توضیحات:

با فعال کردن این گزینه، می توانید تمام توضیحات را از فایل های خود حذف کنید 

• حذف فضاهای خالی:

با فعال کردن این گزینه، می توانید تمام فضاهای خالی، خطوط جدید و تب ها را از فایل های خود حذف کنید.

• کوتاه کردن نام های متغیر:

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

• حذف نقطه ویرگول:

با فعال کردن این گزینه، می توانید نقطه ویرگول های غیر ضروری را از فایل های JavaScript خود حذف کنید 

• Packaging CSS:

با فعال کردن این گزینه، می توانید قوانین CSS را به صورت گروه بندی شده و بهینه شده نمایش دهید.

چگونه می توان minification را غیرفعال کرد؟

برای غیرفعال کردن minification می توانید از گزینه های مختلف ابزارها یا افزونه های minification استفاده کنید. برای مثال، اگر از افزونه Autoptimize استفاده می کنید، می توانید به تنظیمات افزونه بروید و گزینه های HTML، CSS و JavaScript را غیرفعال کنید. سپس باید حافظه کش سایت خود را پاک کنید تا تغییرات اعمال شود.

اما اگر می خواهید minification را برای یک صفحه وب خاص غیرفعال کنید، می توانید از تگ noptimize استفاده کنید. این تگ باعث می شود که افزونه Autoptimize فایل های HTML، CSS و JavaScript را در بین دو تگ noptimize فشرده سازی نکند. برای مثال:

<noptimize>
<script src="example.js"> </script>
<link rel="stylesheet" href="example.css">
</noptimize>

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

چرا minification را گاهی غیرفعال می کنند؟

در برخی موارد، ممکن است minification باعث ایجاد مشکلاتی شود. برای مثال:

۱- دقیقا در زمان اشکال زدایی یا توسعه وب سایت مشکل ساز می شود.

۲- minification ممکن است باعث شود کد های خود را نتوانید به درستی تست کنید. این می تواند در زمان ارزیابی کیفیت و عملکرد وب سایت مشکل ساز شود.

۳- minification ممکن است باعث شود کد های خود را نتوانید به راحتی اشتراک گذاری کنید. در زمان همکاری با دیگر توسعه دهندگان یا منابع آموزشی مشکل ساز شود.

بنابراین، بسته به نوع پروژه و نیاز خود، ممکن است بخواهید minification را غیرفعال کنید یا از سطح پایین یا متوسط minification استفاده کنید. البته باید به یاد داشته باشید که غیرفعال کردن minification ممکن است باعث کاهش سرعت لود سایت و کاهش رتبه سئو شود.

Minify کردن یا Compress کردن ؟ مساله اینست!

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

کوچک سازی(Minify) : محتوای کد را تغییر می دهد. اندازه فایل کد را با حذف فضاها، کاراکترها و قالب‌بندی ناخواسته کاهش می‌دهد  و در نتیجه کاراکترهای کمتری در کد ایجاد می‌شود. حتی این روش ممکن است با تغییر نام متغیرها برای استفاده از کاراکترهای کمتر، کد را بیشتر بهینه کند.

فشرده‌سازی(Compress) : این  روش لزوماً محتوای کد را تغییر نمی‌دهد ،مگر اینکه فایل‌های باینری مانند تصاویر را در نظر بگیریم. این روش در واقع با فشرده سازی فایل قبل از ارائه آن به مرورگر در صورت درخواست، اندازه فایل را کاهش می دهد 

این دو تکنیک مقابل هم نیستند بلکه می توانند با هم برای ارائه کد بهینه شده به کاربر استفاده شوند.

مزایای Minification

در کل Minification فرایند حذف کاراکترهای غیر ضروری از کدهای صفحات وب و فایل های اسکریپت های موجود در سایت است، مانند Comment ها، فضاهای خالی(Space ها و Tab ها و …) و نام های Variable های طولانی.

Minification می تواند اندازه فایل را کاهش دهد و سرعت بارگذاری وب سایت ها را بهبود ببخشد، همچنین در مصرف پهنای باند صرفه جویی کند و در نتیجه کاربر تجربه بهتری از نظر سرعت بارگزاری و لود سایت داشته باشد.

Minification یکی از روش های استاندارد برای بهینه سازی سمت کاربر است که هدف آن بهبود عملکرد وب سایت ها است. همچنین بسیاری از کتابخانه های محبوب جاوااسکریپت، مانند jQuery، AngularJS و Bootstrap، نسخه های فشرده شده از فایل های خود را برای استفاده در وبسایت ها ارائه می دهند.

فشرده سازی می تواند به صورت دستی یا خودکار با استفاده از ابزارهای مختلف انجام شود. با این حال، فشرده سازی دستی می تواند چالش برانگیز و پر خطا نیز باشد، به خصوص برای فایل های بزرگ. بنابراین، توصیه می شود از ابزارهای خودکار یا CDN ها استفاده کنید که می تواند فشرده سازی را به عنوان یک امکان ویژه ارائه دهند.

به طور خلاصه تعدادی از مزایای Minification به شرح زیر است:

• کاهش اندازه فایل
• افزایش سرعت بارگذاری وب سایت
• صرفه جویی در پهنای باند
• بهبود تجربه کاربر
• جمع و جور و بهینه کردن کد