مقدمه
این سند برای توسعه دهندگانی است که می خواهند برنامه هایی بنویسند که بتوانند با PageSpeed Insights API تعامل داشته باشند.
PageSpeed Insights ابزاری است که عملکرد واقعی یک صفحه را برای دستگاه‌های تلفن همراه و دسک‌تاپ گزارش می‌دهد و پیشنهاداتی در مورد چگونگی بهبود آن صفحه ارائه می‌دهد تا به توسعه‌دهندگان کمک کند تا صفحات وب خود را بهینه کنند. می‌توانید از API PageSpeed Insights برای ایجاد امتیاز سرعت PageSpeed، امتیاز بهینه‌سازی و پیشنهادات به صورت برنامه‌نویسی استفاده کنید.
قبل از شروع
یک حساب Google دریافت کنید
شما باید یک حساب Google داشته باشید تا بتوانید یک کلید API برای شناسایی برنامه خود در Google دریافت کنید. (پایین را ببینید.)
با PageSpeed آشنا شوید
اگر با PageSpeed آشنا نیستید، به بهترین روش‌های عملکرد وب سایت PageSpeed مراجعه کنید.
یاد بگیرید که چگونه برنامه خود را در گوگل شناسایی کنید
برنامه شما باید هر بار که درخواستی را به API PageSpeed Insights ارسال می کند، خود را با قرار دادن یک کلید API با هر درخواست شناسایی کند.
به دست آوردن و استفاده از یک کلید API
یک کلید دریافت کنیدیا در صفحه اعتبارنامه ایجاد کنید.
بعد از اینکه یک کلید API داشتید، برنامه شما می تواند پارامتر query key= yourAPIKey به همه URL های درخواستی اضافه کند.
کلید API برای جاسازی در URL ها ایمن است. به هیچ کدگذاری نیاز ندارد.
پس زمینه API PageSpeed Insights
نتایج بازگردانده شده توسط PageSpeed Insights API شامل انواع اطلاعات زیر است:
- بارگیری تجربه
- بخش Loading Experience شامل یک دسته سرعت کلی (سریع، متوسط یا آهسته) و توزیع‌های دسته‌بندی است.
- آمار صفحه
- بخش آمار صفحه حاوی نتایج آماری مفیدی مانند سفرهای رفت و برگشت مورد نیاز و کل بایت های استفاده شده است. این نشان می دهد که اگر صفحه ممکن است با تغییر ظاهر و عملکرد سریعتر شود.
- امتیاز بهینه سازی
- امتیاز بهینه سازی PageSpeed (0-100) نشان می دهد که یک صفحه چقدر بهینه شده است. نمره بالا نشان دهنده فضای کمی برای پیشرفت است، در حالی که نمره پایین نشان دهنده فضای بیشتر برای پیشرفت است.
- قانون
- PageSpeed صفحات وب را با استفاده از قوانین تجزیه و تحلیل می کند. هر قانون PageSpeed مبتنی بر اصول کلی عملکرد صفحه وب است، مانند ذخیره‌سازی منابع ، اندازه بارگذاری و بارگیری داده‌ها ، و زمان‌های رفت و برگشت مشتری-سرور . قوانین PageSpeed نتایج قوانین و تأثیرات قوانین را تولید می کنند که در زیر توضیح داده شده است.
- نتیجه قانون
- نتیجه قانون پیشنهادی است که توسط یک قانون ایجاد می شود که در صورت اجرا، صفحه را سریعتر کرده و امتیاز PageSpeed را برای آن صفحه افزایش می دهد. به عنوان مثال، اگر یک منبع فشرده به صورت غیر فشرده ارائه شود، قانون PageSpeed Enable Compression نتیجه ای ایجاد می کند که به توسعه دهنده توصیه می کند فشرده سازی را برای آن منبع فعال کند.
- تاثیر قانون
- هر قانون PageSpeed یک عدد تأثیر (مقدار ممیز شناور نامحدود) ایجاد می کند که اهمیت یا اولویت اجرای پیشنهادات نتیجه قانون برای قانون را نسبت به سایر قوانین نشان می دهد. به عنوان مثال، اگر فعال کردن فشرده سازی باعث صرفه جویی 1 مگابایتی شود، در حالی که بهینه سازی تصاویر باعث صرفه جویی 500 کیلوبایتی می شود، قانون Enable Compression دارای مقدار تاثیرگذاری است که دو برابر قانون Optimize Images است. تاثیر صفر نشان می دهد که هیچ پیشنهادی برای بهبود آن قانون وجود ندارد.
فراخوانی API
برای فراخوانی API، متد runPagespeed را فراخوانی کنید و URL، کلید API و سایر پارامترها را در رشته کوئری مشخص کنید. برای جزئیات بیشتر به اسناد مرجع API مراجعه کنید.
نمونه تماس های API
از خط فرمان
می‌توانید با استفاده از برنامه‌ای مانند curl ، PageSpeed Insights API را از خط فرمان Linux/UNIX فراخوانی کنید.
مثال زیر از این روش برای واکشی نتایج PageSpeed تلفن همراه برای URL https://developers.google.com/speed/pagespeed/insights/ استفاده می کند. امتیاز PageSpeed، آمار صفحه و نتایج قالب‌بندی شده PageSpeed در قالب داده JSON برگردانده می‌شوند.
نتایج قالب‌بندی‌شده توسط شناسه‌های قانون (مانند AvoidBadRequests یا MinifyJavaScript ) کلید می‌خورند و حاوی امتیاز و تأثیر آن قانون، و همچنین پیشنهادهایی است که توسط این قانون ایجاد می‌شود که در صورت اجرا، بارگذاری صفحه را سریعتر می‌کند. برای کسب اطلاعات بیشتر در مورد فیلدهای موجود در پاسخ JSON، به سند مرجع API PageSpeed Insights مراجعه کنید.
درخواست:
$ 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
}
}
از جاوا اسکریپت
می‌توانید با استفاده از پارامتر query callback و تابع callback برای تولید نتایج JSON-P ، PageSpeed Insights API را از جاوا اسکریپت در مرورگر فراخوانی کنید. این به شما امکان می دهد برنامه های کاربردی غنی بنویسید که داده های PageSpeed را بدون نوشتن کد سمت سرور نمایش می دهند.
مثال زیر از این روش برای نمایش نتایج PageSpeed و سایر اطلاعات برای URL https://developers.google.com/speed/pagespeed/insights/ استفاده می کند. این مثال همچنین از ابزار نمودار گوگل برای تجسم اطلاعات تولید شده توسط 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 را از 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>
با استفاده از کد بالا برای واکشی نتایج از API PageSpeed Insights، اکنون آماده نمایش اطلاعات جالب در مرورگر کاربر با استفاده از مثال‌های زیر هستیم.
مثال 1: نمایش پیشنهادات صفحه سرعت برتر
این مثال نام پیشنهادات برتر PageSpeed برای صفحه مورد تجزیه و تحلیل را به عنوان یک لیست نامرتب نمایش می دهد. به عنوان مثال:
- از حافظه پنهان مرورگر استفاده کنید
- تجزیه جاوا اسکریپت را به تعویق بیندازید
- HTML را کوچک کنید
- جاوا اسکریپت را کوچک کنید
توجه: داده‌های مورد نیاز برای نمایش نتایج کامل PageSpeed توسط API PageSpeed Insights ارائه می‌شود، اما برای ساده نگه داشتن مثال، همه آن داده‌ها در اینجا استفاده نمی‌شوند.
<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>
ویدئوی نمایشی
نسخه ی نمایشی API PageSpeed Insights در Google I/O BootCamp 2011.