หน้านี้ได้รับการแปลโดย Cloud Translation API

เขียนใบสมัครลูกค้ารายแรก

บทนำ

เอกสารนี้มีไว้สำหรับนักพัฒนาซอฟต์แวร์ที่ต้องการเขียนแอปพลิเคชันที่โต้ตอบกับ 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 หรือ SLOW) และการแจกแจงหมวดหมู่
สถิติของหน้า: ส่วนสถิติหน้าเว็บจะมีผลลัพธ์ทางสถิติที่มีประโยชน์ เช่น ข้อมูลการเดินทางไปกลับที่จำเป็นและจำนวนไบต์รวมที่ใช้ ปัญหานี้บ่งชี้ว่าหน้าเว็บอาจเร็วขึ้นด้วยการแก้ไขรูปลักษณ์และฟังก์ชันการทำงาน
คะแนนการเพิ่มประสิทธิภาพ: คะแนนการเพิ่มประสิทธิภาพ PageSpeed (0-100) เป็นตัวบ่งชี้ว่าหน้าเว็บเพิ่มประสิทธิภาพได้ดีเพียงใด คะแนนที่สูงบ่งชี้ว่าสามารถปรับปรุงได้อีกเล็กน้อย ในขณะที่คะแนนต่ำหมายถึงมีโอกาสปรับปรุงมาก
กฎ: PageSpeed จะวิเคราะห์หน้าเว็บโดยใช้กฎ กฎของ PageSpeed แต่ละข้อนั้นอิงตามหลักการทั่วไปของประสิทธิภาพหน้าเว็บ เช่น การแคชทรัพยากร ขนาดการอัปโหลดและดาวน์โหลดข้อมูล และเวลารับส่งข้อมูลระหว่างไคลเอ็นต์-เซิร์ฟเวอร์ กฎของ PageSpeed จะสร้างผลลัพธ์ของกฎและผลกระทบของกฎตามที่อธิบายไว้ด้านล่าง
ผลลัพธ์ของกฎ: ผลลัพธ์ของกฎคือคำแนะนำที่สร้างขึ้นโดยกฎซึ่งหากนำไปใช้ จะทำให้หน้าเว็บเร็วขึ้นและเพิ่มคะแนน PageSpeed สำหรับหน้าเว็บนั้น ตัวอย่างเช่น หากแสดงทรัพยากรที่บีบอัดได้แบบไม่บีบอัด กฎ Enable Compression ของ PageSpeed จะสร้างผลลัพธ์ที่แนะนําให้นักพัฒนาซอฟต์แวร์เปิดใช้การบีบอัดสําหรับทรัพยากรนั้น
ผลกระทบของกฎ: กฎของ PageSpeed แต่ละกฎจะสร้างตัวเลขผลกระทบ (ค่าทศนิยมที่ไม่มีขอบเขต) ที่ระบุความสำคัญหรือลำดับความสำคัญของการใช้คำแนะนำผลลัพธ์ของกฎสำหรับกฎเมื่อเทียบกับกฎอื่นๆ เช่น หากการเปิดใช้การบีบอัดจะช่วยประหยัดพื้นที่ได้ 1 MB ส่วนการเพิ่มประสิทธิภาพรูปภาพจะช่วยประหยัดพื้นที่ได้ 500 KB กฎเปิดใช้การบีบอัดจะมีค่าผลลัพธ์เป็น 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 และฟังก์ชัน 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 จาก 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 แบบเต็มมาจาก 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