یکی از خطاهایی که هنگام تست سرعت سایت با Gtmetrix با آن مواجه می شویم به نام خطای inline small css است که از سری خطاهای page speed است.
inline small css : یعنی فراخوانی فایل هایی با استایل کوچک از داخل سایت ، که اگر فایلهای خارجی استایل شما بیش از حد کوچک باشند بهتر است که محتوای آن ها را کپی کنید و در بخش head سایت خود قرار دهید تا سرعت بارگزاری آن ها افزایش پیداکند.
مرورگرها درهر سایتی لود فایل های css که از منابع خارجی لود می شوند را تا زمانی که صفحه به صورت کامل از سمت خود سرور لود نشود را در نظر نمیگیرند. بعد از اینکه صفحه بر اساس فایلهای خود سرور لود شد شروع به لود فایلهای خارجی می کند. و در این صورت زمانی در این بین اتلاف می شود که بهتر است استایل ها و css خارجی را به صورت مستقیم در سایت وارد کنیم. پس برای رفع این خطا کافیست استایل ها و کدهای css را که از منابع خارجی لود می شوند را مستقیم در سرور سایت قرار دهیم.
inline css به css موجود در یک فایل html اشاره دارد. Inlining css به معنای قرار دادن css در فایل html به جای یک فایل CSS خارجی است.پس برای رفع خطای inline small css وبهینه سازی لود سایت و زمان بازشدن صفحه ، درصورتی که کدهای css دارای حجم کمی باشند ، می توانید آن ها را به صورت مستقیم در سند html وارد کنید ویا با دیگر فایلهای css موجود ادغام کنید.
قراردادن کد css در قسمت html :
برای مثال فایلی در داخل صفحات سایت با نامstyle.css فراخوانی می شود که کلاس های خاص برای نمایش نوعی محتوا قرارداده شده است:
<html>
<head>
<link rel="stylesheet" href="haftweb.com /css/style.css">
</head>
<body>
<div class="haftweb -box error">
Hello, world!
</div>
</body>
</html>
این فایل style.css که درخط سوم مشاهده می کنید محتوای آن بصورت زیر است :
{;haftweb-box {padding:20px 22px.
{;error {background-color: blue.
چنین فایلی با این مقدار کدنویسی فقط ت<عدادی درخواست http اضافه روی سرور یا سرورخارجی ایجاد می کند. پس بهتراست برای این فایل هایی که حجم زیادی ندارند آن ها را درفایل های استایل ادغام کنیم یا درقسمت head بخشی را که مربوط به نمایش محتوا است را بین تگ <style> قراردهیم.
<html>
<head>
<style>
.haftweb -box {padding:20px 22px;}
.error {background-color:blue;}
</style>
</head>
<body>
<div class="haftweb -box error">
Hello, world!
</div>
</body>
</html>
بعد از این که مراحل بالا را انجام دادید خطای inline small css در gtmetrix رفع می شود وباعث کاهش تعداد درخواست http می شود و سرعت لود سایت نیز افزایش پیدا می کند.
استفاده از پلاگین برای رفع خطایinline small css :
اگرتعداد خطاها یعنی تعداد فایل های css زیادی در سند html شما فراخوانی می شود، روش ادغام کاربرد خوبی دارد. برای ادغام کردن فایل ها می توانیم از پلاگین های وردپرس استفاده کنیم.
مطالب قبلی :
آموزش رفع خطایenable keep Aliveدر gtmetrix
آموزش رفع خطای Enable gzip compression در GTmetrix
4 Comments
[…] آموزش رفع خطایinline small css در gtmetrix […]
[…] 12- Inline small CSS […]
[…] به روش inline از آن ها استفاده کنید که در مقاله آموزش رفع خطای inline small css و inline small java script آن را توضیح داده ایم […]
[…] این مقاله رو هم بخونیدآموزش رفع خطایinline small css در gtmetrixقدرت گرفته از افزونه نوشتههای مرتبط هوشمند […]