آموزش سئو فنیآموزش افزایش سرعت سایت با ابزار GTMetrix

رفع خطای Avoid CSS @import

ارور Avoid CSS @import در جی تی متریکس مربوط به کدنویسی سایت است، یکی از ارورهایی هست که کمتر در یک سایتی رخ می‌دهد چرا که یک روش قدیمی و منسوخ شده برای لود کردن یک سری کدها مربوط به ظاهر سایت است.

سلام دوستان عزیز. من پوریا آریافر متخصص سئو هستیم در سایت میزفا قصد دارم درباره نحوه رفع ارور Avoid CSS @import در GTmetrix با شما صحبت کنم، این مقاله در ادامه دوره‌های آموزش کار با سایت GTmetrix است و قصد داریم به کمک این آموزش‌ها و ابزار آنلاین مثل GTmetrix یک سایت بهینه داشته باشیم. در مقاله قبلی خطای Avoid bad requests بررسی کردیم در این جلسه همان طور که گفتم قصد داریم درباره مشکل رایج Avoid CSS @import که جز ارورهای PageSpeed گوگل هست صحبت کنیم و ببینیم چطور میتونیم این مشکل را در سایت پیدا و رفع کنیم و و چرا اصلا این موضوع برای افزایش سرعت سایت ما مشکل‌ساز است. با میزفا همراه باشید.

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

خلاصه‌ای از خطا Avoid CSS @import

نام: Avoid CSS @import
نوعCSS
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: ۹۷%

 

شاید بگویید CSS چیست؟ سی اس اس یا CSS یک سری کدهایی هست که باعث استایل دهی و ظاهردهی به سایت می‌شوند، یعنی مثلا چرا در همین سایت میزفا بکگراند برخی عنوان‌ها مشکی هست؟ چرا برخی لینک‌های میزفا زرد است؟ چطور عکس موجود در پایین وسط چین شده است؟ به کمک CSS می‌شود به یک سایت ظاهر مناسب داد و المان‌های مختلف را چیدمان کرد. به فایل CSS، فایل استایل‌دهی هم می‌گویند.

ارور Avoid CSS @import چیست و چرا در جی تی متریکس خطا است؟

ارور Avoid CSS @import

حال متد @import یک فایل css را در درون یک فایل css دیگر وارد می‌کند یا به عبارتی فراخوانی می‌کند، خیلی وقت‌ها برنامه‌نویس‌ها به اشتباه  فایل استایل دهی اصلی (style-main.css) را در HTML فراخوانی می‌کند و بقیه فایل‌های استایل‌دهی را با دستور زیر داخل فایل استایل‌دهی اصلی صدا می‌زنند.

@import url("Address-other1-style.css")
@import url("Address-other2-style.css")
@import url("Address-other3-style.css")
.
.
body {
  background: red;
}
Some Code CSS
.
.

فرض کنید محتوای داخل فایل استایل دهی اصلی به صورت بالا باشد و در خط های اول همان‌طور که مشاهده کنید چندین فایل CSS دیگر در این فایل CSS اصلی لود شده‌اند.

حال جی تی متریکس می‌گوید Avoid CSS @import یعنی اجتناب کنید از مد @import در فایل‌های CSS و خلاصه آنکه استفاده نکنید. ولی چرا؟

چرا نباید از @import در CSS برای فراخوانی فایل‌ها استفاده کنیم؟

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

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

چطور ارور Avoid CSS @import را رفع کنم؟ جایگزین مناسب @import

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

روش ۱ – فایل تستی Address-other1-style.css در مثال بالا را به خاطر دارید؟ باید آدرس کامل این فایل را پیدا کنید و بعد در بخش head سایت کدی شبیه به زیر را درج کنید. در این حالت فایل CSS شما از @import خارج می‌شود و یک فایل External می‌شود.

<link rel="style.css" href="Address-other1-style.css" type="text/css">

روش ۲ – روش دوم این هست که هر چی کد داخل فایل تستی Address-other1-style.css بود را کپی کنیم و در همان قستی که این فایل @import شده است را جا دهیم. درواقع یک نوع ادغام در CSS را در دستور کار قرار دادیم و روش خوبی هست ولی گاهی ممکن است برای سایت های وردپرسی و یا جوملا کاربرد نداشته باشد چرا که اگر قالب خود را آپدیت کنند تغییرات آن‌ها از بین می‌رود.

روش ۳ – این روش بیشتر راهنما هست و اگر برای شما روش‌های قبلی امکان پذیر نبود پیشنهاد میکنیم قالب سایت خود را عوض کنید و یا اگر سایت شما اختصاصی هست طبیعتا باید به برنامه نویس گرامی خودتون بگویید تا این مورد را بررسی و رفع کند.

البته ما درباره این موارد و کلا درباره بهبود سرعت سایت به کمک ابزار جی تی متریکس یک دوره هم برگزار کردیم، یک دوره ۸ ساعت فیلم آموزش بهبود سرعت سایت به کمک ابزار GTmetrix هست که اگر تمایل داشتید می‌توانید شرکت کنید.

پایان

من پوریا آریافر نویسنده این مقاله تمام تلاشم را کردم تا هر آنچه که می‌دانم و می‌شود را در این مقاله به شما بگویم تا با رفع ارور Avoid CSS @import باعث بهبود و افزایش رتبه سایت خود در گوگل شوید. اگر برای شما مفید بوده خوشحال میشم با دوستان خود این مقاله را به اشتراک بگذارید و همینطور اگر سوالی داشتید حتما در نظر میزفا مطرح کنید. این جلسه از آموزش GTmetrix هم به پایان رسید در جلسه  بعد به نحوه رفع خطای Avoid landing page redirects در pagespeed گوگل میپردازیم. با میزفا باشید 🙂

برچسب ها

پوریا آریافر

اولین کسب و کار آنلاین خودم را در فیسبوک راه‌اندازی کردم و در سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال را داشتم. سپس وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت را دریافت کردم، در دوران خدمت سربازی مسئول بهینه سازی یک وبسایت خبری معتبر شدم و آشنایی با سئو را آموختم و در سال ۲۰۱۴ توانستم به رتبه ۴۰۰ الکسا نزدیک کنم. برخلاف میل درونی، وارد دانشگاه شدم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، در همان سال بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو را داشتم، که فروختم تا بتوانم تمرکز را فقط بر روی سئو بگذارم، فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌می‌گیرد، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کرده‌ام. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری را یادگیری و یاددادن می‌دانم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شده، می‌تواند چنین بستر مناسبی را فراهم کند. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم ...

نوشته های مشابه

‫4 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام
    با تشکر از مطالب عالیتون
    سوال من اینه اصلا چه احتیاجی به استفاده از import برای وارد کردن css داریم در حالی که به راحتی میتونیم لینک بدیم ایا استفاده از import مزیتی نسبت به روش لینک دهی داره؟

    1. سلان علیرضا عزیز.
      مزیتی نداره صرفا یک روش قدیمی بوده برای اضافه کردن css در داخل یک css دیگر. الان دیگه از این روش استفاده نمیکنن.
      ممنونم از حضورت 🙂

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر