نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن
نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن » در این مقاله، دلایل فشرده سازی و کوچک کردن فایل های CSS و نیز روش های فشرده کردن فایل CSS را آموزش می دهیم.

 نحوه فشرده‌سازی فایل‌های CSS و اهمیت آن 

Minify & Compress CSS

فشرده‌سازی فایل های CSS

 

فشرده‌سازی (مینی‌فای کردن) فایل‌های CSS

 

فشرده‌سازی CSS (Minifying CSS) چیست؟

همانطور که از نام آن مشخص است، به معنای کوچک سازی فایل های css و فشردن آنها می باشد. از آنجائیکه فایل های css بطور پیش فرض، بصورت render blocking می باشند، ضروریست که آنها را تا حد ممکن فشرده (minify) کنید تا سرعت لود وب سایت بالاتر برود. نحوه تعریف فایل css سایت خود را توسط ابزار css delivery tool بررسی کنید.

 

قالب ها و استایل های وردپرس (WordPress Themes and CSS):

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

حالا فرض کنید قالب زیبای وردپرسی شما بطور پیش فرض دارای ۱۲ تم رنگی مختلف باشد. با اینکه شما در آن واحد از یکی از این رنگها استفاده می کنید، اما سایر استایلهای مربوط به بقیه رنگ ها نیز لود می شود.

 

مینیفای کردن CSS یعنی کوچک‌سازی آن (Minify CSS):

اگر تم سایت شما تمام css ها را لود می کند، چه مورد استفاده باشد و چه نیازی به لود آنها نباشد، باید استایل های اضافی آن را حذف کنید. اگر خودتان به طراحی قالب و نوشتن کدهای css مسلط هستید، قادر خواهید بود کدهای بلااستفاده را از قالب سایت وردپرسی خود حذف کنید اما اگر قالب را از کسی یا شرکتی خریداری کرده اید، باید به پشتیبانی آن شرکت قضیه را اعلام کنید تا مسئله را حل کنند (کدهای تکراری و یا بلا استفاده css را از قالب حذف کنند).

قدم اول و اساسی در زمینه مینی فای کردن css اینست که اطمینان کسب کنید کدهای CSS اضافی و تکراری در سایت تان لود نمی شود.

 

نحوه فشرده سازی CSS:

حتی اگر به هر دلیلی نمی توانید کدهای اضافی را از فایل های CSS قالب سایت خود حذف کنید، حداقل می توانید توسط ابزارهای آنلاین (مانند دو سایت زیر) فایل های CSS را فشرده (Minify) کنید:

 

مثالی از مینی فای کردن css:

در این مثال، استایل های css طوری تعریف شده اند که فضای خالی بسیاری در بین آنها وجود دارد و این قضیه تاثیر بدی بر سایز فایل css خواهد داشت:

body {

        background-color: #d0e4fe;

    }

 

    h1 {

        color: orange;

        text-align: center;

    }

با کپی و پیست کردن کد بالا در یک ابزار فشرده سازی آنلاین، فرمت زیر را خواهیم داشت:

body {background-color:#d0e4fe;}

h1 {color:orange;text-align:center;}

بنابراین بهره بردن از ابزارهای آنلاین فشرده سازی css این مزیت را دارد که وقتی تعداد استایل های css زیاد می شوند، حذف فضای خالی بین این استایل ها تا حد زیادی باعث کاهش سایز فایل css خواهد شد و در نتیجه سرعت لود وب سایت افزایش می یابد.

اهمیتی ندارد شما بعنوان طراح سایت، کدهای css قالب سایت خود را به چه صورت تعریف کرده اید: درون خطی (inline)، فایل های خارجی (external files)، فایل خارجی ادغام شده (combined external files)

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

 

منبع: https://varvy.com/pagespeed/minify-css.html


برچسب‌ها:

بهینه سازی CSSبهینه سازی فایل CSSفشرده سازی cssفشرده کردن CSSفشرده کردن فایل CSSکوچک سازی فایل CSSمینی فای کردن CSSمینی فای کردن فایل CSSمینیفای کردن CSS

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × 4 =