เกริ่นนำ
เอกสารนี้จัดทำขึ้นสำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการเขียนแอปพลิเคชันที่โต้ตอบกับ PageSpeed Insights API ได้
PageSpeed Insights คือเครื่องมือที่รายงานประสิทธิภาพจริงของหน้าเว็บสำหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อป และให้คำแนะนำเกี่ยวกับวิธีปรับปรุงหน้าเว็บดังกล่าวเพื่อช่วยนักพัฒนาซอฟต์แวร์ในการเพิ่มประสิทธิภาพหน้าเว็บ คุณสามารถใช้ PageSpeed Insights API เพื่อสร้างคะแนนความเร็ว คะแนนการเพิ่มประสิทธิภาพ และคำแนะนำแบบเป็นโปรแกรมได้
ก่อนจะเริ่ม
รับบัญชี Google
คุณต้องมีบัญชี Google เพื่อรับคีย์ API เพื่อระบุแอปพลิเคชันของคุณให้ Google ทราบ (ดูด้านล่าง)
ทำความคุ้นเคยกับ PageSpeed
หากคุณไม่คุ้นเคยกับ PageSpeed โปรดดูแนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับประสิทธิภาพเว็บของ PageSpeed
เรียนรู้วิธีระบุแอปพลิเคชันของคุณกับ Google
แอปพลิเคชันของคุณจำเป็นต้องมีการระบุตัวตนทุกครั้งที่ส่งคำขอไปยัง PageSpeed Insights API โดยรวมคีย์ API ไว้ในคำขอแต่ละรายการ
การรับและการใช้คีย์ API
ซื้อคีย์หรือสร้างไว้ในหน้าข้อมูลเข้าสู่ระบบ
หลังจากมีคีย์ API แล้ว แอปพลิเคชันจะเพิ่มพารามิเตอร์การค้นหา key=yourAPIKey ต่อท้าย URL ของคำขอทั้งหมดได้
คีย์ API ปลอดภัยสำหรับการฝังใน URL โดยไม่จำเป็นต้องมีการเข้ารหัสใดๆ
พื้นหลังของ PageSpeed Insights API
ผลการค้นหาที่ PageSpeed Insights API แสดงผลจะรวมข้อมูลประเภทต่างๆ ต่อไปนี้
- ประสบการณ์การโหลด
- ส่วน "ประสบการณ์การโหลด" ประกอบด้วยหมวดหมู่ความเร็วโดยรวม (FAST, AVERAGE หรือช้า) และการแจกแจงหมวดหมู่
- สถิติของหน้า
- ส่วนสถิติหน้าเว็บแสดงผลลัพธ์ทางสถิติที่มีประโยชน์ เช่น การเดินทางไป-กลับที่จำเป็นและจำนวนไบต์ทั้งหมดที่ใช้ ซึ่งระบุว่าหน้าเว็บอาจเร็วขึ้นจากการแก้ไขรูปลักษณ์และฟังก์ชันการทำงาน
- คะแนนการเพิ่มประสิทธิภาพ
- คะแนนการเพิ่มประสิทธิภาพของ PageSpeed (0-100) บ่งบอกว่าเพิ่มประสิทธิภาพหน้าเว็บได้ดีเพียงใด คะแนนที่สูงบ่งชี้ว่าสามารถปรับปรุงได้อีกเล็กน้อย ขณะที่คะแนนต่ำหมายความว่ายังมีพื้นที่สำหรับการปรับปรุงได้อีก
- กฎ
- PageSpeed จะวิเคราะห์หน้าเว็บโดยใช้กฎ กฎ PageSpeed แต่ละกฎอิงตามหลักการทั่วไปของประสิทธิภาพหน้าเว็บ เช่น การแคชทรัพยากร ขนาดการอัปโหลดและดาวน์โหลดข้อมูล และระยะเวลารับส่งข้อมูลระหว่างเซิร์ฟเวอร์ของไคลเอ็นต์ กฎ PageSpeed จะสร้างผลลัพธ์ของกฎและผลกระทบของกฎ ตามที่อธิบายด้านล่าง
- ผลลัพธ์ของกฎ
- ผลลัพธ์ของกฎคือคำแนะนำที่สร้างขึ้นจากกฎที่หากนำมาใช้งาน จะทำให้หน้าเว็บเร็วขึ้นและเพิ่มคะแนน PageSpeed ของหน้าเว็บนั้น ตัวอย่างเช่น หากมีการแสดงผลทรัพยากรที่บีบอัดได้โดยไม่มีการบีบอัด กฎเปิดใช้การบีบอัดของ PageSpeed จะสร้างผลลัพธ์ที่แนะนำให้นักพัฒนาซอฟต์แวร์เปิดใช้การบีบอัดสำหรับทรัพยากรดังกล่าว
- ผลกระทบของกฎ
- กฎ PageSpeed แต่ละกฎจะสร้างจำนวนผลกระทบ (ค่าจำนวนลอยตัวที่ไม่มีขอบเขต) ซึ่งระบุความสำคัญหรือลำดับความสำคัญของการนำคำแนะนำผลลัพธ์ของกฎไปใช้กับกฎนั้น เมื่อเทียบกับกฎอื่นๆ ตัวอย่างเช่น ถ้าเปิดใช้การบีบอัดจะทำให้ประหยัดพื้นที่ 1 MB ในขณะที่การเพิ่มประสิทธิภาพรูปภาพจะบันทึกได้ 500 KB กฎการเปิดใช้การบีบอัดจะมีค่าผลกระทบมากกว่ากฎ Optimize รูปภาพถึง 2 เท่า ผลกระทบ 0 หมายความว่าไม่มีคำแนะนำสำหรับการปรับปรุงสำหรับกฎนั้น
การเรียกใช้ API
หากต้องการเรียกใช้ API ให้เรียกเมธอด 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 ด้วย
ก่อนอื่น ให้ระบุคีย์ API ของ Google (ดูข้อมูลเพิ่มเติมเกี่ยวกับคีย์ 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 จาก 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 ยอดนิยม
ตัวอย่างนี้แสดงชื่อของคำแนะนำ PageSpeed ยอดนิยมสำหรับหน้าเว็บที่กำลังวิเคราะห์ โดยเป็นรายการแบบไม่เรียงลำดับ เช่น
- ใช้ประโยชน์จากการแคชของเบราว์เซอร์
- เลื่อนการแยกวิเคราะห์ JavaScript
- ลดขนาด HTML
- ลดขนาด JavaScript
หมายเหตุ: PageSpeed Insights API จะจัดเตรียมข้อมูลที่จำเป็นต่อการแสดงผลของ PageSpeed แบบเต็มจำนวน แต่เพื่อให้ตัวอย่างเป็นไปอย่างง่ายๆ จะไม่มีการนำข้อมูลดังกล่าวมาใช้ทั้งหมดที่นี่
<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