رفع ارور Optimize CSS Delivery

رفع ارور Optimize CSS Delivery

فهرست مطالب

بهینه سازی در ارائه CSS

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

Optimize CSS Delivery

بررسی اجمالی Optimize CSS Delivery

قبل از اینکه مرورگر بتواند محتوای مورد نظر را باز کند، باید تمام اطلاعات مربوط به سبک ها و  لی اوت مربوطه را برای صفحه فعلی پردازش کند. در نتیجه، مرورگر تا پایان زمانی که stylesheetهای خارجی دانلود و پردازش شوند، از باز شدن صفحه جلوگیری می کند و این امر ممکن است منجر به رفت و برگشت های متعدد و به تاخیر انداختن زمان اولین بازدید گردد. برای کسب اطلاعات بیشتر در مورد مسیر حیاتی باز کردن صفحات به render-tree construction, layout, and paint، و برای راهنمایی در مورد چگونگی رفع ممنوعیت باز شدن صفحه و بهبود ارائهCSS ، به render blocking CSS، مراجعه نمایید.

توصیه ها برای Optimize CSS Delivery

اگر منابع CSS خارجی کوچک باشند، شما می توانید آنها را بطور مستقیم در سند HTML، درج کنید که این کار به نام inlining ، شناخته می شود. Inline کردن CSSهای کوچک به این صورت، به مرورگر اجازه می دهد تا به باز کردن صفحه ادامه دهد. به خاطر داشته باشید در صورتی که فایل CSS بزرگ باشد، ممکن است Inline کردن CSS به طور کامل، باعث شود تا PageSpeed ​​Insights از طریق Prioritize Visible Content، هشدار دهد که نیمه بالایی صفحه اول شما بیش از حد بزرگ است. در حالتی که یک فایل CSS بزرگ است، شما نیاز به شناسایی و Inline کردن CSS مورد نیاز برای باز کردن محتوای نیمه بالایی صفحه اول و به تعویق انداختن بارگذاری استایل های باقی مانده تا بعد از باز کردن محتوای نیمه بالایی صفحه اول دارید.

  • Example of inlining a small css file

(مثالی از inline کردن یک فایل CSS کوچک)

  • Don’t inline large data URIs

URI)های داده های بزرگ راinline  نکنید)

  • Don’t inline CSS attributes

(ویژگی های CSS راinline  نکنید)

مثالی از inline کردن یک فایل CSS کوچک

    اگر سند HTML مشابه زیر باشد:

<html>
<head>
<link rel="stylesheet" href="small.css">
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>

و فایل small.css  به شکل زیر باشد:

.yellow {background-color: yellow;}
.blue {color: blue;}
.big { font-size: 8em; }
.bold { font-weight: bold; }

در این صورت شما می توانید CSS حیاتی را به صورت زیر inline کنید:

<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</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 ، پس از رنگ آمیزی اولیه صفحه، به طور کامل بارگذاری شده و استایل های آن به محض اتمام بارگذاری، بدون مسدود کردن رندر اولیه محتوای حیاتی، بر روی صفحه اعمال می شود.

توجه داشته باشید که پلت فرم وب، به زودی بار گذاری stylesheetها به شیوه non-render-blocking  را بدون استفاده از جاوا اسکریپت، توسط HTML Imports،  پشتیبانی خواهد کرد.

URIهای داده های بزرگ راinline  نکنید

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

ویژگی های CSS راinline  نکنید

از inline کردن ویژگی های CSS در عناصر HTML، (به عنوان مثال، <p style=…>) باید در صورت امکان اجتناب شود، چرا که اغلب منجر به تکرار کد های غیر ضروری می شود. علاوه بر این، CSS inline در عناصر HTML به طور پیش فرض با Content Security Policy، یعنی خط مشی امنیتی محتوا (CSP) مسدود شده است.