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

Ilya Grigorik

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

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

التخلص من عناصر 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 فقط موردًا محظورًا.

ملاحظات