Giới thiệu
Tài liệu này dành cho các nhà phát triển muốn viết các ứng dụng có thể tương tác với PageSpeed Insights API.
PageSpeed Insights là một công cụ báo cáo về hiệu suất thực tế của một trang dành cho thiết bị di động và máy tính, đồng thời cung cấp nội dung đề xuất về cách cải thiện trang đó nhằm giúp nhà phát triển tối ưu hoá trang web của họ. Bạn có thể sử dụng API PageSpeed Insights để tạo điểm tốc độ PageSpeed, điểm tối ưu hoá và các đề xuất theo phương thức lập trình.
Trước khi bắt đầu
Tạo tài khoản Google
Bạn cần có Tài khoản Google để có thể nhận khoá API nhằm xác định ứng dụng của bạn cho Google. (Xem bên dưới.)
Làm quen với PageSpeed
Nếu bạn chưa hiểu rõ về PageSpeed, hãy xem Các phương pháp hay nhất về hiệu suất web của PageSpeed.
Tìm hiểu cách xác định đơn đăng ký của bạn cho Google
Ứng dụng của bạn cần tự xác định mỗi khi gửi yêu cầu đến PageSpeed Insights API, bằng cách thêm khoá API vào mỗi yêu cầu.
Mua và sử dụng khoá API
Mua khoáHoặc tạo một mã trong trang Thông tin xác thực.
Sau khi bạn có khoá API, ứng dụng của bạn có thể thêm tham số truy vấn key=yourAPIKey vào tất cả URL yêu cầu.
Khoá API có thể an toàn khi nhúng trong URL mà không cần phương thức mã hoá.
Nền API PageSpeed Insights
Kết quả do PageSpeed Insights API trả về bao gồm các loại thông tin sau:
- Đang tải trải nghiệm
- Phần Trải nghiệm tải bao gồm một danh mục tốc độ tổng thể (NHANH, TRUNG BÌNH hoặc CHẬM) và các mức phân loại.
- Số liệu thống kê về trang
- Phần Số liệu thống kê về trang chứa một số kết quả thống kê hữu ích, chẳng hạn như số lượt trọn vòng cần thiết và tổng số byte đã dùng. Mã này cho biết rằng trang có thể nhanh hơn bằng cách sửa đổi giao diện và chức năng.
- Điểm tối ưu hoá
- Điểm tối ưu hoá của PageSpeed (0 – 100) cho biết mức độ tối ưu hoá của một trang. Điểm cao cho biết có ít điểm cần cải thiện, trong khi điểm thấp cho biết cần phải cải thiện nhiều hơn.
- Quy tắc
- PageSpeed phân tích trang web theo quy tắc. Mỗi quy tắc của PageSpeed đều dựa trên các nguyên tắc chung về hiệu suất trang web, chẳng hạn như lưu tài nguyên vào bộ nhớ đệm, kích thước tải lên và tải dữ liệu xuống cũng như thời gian khứ hồi của máy khách/máy chủ. Các quy tắc của PageSpeed tạo kết quả theo quy tắc và tác động đến quy tắc, được mô tả bên dưới.
- Kết quả quy tắc
- Kết quả của quy tắc là đề xuất của một quy tắc. Nếu quy tắc được triển khai, kết quả này sẽ giúp trang hoạt động nhanh hơn và tăng điểm PageSpeed cho trang đó. Ví dụ: nếu tài nguyên có thể nén được cung cấp không nén, quy tắc Bật tính năng nén của PageSpeed sẽ tạo ra kết quả khuyến nghị nhà phát triển bật tính năng nén cho tài nguyên đó.
- Tác động của quy tắc
- Mỗi quy tắc của PageSpeed tạo ra một số tác động (giá trị dấu phẩy động không liên kết) cho biết tầm quan trọng hoặc mức độ ưu tiên của việc triển khai các đề xuất kết quả quy tắc cho quy tắc này, so với các quy tắc khác. Ví dụ: nếu việc bật tính năng nén sẽ giúp tiết kiệm 1MB, trong khi việc tối ưu hoá hình ảnh sẽ giúp tiết kiệm 500kB, thì quy tắc Bật tính năng nén sẽ có giá trị tác động gấp đôi quy tắc của quy tắc Tối ưu hoá hình ảnh. Mức tác động bằng 0 cho biết không có đề xuất nào để cải thiện quy tắc đó.
Gọi API
Để gọi API, hãy gọi phương thức runPagespeed, chỉ định URL, khoá API và các tham số khác trong chuỗi truy vấn. Hãy tham khảo tài liệu Tài liệu tham khảo API để biết thêm chi tiết.
Ví dụ về lệnh gọi API
Từ dòng lệnh
Bạn có thể gọi API PageSpeed Insights từ dòng lệnh Linux/UNIX bằng cách sử dụng một chương trình như curl.
Ví dụ sau đây sử dụng phương pháp này để tìm nạp kết quả của PageSpeed trên thiết bị di động cho URL https://developers.google.com/speed/pagespeed/insights/. Điểm PageSpeed, số liệu thống kê về trang và kết quả được định dạng của PageSpeed sẽ được trả về ở định dạng dữ liệu JSON.
Kết quả được định dạng được khoá theo giá trị nhận dạng quy tắc (chẳng hạn như AvoidBadRequests hoặc MinifyJavaScript) và chứa điểm số và tác động của quy tắc đó, cũng như nội dung đề xuất do quy tắc tạo ra (nếu được triển khai) sẽ giúp trang tải nhanh hơn. Để tìm hiểu thêm về các trường trong phản hồi JSON, hãy xem tài liệu Tài liệu tham khảo về API PageSpeed Insights.
Yêu cầu:
$ curl 'https://www.googleapis.com/pagespeedonline/v4/runPagespeed?url=https://developers.google.com/speed/pagespeed/insights/&strategy=mobile&key=yourAPIKey'
Phản hồi:
{
"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
}
}
Từ JavaScript
Bạn có thể gọi API PageSpeed Insights từ JavaScript trong trình duyệt bằng cách sử dụng tham số truy vấn callback và hàm callback để tạo kết quả JSON-P. Điều này cho phép bạn ghi các ứng dụng phong phú hiển thị dữ liệu PageSpeed mà không cần viết bất kỳ mã phía máy chủ nào.
Ví dụ sau đây sử dụng phương pháp này để hiển thị kết quả của PageSpeed và các thông tin khác cho URL https://developers.google.com/speed/pagespeed/insights/. Ví dụ này cũng sử dụng Công cụ biểu đồ của Google để trực quan hóa thông tin do PageSpeed Insights API tạo ra.
Trước tiên, hãy chỉ định khoá Google API của bạn (tìm hiểu thêm về khoá 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>
Tiếp theo, hãy tìm nạp kết quả của PageSpeed từ API PageSpeed Insights:
<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>
Sử dụng mã ở trên để tìm nạp kết quả từ PageSpeed Insights API, giờ đây chúng tôi đã sẵn sàng để hiển thị thông tin thú vị trong trình duyệt của người dùng bằng cách sử dụng các ví dụ bên dưới.
Ví dụ 1: Hiển thị đề xuất PageSpeed hàng đầu
Ví dụ này hiển thị tên của các đề xuất PageSpeed hàng đầu cho trang đang được phân tích dưới dạng danh sách không theo thứ tự. Ví dụ:
- Nâng cao lưu vào bộ nhớ đệm trong trình duyệt
- Trì hoãn việc phân tích cú pháp JavaScript
- Thu nhỏ HTML
- Thu nhỏ JavaScript
Lưu ý: Dữ liệu cần thiết để hiển thị đầy đủ kết quả của PageSpeed là do API PageSpeed Insights cung cấp. Tuy nhiên, để đơn giản hoá ví dụ, chúng tôi không sử dụng tất cả dữ liệu đó ở đây.
<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>
Ví dụ 2: Trình bày biểu đồ hình tròn bảng chi tiết kích thước tài nguyên
Ví dụ này hiển thị biểu đồ hình tròn cho thấy bảng chi tiết kích thước tài nguyên của trang đang được phân tích. Ví dụ:
<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>
Video minh họa
Bản minh hoạ PageSpeed Insights API tại Google I/O BootCamp 2011.