דף זה תורגם על ידי Cloud Translation API.

כתיבת אפליקציית הלקוח הראשונה שלך

מבוא

המסמך הזה מיועד למפתחים שרוצים לכתוב אפליקציות שיכולות ליצור אינטראקציה עם PageSpeed Insights API.

PageSpeed Insights הוא כלי שמדווח על הביצועים בפועל של דף במכשירים ניידים ובמחשבים, ומספק הצעות לשיפור הדף כדי לעזור למפתחים לבצע אופטימיזציה של דפי האינטרנט שלהם. אפשר להשתמש ב-API של PageSpeed Insights כדי ליצור באופן פרוגרמטי את ציון המהירות, ציון האופטימיזציה וההצעות של PageSpeed.

לפני שמתחילים

קבל חשבון Google

אתם צריכים חשבון Google כדי לקבל מפתח API לזיהוי האפליקציה שלכם ל-Google. (ראו בהמשך).

היכרות עם PageSpeed

אם אתם לא מכירים את PageSpeed, כדאי לעיין בשיטות המומלצות לשיפור ביצועי האתר ב-PageSpeed.

איך מזהים את האפליקציה ב-Google

האפליקציה צריכה להזדהות בכל פעם שהיא שולחת בקשה אל PageSpeed Insights API, על ידי הוספה של מפתח API לכל אחד מהם. בקשה.

קבלת מפתח API ושימוש בו

לחלופין, אפשר ליצור אחד בדף Credentials.

אחרי שיש לכם מפתח API, האפליקציה יכולה לצרף את פרמטר השאילתה key=yourAPIKey בכל כתובות ה-URL של הבקשות.

מפתח ה-API בטוח להטמעה בכתובות URL, ואין צורך בקידוד שלו.

רקע על PageSpeed Insights API

התוצאות שמוחזרות על ידי PageSpeed Insights API כוללות את סוגי המידע הבאים:

חוויית הטעינה: הקטע 'חוויית הטעינה' כולל קטגוריית מהירות כוללת (מהירה, ממוצעת או איטית) והתפלגויות של קטגוריות.
נתונים סטטיסטיים על הדף: הקטע 'נתונים סטטיסטיים של דפים' מכיל כמה תוצאות סטטיסטיות מועילות, כמו מספר הנסיעות הלוך ושוב הנדרשות והסה"כ בייטים שבהם נעשה שימוש. התג מציין שאם הדף עשוי להיות מהיר יותר על ידי שינוי המראה והפונקציונליות שלו.
ציון האופטימיזציה: ציון האופטימיזציה של PageSpeed (0-100) מציין את רמת האופטימיזציה של הדף. ציון גבוה מציין שיש מעט מקום לשיפור, בעוד שציון נמוך מציין שיש הרבה מקום לשיפור.
כלל: PageSpeed מנתח דפי אינטרנט באמצעות כללים. כל כלל של PageSpeed מבוסס על עקרונות כלליים של ביצועי דפי אינטרנט, כמו אחסון משאבים במטמון, גודל ההעלאה וההורדה של נתונים וזמני הנסיעה הלוך ושוב בין שרת ללקוח. כללי PageSpeed יוצרים תוצאות של כללים וההשפעות של הכללים, כפי שמתואר בהמשך.
תוצאת הכלל: תוצאה של כלל היא הצעה שנוצרה על ידי כלל. אם הכלל מיושם, הוא יהפוך את הדף למהיר יותר ויגדיל את ציון PageSpeed של הדף הזה. לדוגמה, אם משאב שניתן לדחיסה מוצג ללא דחיסה, הכלל Enable Compression (הפעלת דחיסה) של PageSpeed ייצור תוצאה עם המלצה למפתח להפעיל דחיסה של המשאב הזה.
השפעת הכללים: כל כלל של PageSpeed יוצר מספר השפעה (ערך של נקודה צפה ללא גבול) שמציין את החשיבות או העדיפות של הטמעת ההצעות של תוצאות הכלל ביחס לכללים אחרים. לדוגמה, אם הפעלת דחיסה תחסוך 1MB, בעוד שאופטימיזציה של תמונות תחסוך 500kB, הכלל של הפעלת דחיסה יהיה בעל ערך השפעה כפול מהכלל של אופטימיזציית תמונות. השפעה של אפס מציינת שאין הצעות לשיפור עבור הכלל הזה.

קריאה ל-API

כדי להפעיל את ה-API, צריך לקרוא ל-method‏ runPagespeed, לציין את כתובת ה-URL, מפתח ה-API ופרמטרים אחרים במחרוזת השאילתה. פרטים נוספים זמינים במסמכים בנושא API Reference.

דוגמאות לקריאות ל-API

משורת הפקודה

אפשר להפעיל את PageSpeed Insights API משורת הפקודה של Linux/UNIX באמצעות תוכנית כמו curl.

בדוגמה הבאה נעשה שימוש בגישה הזו כדי לאחזר תוצאות של PageSpeed לנייד עבור כתובת ה-URL 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

אפשר להפעיל את PageSpeed Insights API מ-JavaScript בדפדפן, באמצעות פרמטר השאילתה callback ופונקציית קריאה חוזרת כדי ליצור תוצאות JSON-P. כך תוכלו לכתוב אפליקציות מפותחות שמוצגות בהן נתוני PageSpeed בלי לכתוב קוד בצד השרת.

בדוגמה הבאה נעשה שימוש בגישה הזו כדי להציג את תוצאות PageSpeed ומידע נוסף לגבי כתובת ה-URL https://developers.google.com/speed/pagespeed/insights/. בדוגמה הזו נעשה שימוש גם בכלי התרשים של Google כדי להציג באופן חזותי את המידע שנוצר באמצעות PageSpeed Insights API.

קודם כול, מציינים את מפתח Google API (מידע נוסף על מפתחות 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, אבל כדי שהדוגמה תהיה פשוטה, לא כל הנתונים האלו משמשים כאן.

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