فروشگاه اینترنتی پاسارگاد آریان

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

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

مرورگرهای Opera و Firefox افزونه ی بسیار معروفی با نام Dust Me را دارند که صفحه کنونی شما را بررسی کرده و تمامی دستورات CSS که استفاده نشده اند را برایتان لیست می کند. کاربران کروم خوش شانس اند، چرا که ابزارهای توسعه دهنده (Developer Tools) موجود در خود مرورگر کروم، دارای این قابلیت است.

حذف دستورات بی استفاده در CSS

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

• صفحه مورد نظرتان را در Google Chrome باز کرده و Dev Tools را از مسیر File > Tools > Developers Tools را اجرا نمایید.

• سربرگ Audits را از Dev Tools انتخاب کرده و گزینه های Web Page Performance و Reload Page and Audit on Load را انتخاب کنید. حال بر روی Run کلیک کنید.

• در صفحه ی نتایجی که برایتان نمایش داده می شود، Remove Unused CSS Rules را باز کرده و فایل های CSSایی که به سایت شما لینک شده اند را انتخاب کنید. شما می توانید که فایل های CSSایی که توسط پلاگین های شبکه های اجتماعی اضافه شده اند را نادیده بگیرید چرا که از جانب شما غیرقابل کنترل اند.

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

نتیجه ها را می توانید در یک فایل متنی ذخیره کنید و همین عملیات را مجدداً برای دیگر صفحات انجام دهید. دقت کنید که ممکن است برای چند صفحه مخلتف از یک فایل CSS استفاده کرده اید، لذا این احتمال می رود که در یکی از صفحات، از یکی از Selectorها استفاده نکرده باشید، اما برای صفحه ی دیگر، آن را بکار گرفته باشید. لذا به تعداد selectorّهای استفاده نشده در هر صفحه دقت نمایید و آن هایی که دارای شمارنده ی بالاتری هستند، برای حذف ایمن تر خواهند بود.