رفع خطای Avoid CSS @import با 4 روش قطعی

اگه در زمان تست سرعت با استفاده از ابزارهای تست سرعت سایت با خطای Avoid CSS @import روبه‌رو شدید، نگران نباشید. در این مقاله از میزفا تولز به بررسی چیستی این خطا و مشکلاتی که ایجاد می‌کند، می‌پردازیم و در نهایت با 4 راه‌حل قطعی این خطا رو رفع می‌کنیم. همراه ما باشید.✌️

متد CSS@import چیست و چه مشکلی ایجاد می‌کند؟

همانطور که می‌دونید از کدهای css برای استایل دهی و ظاهر سایت استفاده می‌شود.
متد CSS @import یعنی فایل‌های CSS از داخل یک فایل CSS دیگر فراخوانی شوند. زمانی که از @import استفاده می‌شود، باعث می‌شود style sheet و فایل‌های CSS به صورت موازی لود شوند. مثل جاوا اسکریپت، CSS هم به طور پیش‌فرض render blocking محسوب می‌شود، یعنی مرورگر تا زمانی که اونها رو دانلود، تجزیه و سپس اجرا نکند، شروع به بارگیری محتوای دیگری نمی‌کند. 
بدون هیچ یک از سبک‌های اعمال شده در صفحه، صفحه غیرقابل استفاده هست. احتمالاً این مورد رو در برخی از صفحات سایت‌ها مشاهده کرده‌اید که در آن‌ها یک "فلش" از محتوای بدون استایل، درست قبل از اعمال CSS نمایش داده می شود که عملاً برای کاربر غیرقابل استفاده هست.

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

رفع خطای Avoid CSS @import (4 روش)

برای جلوگیری از خطای Avoid CSS @import در گزارش تست سرعت وب‌سایت، بهترین روش این است که CSS رو از داخل خود HTML فراخوانی کنید و همچنین از بهینه‌سازی‌های CSS یعنی کاهش تعداد فایل‌های CSS استفاده می‌کنید. این خطا رو می‌توان با یکی از 4 روش زیر حل کرد:

1- فایل‌های CSS رو ترکیب کنید.

 یکی از روش‌ها این است که می‌توانید فایل‌های css رو ادغام کنید. شما به سادگی می‌توانید فایل‌ها رو کپی و مستقیماً در فایل اصلی جایگذاری کنید. 
راه دیگر این است که می‌توانید به جای اضافه کردن CSS@import یک لینک جداگانه در هدر HTML اضافه کنید.

2- از CSS درون خطی در HTML استفاده کنید.

اگر CSS داخل HTML باشد، بارگذاری متوالی غیرضروری صفحه رو کاهش می‌دهد.

<img src="picture.jpg" /><script type=“text/css”>…CSS script goes here…</script>

 3- از تگ link در HTML استفاده کنید.

اگر از تگ link در هدر HTML به جای استفاده از CSS@import استفاده شود، به کاهش این خطا کمک می‌کند.

<link href=”style2.css” rel=” stylesheet” type=”text/css”>

4- قالب رو تغییر دهید. 

در نهایت اگر با روش‌های بالا مشکلتون برطرف نشد باید قالب ساییتون رو تغییر بدید و اگر سایتتون وردپرسی نیست از برنامه نویس بخواهید این مشکل رو برطرف کنه.

همین حالا خطای Avoid CSS @import رو رفع کنید.

خطای Avoid CSS @import کمتر در سایت‌ها مشاهده می‌شود اما اگر به هر دلیلی با این خطا روبه رو شدید، در این مقاله به مشکلات ناشی از این خطا و همچنین راهکارهای رفع ارور Avoid CSS @import پرداختیم تا به سادگی بتوانید این خطا رو با این 4 راهکار برطرف کنید.  به طور کلی به خاطر داشته باشید که حتی از یک @import استفاده نکنید.

اگه به دنبال کاهش خطاهای سرعت و افزایش سرعت سایتتون هستید، حتما آموزش‌های افزایش سرعت سایت میزفا تولز رو که توسط متخصصین سئو نوشته شده رو مطالعه کنید. در این آموزش‌ها اکثر خطاهای سرعت سایت با چیستی و راهکارهای قطعی رفع اونها بررسی شده است.