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

Ilya Grigorik

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

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

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

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

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

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

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

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

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

استخدِم طريقة navigator.sendBeacon() لتقييد البيانات التي ترسلها طلبات XMLHttpRequest في معالجات 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 فقط موردًا محظورًا.

ملاحظات