سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس و از سایت میزفا همراه شما هستیم. تو جلسه ۳۹ درباره رفع خطای Remove duplicate modules in JavaScript bundles صحبت کردیم و در این جلسه به آموزش برطرف کردن ارور Remove unused CSS در جی تی متریکس می‌پردازیم. این خطا مربوط به بهینه سازی CSS یا فایل‌های استایل دهی هست. درک مفهوم این خطا نسبتا ساده و برطرف کردنش تقریبا سخته. پس اگه شما متخصص برنامه نویسی نباشید یا سایتتون برنامه نویس نداشته باشه، احتمالا نخواهید تونست این مشکل رو حل کنید. با این حال ما تجربیاتمون رو در این مقاله با شما درمیون می‌ذاریم و امیدواریم مفید باشه.
لطفا تا پایان با میزفا همراه باشید.
سرفصل‌های پست
خلاصه خطای Remove unused CSS
میزان سختی: ****
روی چه مواردی تاثیر می‌ذاره: First Paint و خطای Eliminate render-blocking resources
علت ایجاد خطای Remove unused CSS چیست؟
فایل‌های CSS برای استایل دهی به صفحات و تعریف قوانینی برای نحوه چیدمان صفحه استفاده میشن. اگه تو یه تگ <link> از فایل CSS به شکل زیر استفاده کنیم، بهش External Stylesheet یا استایل شیت خارجی گفته میشه. چرا که این کدها خارج از سند HTML و در یه فایل خارجی دخیره شدند.
<!doctype html>
<html>
<head>
<link href="main.css" rel="stylesheet">
...زمانی که مرورگر به تگ <link> می‌رسه، باید فایل main.css رو دانلود و تجزیه کنه. از طرفی در حالت عادی تا قبل از اینکه مرورگر تمام این فایل‌های CSS (و البته سایر منابع صفحه مثل جاوا اسکریپت‌ها) رو دانلود و تجزیه نکنه، نمی‌تونه صفحه رو Render کنه. یعنی کاربر نمی‌تونه هیچ محتوایی رو روی صفحه ببینه و این روی معیار First Paint هم اثر گذاره و مهم‌تر از همه، باعث تجربه کاربری (UX) ضعیف میشه. به همین دلیله که فایل‌های CSS می‌تونند render-blocking محسوب بشن و باعث توقف Rendering صفحه بشن.
خبر خوب اینجاست که میشه بهینه سازی CSS رو در دستور کار قرار بدیم و از این اتفاقات تا حد زیادی جلوگیری کنیم. در خطای Remove unused CSS هم جی تی متریکس به همین موضوع اشاره داره. مرورگر به‌صورت پیش فرض همه فایل‌های CSS رو دانلود و تجزیه می‌کنه تا چیدمان صفحه رو ایجاد کنه. درحالیکه شاید خیلی از این CSS ها برای لود اولیه صفحه ضروری نباشند. بعضی از این کدها اثری در چیدمان و لود شدن محتوای Viewport (قسمتی از صفحه که کاربر بدون اسکرول کردن می‌بینه) ندارند. برای همین میشه اجرای اونها رو کمی به تعویق انداخت تا در ابتدا منابع مهم‌تر صفحه لود بشن. از طرفی بعضی از کدهای CSS اصلا هیچ کاربردی در چینش صفحات ما ندارند. به عبارتی فایل‌های بدون استفاده‌ای هستند که قبلا بنا به دلایلی (مثل انجام تست) ازشون استفاده می‌کردیم. پس میشه اونها رو حذف کرد تا کار مرورگر کمتر بشه.
با شناسایی درست فایل‌های استایل دهی صفحاتمون و کدهای CSS استفاده شده برای چیدمان صفحه، میشه CSS های غیرضروری رو به تعویق انداخت و همچنین CSS های بدون استفاده رو حذف کرد. این خلاصه‌ای از علت ایجاد ارور Remove unused CSS در GTmetrix هست. برطرف کردن خطای Remove unused CSS باعث افزایش سرعت سایت و بهینه سازی تجربه کاربری میشه. چون با بهینه سازی CSS ها، منابع اصلی صفحه زودتر لود میشن و کاربر برای لود شدن محتوای اولیه صفحه کمتر انتظار می‌کشه.
چطور خطای Remove unused CSS را برطرف کنیم؟
حالا که با علت ایجاد خطا آشنا شدیم، روش‌های برطرف کردن خطای Remove unused CSS رو به ۲ دسته تقسیم می‌کنیم:
- بهینه سازی CSS غیرضروری
- حذف CSS بدون استفاده
۱. بهینه سازی CSS غیرضروری
برای بهینه سازی فایل‌های CSS ضروری (فایل‌های استایل دهی که برای لود اولیه صفحه ضروری محسوب میشن) ۲تا راهکار خوب پیشنهاد میشه. راهکار اول Inline کردن اونهاست. همونطور که در ابتدا اشاره شد، اگه با استفاده از تگ <link> فایل‌های CSS خارجی رو فراخوانی کنیم، بهش External Stylesheet گفته میشه. در مقابل، استفاده از حالت Inline برای CSS های خارجی کم حجم، مزایای بیشتری داره و باعث بهینه سازی سرعت سایت ما میشه. اطلاعات بیشتر درباره نحوه انجام این کار رو آقای آریافر در مقاله خطای Inline small CSS توضیح دادند.
راهکار پیشنهادی بعدی، استفاده از متد Code-splitting CSS یا جداسازی کدهای CSS هست. اگه شما متخصص برنامه نویس حرفه‌ای نباشید، نمی‌تونید از این متد استفاده کنید. پس بهتره درباره راهکار اول مطالعه و سعی کنید اون رو امتحان کنید. اما برنامه نویسان عزیز هم اگه با متد Code-splitting آشنایی ندارند، می‌تونند این مقاله رو بخونند.
۲. حذف CSS بدون استفاده
کدهای CSS بدون استفاده ممکنه به دلایلی مثل نصب افزونه‌های متعدد، کدهای باقی مانده از ورژن قبلی سایت، استایل دهی‌های موقت، انجام تست و… در صفحات ما وجود داشته باشند. پس ما باید اول اونها رو شناسایی و سپس حذف کنیم. اما متاسفانه انجام این کار و رفع ارور Remove unused CSS به همین سادگی نیست. شناسایی این کدها و حذف کردنشون نیاز به مهارت و تخصص در برنامه نویسی داره. پس اگه خودتون تخصص ندارید، پیشنهاد می‌کنیم این موضوع رو هم به برنامه نویس سایتتون بسپارید. مطالعه این مقاله سایت css-tricks هم می‌تونه آگاهی خوبی درباره این موضوع به برنامه نویسان عزیز بده.
۳. استفاده از افزونه های سرعت برای وردپرس
هرچند پلاگین‌های سرعت وردپرس تنظیمات اختصاصی برای حل مشکل Remove unused CSS ندارند؛ اما تو برخی موارد، اگه تنظیمات مربوط به CSS این افزونه‌ها رو درست انجام بدیم، ممکنه باعث رفع ارور Remove unused CSS هم بشن. درباره این پلاگین‌ها تو مقاله بهترین افزونه افزایش سرعت وردپرس صحبت کردیم.
همینجا که صحبت از افزونه‌ها شد، به این موضوع هم اشاره کنم که نصب تعداد زیاد افزونه خودش ممکنه یکی از دلایل ایجاد ارور Remove unused CSS باشه. پس حواستون خیلی به این موضوع باشه که از نصب تعداد زیاد افزونه در سایتتون خودداری کنید.
۴. کمک گرفتن از تیم سئو یا متخصص سئو
اگه مقاله رو خوندید و تلاش کردید این خطا رو در GTmetrix جدید برطرف کنید اما هنوز موفق نشدید، می‌تونید کار رو به یه متخصص برنامه نویسی یا متخصص سئو بسپارید. اگه تیم خوب می‌شناسید که هیچ ولی اگه دنبال یک تیم حرفه‌ای و همینطور دنبال بهترین خدمات در زمینه SEO می‌گردید، می‌تونید خدمات سئو میزفا رو بررسی کنید. کلی خدمات متنوع از جمله بهینه سازی سرعت سایت برای خدمت رسانی به شما عزیزان آماده کردیم.
جمع بندی
در این مقاله میزفا درباره روش برطرف کردن ارور Remove unused CSS در GTmetrix صحبت کردیم. این خطا مربوط به بهینه سازی فایل‌های CSS و حذف فایل‌های CSS بدون استفاده بود. ما دلایل ایجاد خطا و روش‌های برطرف کردنش رو گفتیم که البته خیلی آسون نیستند و نیاز به مهارت و تجربه بالا در برنامه نویسی دارند. امیدوارم این آموزش برای شما مفید بوده باشه. تو جلسه بعدی درباره خطای Remove unused JavaScript صحبت می‌کنیم.
اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.
