آموزش رفع خطای avoid css @import در gtmetix

آموزش رفع خطای avoid css @import در gtmetix

یکی از خطاهایی که هنگام تست سرعت سایت با  Gtmetrix با آن مواجه می شویم به نام خطای avoid css @import  که از سری خطاهای page speed است.

avoid css @import چیست ؟

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

بعضی وقت ها دیده می شود که وب مسترها اگر چندتا فایل استایل خارجی وجوداشته باشد ، فایل اصلی را در سمت html سایت فراخوانی می کنند، و بقیه فایل ها با دستور @import url (“your file address.css”) از داخل فایل استایل اصلی آن ها را بارگزاری میکنند.اما این کار اشتباه است و گوگل آن را یک خطای اصلی می داند. برای رفع این خطا کافیست به آدرسی که gtmetrix  داده بروید و آن بخشی که مربوط به @import است را حذف کنید و فایل را ذخیره کنید ، بعد به بخش head سایت خودتان بروید و با دستور زیر آن را به صورت جداگانه فراخوانی و در صورت امکان اداغم کنید.

<link href=”style2.css” rel=” stylesheet” type=”text/css”>

@import روشی است که مدت زمان لود سایت و صفحاتتان را افزایش می دهد، و باعث کاهش سرعت لود سایت می شود.و بهتر است که از این روش استفاده نشود.

در کجا می توان از import@ استفاده کرد ؟

• استفاده در فایل های css

در cssکافیست ، فایل های css را در بالای document  قرار دهید.

به عنوان مثال :

@import url(“style2.css”)

• استفاده از فایل های html

درhtml  باید کد مورد نظر خود را در تگ استایل اسکریپت کنیم .

به عنوان مثال :

<style type=”text/css”>
@import url(“style2.css”);
font-family: sans serif;
font-size: 17px;
font-weight: 300;
# more CSS scripts #
</style>

@import روشی است که یک فایل  css را در یک فایل دیگر صدا می زند، این باعث می شود به جای بارگیری فایل های css به صورت همزمان ، هرفایل پس از دیگری لود شود که تاثیر منفی بر روی سرعت سایت دارد.

خطای avoid css @import

حال چگونه خطای avoid css @import را رفع کنیم ؟

روش اول : استفاده از تگ link

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

<link href=”style2.css” rel=” stylesheet” type=”text/css”>

روش دوم : ترکیب فایل های css

برای رفع این خطا همچنین می توانید فایل های css خود را در داخل فایل css اصلی کپی کنید .که باعث ایجاد یک پرونده css بزرگ می شود که تعداد درخواست های http و همچنین زمان بارگزاری صفحه هم کاهش می یابد .

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

مطالب قبلی :

آموزش رفع خطای combine images using css sprites در gtmetrix

آموزش رفع خطای specify a cache validator در gtmetrix

آموزش رفع خطایenable keep Aliveدر gtmetrix 

آموزش رفع خطای images optimization در GTmetrix