قوانین و توصیه های PageSpeed

Ilya Grigorik

تاریخ انتشار: 17 آگوست 2018

این راهنما قوانین 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() راه بهتری برای درخواست داده های ناهمزمان ارائه می دهد. fetch() پاسخ ها را با استفاده از Promises به جای چندین کنترل کننده رویداد پردازش می کند. برخلاف پاسخ به XMLHttpRequest، پاسخ fetch() یک شی جریان است. این بدان معناست که فراخوانی به 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 ) یک شیوه نامه را قادر می سازد تا قوانین را از فایل شیوه نامه دیگر وارد کند. با این حال، از این دستورالعمل‌ها اجتناب کنید زیرا آنها سفرهای رفت و برگشت اضافی را به مسیر بحرانی معرفی می‌کنند: منابع CSS وارد شده تنها پس از دریافت و تجزیه شیت سبک CSS با خود قانون @import کشف می‌شوند.

CSS مسدودکننده رندر درون خطی

برای بهترین عملکرد، ممکن است بخواهید CSS حیاتی را مستقیماً در سند HTML قرار دهید. این کار رفت و برگشت های اضافی را در مسیر بحرانی حذف می کند و اگر به درستی انجام شود می تواند طول مسیر بحرانی "یک رفت و برگشت" را ارائه دهد که در آن فقط HTML یک منبع مسدود کننده است.

بازخورد