تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

كتابة طلب العميل الأول

مقدمة

هذا المستند مخصّص للمطوّرين الذين يريدون كتابة تطبيقات يمكنها التفاعل مع PageSpeed Insights API.

إحصاءات PageSpeed هي أداة تقدّم تقارير عن الأداء الفعلي لإحدى الصفحات على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، وتقدّم اقتراحات حول كيفية تحسين هذه الصفحة لمساعدة المطوّرين في تحسين صفحات الويب. يمكنك استخدام PageSpeed Insights API لإنشاء نتيجة سرعة PageSpeed ونتيجة التحسين والاقتراحات بشكل آلي.

قبل البدء

الحصول على حساب Google

يجب أن يكون لديك حساب Google حتى تتمكن من الحصول على مفتاح واجهة برمجة التطبيقات لتعريف تطبيقك على Google. (انظر أدناه).

التعرّف على PageSpeed

إذا لم تكن على دراية بخدمة PageSpeed، يمكنك الاطّلاع على أفضل ممارسات أداء الويب في PageSpeed.

التعرّف على كيفية تحديد تطبيقك لمحرك بحث Google

يجب أن يعرّف تطبيقك نفسه في كل مرة يرسل فيها طلبًا إلى واجهة برمجة التطبيقات PageSpeed Insights API، وذلك من خلال تضمين مفتاح واجهة برمجة التطبيقات مع كل طلب.

الحصول على مفتاح واجهة برمجة التطبيقات واستخدامه

أو يمكنك إنشاء حساب في صفحة بيانات الاعتماد.

بعد حصولك على مفتاح واجهة برمجة التطبيقات، يمكن لتطبيقك إلحاق مَعلمة طلب البحث. key=yourAPIKey إلى جميع عناوين URL للطلبات.

يمكن تضمين مفتاح واجهة برمجة التطبيقات بأمان في عناوين URL. ولا يحتاج إلى أي ترميز.

لمحة عن PageSpeed Insights API

تتضمّن النتائج التي تعرضها PageSpeed Insights API الأنواع التالية من المعلومات:

تجربة التحميل: يتضمّن قسم "تجربة التحميل" فئة سرعة عامة (سريعة أو متوسطة أو بطيئة) وتوزيعات الفئات.
إحصاءات الصفحة: يحتوي قسم "إحصاءات الصفحة" على بعض النتائج الإحصائية المفيدة مثل رحلات الذهاب والعودة المطلوبة وإجمالي وحدات البايت المستخدمة. وهي تشير إلى ما إذا كانت الصفحة قد تكون أسرع من خلال تعديل المظهر والوظائف.
نتيجة التحسين: تشير نتيجة تحسين PageSpeed (من 0 إلى 100) إلى مدى تحسين الصفحة. تشير النتيجة العالية إلى وجود مجال صغير للتحسين، بينما تشير النتيجة المنخفضة إلى مجال أكبر للتحسين.
القاعدة: تحلّل PageSpeed صفحات الويب باستخدام القواعد. تستند كل قاعدة من قواعد سرعة الصفحة إلى مبادئ عامة لأداء صفحات الويب، مثل التخزين المؤقت للموارد وحجم تحميل البيانات وتنزيلها وأوقات الذهاب والعودة لخادم العميل. تنشئ قواعد PageSpeed نتائج القواعد وتأثيرات القواعد، كما هو موضَّح أدناه.
نتيجة القاعدة: نتيجة القاعدة هي اقتراح يتم إنشاؤه من خلال قاعدة، وفي حال تنفيذها، ستؤدي إلى زيادة سرعة الصفحة وزيادة نتيجة سرعة الصفحة لتلك الصفحة. على سبيل المثال، إذا تم عرض مورد قابل للضغط بدون ضغط، ستؤدي قاعدة تفعيل الضغط في PageSpeed إلى إنشاء نتيجة تنصح المطوّر بتفعيل الضغط لهذا المورد.
تأثير القاعدة: تنشئ كل قاعدة من قواعد سرعة الصفحة رقم تأثير (قيمة نقطة عائمة غير محددة) يشير إلى أهمية تنفيذ اقتراحات نتيجة القاعدة للقاعدة أو أولويتها مقارنةً بالقواعد الأخرى. على سبيل المثال، إذا كان تفعيل ميزة الضغط سيؤدي إلى توفير 1 ميغابايت، في حين أنّ تحسين الصور سيؤدي إلى توفير 500 كيلوبايت، ستكون قيمة تأثير قاعدة "تفعيل ميزة الضغط" ضعف قيمة تأثير قاعدة "تحسين الصور". يشير تأثير الصفر إلى عدم توفّر أي اقتراحات لتحسين تلك القاعدة.

استدعاء واجهة برمجة التطبيقات

لاستدعاء واجهة برمجة التطبيقات، يجب استدعاء الطريقة runPagespeed، لتحديد عنوان URL ومفتاح واجهة برمجة التطبيقات والمعلمات الأخرى في سلسلة طلب البحث. يُرجى الاطّلاع على مستندات مراجع واجهة برمجة التطبيقات لمزيد من التفاصيل.

أمثلة على طلبات البيانات من واجهة برمجة التطبيقات

من سطر الأوامر

يمكنك استدعاء واجهة برمجة التطبيقات PageSpeed Insights API من سطر أوامر Linux/UNIX باستخدام برنامج مثل curl.

يستخدِم المثال التالي هذا النهج لجلب نتائج PageSpeed للأجهزة الجوّالة لعنوان URL https://developers.google.com/speed/pagespeed/insights/. يتم عرض نتيجة سرعة الصفحة وإحصاءات الصفحة ونتائج سرعة الصفحة بتنسيق بيانات JSON.

يتم ترتيب النتائج المنسَّقة حسب معرّفات القواعد (مثل AvoidBadRequests أو MinifyJavaScript)، وتتضمّن النتيجة النقاط والتأثير لهذه القاعدة، بالإضافة إلى الاقتراحات التي تنشئها القاعدة والتي ستؤدي إلى تحميل الصفحة بشكل أسرع في حال تنفيذها. لمزيد من المعلومات عن الحقول في استجابة JSON، اطّلِع على مستند مرجع PageSpeed Insights API.

الطلب:

$ curl 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://developers.google.com/speed/pagespeed/insights/&strategy=mobile&key=yourAPIKey'

الردّ:

{
 "captchaResult": "CAPTCHA_NOT_NEEDED",
 "kind": "pagespeedonline#result",
 "id": "https://developers.google.com/speed/pagespeed/insights/",
 "responseCode": 200,
 "title": "PageSpeed Insights",
 "ruleGroups": {
  "SPEED": {
   "score": 99
  }
 },
 "loadingExperience": {
  "id": "https://developers.google.com/speed/pagespeed/insights/",
  "metrics": {
   "FIRST_CONTENTFUL_PAINT_MS": {
    "median": 678,
    "distributions": [
     {
      "min": 0,
      "max": 1567,
      "proportion": 0.8726942914078067
     },
     {
      "min": 1567,
      "max": 2963,
      "proportion": 0.07357226585394444
     },
     {
      "min": 2963,
      "proportion": 0.053733442738248746
     }
    ],
    "category": "FAST"
   },
   "DOM_CONTENT_LOADED_EVENT_FIRED_MS": {
    "median": 559,
    "distributions": [
     {
      "min": 0,
      "max": 2120,
      "proportion": 0.9287991742172268
     },
     {
      "min": 2120,
      "max": 4226,
      "proportion": 0.035877050120426655
     },
     {
      "min": 4226,
      "proportion": 0.0353237756623466
     }
    ],
    "category": "FAST"
   }
  },
  "overall_category": "FAST",
  "initial_url": "https://developers.google.com/speed/pagespeed/insights/"
 },
 "pageStats": {
  "numberResources": 11,
  "numberHosts": 6,
  "totalRequestBytes": "1874",
  "numberStaticResources": 6,
  "htmlResponseBytes": "72494",
  "overTheWireResponseBytes": "324002",
  "cssResponseBytes": "8467",
  "imageResponseBytes": "5363",
  "javascriptResponseBytes": "841488",
  "otherResponseBytes": "14548",
  "numberJsResources": 4,
  "numberCssResources": 1,
  "numTotalRoundTrips": 13,
  "numRenderBlockingRoundTrips": 0
 },
 "formattedResults": {
  "locale": "en_US",
  "ruleResults": {
   "AvoidLandingPageRedirects": {
    "localizedRuleName": "Avoid landing page redirects",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "Your page has no redirects. Learn more about {{BEGIN_LINK}}avoiding landing page redirects{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/AvoidRedirects"
      }
     ]
    }
   },
   "EnableGzipCompression": {
    "localizedRuleName": "Enable compression",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have compression enabled. Learn more about {{BEGIN_LINK}}enabling compression{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/EnableCompression"
      }
     ]
    }
   },
   ...
   "PrioritizeVisibleContent": {
    "localizedRuleName": "Prioritize visible content",
    "ruleImpact": 0.0,
    "groups": [
     "SPEED"
    ],
    "summary": {
     "format": "You have the above-the-fold content properly prioritized. Learn more about {{BEGIN_LINK}}prioritizing visible content{{END_LINK}}.",
     "args": [
      {
       "type": "HYPERLINK",
       "key": "LINK",
       "value": "https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent"
      }
     ]
    }
   }
  }
 },
 "version": {
  "major": 1,
  "minor": 15
 }
}

من JavaScript

ويمكنك استدعاء PageSpeed Insights API من JavaScript في المتصفح، باستخدام معلَمة طلب البحث callback ووظيفة استدعاء لإنشاء نتائج JSON-P. ويتيح لك ذلك كتابة تطبيقات منسقة تعرض بيانات PageSpeed بدون كتابة أي رمز من جانب الخادم.

يستخدم المثال التالي هذا النهج لعرض نتائج PageSpeed ومعلومات أخرى لعنوان URL https://developers.google.com/speed/pagespeed/insights/. يستخدم هذا المثال أيضًا أدوات Google Chart لعرض المعلومات التي تنشئها PageSpeed Insights API.

أولاً، حدِّد مفتاح Google API (اطّلِع على مزيد من المعلومات عن مفاتيح واجهة برمجة التطبيقات):

<script>
// Specify your actual API key here:
var API_KEY = 'yourAPIKey';

// Specify the URL you want PageSpeed results for here:
var URL_TO_GET_RESULTS_FOR = 'https://developers.google.com/speed/pagespeed/insights/';
</script>

بعد ذلك، يمكنك استرجاع نتائج PageSpeed من واجهة برمجة تطبيقات PageSpeed Insights API:

<script>
var API_URL = 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?';
var CHART_API_URL = 'http://chart.apis.google.com/chart?';

// Object that will hold the callbacks that process results from the
// PageSpeed Insights API.
var callbacks = {}

// Invokes the PageSpeed Insights API. The response will contain
// JavaScript that invokes our callback with the PageSpeed results.
function runPagespeed() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  var query = [
    'url=' + URL_TO_GET_RESULTS_FOR,
    'callback=runPagespeedCallbacks',
    'key=' + API_KEY,
  ].join('&');
  s.src = API_URL + query;
  document.head.insertBefore(s, null);
}

// Our JSONP callback. Checks for errors, then invokes our callback handlers.
function runPagespeedCallbacks(result) {
  if (result.error) {
    var errors = result.error.errors;
    for (var i = 0, len = errors.length; i < len; ++i) {
      if (errors[i].reason == 'badRequest' && API_KEY == 'yourAPIKey') {
        alert('Please specify your Google API key in the API_KEY variable.');
      } else {
        // NOTE: your real production app should use a better
        // mechanism than alert() to communicate the error to the user.
        alert(errors[i].message);
      }
    }
    return;
  }

  // Dispatch to each function on the callbacks object.
  for (var fn in callbacks) {
    var f = callbacks[fn];
    if (typeof f == 'function') {
      callbacks[fn](result);
    }
  }
}

// Invoke the callback that fetches results. Async here so we're sure
// to discover any callbacks registered below, but this can be
// synchronous in your code.
setTimeout(runPagespeed, 0);
</script>

باستخدام الرمز أعلاه لجلب النتائج من PageSpeed Insights API، أصبحنا مستعدين الآن لعرض المعلومات المهمة في متصفح المستخدم بالاستعانة بالأمثلة أدناه.

المثال 1: عرض أهم اقتراحات PageSpeed

يعرض هذا المثال أسماء أهم اقتراحات PageSpeed للصفحة التي يتم تحليلها، كقائمة غير مرتبة. على سبيل المثال:

تحسين التخزين المؤقت للمتصفح
تأجيل تحليل JavaScript
تصغير HTML
تصغير JavaScript

ملاحظة: توفّر واجهة برمجة التطبيقات PageSpeed Insights API البيانات اللازمة لعرض نتائج PageSpeed الكاملة، ولكن من أجل إبقاء المثال بسيطًا، لا يتم استخدام كل هذه البيانات هنا.

<script>
callbacks.displayTopPageSpeedSuggestions = function(result) {
  var results = [];
  var ruleResults = result.formattedResults.ruleResults;
  for (var i in ruleResults) {
    var ruleResult = ruleResults[i];
    // Don't display lower-impact suggestions.
    if (ruleResult.ruleImpact < 3.0) continue;
    results.push({name: ruleResult.localizedRuleName,
                  impact: ruleResult.ruleImpact});
  }
  results.sort(sortByImpact);
  var ul = document.createElement('ul');
  for (var i = 0, len = results.length; i < len; ++i) {
    var r = document.createElement('li');
    r.innerHTML = results[i].name;
    ul.insertBefore(r, null);
  }
  if (ul.hasChildNodes()) {
    document.body.insertBefore(ul, null);
  } else {
    var div = document.createElement('div');
    div.innerHTML = 'No high impact suggestions. Good job!';
    document.body.insertBefore(div, null);
  }
};

// Helper function that sorts results in order of impact.
function sortByImpact(a, b) { return b.impact - a.impact; }
</script>

المثال 2: عرض رسم بياني دائري لتقسيم حجم الموارد

يعرض هذا المثال رسمًا بيانيًا دائريًا يعرض تفاصيل حجم الموارد للصفحة التي يتم تحليلها. على سبيل المثال:

<script>
var RESOURCE_TYPE_INFO = [
  {label: 'JavaScript', field: 'javascriptResponseBytes', color: 'e2192c'},
  {label: 'Images', field: 'imageResponseBytes', color: 'f3ed4a'},
  {label: 'CSS', field: 'cssResponseBytes', color: 'ff7008'},
  {label: 'HTML', field: 'htmlResponseBytes', color: '43c121'},
  {label: 'Flash', field: 'flashResponseBytes', color: 'f8ce44'},
  {label: 'Text', field: 'textResponseBytes', color: 'ad6bc5'},
  {label: 'Other', field: 'otherResponseBytes', color: '1051e8'},
];

callbacks.displayResourceSizeBreakdown = function(result) {
  var stats = result.pageStats;
  var labels = [];
  var data = [];
  var colors = [];
  var totalBytes = 0;
  var largestSingleCategory = 0;
  for (var i = 0, len = RESOURCE_TYPE_INFO.length; i < len; ++i) {
    var label = RESOURCE_TYPE_INFO[i].label;
    var field = RESOURCE_TYPE_INFO[i].field;
    var color = RESOURCE_TYPE_INFO[i].color;
    if (field in stats) {
      var val = Number(stats[field]);
      totalBytes += val;
      if (val > largestSingleCategory) largestSingleCategory = val;
      labels.push(label);
      data.push(val);
      colors.push(color);
    }
  }
  // Construct the query to send to the Google Chart Tools.
  var query = [
    'chs=300x140',
    'cht=p3',
    'chts=' + ['000000', 16].join(','),
    'chco=' + colors.join('|'),
    'chd=t:' + data.join(','),
    'chdl=' + labels.join('|'),
    'chdls=000000,14',
    'chp=1.6',
    'chds=0,' + largestSingleCategory,
  ].join('&');
  var i = document.createElement('img');
  i.src = 'http://chart.apis.google.com/chart?' + query;
  document.body.insertBefore(i, null);
};
</script>

فيديو توضيحي

عرض توضيحي لـ PageSpeed Insights API في مؤتمر Google I/O BootCamp 2011