آموزش رفع خطایinline small css در gtmetrix

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

inline small css چیست ؟

inline small css : یعنی فراخوانی فایل هایی با استایل کوچک از داخل سایت ، که اگر فایلهای خارجی استایل شما بیش از حد کوچک باشند بهتر است که محتوای آن ها را کپی کنید و در بخش head سایت خود قرار دهید تا سرعت بارگزاری آن ها افزایش پیداکند.

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

inline css به css موجود در یک فایل html اشاره دارد. Inlining css به معنای قرار دادن css در فایل html به جای یک فایل CSS خارجی است.پس برای رفع خطای inline small css وبهینه سازی لود سایت و زمان بازشدن صفحه ، درصورتی که کدهای css دارای حجم کمی باشند ، می توانید آن ها را به صورت مستقیم در سند html وارد کنید ویا با دیگر فایلهای css موجود ادغام کنید.

آموزش رفع خطایinline small css

حال چگونه خطای inline small css را رفع کنیم ؟

قراردادن کد css در قسمت html :

این مقاله رو هم بخونید

آموزش رفع خطای Defer parsing of JavaScript در GTmetrix

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند

برای مثال فایلی در داخل صفحات سایت با نام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.

آموزش رفع خطایinline small css

چنین فایلی با این مقدار کدنویسی فقط ت<عدادی درخواست 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

استفاده از پلاگین برای رفع خطایinline small css :

اگرتعداد خطاها یعنی تعداد فایل های css زیادی در سند html شما فراخوانی می شود، روش ادغام کاربرد خوبی دارد. برای ادغام کردن فایل ها می توانیم از پلاگین های وردپرس استفاده کنیم.

مطالب قبلی :

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

آموزش رفع خطای Enable gzip compression در GTmetrix

این مقاله رو هم بخونید

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

قدرت گرفته از افزونه نوشته‌های مرتبط هوشمند