اگر برای فراخوانی اطلاعات مختلف در سایت خود از دستور @import استفاده می‌کنید، احتمالا پس از تست سرعت سایت در GTmetrix با خطای Avoid CSS @import مواجه خواهید شد. پس همراه ما باشید تا نحوه رفع خطای Avoid CSS @import را در این مطلب از مگ هاست ایران به‌صورت کامل بیاموزید.
خطای Avoid CSS @import چیست؟
در‌واقع فایل‌های CCS در ارتباط با ظاهر سایت و استایل‌دهی به صفحات آن است. در یک فایل CSS باید با کد‌نویسی مشخص کنید که هر بخشی از سایت شما چه ظاهری دارد و چگونه به کاربر نمایش داده می‌شود. دستور @import در فرآیند فراخوانی فایل‌های CSS از داخل یک فایل CSS دیگر کاربرد دارد. حال برای این که بتوانیم فایل‌ها اطلاعاتی را از درون یک فایل CSS فراخوانی کنیم از این دستور استفاده می‌کنیم.
سوال اصلی این است که ارور Avoid CSS @import چگونه رخ می‌دهد؟ زمانی که شما با استفاده بیش از حد از دستور Import@ تعداد درخواست‌هایی که برای فراخوانی اطلاعات به سرور ارسال می‌شود را افزایش دهید، سرعت سایت شما تحت تاثیر قرار خواهد گرفت.
مطلب پیشنهادی: GTmetrix چیست؟
دلایل ایجاد خطای Avoid CSS @import در GTmetrix
زمانی که در یک فایل CSS برای استایل‌دهی به سایت خود از فرمت import@ استفاده می‌کنید تا بتوانید اطلاعات دیگری را از فایل‌های دیگر فراخوانی کنید، ممکن است این کار سرعت سایت شما را کاهش دهد. تصور کنید در فایل CSS سایت خود، از کدهای زیادی برای استایل‌دهی به سایت استفاده کرده‌اید.
اگر در دیگر بخش‌های سایت برای فراخوانی آن استایل‌ها از دستور import@ استفاده کنید، اتفاقی که می‌افتد این است که فایل‌ها پشت سر هم شروع می‌کنند به لود شدن! حال اگر چندین بار از این دستور استفاده کرده باشیم، همه چیز به هم می‌ریزد؛ چرا که تا زمانی که فایل اول به‌صورت کامل لود نشود فایل دوم نیز لود نخواهد شد. این به معنای کاهش سرعت صفحات سایت و نمایش دیرهنگام اطلاعات به کاربران است، چیزی که همه کاربان حتی خود شما در هنگام مراجعه به یک سایت از آن فراری هستید. اما راه‌حل جایگزین چیست؟
نحوه رفع خطای Avoid CSS @import
زمانی که می‌خواهید یک استایل خاص را به فایل‌های دیگری از سایت خود اضافه کنید و به طور خاص از دستور import@ استفاده کنید، برای این کار کافیست مطابق دستور زیر عمل کنید.
@import url(“site.com/css/style.css”)
همانطور که متوجه شدید این کار به دلیل افزایش درخواست‌هایی که به سمت سرور ارسال می‌شود، ممکن است تاثیرات منفی بر سرعت سایت شما داشته باشد. در‌نتیجه زمانی که با استفاده از جی تی متریکس، سرعت سایت خود را ارزیابی می‌کنید، با این خطا مواجه می‌شوید که به شما می‌گوید از این کار اجتناب کنید.
راه‌حل جایگزین این است که کاری کنید که فایل‌ها مستقیما و به‌صورت همزمان و موازی دانلود شوند. در‌واقع استفاده از دستور import@ دانلود فایل‌ها را بهم وابسته می‌کند و هین سرعت سایت را کاهش می‌دهد.
برای این که این اتفاق دیگر نیفتد، یک راهکار این است که از متاتگ‌ها استفاده کنیم تا دانلود‌ها به‌صورت موازی انجام شود. برای مثال در مثال بالا بهتر است برای فراخوانی اطلاعات دیگر از کدهای زیر استفاده کنیم:
<link rel=”style.css” href=”style.css” type=”text/css”>
معمولاً رفع این ارور در سایت‌هایی که با استفاده از وردپرس و جوملا راه‌اندازی شده‌اند آسان‌تر است. اگر یک سایت اختصاصی دارید، شاید بهتر باشد که با یک برنامه‌نویس ماهر در این زمینه مشورت کنید.
جمع‌بندی
در این مطلب آموختید که چرا استفاده از دستور import@ می‌تواند سرعت سایت را کاهش دهد و شما را با خطای Avoid CSS @import در ابزار GTmetrix رو‌به‌رو کند.
این دستور باعث می‌شود بارگذاری اطلاعات در سایت شما و نمایش آن‌ها به کاربر به‌صورت وابسته و پشت سر هم انجام شود نه به‌صورت موازی! در‌نتیجه این وابستگی سرعت سایت را کاهش خواهد داد. شما می‌توانید برای دریافت راهنمایی بیشتر با کارشناسان ما در هاست ایران در ارتباط باشید. به ویژه اگر به راهنمایی‌های تخصصی یک برنامه‌نویس برای رفع خطای Avoid CSS @import نیاز دارید.
مطلب پیشنهادی: رفع خطای Serve resources from a consistent URL در gtmetrix
سوالات متداول
- چرا خطای Avoid CSS @import نمایش داده می‌شود؟
زمانی که شما با استفاده بیش از حد از دستور Import@ تعداد درخواست‌هایی که برای فراخوانی اطلاعات به سرور ارسال می‌شود را افزایش دهید این خطا نمایش داده می‌شود.
- چگونه خطای Avoid CSS @import را برطرف کنیم؟
یکی از راهکارهای کاربردی این است که از متاتگ‌ها استفاده کنیم تا بارگذاری اطلاعات در سایت به‌صورت موازی انجام شود.
- آیا برای رفع خطای Avoid CSS @import به دانش برنامه‌نویسی احتیاج دارید؟
اگر یک سایت اختصاصی دارید، به شما توصیه می‌کنیم با یک برنامه‌نویس ماهر در این زمینه مشورت کنید.
