یکی از خطاهایی که هنگام تست سرعت سایت با Gtmetrix با آن مواجه می شویم به نام خطای avoid css @import که از سری خطاهای page speed است.
این پارامتر برای کدهای استایل است که به صورت 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 را در بالای document قرار دهید.
به عنوان مثال :
@import url(“style2.css”)
در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 به صورت همزمان ، هرفایل پس از دیگری لود شود که تاثیر منفی بر روی سرعت سایت دارد.
برای رفع این خطا کافیست فایل استایل دهی را در قسمت head سایت فراخوانی کنید.با استفاده از تگ link شما می توانید کاری کنید که مرورگر به صورت موازی و سریع تر استایل ها را بارگزاری کند.
<link href=”style2.css” rel=” stylesheet” type=”text/css”>
برای رفع این خطا همچنین می توانید فایل های css خود را در داخل فایل css اصلی کپی کنید .که باعث ایجاد یک پرونده css بزرگ می شود که تعداد درخواست های http و همچنین زمان بارگزاری صفحه هم کاهش می یابد .
امیدواریم که این مقاله و رفع این خطا برای افزایش سرعت سایت و بهبود سئو سایتتان موثر باشد.
مطالب قبلی :
آموزش رفع خطای combine images using css sprites در gtmetrix
آموزش رفع خطای specify a cache validator در gtmetrix
آموزش رفع خطایenable keep Aliveدر gtmetrix
آموزش رفع خطای images optimization در GTmetrix
2 Comments
[…] آموزش رفع خطای avoid css @import در gtmetix […]
[…] 20- Avoid CSS @import […]