簡介
本文件可協助開發人員編寫可與 PageSpeed Insights API 互動的應用程式。
PageSpeed Insights 這項工具可回報網頁在行動裝置和電腦裝置上的實際成效，並提供建議改善做法，協助開發人員將網頁最佳化。您可以使用 PageSpeed Insights API，透過程式輔助方式產生 PageSpeed 分數、最佳化分數和建議。
事前準備
建立 Google 帳戶
您必須擁有 Google 帳戶，才能取得用來向 Google 識別應用程式的 API 金鑰。(詳情請見下方)。
瞭解 PageSpeed
如果您不熟悉 PageSpeed，請參閱 PageSpeed 的網路效能最佳做法。
瞭解如何向 Google 識別您的應用程式
應用程式每次向 PageSpeed Insights API 傳送要求時，都必須透過在每個要求中加入 API 金鑰，藉此識別自己的身分。
取得並使用 API 金鑰
取得金鑰或在「憑證」頁面中建立。
取得 API 金鑰後，應用程式可以將查詢參數 key=yourAPIKey 附加到所有要求網址。
API 金鑰可以安全地嵌入網址中，不需任何編碼。
PageSpeed Insights API 背景
PageSpeed Insights API 傳回的結果包含下列類型的資訊：
- 正在載入體驗
- 「載入體驗」專區包含整體速度類別 (「快速」、「平均」或「低」) 以及類別分佈情形。
- 網頁統計資料
- 「網頁統計資料」部分包含一些實用的統計結果，例如需要的來回行程以及耗用的位元組總數。它適合用來調整外觀和功能，是否可以加快網頁載入速度。
- 最佳化分數
- PageSpeed 最佳化分數 (0-100) 代表網頁的最佳化程度。分數高表示網頁沒有改善空間，分數低則代表還有改善空間。
- 規則
- PageSpeed 會使用規則分析網頁。每項 PageSpeed 規則都取決於網頁效能的一般原則，例如資源快取、資料上傳和下載大小，以及用戶端伺服器往返時間。PageSpeed 規則會產生下方所述的規則結果和規則影響。
- 規則結果
- 規則結果是指規則產生的建議，導入後可加快網頁載入速度，並提高該網頁的 PageSpeed 分數。舉例來說，如果可壓縮資源是以未經壓縮的方式提供，PageSpeed 的「啟用壓縮」規則就會產生結果，建議開發人員為該資源啟用壓縮功能。
- 規則的影響
- 每個 PageSpeed 規則都會產生影響數字 (不受限的浮點值)，指出相較於其他規則，為規則實作規則結果建議的重要性或優先順序。舉例來說，若啟用壓縮功能可省下 1 MB，但最佳化圖片可省下 500 KB，「啟用壓縮」規則的效果值會是「最佳化圖片」規則的兩倍。如果規則為 0，表示沒有針對該規則提供的改善建議。
叫用 API
如要叫用 API，請呼叫 runPagespeed 方法，並在查詢字串中指定網址、API 金鑰和其他參數。詳情請參閱 API 參考資料文件。
API 呼叫範例
使用指令列
您可以透過 curl 之類的程式，從 Linux/UNIX 指令列叫用 PageSpeed Insights API。
以下範例使用這個方法擷取 https://developers.google.com/speed/pagespeed/insights/ 網址的行動 PageSpeed 結果。PageSpeed 分數、網頁統計資料和 PageSpeed 格式的結果會以 JSON 資料格式傳回。
格式化結果會依照規則 ID (例如 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
您可以使用 callback 查詢參數和回呼函式產生 JSON-P 結果，藉此在瀏覽器中從 JavaScript 叫用 PageSpeed Insights API。這可讓你編寫豐富的應用程式，顯示 PageSpeed 資料，完全不必編寫任何伺服器端程式碼。
以下範例使用這個方法顯示 PageSpeed 結果和其他網址資訊：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 Insights API 擷取 PageSpeed 結果：
<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>
範例 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>
示範影片
2011 年 Google I/O BootCamp 的 PageSpeed Insights API 示範。