इस पेज का अनुवाद Cloud Translation API से किया गया है.

अपना पहला क्लाइंट ऐप्लिकेशन लिखें

परिचय

यह दस्तावेज़ उन डेवलपर के लिए है जो PageSpeed Insights API के साथ इंटरैक्ट करने वाले ऐप्लिकेशन लिखना चाहते हैं.

PageSpeed Insights एक टूल है, जो मोबाइल और डेस्कटॉप डिवाइसों पर किसी पेज की परफ़ॉर्मेंस रिपोर्ट करता है. साथ ही, यह सुझाव देता है कि उस पेज को किस तरह बेहतर बनाया जा सकता है. इससे डेवलपर को अपने वेब पेज ऑप्टिमाइज़ करने में मदद मिलती है. PageSpeed Insights API का इस्तेमाल करके, प्रोग्राम के हिसाब से पेज की स्पीड का स्कोर, ऑप्टिमाइज़ेशन स्कोर, और सुझाव जनरेट किए जा सकते हैं.

शुरू करने से पहले

कोई Google खाता प्राप्त करें

आपके पास Google खाता होना चाहिए, ताकि आपको Google को अपने ऐप्लिकेशन की पहचान करने के लिए एपीआई पासकोड मिल सके. (नीचे देखें.)

PageSpeed के बारे में जानकारी

अगर आपको PageSpeed के बारे में नहीं पता है, तो PageSpeed वेब परफ़ॉर्मेंस के सबसे सही तरीके देखें.

Google को अपने ऐप्लिकेशन की पहचान करने का तरीका जानें

आपका ऐप्लिकेशन, PageSpeed Insights API को हर बार अनुरोध भेजते समय अपनी पहचान ज़ाहिर करता है. इसके लिए, वह हर अनुरोध में एपीआई पासकोड शामिल करता है.

एपीआई पासकोड हासिल करना और उसका इस्तेमाल करना

या क्रेडेंशियल पेज में जाकर क्रेडेंशियल बनाएं.

एपीआई पासकोड मिलने के बाद, आपका ऐप्लिकेशन क्वेरी पैरामीटर को जोड़ सकता है सभी अनुरोध यूआरएल के लिए key=yourAPIKey.

एपीआई पासकोड को यूआरएल में जोड़ना सुरक्षित है. इसे कोड में बदलने की ज़रूरत नहीं है.

PageSpeed Insights API का बैकग्राउंड

PageSpeed Insights API से मिले नतीजों में, इस तरह की जानकारी शामिल होती है:

लोड होने में लगने वाला समय: लोड होने का अनुभव वाले सेक्शन में, रफ़्तार की पूरी कैटगरी (तेज़, औसत या धीमी) और कैटगरी के डिस्ट्रिब्यूशन को शामिल किया जाता है.
पेज के आंकड़े: पेज के आंकड़ों वाले सेक्शन में, आंकड़ों के तौर पर कुछ उपयोगी नतीजे शामिल होते हैं. जैसे, राउंड ट्रिप और इस्तेमाल की गई कुल बाइट की जानकारी. इससे पता चलता है कि पेज के दिखने और काम करने के तरीके में बदलाव करके, पेज के लोड होने की स्पीड तेज़ की जा सकती है या नहीं.
ऑप्टिमाइज़ेशन स्कोर: PageSpeed ऑप्टिमाइज़ेशन स्कोर (0-100) से पता चलता है कि कोई पेज कितना ऑप्टिमाइज़ किया गया है. ज़्यादा स्कोर का मतलब है कि पेज में सुधार की ज़रूरत नहीं है, जबकि कम स्कोर का मतलब है कि पेज में सुधार की ज़रूरत है.
नियम: PageSpeed, नियमों का इस्तेमाल करके वेब पेजों का विश्लेषण करता है. PageSpeed का हर नियम, वेब पेज की परफ़ॉर्मेंस के सामान्य सिद्धांतों पर आधारित होता है. जैसे, रिसॉर्स कैश मेमोरी में सेव करना, डेटा अपलोड और डाउनलोड का साइज़, और क्लाइंट-सर्वर राउंड-ट्रिप का समय. PageSpeed के नियम, नियम के नतीजे और नियम के असर जनरेट करते हैं. इनके बारे में यहां बताया गया है.
नियम का नतीजा: नियम का नतीजा, नियम से जनरेट किया गया सुझाव होता है. अगर इसे लागू किया जाता है, तो पेज ज़्यादा तेज़ हो जाएगा और उस पेज के लिए PageSpeed स्कोर बढ़ जाएगा. उदाहरण के लिए, अगर कंप्रेस किए जा सकने वाले किसी रिसॉर्स को बिना कंप्रेस किए दिखाया जाता है, तो PageSpeed कंप्रेस करने की सुविधा चालू करें नियम से ऐसा नतीजा जनरेट होगा जो सुझाव देगा कि डेवलपर उस रिसॉर्स के लिए, कंप्रेस करने की सुविधा चालू करेगा.
नियम का असर: हर PageSpeed नियम, एक असर संख्या (बिना किसी सीमा वाली फ़्लोटिंग पॉइंट वैल्यू) जनरेट करता है. इससे पता चलता है कि किसी नियम के लिए, नियम के नतीजे के सुझावों को लागू करने की अहमियत या प्राथमिकता, दूसरे नियमों के मुकाबले क्या है. उदाहरण के लिए, अगर कंप्रेशन चालू करने से 1 एमबी सेव होगा, जबकि इमेज ऑप्टिमाइज़ करने से 500 केबी की बचत होगी, तो कंप्रेशन चालू करने वाले नियम से पड़ने वाले असर का मान, ऑप्टिमाइज़ इमेज के नियम से दोगुना होगा. 'कोई असर नहीं' का मतलब है कि उस नियम को बेहतर बनाने के लिए कोई सुझाव नहीं है.

एपीआई को शुरू करना

एपीआई शुरू करने के लिए, runPagespeed तरीके को कॉल करें. इसके लिए, क्वेरी स्ट्रिंग में यूआरएल, एपीआई पासकोड, और अन्य पैरामीटर डालें. ज़्यादा जानकारी के लिए, एपीआई के रेफ़रंस दस्तावेज़ देखें.

एपीआई कॉल का उदाहरण

कमांड लाइन से

curl जैसे प्रोग्राम का इस्तेमाल करके, Linux/UNIX कमांड लाइन से PageSpeed Insights API को शुरू किया जा सकता है.

इस उदाहरण में, https://developers.google.com/speed/pagespeed/insights/ यूआरएल के लिए, मोबाइल पर पेज की स्पीड के नतीजे फ़ेच करने के लिए इस तरीके का इस्तेमाल किया गया है. PageSpeed स्कोर, पेज के आंकड़े, और PageSpeed फ़ॉर्मैट किए गए नतीजे 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 से

JSON-P नतीजे जनरेट करने के लिए, callback क्वेरी पैरामीटर और कॉलबैक फ़ंक्शन का इस्तेमाल करके, ब्राउज़र में JavaScript से PageSpeed Insights API को शुरू किया जा सकता है. इससे आपको ऐसे रिच ऐप्लिकेशन लिखने की सुविधा मिलती है जो सर्वर-साइड कोड लिखे बिना, PageSpeed डेटा दिखाते हैं.

यहां दिए गए उदाहरण में, इस तरीके का इस्तेमाल करके https://developers.google.com/speed/pagespeed/insights/ यूआरएल के लिए, PageSpeed के नतीजे और अन्य जानकारी दिखाई गई है. इस उदाहरण में, PageSpeed Insights API से जनरेट की गई जानकारी को विज़ुअलाइज़ करने के लिए, Google चार्ट टूल का इस्तेमाल भी किया जा सकता है.

सबसे पहले, अपनी 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 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 नतीजे दिखाने के लिए ज़रूरी डेटा, PageSpeed Insights API उपलब्ध कराता है. हालांकि, इस उदाहरण को आसान बनाए रखने के लिए, यहां इस पूरे डेटा का इस्तेमाल नहीं किया जाता.

<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>

दूसरा उदाहरण: रिसॉर्स के साइज़ का पाई चार्ट दिखाना

इस उदाहरण में एक पाई चार्ट दिखाया गया है. इसमें बताया गया है कि जिस पेज का विश्लेषण किया जा रहा है उसके संसाधन के साइज़ का ब्रेकडाउन दिखाया गया है. उदाहरण के लिए:

<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>

डेमो वीडियो

Google I/O BootCamp 2011 में PageSpeed Insights API का डेमो.