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

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

 

Avoid CSS @import

Avoid CSS @import

آموزش رفع خطای Avoid CSS @import در GTmetrix

یکی دیگه از خطاهایی که معمولا ممکنه در هنگام تست سرعت سایت با GTmetrix باهاش مواجه بشید Avoid CSS @import هست. درواقع نمیشه گفت که این پیغام نشانی از خطا داره، بلکه به شما گفته میشه که سعی کنید از ایمپورت کردن یک فایل در فایل‌های دیگه به این شیوه دوری کنید و از روش استاندارد استفاده کنید. در سایت‌های فارسی زبان مجبور هستیم تا از فونت‌های فارسی استفاده کنیم که سایتمون حسابی با تغییر فونت دگرگون بشه. برخی افراد میان و اشتباها داخل همون صفحه HTML فونتی که مد نظرشون هست رو با استفاده از [email protected] فراخوانی می‌کنند که این کار اشتباه هست.

 

اگر مجموعه‌های آموزش GTmetrix رو در میزبان‌فا دنبال کرده باشید، در آموزش رفع خطای Enable Keep Alive دیدیم که برای اینکه سایت با سرعت بیشتری لود بشه، بهتره کاری کنیم که فایل‌هایی با فرمت یکسان مثل css.، js.، تصاویر و… به صورت همزمان شروع به لود کنند و اینطور نباشه که یکی یکی این فایل‌ها از سرور برای مرورگر ارسال بشن.

آموزش رفع خطای Avoid CSS @import در GTmetrix

خب، حالا وقتی ما بیایم و با استفاده از دستور [email protected] فایلی رو در صفحه فراخوانی کنیم، تا زمانی که فایل اولیه که مکمل فایل‌های بعدی هست و در اون فایل‌های دومی فراخوانی شدن لود نشده باشه و فایل‌های دوم لود شده باشن، این کار باعث میشه که بعد از لود فایل اولیه مجدد فایل‌هایی که در این فایل فراخوانی شدن شروع به لود بکنند. برای همین تعداد درخواست HTTP بالا میره و سرور هم مجددا باید به درخواست مرورگر پاسخ بده و از نو فایل‌ها رو برای مرورگر ارسال بکنه تا صفحه به صورت کامل لود بشه. برای نمونه اگر فایل استایلی رو به این روش بخوایم در جایی فراخوانی کنیم، از حالت زیر استفاده می‌کنیم.

@import url("site.com/css/style.css")

بنابراین بهتره از این روش دوری کنیم و مستقیما کاری کنیم که فایل‌ها به صورت همزمان و در یک خط شروع به دانلود کردن بکنند. نه اینکه یک فایلی وابسته به فایل‌های دیگه باشه که تا وقتی اون فایل لود نشده شروع به لود شدن نکنه. برای این کار میشه متاتگ‌ها استفاده کرد که برای نمونه مثال قبل میشه از کد زیر استفاده کرد.


این حالت استاندارد هست و وقتی از این حالت استفاده کنیم در واقع لود موازی اتفاق میفته و همزمان فایل‌های وابسته که فراخوانی شدند هم شروع به دانلود شدن خواهند کرد. در این صورت دیگه با لود چند باره و افت سرعت سایت مواجه نخواهید بود.

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

[ لینک منبع ]

  1. اولین نفری باشید که دیدگاه خود را ثبت می کند!
« بهبود تجربه کاربری ux با هدف افزایش فروش و جذب مشتری
آموزش رفع خطا RSS Feed در وردپرس و نحوه رفع آن »