Trang này được dịch bởi Cloud Translation API.

Viết ứng dụng đầu tiên của bạn

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 API PageSpeed Insights.

PageSpeed Insights là một công cụ báo cáo hiệu suất thực tế của một trang trên thiết bị di động và máy tính, đồng thời đưa ra đề xuất về cách cải thiện trang đó để 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 độ, điểm tối ưu hoá và đề xuất của PageSpeed 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ó một Tài khoản Google để có thể nhận khoá API nhằm xác định ứng dụng của bạn với Google. (Xem bên dưới.)

Làm quen với PageSpeed

Nếu bạn chưa quen với 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 ứng dụng của bạn cho Google

Ứng dụng của bạn cần phải tự nhận dạng mỗi khi gửi yêu cầu đến API PageSpeed Insights bằng cách bao gồm khoá API với mỗi của bạn.

Lấy và sử dụng khoá API

Hoặc tạo một mã trong trang Thông tin đăng nhập.

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 này an toàn khi nhúng trong URL; nó không cần bất kỳ phương thức mã hoá nào.

Nền của PageSpeed Insights API

Kết quả mà API PageSpeed Insights 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 danh mục tốc độ tổng thể (NHANH, TRUNG BÌNH hoặc CHẬM) và cách phân loại theo danh mục.
Số liệu thống kê về trang: Phần Page Stats (Số liệu thống kê về trang) chứa một số kết quả thống kê hữu ích như số lượt trọn vòng cần thiết và tổng số byte được sử dụng. Cột này cho biết liệu 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 khả năng tối ưu hoá của một trang. Điểm cao cho biết có ít khả năng cần cải thiện, trong khi điểm thấp cho biết còn nhiều tiềm năng cần cải thiện.
Quy tắc: PageSpeed phân tích trang web bằng cách sử dụng quy tắc. Mỗi quy tắc Tốc độ trang 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 xuống và tải dữ liệu lên cũng như thời gian trọn vòng của máy chủ máy khách. Quy tắc PageSpeed tạo ra kết quả quy tắc và tác động của quy tắc, được mô tả bên dưới.
Kết quả về quy tắc: Kết quả của quy tắc là một đề xuất do quy tắc tạo ra. Nếu được triển khai, đề xuất này sẽ giúp trang tải nhanh hơn và tăng điểm PageSpeed cho trang đó. Ví dụ: nếu một tài nguyên có thể nén được phân phát ở dạng không nén, thì quy tắc Bật tính năng nén của PageSpeed sẽ tạo ra kết quả đề xuất nhà phát triển bật tính năng nén cho tài nguyên đó.
Mức tác động của quy tắc: Mỗi quy tắc Tốc độ trang tạo ra một số tác động (một giá trị dấu phẩy động không giới hạn) 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 đó, so với các quy tắc khác. Ví dụ: nếu bật tính năng nén sẽ tiết kiệm 1MB, trong khi tối ưu hoá hình ảnh sẽ 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 giá trị của quy tắc Optimize Hình ảnh. Mức tác động bằng 0 cho biết không có đề xuất cải thiện nào cho quy tắc đó.

Gọi API

Để gọi API này, hãy gọi phương thức runPagespeed, trong đó 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 thông tin 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 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ả PageSpeed dành cho 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 PageSpeed được trả về ở định dạng dữ liệu JSON.

Kết quả được định dạng được tạo khoá bởi các 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ư các đề 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 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'

Trả lờ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, sử dụng tham số truy vấn callback và hàm gọi lại để tạo kết quả JSON-P. Điều này cho phép bạn viết các ứng dụng đa dạng thức hiển thị dữ liệu PageSpeed mà không cần viết mã phía máy chủ.

Ví dụ sau sử dụng phương pháp này để hiển thị kết quả Tốc độ trang 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 hoá thông tin do API PageSpeed Insights 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, tìm nạp kết quả 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>

Bằng cách sử dụng mã ở trên để tìm nạp kết quả từ API PageSpeed Insights, chúng ta hiện đã 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ác ví dụ bên dưới.

Ví dụ 1: Hiển thị các đề xuất Tốc độ trang hàng đầu

Ví dụ này hiển thị tên của các đề xuất Tốc độ trang 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
Giảm bớt HTML
Giảm bớt JavaScript

Lưu ý: API PageSpeed Insights cung cấp dữ liệu cần thiết để hiển thị kết quả PageSpeed Insights đầy đủ, nhưng để giữ ví dụ đơn giản, không phải tất cả dữ liệu đó đều được sử dụng ở đâ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: Hiển thị biểu đồ hình tròn về chi tiết kích thước tài nguyên

Ví dụ này hiển thị một biểu đồ hình tròn cho thấy bảng chi tiết về 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ạ API PageSpeed Insights tại Google I/O BootCamp 2011.