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

Ilya Grigorik

يفحص هذا الدليل قواعد "إحصاءات 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() الجديدة طريقة سهلة لطلب البيانات بشكل غير متزامن. ونظرًا إلى عدم توفّر هذه الميزة في كل مكان بعد، يجب استخدام ميزة "رصد الميزات" لاختبارها قبل استخدامها. تعالج هذه الطريقة الاستجابات باستخدام التعهدات بدلاً من معالِجات أحداث متعدّدة. بخلاف استجابة XMLHttpRequest، فإن استجابة الجلب هي كائن بث يبدأ من Chrome 43. وهذا يعني أنّ المكالمة إلى 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 فقط موردًا للحظر.

ملاحظات