ارور Avoid CSS @import در جی تی متریکس مربوط به کدنویسی سایت و فایل های CSS هست، یکی از ارورهایی هست که کمتر در یک سایتی رخ میده چرا که یک روش قدیمی و منسوخ شده هست و باید بدشانس باید این ارور رو دارید.
سلام دوستان عزیز. من پوریا آریافر متخصص سئو هستیم در سایت میزفا قصد دارم درباره نحوه رفع ارور Avoid CSS @import در GTmetrix با شما صحبت کنم، این مقاله در ادامه دورههای آموزش کار با سایت GTmetrix است و قصد داریم به کمک این آموزشها و ابزار آنلاین مثل GTmetrix یک سایت بهینه داشته باشیم. در مقاله قبلی خطای Avoid chaining critical requests بررسی کردیم.
مشکل Avoid CSS @import جز ارورهای PageSpeed گوگل هست از قدیم داخل جی تی متریکس بوده و الانم در نسخه جدید جی تی متریکس هست.
توجه داشته باش که گاهی برای حل ارور CSS @import نیاز به داشتن مهارت کدنویس و برنامه نویسی هست و البته گاهی هم به سادگی حل میشه و این بستگی به سایت و ارور شما داره ولی اصولا سایتهایی که با وردپرس هستند و یا با جوملا هستند حل کردن این مشکل در اونا سادهتر هست، با این حال نباید انتظار داشته باشی که بهت یک کد جادویی بدم و اونو بذاری تو سایت و سریع مشکلت حل بشه.
سرفصلهای پست
خلاصهای از خطای Avoid CSS @import
اولویت: متوسط
میزان سختی: راحت
میانگین امتیاز: ۹۷%
شاید بگویید CSS چیست؟ سی اس اس یا CSS یک سری کدهایی هست که باعث استایل دهی و ظاهردهی به سایت میشه، یعنی مثلا چرا در همین سایت میزفا بکگراند برخی عنوانها مشکی هست؟ چرا برخی لینکهای میزفا زرد است؟ چطور عکس موجود در پایین وسط چین شده؟ به کمک CSS میشه به یک سایت ظاهر مناسب داد و المانهای مختلف رو چیدمان کرد. به فایل CSS، فایل استایلدهی هم میگن.
خلاصه CSS مثل لباس تو تن انسان میمونه، اگر نیاز داری درباره CSS بیشتر بدونی حتما دوره آموزش CSS میزفا مطالعه کن، بالای ۱۰۰ مقاله به همراه کلی سوال پایانی و همینطور جایزه نقدی منتظر توست.
ارور 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 هم به پایان رسید، پیشنهاد میکنم سری مقالات سرعت وبسایت میزفا از دست ندید:
6 پاسخ
چقدر شما خوبید آخه، ممنون از اینکه مقاله های علمی و کاملا مفید منتشر میکنید
ممنونم بهزاد عزیز، نظر لطف شما ست
خوب شما هستی که برای آموزش و یادگیری خودت وقت میذاری؛ باعث افتخاره که مطالب میزفا برات کاربردی بوده.
برات آرزوی موفقیت داریم
سلام
با تشکر از مطالب عالیتون
سوال من اینه اصلا چه احتیاجی به استفاده از import برای وارد کردن css داریم در حالی که به راحتی میتونیم لینک بدیم ایا استفاده از import مزیتی نسبت به روش لینک دهی داره؟
سلان علیرضا عزیز.
مزیتی نداره صرفا یک روش قدیمی بوده برای اضافه کردن css در داخل یک css دیگر. الان دیگه از این روش استفاده نمیکنن.
ممنونم از حضورت 🙂
سلام
خیلی ممنون
مطلب خوبی بود
سلام، خواهش میکنم، موفق باشید.