Inline small CSS چیست؟

inline-css
Inline small CSS

استفاده از روش Inline small CSS باعث افزایش سرعت لود صفحات سایت (Page Speed) خواهد شد.

Inline small CSS به روشی گفته میشود که فایل css کوچک به جای اینکه به صورت یک فایل جدا باشد درون کد اچ تی ام ال قرار داده شود. که انجام این مورد باعث کاهش تعداد فایل هایی که مرورگر به هنگام خواندن صفحات دانلود میکند، میشود .

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

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

اگر این تکنیک به درستی انجام شود تاثیر مهمی در بهینه سازی css خواهد داشت.

چگونه از Inline small CSS استفاده کنیم؟

برای استفاده از این روش لازم است محتوای فایل css خارجی را کپی کرده و در فایل html بین تگ style در قسمت head وارد نمایید:

<style>
</style>

نکته مهمی که لازم است بخاطر بسپارید این است که این اطلاعات حتما باید در قسمت head فایل وارد شوند. محتوای فایل css کوچک را کپی کرده و بین تگ style قرار دهید:

<style>
body{margin:0;padding:0;background:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#555;}
h1, h2, h3{margin:0;padding:0;font-weight:normal;color:#555;}
h1{font-size:3.5em;}
h2{font-size:2.4em;}
h3{font-size:1.6em;}
p, ul, ol{margin-top:0;line-height:180%;}
a{text-decoration:underline;color:#FF2929;}
</style>

معایب:

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

منبع: http://www.feedthebot.com/pagespeed/inline-small-css.html