رفع ارور Optimize CSS Delivery

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

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

7c62f_combine-css رفع ارور Optimize CSS Delivery

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

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

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

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

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

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

(ویژگی های 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) مسدود شده است.

7c62f_mailchimp رفع ارور Optimize CSS Delivery

منبع: seomoz http://www.seomoz.ir/optimize-css-delivery.html

مطالب پیشنهادی:

درباره نویسنده

ابراهیم حنفی (متخصص سئو) هستم، 8 سال سابقه فعالیت در حوزه وب رو دارم و بطور تخصصی 4 سال هست که سئو کار میکنم و به لطف خدا نمونه کارهای خوبی در این زمینه بدست آوردم.

دیدگاه خود را بنویسید