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

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

  • تاریخ انتشار 1396/08/29
  • .
  • 1005
  • .
  • گروه رازهای 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) مسدود شده است.

3

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

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

طراحی سایت ها

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

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

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

نظر شما چیست؟

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

x
02122324883    09198585818
آیا به مشاوره نیاز دارید؟

تماس بگیرید
021-22324883(مشاوره رایگان)

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