Bạn có thể dùng API PageSpeed Insights để:
- Đo lường hiệu suất của trang web.
- Nhận đề xuất về cách cải thiện hiệu suất, khả năng tiếp cận và quy trình tối ưu hoá cho công cụ tìm kiếm (SEO).
- Tìm hiểu cách chuyển trang thành dạng Lũy tiến Ứng dụng web.
API PageSpeed Insights trả về dữ liệu thực từ Người dùng Chrome Báo cáo trải nghiệm và dữ liệu phòng thí nghiệm từ Lighthouse.
Điều kiện tiên quyết
Hướng dẫn này giả định rằng bạn có kiến thức chung về giao diện dòng lệnh và web phát triển ứng dụng.
Không bắt buộc: Thiết lập khoá API
Nếu chỉ đang dùng thử PageSpeed Insights API thì bạn không cần khoá API. Nếu bạn lên kế hoạch sử dụng API theo cách tự động và thực hiện nhiều truy vấn mỗi giây, bạn sẽ cần có khoá API.
Nhận và sử dụng khoá API
Mua khoá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.
API Explorer
Để thực hiện lệnh gọi đến API PageSpeed Insights mà không cần viết bất kỳ mã nào, hãy xem Trình khám phá API.
URL C
Để dùng thử API PageSpeed Insights từ dòng lệnh, hãy làm như sau:
- Mở cửa sổ dòng lệnh.
-
Chạy lệnh sau. Thêm
&key=yourAPIKeynếu bạn đang bằng cách sử dụng khoá API.curl https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://developers.google.com
Phản hồi là một đối tượng JSON. Xem Phản hồi để tìm hiểu thêm về từng thuộc tính trong đối tượng phản hồi.
{ "captchaResult": "CAPTCHA_NOT_NEEDED", "kind": "pagespeedonline#result", "id": "https://developers.google.com/", "loadingExperience": { "id": "https://developers.google.com/", "metrics": { "FIRST_CONTENTFUL_PAINT_MS": { "percentile": 3482, "distributions": [ { "min": 0, "max": 1000, "proportion": 0.37151728768042963 }, { "min": 1000, "max": 2500, "proportion": 0.4244153519077991 }, { "min": 2500, "proportion": 0.2040673604117713 } ], "category": "SLOW" }, "FIRST_INPUT_DELAY_MS": { "percentile": 36, "distributions": [ { "min": 0, "max": 50, "proportion": 0.960628961482204 }, { "min": 50, "max": 250, "proportion": 0.02888834714773281 }, { "min": 250, "proportion": 0.010482691370063388 } ], "category": "FAST" } }, "overall_category": "SLOW", "initial_url": "https://developers.google.com/" }, "originLoadingExperience": { "id": "https://developers.google.com", "metrics": { "FIRST_CONTENTFUL_PAINT_MS": { "percentile": 2761, "distributions": [ { "min": 0, "max": 1000, "proportion": 0.4236433226493666 }, { "min": 1000, "max": 2500, "proportion": 0.45045120795679117 }, { "min": 2500, "proportion": 0.1259054693938423 } ], "category": "SLOW" }, "FIRST_INPUT_DELAY_MS": { "percentile": 45, "distributions": [ { "min": 0, "max": 50, "proportion": 0.9537371485251699 }, { "min": 50, "max": 250, "proportion": 0.03044972719889055 }, { "min": 250, "proportion": 0.01581312427593959 } ], "category": "FAST" } }, "overall_category": "SLOW", "initial_url": "https://developers.google.com/" }, "lighthouseResult": { "requestedUrl": "https://developers.google.com/", "finalUrl": "https://developers.google.com/", "lighthouseVersion": "3.2.0", "userAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36", "fetchTime": "2018-11-01T03:03:58.394Z", "environment": { "networkUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3559.0 Safari/537.36", "hostUserAgent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/72.0.3584.0 Safari/537.36", "benchmarkIndex": 590.0 }, "runWarnings": [], "configSettings": { "emulatedFormFactor": "desktop", "locale": "en-US", "onlyCategories": [ "performance" ] }, "audits": { "estimated-input-latency": { "id": "estimated-input-latency", "title": "Estimated Input Latency", "description": "The score above is an estimate of how long your app takes to respond to user input, in milliseconds, during the busiest 5s window of page load. If your latency is higher than 50 ms, users may perceive your app as laggy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency).", "score": 1.0, "scoreDisplayMode": "numeric", "displayValue": "30 ms" }, "uses-rel-preconnect": { "id": "uses-rel-preconnect", "title": "Preconnect to required origins", "description": "Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. [Learn more](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).", "score": 1.0, "scoreDisplayMode": "numeric", "details": { "headings": [], "type": "opportunity", "items": [], "overallSavingsMs": 0.0 } }, ... }, "categories": { "performance": { "id": "performance", "title": "Performance", "score": 0.96, "auditRefs": [ { "id": "first-contentful-paint", "weight": 3.0, "group": "metrics" }, { "id": "first-meaningful-paint", "weight": 1.0, "group": "metrics" }, ... ] } }, "categoryGroups": { "a11y-element-names": { "title": "Elements Have Discernible Names", "description": "These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader." }, "a11y-language": { "title": "Page Specifies Valid Language", "description": "These are opportunities to improve the interpretation of your content by users in different locales." }, ... }, "i18n": { "rendererFormattedStrings": { "varianceDisclaimer": "Values are estimated and may vary.", "opportunityResourceColumnLabel": "Opportunity", "opportunitySavingsColumnLabel": "Estimated Savings", "errorMissingAuditInfo": "Report error: no audit information", "errorLabel": "Error!", "warningHeader": "Warnings: ", "auditGroupExpandTooltip": "Show audits", "passedAuditsGroupTitle": "Passed audits", "notApplicableAuditsGroupTitle": "Not applicable", "manualAuditsGroupTitle": "Additional items to manually check", "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:", "scorescaleLabel": "Score scale:", "crcLongestDurationLabel": "Maximum critical path latency:", "crcInitialNavigation": "Initial Navigation", "lsPerformanceCategoryDescription": "[Lighthouse](https://developers.google.com/web/tools/lighthouse/) analysis of the current page on an emulated mobile network. Values are estimated and may vary.", "labDataTitle": "Lab Data" } } }, "analysisUTCTimestamp": "2018-11-01T03:03:58.394Z" }
JavaScript
Để dùng thử API PageSpeed Insights từ JavaScript:
-
Sao chép mã bên dưới. Mã này sử dụng API PageSpeed Insights để đo lường hiệu suất của
https://developers.google.com, sau đó sẽ cho thấy kết quả.<script> function run() { const url = setUpQuery(); fetch(url) .then(response => response.json()) .then(json => { // See https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response // to learn more about each of the properties in the response object. showInitialContent(json.id); const cruxMetrics = { "First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category, "First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category }; showCruxContent(cruxMetrics); const lighthouse = json.lighthouseResult; const lighthouseMetrics = { 'First Contentful Paint': lighthouse.audits['first-contentful-paint'].displayValue, 'Speed Index': lighthouse.audits['speed-index'].displayValue, 'Time To Interactive': lighthouse.audits['interactive'].displayValue, 'First Meaningful Paint': lighthouse.audits['first-meaningful-paint'].displayValue, 'First CPU Idle': lighthouse.audits['first-cpu-idle'].displayValue, 'Estimated Input Latency': lighthouse.audits['estimated-input-latency'].displayValue }; showLighthouseContent(lighthouseMetrics); }); } function setUpQuery() { const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed'; const parameters = { url: encodeURIComponent('https://developers.google.com') }; let query = `${api}?`; for (key in parameters) { query += `${key}=${parameters[key]}`; } return query; } function showInitialContent(id) { document.body.innerHTML = ''; const title = document.createElement('h1'); title.textContent = 'PageSpeed Insights API Demo'; document.body.appendChild(title); const page = document.createElement('p'); page.textContent = `Page tested: ${id}`; document.body.appendChild(page); } function showCruxContent(cruxMetrics) { const cruxHeader = document.createElement('h2'); cruxHeader.textContent = "Chrome User Experience Report Results"; document.body.appendChild(cruxHeader); for (key in cruxMetrics) { const p = document.createElement('p'); p.textContent = `${key}: ${cruxMetrics[key]}`; document.body.appendChild(p); } } function showLighthouseContent(lighthouseMetrics) { const lighthouseHeader = document.createElement('h2'); lighthouseHeader.textContent = "Lighthouse Results"; document.body.appendChild(lighthouseHeader); for (key in lighthouseMetrics) { const p = document.createElement('p'); p.textContent = `${key}: ${lighthouseMetrics[key]}`; document.body.appendChild(p); } } run(); </script> - Dán mã vào tệp HTML.
-
Mở tệp HTML trong trình duyệt. Sau khi hoàn tất thành công, trang của bạn sẽ trông giống như Hình 1
Hình 1. Bản minh hoạ JavaScript
Các bước tiếp theo
- Xem phần Phản hồi để tìm hiểu thêm về từng cơ sở lưu trú trong của bạn.
- Thiết lập khoá API nếu bạn định thực hiện nhiều hơn 2 truy vấn mỗi giây.
- Hãy xem bài viết Giới thiệu về PageSpeed Insights API để tìm hiểu thêm. về cách tính các số liệu đo lường hiệu suất.
Phản hồi
Trang này có hữu ích không?