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

إيليا غريغوريك
إيليا غريغوريك

يفحص هذا الدليل قواعد "إحصاءات 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 فقط هو مورد حظر.

إضافة ملاحظات