چگونه خطای Optimize CSS Delivery را حل کنیم؟

تاریخ انتشار 1396/08/29 . 94 . گروه رازهای بهینه سازی سایت seo

یکی از دلایل دیگری که PageSpeed Insights ممکن است فعال شود هنگامی است که لود صفحه با تاخیر مواجه شود که دلیل آن اینست که stylesheet خارجی مسدود شده است.

چگونه خطای Optimize CSS Delivery را حل کنیم؟

مروری بر 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) مسدود شده است.

1

نمونه کارهای منتخب

طراحی سایت دکوراسیون دکورچین

گروه مرتبط :
طراحی سایت شرکتی
طراحی سایت دکوراسیون

مشاهده نمونه کار
طراحی سایت فروشگاه ورزشی ایران سی نت

گروه مرتبط :
طراحی سایت فروشگاه اینترنتی

مشاهده نمونه کار
طراحی سایت شرکت کامپیوتری  انفورماتیک کوشا

گروه مرتبط :
طراحی سایت شرکتی

مشاهده نمونه کار
طراحی سایت فروشگاهی زمبورک

گروه مرتبط :
طراحی سایت فروشگاه اینترنتی

مشاهده نمونه کار

گروه مقالات طراحی سایت

جدیدترین مقالات طراحی سایت

شماره تماس پشتیبانی:

شماره تماس پشتیبانی:

نظرات کاربران

نظر شما چیست؟

سوال امنیتی: حاصل جمع 7 + 0 چند است ؟

آنلاین هستیم
آنلاین هستیم