این راهنما قوانین PageSpeed Insights را در زمینه بررسی می‌کند: هنگام بهینه‌سازی مسیر رندر بحرانی به چه مواردی باید توجه کرد و چرا.
جاوا اسکریپت و CSS مسدود کننده رندر را حذف کنید
برای ارائه سریع‌ترین زمان برای اولین رندر، به حداقل رساندن و (در صورت امکان) تعداد منابع مهم در صفحه حذف، تعداد بایت‌های بحرانی دانلود شده به حداقل برسد و طول مسیر بحرانی بهینه شود.
استفاده از جاوا اسکریپت را بهینه کنید
منابع جاوا اسکریپت به‌طور پیش‌فرض توسط تجزیه‌کننده مسدود می‌شوند، مگر اینکه به‌عنوان async علامت‌گذاری شوند یا از طریق یک قطعه جاوا اسکریپت خاص اضافه شوند. تجزیه کننده که جاوا اسکریپت را مسدود می کند، مرورگر را مجبور می کند تا برای CSSOM منتظر بماند و ساخت DOM را متوقف می کند، که به نوبه خود می تواند زمان اولین رندر را به طور قابل توجهی به تاخیر بیاندازد.
منابع جاوا اسکریپت ناهمزمان را ترجیح دهید
منابع ناهمزمان تجزیه کننده سند را رفع انسداد کرده و به مرورگر اجازه می دهد تا قبل از اجرای اسکریپت از مسدود کردن CSSOM جلوگیری کند. اغلب، اگر اسکریپت بتواند از ویژگی async استفاده کند، به این معنی است که برای اولین رندر ضروری نیست. بارگذاری اسکریپت ها را به صورت ناهمزمان پس از رندر اولیه در نظر بگیرید.
از تماس همزمان سرور خودداری کنید
از روش navigator.sendBeacon() برای محدود کردن داده های ارسال شده توسط XMLHttpRequests در unload handlers استفاده کنید. از آنجایی که بسیاری از مرورگرها به چنین درخواست هایی نیاز دارند که همزمان باشند، می توانند انتقال صفحه را کاهش دهند، گاهی اوقات به طور قابل توجهی. کد زیر نحوه استفاده از navigator.sendBeacon() را برای ارسال داده به سرور در handler pagehide به جای در unload handler نشان می دهد.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
متد جدید fetch() راهی آسان برای درخواست داده‌های ناهمزمان ارائه می‌کند. از آنجایی که هنوز در همه جا در دسترس نیست، باید از تشخیص ویژگی برای آزمایش وجود آن قبل از استفاده استفاده کنید. این روش پاسخ‌ها را با Promises پردازش می‌کند نه با چندین کنترل کننده رویداد. برخلاف پاسخ به XMLHttpRequest، پاسخ واکشی یک شی جریانی است که در Chrome 43 شروع می‌شود. این بدان معناست که فراخوانی به json() نیز یک Promise را برمی‌گرداند.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
متد fetch() همچنین می تواند درخواست های POST را مدیریت کند.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
تجزیه جاوا اسکریپت را به تعویق بیندازید
برای به حداقل رساندن میزان کاری که مرورگر برای رندر کردن صفحه باید انجام دهد، هر اسکریپت غیر ضروری را که برای ساخت محتوای قابل مشاهده برای رندر اولیه حیاتی نیست به تعویق بیاندازید.
از اجرای طولانی جاوا اسکریپت خودداری کنید
جاوا اسکریپت طولانی مدت، مرورگر را از ساخت DOM، CSSOM و رندر کردن صفحه مسدود می‌کند، بنابراین هرگونه منطق اولیه و عملکرد غیر ضروری برای اولین رندر را به بعد موکول کنید. اگر یک توالی اولیه طولانی نیاز به اجرا دارد، آن را به چند مرحله تقسیم کنید تا به مرورگر اجازه داده شود سایر رویدادها را در بین آنها پردازش کند.
استفاده از CSS را بهینه کنید
CSS برای ساخت درخت رندر مورد نیاز است و جاوا اسکریپت اغلب در CSS در طول ساخت اولیه صفحه مسدود می شود. اطمینان حاصل کنید که هر CSS غیر ضروری به‌عنوان غیر مهم علامت‌گذاری شده است (مثلاً سؤالات چاپی و رسانه‌های دیگر)، و مقدار CSS مهم و زمان ارائه آن تا حد امکان کم باشد.
CSS را در سر سند قرار دهید
تمام منابع CSS را در اسرع وقت در سند HTML مشخص کنید تا مرورگر بتواند تگ های <link> را پیدا کند و درخواست CSS را در اسرع وقت ارسال کند.
از واردات CSS خودداری کنید
دستور CSS import ( @import ) یک stylesheet را قادر می سازد تا قوانین را از یک فایل stylesheet دیگر وارد کند. با این حال، از این دستورالعمل‌ها اجتناب کنید، زیرا آنها سفرهای رفت و برگشت اضافی را به مسیر بحرانی معرفی می‌کنند: منابع CSS وارد شده تنها پس از دریافت و تجزیه صفحه شیوه CSS با قانون @import کشف می‌شوند.
CSS مسدودکننده رندر درون خطی
برای بهترین عملکرد، ممکن است بخواهید CSS حیاتی را مستقیماً در سند HTML قرار دهید. این کار رفت و برگشت های اضافی را در مسیر بحرانی حذف می کند و اگر به درستی انجام شود می تواند طول مسیر بحرانی "یک رفت و برگشت" را ارائه دهد که در آن فقط HTML یک منبع مسدود کننده است.