امتیاز دهید

دنبال کردن



بهینه سازی کد های CSS جهت افزایش سرعت بارگذاری سایت





farsoft logo

چگونه CSS را بهینه سازی کنیم؟


کد css

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

تست کرد فایل های CSS سایت

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

ترکیب فایل های CSS

ترکیب فایل های css

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

فایل CSS را فشرده کنید

کد css  فشرده نشده
کد css  فشرده شده

بعد از آنکه تمامی فایل ها را به یک فایل CSS تبدیل کردید باید فایل جدید را فشرده کنید تا بازدیدکننده که وارد سایت شما می شود حجم کمتر برای بارگذاری مصرف کند. هر whitespace در css یک بایت و هر line 2 بایت حجم دارند و مجموع این ها باید تماما قبل از نمایش توسط مرورگر کاربر دانلود شود. شما می توانید از ابزارهای آنلاین فشرده سازی برای این کار استفاده کنید.

الویت بندی محتوا ها

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

- در ابتدا مشخص کنید که آیا فایل ترکیب شده CSS سایز زیادی دارد یا نه. اگر سایز کدها کم می باشد بهترین روش استفاده از روش Inline در تگ head در HTML می باشد. اگر حجم کدها زیاد می باشد مراحل بعد را ادامه می دهیم.

- از بین کدهای CSS الویت های بالا که در صفحه بارگذاری می شوند را مشخص کنید که کدام کدها در بالاترین الویت برای نمایش در صفحه نیاز هستند. یک روش برای مشخص کردن خودکار الویت ها استفاده از Addy Osmani’s Node.js Package می باشد. برای انجام این روش نیاز به دسترسی SSH می باشد که ممکن است برای همه مناسب نباشد. دیگر روش ها استفاده از ابزارهای آنلاین Online critical CSS Generator می باشد یا اینکه به صورت دستی این کار را انجام دهید.

- حالا که کدهای حیاتی CSS برای بارگذاری صفحه پیدا کردین آنها را در قمست head بنویسید و بقیه فایل خارجی CSS را در پایین صفحه فراخوانی کنید.

استفاده نکردن از کدهای @import

کد import css

@import زمانی استفاده می شود که یک فایل خارجی CSS در کد CSS دیگری فراخوانی شود . زمانی که یک کد با @import داشته باشید مرورگر به جای آنکه به صورت موازی فایل ها را بارگذاری کند در ابتدا فایل های @import را بارگذاری می کند سپس برای بقیه فایل ها درخواست می فرستد، که هم باعث کند شدن سرعت بارگذاری صفحه می شود و هم اینکه درخواست های HTTP بیشتری ارسال خواهد کرد.

استفاده نکردن از style برای تگ ها در body

شما باید تمامی Style هایی که مستقیما بر روی تگ ها استفاده شده است مانند (<p style=”color:red”>text</p>) را برداشته و آنها را در head جایگزین کنید. استفاده کردن مستقیم Style بر روی تگ ها باعث مسدود کردن رندر کردن میشود. یعنی تا زمانی که تمامی style ها خوانده نشود صفحه بارگذاری نمی شود.

بهینه کردن کدهای CSS برای وردپرس

بهینه کردن کد های CSS برای وردپرس یا جوملا و بقیه CMS ها همانند بهینه کردن کدها برای سایت های غیر CMS هستند. پس برای بهینه کردن روش های بالا را دنبال کنید.


در صورت مفید بودن این مطلب را به اشتراک بگذارید




دیدگاه خود را درباره این مطلب بنویسید:




  • حسین مداحی
    Profile Avatar

    سلام. به نظرم بهتر بود که یک کم آموزش رو طولانی تر میکردید و نحوۀ انجام کار با اون ابزاری که معرفی کردید رو هم آموزش میدادید تا همه بتونن استفاده کنن. بازم ممنون.

    ستار شاکری
    Profile Avatar

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