قواعد واقتراحات PageSpeed

Ilya Grigorik

تاريخ النشر: 17 آب (أغسطس) 2018

يفحص هذا الدليل قواعد "إحصاءات PageSpeed" في السياق المناسب: ما يجب الانتباه إليه عند تحسين مسار العرض الحرج والسبب وراء ذلك.

التخلص من عناصر JavaScript وCSS التي تحظر عرض المحتوى

لتوفير أسرع وقت للعرض الأول، قلل من عدد الموارد المهمة على الصفحة (حيثما أمكن) وقلّل عدد وحدات البايت المهمة التي يتم تنزيلها، وحسِّن طول المسار الحرج.

تحسين استخدام JavaScript

يتم حظر موارد JavaScript تلقائيًا من قِبل المُحلِّل ما لم يتم وضع علامة عليها async أو إضافتها باستخدام مقتطف JavaScript خاص. يؤدي حظر JavaScript من خلال التحليل إلى إجبار المتصفّح على الانتظار إلى أن يتم إنشاء CSSOM ويؤدّي إلى إيقاف إنشاء نموذج DOM مؤقتًا، ما قد يؤدّي بدوره إلى تأخير وقت العرض الأوّلي بشكل كبير.

تفضيل موارد JavaScript غير المتزامنة

تزيل الموارد غير المتزامنة حظر وحدة تحليل المستندات وتسمح للمتصفّح بتجنُّب الحظر على CSSOM قبل تنفيذ النص البرمجي. في كثير من الأحيان، إذا كان النص البرمجي يمكنه استخدام سمة async، يعني ذلك أيضًا أنّه ليس ضروريًا لعملية العرض الأولى. ننصحك بتحميل النصوص البرمجية بشكل غير متزامن بعد العرض الأولي.

تجنُّب طلبات الخادم المتزامنة

استخدام طريقة navigator.sendBeacon() للحدّ من البيانات المُرسَلة بواسطة XMLHttpRequests في معالِجات unload ولأنّ العديد من المتصفّحات تتطلّب أن تكون هذه الطلبات غير متزامنة، يمكن أن تبطئ عمليات انتقال الصفحة، وفي بعض الأحيان بشكل ملحوظ. يوضّح الرمز التالي كيفية استخدام navigator.sendBeacon() لإرسال البيانات إلى الخادم في معالج pagehide بدلاً من معالج unload.

<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() يعرض أيضًا وعدًا.

<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>

تأجيل تحليل JavaScript

لتقليل مقدار العمل الذي يجب أن يؤديه المتصفّح لعرض الصفحة، عليك تأجيل أي نصوص برمجية غير ضرورية ليست ضرورية لإنشاء المحتوى المرئي للعرض الأوّلي.

تجنُّب تشغيل JavaScript لفترة طويلة

يؤدي تشغيل JavaScript لفترة طويلة إلى منع المتصفّح من إنشاء DOM وCSSOM وعرض الصفحة، لذا يمكنك تأجيل أي منطق إعداد غير ضروري للعرض الأول إلى وقت لاحق. إذا كان من الضروري تنفيذ تسلسل إعداد طويل، ننصحك بتقسيمه إلى عدة مراحل للسماح للمتصفّح بمعالجة الأحداث الأخرى بين كل مرحلة.

تحسين استخدام CSS

يجب استخدام CSS لإنشاء شجرة العرض، وغالبًا ما تحظر JavaScript CSS أثناء الإنشاء الأولي للصفحة. تأكَّد من وضع علامة "غير مهم" على أي ملف CSS غير أساسي (مثل طلبات البحث عن الوسائط المطبوعة وغيرها)، ومن أنّ مقدار ملفات CSS المهمة ووقت عرضها هو الأدنى قدر الإمكان.

وضع CSS في عنوان المستند

حدِّد جميع ملفات CSS في أقرب وقت ممكن ضمن ملف HTML ليتمكّن المتصفّح من اكتشاف علامات <link> وإرسال طلب CSS في أقرب وقت ممكن.

تجنُّب عمليات استيراد صفحات الأنماط المتتالية (CSS)

تسمح توجيهات استيراد CSS (@import) لصفحة أنماط واحدة باستيراد القواعد من ملف صفحة أنماط آخر. مع ذلك، يجب تجنُّب هذه الأوامر لأنّها تقدّم عمليات نقل ذهاب وعودة إضافية إلى المسار الحرج: لا يتم اكتشاف موارد CSS التي تم استيرادها إلا بعد تلقّي ورقة أنماط CSS مع القاعدة @import نفسها وتحليلها.

تضمين CSS لحظر العرض

لتحقيق أفضل أداء، ننصحك بتضمين ملف CSS المهم مباشرةً في مستند HTML. ويؤدي ذلك إلى إزالة عمليات التنقّل الإضافية في المسار الحرج، وإذا تم تنفيذ ذلك بشكل صحيح، يمكن أن يقدّم طول مسار حرج "لرحلة واحدة" يكون فيها HTML فقط موردًا محظورًا.

ملاحظات