آموزش رفع خطای Avoid CSS @import در جی‌ تی‌ متریکس

یکی از آسون‌ترین و مهم‌ترین کارهایی که برای سئو سایتتون باید انجام بدید، بالا بردن سرعت بارگذاری صفحه‌س. بالا بردن سرعت سایت جزو تجربه کاربری محسوب میشه و تجربه کاربری هم از سال ۲۰۲۰ معیار رتبه بندی گوگل بوده.

حالا اگه از سایتتون توی جی تی متریکس تست گرفته باشید، ممکنه خطای Avoid CSS @import رو ببینید. درسته که این خطا نادره ولی ممکنه برای شما هم اتفاق بیافته.😃

تو این مقاله بهتون میگم خطای Avoid CSS @import یعنی چی و چطور میتونید برطرفش کنید.

برای دریافت مشاوره به صفحه سئو سایت در شیراز مراجعه کنید.

فهرست:

• Avoid CSS @import یعنی چه؟
• CSS @import چگونه روی عملکرد صفحه تاثیر میگذارد؟
• روش رفع خطای Avoid CSS @import
  • استفاده از تگ لینک link tag
  • ترکیب یا این لاین کردن CSS
• جمع بندی

Avoid CSS @import یعنی چه؟

برای اینکه خطای Avoid CSS @import رو توضیح بدم، اول باید بدونید CSS چیه.

CSS برای یه هدف خیلی ساده ساخته شد. زمانی که CSS نبود، عنصرهای HTML تگ هایی نداشتند که باهاشون بشه فرمت صفحات رو درست کرد. در واقع، فقط میشد markup صفحات رو نوشت.

تگ هایی مثل <font> وقتی تو آپدیت HTML وارد شدند مشکلات زیادی ایجاد شد. چرا؟ چونکه صفحات وب دارای فونت های مختلف، پس زمینه های رنگی و سبک های زیادی هستند، بازنویسی کد هم فرآیندی طولانی، طاقت فرسا و پرهزینه بود.

CSS از نظر فنی حتما لازم نیست که باشه، اما اگه صفحه ای تو وب ببینید که فقط با عناصر HTML نوشته شده مطمئنا خوشتون نمیاد.😖

رنگ، تزئینات و سایر عناصر طراحی داخلی همه با CSS نوشته میشوند.

CSS @import به فرآیندی میگن که میشه با استفاده از اون یه فایل CSS رو از داخل یه فایل دیگه‌ی CSS به اصطلاح فراخونی کرد.

این روش باعث میشه که مرورگر، فایل CSS رو پشت سر هم لُود بکنه، یعنی اول یه فایل و سپس فایل دیگه رو لُود کنه به جای اینکه همه با هم بارگذاری بشن. از اونجایی که CSS اساسا render-blocking هستش، روی سرعت بارگذاری سایت شما تاثیر منفی میذاره.

پس جی تی متریکس بهتون پیشنهاد میده که از CSS @import توی کدهای سایتتون استفاده نکنید تا سرعت بارگذاری سایتتون بیاد بالا.

CSS @import چگونه روی عملکرد صفحه تاثیر میگذارد؟

همونطور که گفتم، به‌طور پیش‌فرض، فایل‌های CSS رندر شدن رو مسدود میکنند یعنی که نمیذارن مرورگر هیچ محتوای پردازش شده‌ای رو تا زمانی که لود بشن بارگذاری کنه.

به عبارت دیگه، CSS @import نمیذاره روند رندر تا زمانی که این فایل ها دانلود، تجزیه و اجرا نشده اند اجرا بشه.

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

به عنوان مثال – اگه یه فایل CSS به اسم style1.css دارید و میخواید فایل CSS دیگری به اسم style2.css رو به فایل CSS اصلی وارد کنید، از کد زیر در style1.css استفاده میکنید:

@import url("style2.css")

در مثال بالا، مرورگر style1.css v رو دانلود، تجزیه و اجرا میکنه، پس باید اول style2.css رو import کنه، و سپس style2.css رو دانلود و اجرا کنه.

این به درخواست‌های اضافی و رفت و برگشت شبکه نیاز داره، پهنای باند مصرفی رو افزایش میده و سرعت بارگذاری صفحه رو میاره پایین.

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

GTmetrix کدهای صفحه شما رو ارزیابی می کند و هر CSS @import رو علامت گذاری میکنه. اگه حداقل یکی ازش توی کد صفحه شما وجود داشته باشه، اون رو به عنوان خطا در نظر میگیره.

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

همونطور که گفتم، جای استفاده از CSS @import میتونید از روش های جایگزینش استفاده کنید:

استفاده از تگ لینک link tag

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

الف) با استفاده از <“link rel=”stylesheet>

<link rel="stylesheet" type="text/css" media="handheld" href="style2.css">

“style2.css” فایل CSSی هست که بهش لینک داده شده و attribute مدیا نشون میده که stylesheet لینک شده تو کدوم دستگاه نشون داده بشه.

ب) با استفاده از <“link rel=”stylesheet”>

<link rel="import" href="style2.css" async>

در این کد “style2.css” فایل CSS است که import میشه و تگ async نشون میده که این stylesheet به صورت ناهمزمان بارگیری شده.

توجه داشته باشید که ویژگی‌های async فقط باید به stylesheet غیر بحرانی اضافه بشه، یعنی اونایی که برای بارگیری محتوای حیاتی ضروری نیستند.

ترکیب یا این لاین کردن CSS

ترکیب و این لاین کردن فایل‌های CSS تکنیک‌هایی برای کاهش تعداد کلی فایل‌های CSS هستند.

ترکیب کردن CSS یعنی اینکه میتونید فایل هایی رو که وارد می کردید کپی و مستقیماً در فایل اصلی جایگذاری کنید. با این کار نیازی به وارد کردن فایل نیست.

راه دیگر این است که می توانید به جای اضافه کردن CSS@import یک لینک جداگانه در هدر HTML اضافه کنید.

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

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

جمع بندی

CSS @import باعث میشه مرورگر هر فایل CSS رو به صورت متوالی بارگذاری کند نه موازی. از اونجایی که CSS به طور پیش‌فرض رندر رو مسدود میکنه، روی عملکرد صفحه تأثیر میذاره و برای سئو سایتتون بده. بنابراین نباید از CSS @import استفاده کنید سرعت بارگذاری صفحه افزایش پیدا کنه و تجربه کاربری سایتتون بهتر بشه.

در این مقاله در مورد روش رفع خطای Avoid CSS @import در جی‌ تی‌ متریکس صحبت کردیم. ممنون که تا انتهای مقاله همراه من بودید در صورتی که حس میکنید مطلبی هست که گفته نشده حتما در قسمت نظرات با ما به اشتراک بگذارید. در صورت داشتن هرگونه سوال با تیم پشتیبانی پارس اوستا در ارتباط باشید.