یکی از دلایل دیگری که PageSpeed Insights ممکن است فعال شود هنگامی است که لود صفحه با تاخیر مواجه شود که دلیل آن این است که stylesheet خارجی مسدود شده است.
مروری بر Optimize CSS Delivery
هنگامی که مرورگر می خواهد صفحه ای از سایتی را باز کند ابتدا Layout و سبک ها را پردازش می کند و سپس اقدام به باز کردن صفحه مورد نظر می کند و گاهی پردازش و بررسی stylesheet خارجی امکان دارد سبب تاخیر در باز شدن صفحه گردد.
پیشنهادات برای Optimize CSS Delivery
در صورتی که فایل stylesheet خارجی فایل کوچکی باشد برای ازبین بردن تاخیر بهتر است از روش Inling استفاده کنید و در صورتی که فایل stylesheet خارجی بزرگ است بهتر است از این روش استفاده نشود چون امکان دارد PageSpeed Insights اخطار دهد که قسمت بالای صفحه ی تان بیش از اندازه بزرگ می باشد.
در زیر مثالی از Inline آوردیم:
<html>
<head>
<link rel=”stylesheet” href=”box.css”>
</head>
<body>
<div class=”box1 box2 box3 “>
</div>
</body>
</html>
حال فایل box.css به صورت زیر است:
.box1 {width: 100px; height: 100px; background-color: yellow;}
.box2 { width: 100px; height: 100px; background-color: green;}
.box3 { width: 100px; height: 100px; background-color: blue;}
حال کدها را می توانید به صورت Inline در آوریم:
<html>
<head>
<style>
.box1 {width: 100px; height: 100px; background-color: yellow;}
</style>
</head>
<body>
<div class=”box1″>
</div>
< script>
var cb = function() {
var l = document.createElement(‘link’); l.rel = ‘stylesheet’;
l.href = ‘small.css’;
var h = document.getElementsByTagName(‘head’)[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener(‘load’, cb);
</script>
</body>
</html>
در بالا استایل های ساختن سبک صفحه اول به شکل Inline قرار دادیم فایل small.css بطور کامل بارگذاری شده و بر روی صفحه اعمال می شود.
از Inline کردن URL های داده های بزرگ جلوگیری نمایید
می توانید URL های داده های کوچک در Css را Inline کنید ولی از Inline کردن داده های بزرگ در Css جلوگیری نمایید چون سبب کاهش سرعت لود صفحات سایت می شود.
از Inline کردن خصوصیات Css جلوگیری نمایید
برای جلوگیری از ایجاد کدهای اضافی خصوصیات Css را در html ، Inline نکنید و همچنین Css inline توسط خط مشی امنیتی محتوا (CSP) مسدود شده است.
