מבוא
מסמך זה מיועד למפתחים שרוצים לכתוב אפליקציות שיכולות ליצור אינטראקציה עם PageSpeed Insights API.
PageSpeed Insights הוא כלי שמדווח על הביצועים בפועל של דף במכשירים ניידים ושולחניים, ומספק הצעות לשיפור הדף כדי לסייע למפתחים לבצע אופטימיזציה של דפי האינטרנט שלהם. ניתן להשתמש ב-PageSpeed Insights API כדי ליצור באופן פרוגרמטי ציון על מהירות, ציון אופטימיזציה והצעות.
לפני שמתחילים
קבל חשבון Google
יש צורך בחשבון Google כדי לקבל מפתח API לזיהוי האפליקציה שלכם ב-Google. (מידע נוסף מפורט בהמשך).
הכירו את 'מהירות דף'
אם אתם לא מכירים את 'מהירות דף', עיינו בשיטות המומלצות לביצועי אינטרנט של PageSpeed.
איך לזהות את האפליקציה שלכם ב-Google
האפליקציה שלכם צריכה לזהות את עצמה בכל פעם שהיא שולחת בקשה ל-PageSpeed Insights API, על ידי הוספה של מפתח API לכל בקשה.
קבלת מפתח API ושימוש בו
לקבלת מפתחאו ליצור חשבון בדף פרטי הכניסה.
אחרי שיוצרים מפתח API, האפליקציה יכולה לצרף את פרמטר השאילתה key=yourAPIKey לכל כתובות ה-URL של הבקשות.
מפתח ה-API בטוח להטמעה בכתובות URL. אין צורך בקידוד.
רקע ל-PageSpeed Insights API
התוצאות שהוחזרו על ידי PageSpeed Insights API כוללות את סוגי המידע הבאים:
- תהליך הטעינה
- הקטע 'חוויית הטעינה' כולל קטגוריית מהירות כוללת (FAST, AVERAGE או SLOW) והתפלגות לפי קטגוריות.
- נתונים סטטיסטיים על הדף
- הקטע 'נתונים סטטיסטיים של דפים' מכיל כמה תוצאות סטטיסטיות שימושיות, כמו הפעולות הלוך ושוב הדרושות וסך הבייטים שבשימוש. הסטטוס מציין אם הדף עשוי להיות מהיר יותר אם תשנה את המראה והפונקציונליות שלו.
- ציון האופטימיזציה
- ציון האופטימיזציה של 'מהירות דף' (0-100) מציין את איכות האופטימיזציה של דף. ניקוד גבוה מצביע על מעט מקום לשיפור.
- הכלל
- PageSpeed מנתח דפי אינטרנט באמצעות כללים. כל כלל של PageSpeed מבוסס על עקרונות כלליים של ביצועי דפי אינטרנט, כמו שמירת משאבים במטמון, גודל ההעלאה וההורדה של הנתונים וזמני הלוך ושוב של שרת הלקוח. כללי PageSpeed יוצרים תוצאות של כללים ומשפיעות על הכללים, כפי שמתואר בהמשך.
- תוצאת הכלל
- תוצאת כלל היא הצעה שנוצרה על ידי כלל, אשר אם תיושם, תהפוך את הדף למהיר יותר ותגדיל את ניקוד 'מהירות דף' של אותו דף. לדוגמה, אם משאב ניתן לדחיסה מוצג ללא דחיסה, הכלל Enable Compression של PageSpeed ייצור תוצאה שתמליץ למפתח להפעיל את הדחיסה עבור המשאב הזה.
- השפעה של כלל
- כל כלל של PageSpeed יוצר מספר השפעה (ערך של נקודה צפה ללא גבולות) שמציין את החשיבות או את העדיפות של יישום ההצעות לתוצאה שהתקבלו בכלל, בהשוואה לכללים אחרים. למשל, אם הפעלת דחיסה תחסוך 1MB, בעוד שאופטימיזציה של תמונות תחסוך 500kB, לכלל הפעלת הדחיסה יהיה ערך השפעה שגדול פי שניים מהכלל של 'אופטימיזציה של תמונות'. השפעה של אפס מציינת שאין הצעות לשיפור עבור כלל זה.
הפעלת ה-API
כדי להפעיל את ה-API, צריך לבצע קריאה ל-method runPagespeed ולציין את כתובת ה-URL, מפתח ה-API ופרמטרים נוספים במחרוזת השאילתה. פרטים נוספים זמינים במסמכים של הפניית API.
קריאות לדוגמה ל-API
משורת הפקודה
ניתן להפעיל את PageSpeed Insights API משורת הפקודה של Linux/UNIX, באמצעות תוכנה כמו curl.
בדוגמה הבאה נעשה שימוש בגישה זו לאחזור תוצאות של PageSpeed לנייד עבור כתובת ה-URL https://developers.google.com/speed/pagespeed/insights/. הציון של PageSpeed, הנתונים הסטטיסטיים של הדף והתוצאות בפורמט PageSpeed מוחזרים בפורמט הנתונים JSON.
התוצאות בפורמט מפתח מושפעות ממזהי כללים (כמו 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
ניתן להפעיל את PageSpeed Insights API מ-JavaScript בדפדפן, באמצעות פרמטר השאילתה callback ופונקציית קריאה חוזרת כדי ליצור תוצאות JSON-P. כך ניתן לכתוב אפליקציות עשירות שמציגות נתוני PageSpeed בלי לכתוב קוד בצד השרת.
הדוגמה הבאה משתמשת בגישה הזו כדי להציג תוצאות של PageSpeed ומידע אחר עבור כתובת ה-URL 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:
<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
בדוגמה זו מוצגים שמות ההצעות המובילות של 'מהירות דף' עבור הדף שנמצא בניתוח, כרשימה לא מסודרים. לדוגמה:
- להיעזר בשמירת קבצים בדפדפן
- דחה ניתוח של JavaScript
- להקטין HTML
- להקטין JavaScript
הערה: הנתונים הדרושים להצגת תוצאות 'מהירות דף' מלאות מסופקים על ידי 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>
סרטון הדגמה
הדגמה של PageSpeed Insights API ב-Google I/O BootCamp 2011.