انتخاب دامنه مناسب – قسمت اول
آگوست 2, 2020
انتخاب دامنه مناسب
انتخاب دامنه مناسب – قسمت دوم
آگوست 8, 2020

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

آموزش رفع خطای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  مرورگرها درهر سایتی لود فایل های css که از منابع خارجی لود می شوند را تا زمانی که صفحه به صورت کامل از سمت خود سرور لود نشود را در نظر نمیگیرند. بعد از اینکه صفحه بر اساس فایلهای خود سرور لود شد شروع به لود فایلهای خارجی می کند. و در این صورت زمانی در این بین اتلاف می شود که بهتر است استایل ها و css خارجی را به صورت مستقیم  در سایت وارد کنیم. پس برای رفع این خطا کافیست استایل ها و کدهای css  را که از منابع خارجی لود می شوند را مستقیم در سرور سایت قرار دهیم.

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

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

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

این مقاله رو هم بخونید
آموزش رفع خطای compress componets with gzip در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> قراردهیم.

آموزش رفع خطای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  چنین فایلی با این مقدار کدنویسی فقط ت<عدادی درخواست http اضافه روی سرور یا سرورخارجی ایجاد می کند. پس بهتراست برای این فایل هایی که حجم زیادی دارند و اضافه هستند آن ها را درفایل های استایل ادغام کنیم یا درقسمت head بخشی را که مربوط به نمایش محتوا است را بین تگ <style> قراردهیم.

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

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

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

W3 total cache

wp super minify

wp minify fix

combine css

css optimizer

مطالب قبلی :

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

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

 

این مقاله رو هم بخونید
وب سایت خبری
Aida Parvaresh
Aida Parvaresh
آیداپرورش هستم،علاقمند به تکنولوژی و تولید محتوا،مدتیه که با تیم خوب هفت وب همکاری دارم.

4 Comments

  1. […] به روش inline  از آن ها استفاده کنید که در مقاله آموزش رفع خطای inline small css و inline small java script  آن را توضیح داده ایم […]

  2. […] این مقاله رو هم بخونیدآموزش رفع خطایinline small css در gtmetrixقدرت گرفته از افزونه نوشته‌های مرتبط هوشمند […]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *