جلسه ۱۵ – رفع خطای Avoid CSS @import

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

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

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

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

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

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

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

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

شاید بگویید CSS چیست؟ سی اس اس یا CSS یک سری کدهایی هست که باعث استایل دهی و ظاهردهی به سایت میشه، یعنی مثلا چرا در همین سایت میزفا بکگراند برخی عنوان‌ها مشکی هست؟ چرا برخی لینک‌های میزفا زرد است؟ چطور عکس موجود در پایین وسط چین شده؟ به کمک 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 رو فراخوانی کنن و اگر از @import برای فراخوانی فایل‌های css استفاده کنیم فایل‌ها به شکل پشت سر هم لود میشن یعنی اگر ما دو بار از این دستور برای فراخوانی فایل‌های استایل‌دهی استفاده کنیم فایل دوم لود نمیشه تا زمانی که فایل اول کامل لود بشه و این موضوع میتونه مشکلاتی رو در زمان بارگزاری و کاهش بالا رفتن سرعت سایت به موجود بیاره و باعث میشه صفحه ما کندتر لود بشه درواقع با این روش لود موازی را از دست میدیم. و از طرف دیگه استفاده از این دستور ذکر شده از نظر بهینه سازی و سئو خطا است و موتورهای جستجو مانند گوگل و سایر موتورهای جستجو نمره منفی به سئو داخلی سایت شما میدن.

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

از طرفی وجود خطای باعث میشه خطاهای دیگه در ابزار جی تی متریکس رخ بده مثل خطاهای Avoid long main-thread tasks و Minimize main-thread work، پس روی معیار Total Blocking Time هم اثر مستقیم داره.

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

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

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

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

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

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

روش ۳
شما می‌تونید کدهایی که داخل استایل @import هست رو به صورت تگ style در همون صفحه استفاده کنید و یا از روش inline css بهتره ببرید.

روش ۴ (روش وردپرسی):
میتونید از یک سری افزونه های خوب در زمینه سرعت استفاده کنید. ما یک مقاله جامع درباره بهترین افزونه های سرعت سایت وردپرسی نوشتیم حتما بخونید و کلی میتونه به شما کمک کنه.

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

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

پایان

من پوریا آریافر نویسنده این مقاله تمام تلاشم را کردم تا هر آنچه که مدونم و میشه رو در این مقاله به شما بگم تا با رفع ارور Avoid CSS @import باعث بهبود و افزایش رتبه سایت خودتون در گوگل بشید. اگر برای شما مفید بوده خوشحال میشم با دوستان خود این مقاله را به اشتراک بذارید. در جلسه بعدی درباره خطای ()Avoid document.write در جی تی متریکس صحبت می‌کنیم.

اگر سوالی داشتید حتما در نظر میزفا مطرح کنید. این جلسه از آموزش GTmetrix هم به پایان رسید، پیشنهاد میکنم سری مقالات سرعت وبسایت میزفا از دست ندید:

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

6 نظر

6 پاسخ

  1. چقدر شما خوبید آخه، ممنون از اینکه مقاله های علمی و کاملا مفید منتشر میکنید

    1. ممنونم بهزاد عزیز، نظر لطف شما ست
      خوب شما هستی که برای آموزش و یادگیری خودت وقت می‌ذاری؛ باعث افتخاره که مطالب میزفا برات کاربردی بوده.
      برات آرزوی موفقیت داریم

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=