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

การวัดเมตริกประสิทธิภาพที่สําคัญด้วย Google Analytics

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ Google Analytics และ User Timings API เพื่อวัดประสิทธิภาพจริงของเว็บไซต์หรือแอปพลิเคชัน และเพิ่มประสิทธิภาพเพื่อปรับปรุงประสบการณ์การใช้งานของผู้ใช้

เครื่องมืออย่าง WebPagetest.org เป็นจุดเริ่มต้นที่ดีสำหรับการเพิ่มประสิทธิภาพ แต่การทดสอบประสิทธิภาพของเว็บไซต์ที่แท้จริงคือข้อมูลจริงจากผู้ใช้จริงเสมอ

หากคุณเป็นผู้ดูแลเว็บไซต์ มีโอกาสสูงที่คุณจะใช้ Google Analytics อยู่แล้วเพื่อวัดการเข้าชม รวมถึงสิ่งต่างๆ เช่น การใช้อุปกรณ์และเบราว์เซอร์ คุณสามารถเพิ่มเมตริกประสิทธิภาพลงในส่วนผสมได้โดยใช้โค้ดเพิ่มเติมเพียงเล็กน้อย

สิ่งที่คุณจะได้เรียนรู้

วิธีวัดเมตริกประสิทธิภาพอย่างถูกต้องและมีประสิทธิภาพโดยใช้ User Timings API
วิธีส่งข้อมูลดังกล่าวไปยัง Google Analytics เพื่อให้ระบบรวมข้อมูลไว้ในรายงานได้

สิ่งที่คุณต้องมี

เบราว์เซอร์ที่มีคอนโซลสำหรับนักพัฒนาซอฟต์แวร์
Web Server for Chrome หรือใช้เว็บเซิร์ฟเวอร์ที่คุณต้องการ
โค้ดตัวอย่าง
โปรแกรมแก้ไขข้อความ
(ไม่บังคับ) บัญชี Google Analytics

คุณจะใช้บทแนะนำนี้อย่างไร

อ่านอย่างเดียว

อ่านและทำแบบฝึกหัด

คุณจะให้คะแนนประสบการณ์ในการสร้างเว็บไซต์หรือแอปพลิเคชันเท่าใด

ผู้เริ่มต้น

ระดับกลาง

ผู้ชำนาญ

คุณจะดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์...

ดาวน์โหลด Zip

...หรือโคลนที่เก็บ GitHub จากบรรทัดคำสั่ง

git clone https://github.com/googlecodelabs/performance-analytics.git

โค้ดตัวอย่างจะแบ่งออกเป็นไดเรกทอรีย่อยที่สอดคล้องกับแต่ละขั้นตอนที่มีหมายเลขในโค้ดแล็บนี้ คุณสามารถใช้เครื่องมือนี้เพื่อข้ามไปยังส่วนต่างๆ ในโค้ดแล็บได้อย่างง่ายดาย หรือยืนยันว่าการติดตั้งใช้งานถูกต้อง

หากมีสิทธิ์เข้าถึงโปรแกรมเปรียบเทียบ คุณสามารถใช้โปรแกรมดังกล่าวเพื่อดูว่ามีการเปลี่ยนแปลงใดบ้างในแต่ละขั้นตอน

ในโค้ดแล็บนี้ คุณจะได้ใช้ไฟล์ HTML ไฟล์เดียวที่โหลดชิ้นงานต่อไปนี้

แบบอักษรเว็บ
สไตล์ชีต
รูปภาพ
JavaScript

และคุณจะต้องเขียนโค้ดใหม่เพื่อวัดเมตริกประสิทธิภาพที่สำคัญสำหรับชิ้นงานแต่ละประเภท

ข้อควรพิจารณาเกี่ยวกับประสิทธิภาพของชิ้นงาน

หากเคยอ่านเรื่องการเพิ่มประสิทธิภาพมาบ้าง คุณอาจทราบอยู่แล้วว่าชิ้นงานแต่ละประเภทมีลักษณะเฉพาะของตัวเอง และอาจส่งผลต่อประสิทธิภาพโดยรวมในรูปแบบต่างๆ

CSS

ตัวอย่างเช่น สไตล์ชีตจะบล็อกการแสดงผลขององค์ประกอบทั้งหมดใน DOM ที่อยู่หลังสไตล์ชีต ซึ่งหมายความว่าเบราว์เซอร์ต้องส่งคำขอสไตล์ชีต ดาวน์โหลด และแยกวิเคราะห์ก่อนจึงจะแสดงเนื้อหาใดๆ ใน DOM ที่อยู่หลังสไตล์ชีตได้ ด้วยเหตุนี้ คุณจึงควรวางชีตสไตล์ไว้ใน <head> ของเอกสาร และเนื่องจากลักษณะการบล็อกของ CSS เราจึงมักแนะนำให้วางเฉพาะ CSS ที่สำคัญไว้ใน <head> และโหลด CSS ที่ไม่สำคัญแบบไม่พร้อมกันในภายหลัง

JavaScript

ในทางกลับกัน JavaScript จะไม่บล็อกการแสดงผล แต่จะบล็อกการแยกวิเคราะห์และการสร้าง DOM ซึ่งจำเป็นเนื่องจาก JavaScript สามารถแก้ไข DOM ได้ ซึ่งหมายความว่าทุกครั้งที่เบราว์เซอร์เห็นแท็ก <script> (ยกเว้นสคริปต์แบบไม่พร้อมกัน) เบราว์เซอร์จะต้องเรียกใช้โค้ดก่อนที่จะไปยังแท็กถัดไป หากแท็ก <script> อ้างอิงไฟล์ JavaScript ภายนอก ก็จะต้องดาวน์โหลดและเรียกใช้โค้ดก่อนจึงจะดำเนินการต่อได้

ด้วยเหตุนี้ เราจึงมักแนะนำให้โหลด JavaScript ก่อนแท็กปิด </body> เพื่อให้ DOM ส่วนใหญ่พร้อมใช้งานโดยเร็วที่สุด

แบบอักษรบนเว็บ

หากโหลดแบบอักษรของเว็บ คุณอาจเลือกบล็อกการแสดงผลเอกสารจนกว่าจะใช้แบบอักษรได้ ในกรณีนี้ คุณต้องทราบว่าผู้ใช้ใช้เวลานานเท่าใดในการดำเนินการดังกล่าว แบบอักษรบนเว็บอาจโหลดได้อย่างรวดเร็วสำหรับคุณ แต่โหลดช้ามากสำหรับผู้เข้าชมส่วนใหญ่ที่เข้าชมเว็บไซต์ ด้วยเหตุนี้ การวัดผลและการตัดสินใจโดยใช้ข้อมูลจริงจึงมีความสําคัญอย่างยิ่ง

รูปภาพ

สุดท้ายนี้ รูปภาพช่วยให้เว็บไซต์ดูมีชีวิตชีวา แต่ก็มักจะใช้เวลาโหลดนานที่สุดด้วย การทำความเข้าใจความหมายที่แท้จริงของเมตริกนี้และการระบุความสัมพันธ์ระหว่างรูปแบบการใช้งานกับเวลาในการโหลดหน้าเว็บเป็นสิ่งสำคัญอย่างยิ่งในการทำความเข้าใจวิธีเพิ่มประสิทธิภาพ

ขั้นตอนแรกในโค้ดแล็บนี้คือการดูว่าหน้าเดโมมีลักษณะอย่างไรก่อนที่จะเพิ่มโค้ดการวัดประสิทธิภาพ

หากต้องการดูการสาธิต ให้สร้างโฟลเดอร์ใหม่และเพิ่มไฟล์ที่ชื่อ index.html ลงในโฟลเดอร์ จากนั้นคัดลอกและวางโค้ดด้านล่างลงในไฟล์ index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Performance Analytics Demo</title>

  <!-- Start fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700,400italic" rel="stylesheet">
  <!-- End fonts -->

  <!-- Start CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { font-family: Roboto, sans-serif; margin: 1em; }
    img { float: left; height: auto; width: 33.33%; }
    .gallery { overflow: hidden; }
  </style>
  <!-- End CSS -->

</head>
<body>

  <div class="container">

    <!-- Start images -->
    <div class="gallery">
      <img src="http://lorempixel.com/380/200/animals/1/">
      <img src="http://lorempixel.com/380/200/animals/2/">
      <img src="http://lorempixel.com/380/200/animals/3/">
    </div>
    <!-- End images -->

    <h1>Performance Analytics Demo</h1>
    <p>Real performance data from real users.</p>

  </div>

  <!-- Start JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <!-- End JavaScript -->

</body>
</html>

จากนั้นเปิด Web Server for Chrome แล้วเริ่มเซิร์ฟเวอร์ในเครื่องในไดเรกทอรีที่คุณเพิ่งสร้าง ตรวจสอบว่าได้เลือก "แสดง index.html โดยอัตโนมัติ" แล้ว

Screen Shot 2016-05-11 at 1.03.43 PM.png

ตอนนี้คุณควรจะไปที่ http://127.0.0.1:8887/ ในเบราว์เซอร์และดูไฟล์เดโมได้แล้ว ซึ่งควรมีหน้าตาเช่นนี้

Screen Shot 2016-05-11 at 10.59.03 AM.png

เมื่อหน้าเดโมทํางานแล้ว ให้ใช้เวลาสักครู่เพื่อดูโค้ดและดูประเภทชิ้นงานต่างๆ ที่กําลังโหลด ในอีกไม่กี่ขั้นตอนข้างหน้า คุณจะเพิ่มโค้ดเพื่อวัดเมื่อโหลดชิ้นงานเหล่านี้และผู้ใช้โต้ตอบกับชิ้นงานได้

ดังที่กล่าวไว้ในส่วนข้อควรพิจารณาเกี่ยวกับประสิทธิภาพของชิ้นงานก่อนหน้านี้ CSS จะบล็อกการแสดงผลขององค์ประกอบ DOM รวมถึงการเรียกใช้สคริปต์ที่อยู่หลัง CSS ใน DOM

ไฟล์ตัวอย่างที่คุณเพิ่งสร้างมี CSS ต่อไปนี้ ซึ่งอ้างอิงถึง Bootstrap และสไตล์อินไลน์ 2-3 รายการ

<!-- Start CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
  body { font-family: Roboto, sans-serif; margin: 1em; }
  img { float: left; height: auto; width: 33.33%; }
  .gallery { overflow: hidden; }
</style>
<!-- End CSS -->

เนื่องจาก CSS บล็อกทั้งการแสดงผลขององค์ประกอบ DOM และการเรียกใช้สคริปต์ จึงสามารถระบุได้ว่า CSS หยุดบล็อกเมื่อใดโดยการเพิ่มแท็ก <script> ต่อจาก CSS ที่จัดเก็บเวลาปัจจุบันทันที

คุณทำได้โดยสร้างตัวแปรและกำหนดค่า new Date() ให้ แต่ด้วย User Timings API จึงมีวิธีที่ง่ายกว่ามาก นั่นคือเมธอด performance.mark

หากต้องการทำเครื่องหมายเมื่อ CSS บล็อกทั้งการแสดงผลและการเรียกใช้สคริปต์เสร็จแล้ว ให้เพิ่มบรรทัดโค้ดต่อไปนี้ก่อนความคิดเห็นปิด  ทันที

<script>performance.mark('css:unblock');</script>

performance.mark วิธีนี้จะสร้างการประทับเวลาที่มีความละเอียดสูง ณ จุดเวลาที่แน่นอนนี้ และเชื่อมโยงกับการประทับเวลาดังกล่าวกับชื่อใดก็ตามที่ส่งไปยังเมธอด ในกรณีนี้ คุณตั้งชื่อเครื่องหมายว่า "css:unblock"

performance.mark วิธีนี้ทำงานควบคู่ไปกับวิธี performance.measure ซึ่งใช้ในการคำนวณความแตกต่างของเวลาระหว่างเครื่องหมาย 2 รายการ (นอกเหนือจากเครื่องหมายที่คุณสร้างแล้ว คุณยังใช้เครื่องหมายที่เบราว์เซอร์สร้างขึ้นโดยอัตโนมัติสำหรับจุดต่างๆ ใน Navigation Timing API ได้ด้วย)

ฟังก์ชันยูทิลิตีต่อไปนี้จะวัดและแสดงผลระยะเวลาตั้งแต่เครื่องหมายที่คุณเพิ่มจนถึงเครื่องหมาย responseEnd ที่สร้างโดย Navigation Timing API

function measureDuration(mark, opt_reference) {
  var reference = opt_reference || 'responseEnd';
  var name = reference + ':' + mark;

  // Clears any existing measurements with the same name.
  performance.clearMeasures(name);

  // Creates a new measurement from the reference point to the specified mark.
  // If more than one mark with this name exists, the most recent one is used.
  performance.measure(name, reference, mark);

  // Gets the value of the measurement just created.
  var measure = performance.getEntriesByName(name)[0];

  // Returns the measure duration.
  return measure.duration;
}

หากต้องการเริ่มใช้ฟังก์ชันยูทิลิตี้นี้ ให้สร้างไฟล์ใหม่ชื่อ perf-analytics.js (ในไดเรกทอรีเดียวกับไฟล์ index.html) แล้วคัดลอกและวางโค้ดด้านบนลงในไฟล์

เมื่อกำหนดฟังก์ชันนี้แล้ว คุณจะเรียกใช้ฟังก์ชันและส่งชื่อเครื่องหมาย "css:unblock" ได้ คุณควรเลื่อนการเรียกใช้การวัดเหล่านี้จนกว่าเหตุการณ์การโหลดของหน้าต่างจะทริกเกอร์ เพื่อไม่ให้รบกวนการโหลดทรัพยากรอื่นๆ

เมื่อเขียนฟังก์ชันเพื่อเรียกโค้ดนี้แล้ว ไฟล์ perf-analytics.js ควรมีลักษณะดังนี้

window.onload = function() {
  measureCssUnblockTime();
};


/**
 * Calculates the time duration between the responseEnd timing event and when
 * the CSS stops blocking rendering, then logs that value to the console.
 */
function measureCssUnblockTime() {
  console.log('CSS', 'unblock', measureDuration('css:unblock'));
}


/**
 * Accepts a mark name and an optional reference point in the navigation timing
 * API and returns the time duration between the reference point and the last
 * mark (chronologically).
 * @param {string} mark The mark name.
 * @param {string=} opt_reference An optional reference point from the
 *     navigation timing API. Defaults to 'responseEnd'.
 * @return {number} The time duration
 */
function measureDuration(mark, opt_reference) {
  var reference = opt_reference || 'responseEnd';
  var name = reference + ':' + mark;

  // Clears any existing measurements with the same name.
  performance.clearMeasures(name);

  // Creates a new measurement from the reference point to the specified mark.
  // If more than one mark with this name exists, the most recent one is used.
  performance.measure(name, reference, mark);

  // Gets the value of the measurement just created.
  var measure = performance.getEntriesByName(name)[0];

  // Returns the measure duration.
  return measure.duration;
}

สุดท้าย คุณจะต้องโหลดสคริปต์ perf-analytics.js จาก index.html โดยเพิ่มแท็กสคริปต์ต่อไปนี้ลงในเอกสารหลัก โปรดเพิ่มแท็กนี้เป็นแท็กสุดท้ายเพื่อไม่ให้รบกวนการโหลดทรัพยากรอื่นๆ

<!-- Start performance analytics -->
<script async src="perf-analytics.js"></script>
<!-- End performance analytics -->

เมื่อทำตามขั้นตอนนี้เสร็จแล้ว โค้ดของคุณควรตรงกับโค้ดในไดเรกทอรี 01-css ของที่เก็บโค้ดแล็บ

หากโหลดหน้าเว็บในเบราว์เซอร์และเปิดแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ คุณควรเห็นเอาต์พุตคล้ายกับตัวอย่างต่อไปนี้

Screen Shot 2016-05-17 at 11.13.02 AM.png

โดยปกติแล้ว ระบบจะโหลดแบบอักษรบนเว็บผ่านสไตล์ชีตภายนอก ดังที่เห็นในไฟล์เดโมเริ่มต้น

<!-- Start fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700,400italic" rel="stylesheet">
<!-- End fonts -->

เนื่องจากนี่คือ<link>แท็กไปยังไฟล์ CSS คุณจึงอาจคิดว่าการพิจารณาเวลาที่โหลดแบบอักษรและพร้อมใช้งานนั้นง่ายเพียงแค่เพิ่มเครื่องหมายภายในแท็ก <script> ทันทีหลังจาก <link> เหมือนในขั้นตอนที่ 1

แต่ในความเป็นจริงแล้วไม่ได้ง่ายขนาดนั้น

สไตล์ชีตจะบล็อกการเรียกใช้ JavaScript เนื่องจากมีการใช้เนื้อหาของสไตล์ชีตเพื่อสร้าง CSSOM และเนื่องจาก JavaScript ที่โหลดอาจต้องเข้าถึง CSSOM จึงต้องเลื่อนการเรียกใช้จนกว่าจะสร้าง CSSOM เสร็จสมบูรณ์

ข้อควรระวังคือเบราว์เซอร์สามารถสร้าง CSSOM ได้โดยไม่ต้องดาวน์โหลดแบบอักษรจริง ซึ่งหมายความว่าหากคุณเพิ่มเครื่องหมายผ่านแท็กสคริปต์แบบอินไลน์ลงใน DOM ทันทีหลังจากแท็ก <link> ของสไตล์ชีตแบบอักษร มีโอกาสที่เครื่องหมายจะเกิดขึ้นก่อนที่แบบอักษรจะโหลดเสร็จสมบูรณ์

จนกว่าเหตุการณ์การโหลดแบบอักษรจะพร้อมใช้งานในเบราว์เซอร์ คุณจะต้องใช้ JavaScript เพื่อพิจารณาว่าแบบอักษรพร้อมใช้งานในหน้าเว็บแล้วเมื่อใด โชคดีที่การโหลดแบบอักษรผ่าน JavaScript ยังช่วยเพิ่มประสิทธิภาพด้วย เนื่องจากไม่จำเป็นต้องมีคำขอการบล็อกเพิ่มเติมไปยังไฟล์ CSS

คุณโหลดแบบอักษรบนเว็บส่วนใหญ่ (รวมถึงแบบอักษรของ Google, Typekit และ font.com) ได้ผ่านสคริปต์ webfont.js ซึ่ง Google และ Typekit ร่วมกันพัฒนาขึ้น

หากต้องการอัปเดตเอกสารหลักให้ใช้ webfont.js เพื่อโหลดแบบอักษร (แทนแท็ก <link>) ให้แทนที่ส่วนแบบอักษรของโค้ดด้วยโค้ดต่อไปนี้

<!-- Start fonts -->
<script>
window.WebFontConfig = {
  google: {families: ['Roboto:400,700,400italic']},
  timeout: 10000,
  active: function() {
    performance.mark('fonts:active');
  }
};
</script>
<script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<!-- End fonts -->

สิ่งสำคัญ 2 อย่างที่คุณควรทราบเกี่ยวกับโค้ดด้านบนมีดังนี้

ซึ่งจะสร้างเครื่องหมาย "fonts:active" ในการเรียกกลับที่ใช้งานอยู่ เพื่อให้คุณวัดระยะเวลาที่ใช้ในการโหลดแบบอักษรได้ในภายหลัง
แท็ก <script> ที่โหลด webfonts.js มีแอตทริบิวต์ async จึงจะไม่บล็อกการแยกวิเคราะห์หรือการแสดงผลส่วนที่เหลือของเอกสาร (ซึ่งไม่เป็นจริงสำหรับแท็ก <link>)

แม้ว่าโค้ดข้างต้นจะสร้างเครื่องหมาย "fonts:active" แต่การวัดเครื่องหมายนี้และการบันทึกลงในคอนโซลนั้นไม่ง่ายเหมือนกับเครื่องหมาย "css:unblock" เนื่องจากตอนนี้การโหลดแบบอักษรจะเกิดขึ้นแบบไม่พร้อมกัน ดังนั้นหากคุณพยายามวัดเครื่องหมาย "fonts:active" ในแฮนเดิลอร์ window.onload (เช่นเดียวกับที่ทำกับ "css:unblock") ก็เป็นไปได้มากที่ระบบจะยังไม่ได้โหลดแบบอักษร

หากต้องการแก้ปัญหานี้ คุณสามารถสร้าง Promise ที่จะได้รับการแก้ไขเมื่อโหลดแบบอักษรแล้ว ฟังก์ชันต่อไปนี้จะดำเนินการนี้ให้คุณ คัดลอกและวางลงในไฟล์ perf-analytics.js

/**
 * Creates a promise that is resolved once the web fonts are fully load or
 * is reject if the fonts fail to load. The resolved callback calculates the
 * time duration between the responseEnd timing event and when the web fonts
 * are downloaded and active. If an error occurs loading the font, this fact
 * is logged to the console.
 */
function measureWebfontPerfAndFailures() {
  new Promise(function(resolve, reject) {
    // The classes `wf-active` or `wf-inactive` are added to the <html>
    // element once the fonts are loaded (or error).
    var loaded = /wf-(in)?active/.exec(document.documentElement.className);
    var success = loaded && !loaded[1]; // No "in" in the capture group.
    // If the fonts are already done loading, resolve immediately.
    // Otherwise resolve/reject in the active/inactive callbacks, respectively.
    if (loaded) {
      success ? resolve() : reject();
    }
    else {
      var originalAciveCallback = WebFontConfig.active;
      WebFontConfig.inactive = reject;
      WebFontConfig.active = function() {
        originalAciveCallback();
        resolve();
      };
      // In case the webfont.js script fails to load, always reject the
      // promise after the timeout amount.
      setTimeout(reject, WebFontConfig.timeout);
    }
  })
  .then(function() {
    console.log('Fonts', 'active', measureDuration('fonts:active'));
  })
  .catch(function() {
    console.error('Error loading web fonts')
  });
}

นอกจากนี้ ให้อัปเดตแฮนเดิล window.onload เพื่อเรียกใช้ฟังก์ชันใหม่นี้ด้วย

window.onload = function() {
  measureCssUnblockTime();
  measureWebfontPerfAndFailures();
};

เมื่อทำตามขั้นตอนนี้เสร็จแล้ว โค้ดของคุณควรตรงกับโค้ดในไดเรกทอรี 02-fonts ของที่เก็บโค้ดแล็บ

Screen Shot 2016-05-17 at 11.13.22 AM.png

การทราบว่ารูปภาพจะปรากฏเมื่อใดนั้นไม่ใช่เรื่องง่ายอย่างที่เห็น คุณทราบจากขั้นตอนก่อนหน้าว่าสไตล์ชีตและแท็ก <script> แบบซิงโครนัสสามารถบล็อกการแสดงผล การแยกวิเคราะห์ และการดำเนินการของสคริปต์ได้ แต่สิ่งที่คุณอาจไม่ทราบคือทั้ง 2 อย่างนี้ไม่ได้บล็อกเครื่องสแกนการโหลดล่วงหน้าของเบราว์เซอร์

ตัวสแกนการโหลดล่วงหน้าเป็นสิ่งที่เบราว์เซอร์สมัยใหม่ทุกเบราว์เซอร์นำมาใช้เป็นหนึ่งในความพยายามหลายๆ อย่างเพื่อปรับปรุงประสิทธิภาพ แม้ในเว็บไซต์ที่ไม่ได้มุ่งเน้นประสิทธิภาพซึ่งมีชิ้นงานที่บล็อกจำนวนมากก็ตาม แนวคิดคือแม้ว่าชิ้นงานบางรายการอาจบล็อกการแยกวิเคราะห์ การแสดงผล หรือการดำเนินการสคริปต์ แต่ก็ไม่จำเป็นต้องบล็อกการดาวน์โหลด ดังนั้นเบราว์เซอร์จะสแกนไฟล์ HTML ก่อนที่จะเริ่มสร้าง DOM และค้นหาชิ้นงานที่เริ่มดาวน์โหลดได้ทันที

ในส่วนของรูปภาพ หมายความว่ามีโอกาสสูงที่ระบบจะดาวน์โหลดรูปภาพของคุณไว้แล้วเมื่อมีการเพิ่มรูปภาพลงใน DOM นอกจากนี้ยังหมายความว่าจุดที่ดาวน์โหลดรูปภาพไม่ได้เป็นเมตริกประสิทธิภาพที่ดีเสมอไป เมตริกประสิทธิภาพที่คุณควรสนใจคือจุดที่ผู้ใช้เห็นรูปภาพ

เมื่อดาวน์โหลดรูปภาพก่อนที่จะเพิ่มลงใน DOM จุดที่รูปภาพจะปรากฏคือจุดที่รูปภาพอยู่ใน DOM ในทางกลับกัน หากไม่ได้ดาวน์โหลดรูปภาพก่อนที่จะเพิ่มลงใน DOM จุดที่รูปภาพจะปรากฏคือเมื่อตัวแฮนเดิล onload ทำงาน

ดังนั้น หากต้องการทราบว่ารูปภาพจะแสดงเมื่อใด คุณต้องจัดการทั้ง 2 กรณี

คุณทำได้โดยการเพิ่มเครื่องหมายในตัวแฮนเดิล onload ของแต่ละรูปภาพ รวมถึงในแท็ก <script> แบบอินไลน์ทันทีหลังจากรูปภาพสุดท้ายใน DOM แนวคิดคือเครื่องหมายที่เกิดขึ้นล่าสุดจะเป็นเครื่องหมายที่แสดงเมื่อรูปภาพทั้งหมดปรากฏ

หากต้องการเพิ่มเครื่องหมายสำหรับทั้งตอนที่โหลดรูปภาพและตอนที่แสดงผล ให้อัปเดตโค้ดรูปภาพใน index.html ดังนี้

<!-- Start images -->
<div class="gallery">
  <img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
  <img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/2/">
  <img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/3/">
</div>
<script>performance.mark('img:visible')</script>
<!-- End images -->

เนื่องจากเมธอด performance.measure สำหรับชื่อเครื่องหมายหนึ่งๆ จะใช้เครื่องหมายสุดท้ายเสมอ (หากพบเครื่องหมายหลายรายการที่มีชื่อเดียวกัน) จึงสามารถใช้ฟังก์ชันยูทิลิตี measureDuration ในไฟล์ perf-analytics.js สำหรับกรณีนี้ได้โดยไม่ต้องแก้ไขเพิ่มเติม

/**
 * Calculates the time duration between the responseEnd timing event and when
 * all images are loaded and visible on the page, then logs that value to the
 * console.
 */
function measureImagesVisibleTime() {
  console.log('Images', 'visible', measureDuration('img:visible'));
}

เพิ่มฟังก์ชันข้างต้นลงในไฟล์ perf-analytics.js แล้วอัปเดตแฮนเดิล window.onload เพื่อเรียกใช้ฟังก์ชันดังกล่าว

window.onload = function() {
  measureCssBlockTime();
  measureWebfontPerfAndFailures();
  measureImagesVisibleTime();
};

เมื่อทำตามขั้นตอนนี้เสร็จแล้ว โค้ดของคุณควรตรงกับโค้ดในไดเรกทอรี 03-images ของที่เก็บโค้ดแล็บ

Screen Shot 2016-05-17 at 11.13.39 AM.png

เนื่องจากแท็ก <script> ที่ไม่มีแอตทริบิวต์ async จะบล็อกการแยกวิเคราะห์ DOM จนกว่าจะดาวน์โหลดและเรียกใช้ทั้ง 2 รายการเสร็จสิ้น คุณจึงระบุจุดที่สคริปต์ทั้งหมดเรียกใช้เสร็จแล้วได้โดยการเพิ่มเครื่องหมายในแท็กสคริปต์แบบอินไลน์ทันทีหลังจาก <script> แบบซิงโครนัสสุดท้ายใน DOM

โปรดทราบว่าการใช้ตัวแฮนเดิล onload จะใช้ไม่ได้ในกรณีนี้ เนื่องจากเบราว์เซอร์ต้องเรียกใช้สคริปต์หลังจากโหลดแล้ว ซึ่งต้องใช้เวลา สคริปต์ที่โหลดเร็วแต่ดำเนินการช้าก็แย่ไม่ต่างจากสคริปต์ที่โหลดช้า

หากต้องการติดตามเมื่อโหลดและเรียกใช้ JavaScript ทั้งหมดในเอกสารหลัก ให้อัปเดตส่วน JavaScript ใน index.html ด้วยโค้ดต่อไปนี้

<!-- Start JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>performance.mark('js:execute');</script>
<!-- End JavaScript -->

ซึ่งจะเพิ่มเครื่องหมายชื่อ "js:execute" ทันทีหลังจากที่สคริปต์สำหรับปลั๊กอินของ jQuery และ Bootstrap ดาวน์โหลดและดำเนินการเสร็จสิ้น

หากต้องการวัดระยะเวลาที่ใช้ ให้เพิ่มฟังก์ชันต่อไปนี้ลงใน perf-analytics.js

/**
 * Calculates the time duration between the responseEnd timing event and when
 * all synchronous JavaScript files have been downloaded and executed, then
 * logs that value to the console.
 */
function measureJavaSciptExecutionTime() {
  console.log('JavaScript', 'execute', measureDuration('js:execute'));
}

จากนั้นเรียกใช้จากแฮนเดิล window.onload ดังนี้

window.onload = function() {
  measureCssBlockTime();
  measureWebfontPerfAndFailures();
  measureImagesVisibleTime();
  measureJavaSciptExecutionTime();
};

เมื่อทำตามขั้นตอนนี้เสร็จแล้ว โค้ดของคุณควรตรงกับโค้ดในไดเรกทอรี 04-javascript ของที่เก็บโค้ดแล็บ

Screen Shot 2016-05-17 at 11.14.03 AM.png

เบราว์เซอร์บางตัวไม่รองรับ Promise ของ JavaScript หรือ User Timing API และหากคุณเรียกใช้โค้ดที่เขียนไว้จนถึงตอนนี้ในเบราว์เซอร์ที่ไม่รองรับฟีเจอร์ใดฟีเจอร์หนึ่งเหล่านี้ คุณจะได้รับข้อผิดพลาด

คุณสามารถใช้การตรวจหาฟีเจอร์เพื่อจัดการกับปัญหานี้ได้ เพิ่มโค้ดต่อไปนี้ทันทีก่อนส่วนแบบอักษร JavaScript บรรทัดนี้จะตรวจหาการรองรับเมธอด performance.mark ดังนั้นจึงต้องเพิ่มลงในหน้าเว็บก่อนที่จะใช้เมธอดดังกล่าว

<!-- Start feature detects -->
<script>window.__perf = window.performance && performance.mark;</script>
<!-- End feature detects -->

จากนั้นที่ใดก็ตามใน index.html ที่คุณเรียก performance.mark ให้เติมคำนำหน้าด้วยฟีเจอร์ตรวจหา ตัวอย่างต่อไปนี้จะอัปเดตรหัสในบล็อกรูปภาพ แต่คุณต้องอัปเดตส่วนอื่นๆ ด้วย

<!-- Start images -->
<div class="gallery">
  <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
  <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/2/">
  <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/3/">
</div>
<script>__perf && performance.mark('img:visible')</script>
<!-- End images -->

เมื่อตั้งค่าตัวแปร __perf ใน window แล้ว คุณยังใช้ตัวแปรนี้ใน perf-analytics.js ได้ด้วยเพื่อให้แน่ใจว่าคุณจะไม่เรียกใช้เมธอดที่ไม่รองรับในเบราว์เซอร์ปัจจุบัน

คุณต้องอัปเดตฟังก์ชัน measureDuration เพื่อเพิ่มเงื่อนไขต่อไปนี้

function measureDuration(mark, opt_reference) {
  if (window.__perf) {
    // ...
  }
}

สุดท้ายนี้ เนื่องจากเบราว์เซอร์บางตัวไม่รองรับสัญญา JavaScript จึงต้องห่อหุ้มฟังก์ชัน measureWebfontPerfAndFailures ไว้ในเงื่อนไขด้วย

function measureWebfontPerfAndFailures() {
  if (window.Promise) {
    // ...
  }
}

ตอนนี้คุณควรจะเรียกใช้โค้ดในเบราว์เซอร์ใดก็ได้โดยไม่มีปัญหา

โปรดทราบว่าเนื่องจากเบราว์เซอร์บางตัวไม่รองรับฟีเจอร์เหล่านี้ คุณจึงจะรวบรวมข้อมูลวิเคราะห์จากผู้เข้าชมที่ใช้เบราว์เซอร์เหล่านั้นไม่ได้ คุณอาจเลือกโหลด Polyfill สำหรับฟีเจอร์เหล่านี้ ซึ่งจะช่วยให้คุณได้รับข้อมูลประสิทธิภาพสำหรับผู้ใช้ทั้งหมด แต่การทำเช่นนี้ก็อาจส่งผลต่อประสิทธิภาพด้วยเช่นกัน โดยส่วนใหญ่แล้ว ข้อมูลที่รวบรวมจากผู้ใช้เบราว์เซอร์ที่รองรับก็เพียงพอต่อการทําความเข้าใจประสิทธิภาพโดยรวมของเว็บไซต์

เมื่อทำตามขั้นตอนนี้เสร็จแล้ว โค้ดของคุณควรตรงกับโค้ดในไดเรกทอรี 05-feature-detects ของที่เก็บโค้ดแล็บ

ขั้นตอนสุดท้ายใน Codelab นี้คือการนำข้อมูลที่บันทึกลงในคอนโซลไปส่งไปยัง Google Analytics แทน และก่อนที่จะส่งข้อมูลไปยัง Google Analytics ได้ คุณต้องเพิ่มไลบรารี analytics.js และข้อมูลโค้ดติดตามเริ่มต้นลงในหน้าเว็บ

เพิ่มโค้ดต่อไปนี้ลงใน index.html หลังจากบล็อก JavaScript หลัก แต่ก่อนที่จะโหลดสคริปต์ perf-analytics.js

<!-- Start analytics tracking snippet -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics_debug.js"></script>
<!-- End analytics tracking snippet -->

หากเคยเพิ่ม Google Analytics ลงในเว็บไซต์มาก่อน คุณจะทราบว่าต้องแทนที่ตัวยึดตําแหน่ง "UA-XXXXX-Y" ด้วยรหัสติดตามที่ได้รับเมื่อสร้างพร็อพเพอร์ตี้ใหม่ใน Google Analytics

ข้อมูลโค้ดการติดตาม analytics.js จะทําสิ่งหลักๆ 4 อย่างต่อไปนี้

สร้างองค์ประกอบ <script> แบบอะซิงโครนัสซึ่งดาวน์โหลดไลบรารี JavaScript analytics.js
เริ่มต้นฟังก์ชันส่วนกลาง ga() (เรียกว่าคิวคำสั่ง ga()) ที่ช่วยให้คุณกำหนดเวลาให้เรียกใช้คำสั่งเมื่อโหลดไลบรารี analytics.js และพร้อมใช้งาน
เพิ่มคําสั่งลงในคิวคําสั่ง ga() เพื่อสร้างออบเจ็กต์เครื่องมือติดตามใหม่สําหรับพร็อพเพอร์ตี้ที่ระบุผ่านพารามิเตอร์ "UA-XXXXX-Y"
เพิ่มคำสั่งอื่นลงในคิวคำสั่ง ga() เพื่อส่งการดูหน้าเว็บไปยัง Google Analytics สำหรับหน้าปัจจุบัน

แม้ว่าข้อมูลที่รวบรวมจากการดูหน้าเว็บเพียงอย่างเดียวจะมีประโยชน์ แต่ก็ไม่ได้บอกเรื่องราวทั้งหมด หากต้องการทราบภาพรวมที่ดีขึ้นเกี่ยวกับประสบการณ์การใช้งานเว็บไซต์หรือแอปพลิเคชันของผู้ใช้ คุณต้องส่งข้อมูลการโต้ตอบเพิ่มเติมไปยัง Google Analytics

Google Analytics รองรับข้อมูลการโต้ตอบหลายประเภท ได้แก่ การดูหน้าเว็บ เหตุการณ์ การโต้ตอบทางโซเชียล ข้อยกเว้น และ (สุดท้ายแต่ไม่ท้ายสุด) เวลาของผู้ใช้ หากต้องการส่งข้อมูลการจับเวลาของผู้ใช้ไปยัง Google Analytics คุณสามารถใช้ลายเซ็นคำสั่งต่อไปนี้

ga('send', 'timing', timingCategory, timingVar, timingValue);

โดย timingCategory คือสตริงที่ช่วยให้คุณจัดระเบียบ Hit การจับเวลาเป็นกลุ่มเชิงตรรกะ timingVar คือตัวแปรที่คุณวัด และ timingValue คือระยะเวลาจริงเป็นมิลลิวินาที

หากต้องการดูวิธีใช้งานจริง คุณสามารถอัปเดตคำสั่ง console.log ในฟังก์ชัน measureCssUnblockTime ได้ดังนี้

ga('send', 'timing', 'CSS', 'unblock', measureDuration('css:unblock'));

แม้ว่าโค้ดข้างต้นจะใช้ได้ในบางสถานการณ์ แต่ก็มีข้อควรระวังที่สำคัญ 2 ประการที่ควรทราบ

ขั้นตอนก่อนหน้าได้อัปเดตฟังก์ชัน measureDuration ให้ทำงานเฉพาะในกรณีที่เบราว์เซอร์รองรับ User Timings API ซึ่งหมายความว่าบางครั้งฟังก์ชันนี้จะแสดงผลเป็น undefined เนื่องจากไม่มีเหตุผลที่จะส่งข้อมูลที่ไม่ได้กําหนดไปยัง Google Analytics (ในบางกรณีอาจทําให้รายงานเสียหายด้วย) คุณจึงควรส่ง Hit การจับเวลาเฉพาะเมื่อ measureDuration แสดงค่า
เมื่อ measureDuration แสดงผลค่า ค่าดังกล่าวจะเป็น DOMHighResTimeStamp ซึ่งจะมีความแม่นยำมากกว่ามิลลิวินาที เนื่องจาก timingValue ใน Google Analytics ต้องเป็นจํานวนเต็ม คุณจึงต้องปัดค่าที่ measureDuration แสดงผล

หากต้องการพิจารณาข้อควรระวังเหล่านี้ ให้อัปเดตคำสั่ง return ในฟังก์ชัน measureDuration เพื่อปัดเศษค่าที่ส่งคืน

function measureDuration(mark, opt_reference) {
  if (window.__perf) {
    // ...
    return Math.round(measure.duration);
  }
}

และอัปเดตคำสั่งเวลาให้ทำงานเฉพาะในกรณีที่มีค่าสำหรับเมตริกที่เป็นปัญหา ตัวอย่างเช่น ควรปรับฟังก์ชัน measureCssUnblockTime เป็นดังนี้

function measureCssUnblockTime() {
  var cssUnblockTime = measureDuration('css:unblock');
  if (cssUnblockTime) {
    ga('send', 'timing', 'CSS', 'unblock', cssUnblockTime);
  }
}

คุณจะต้องทำการอัปเดตที่คล้ายกันกับฟังก์ชันการวัดอื่นๆ ทั้งหมด เมื่อเสร็จแล้ว ไฟล์ perf-analytics.js สุดท้ายควรมีลักษณะดังนี้

window.onload = function() {
  measureCssUnblockTime();
  measureWebfontPerfAndFailures();
  measureImagesVisibleTime();
  measureJavaSciptExecutionTime();
};


/**
 * Calculates the time duration between the responseEnd timing event and when
 * the CSS stops blocking rendering, then sends this measurement to Google
 * Analytics via a timing hit.
 */
function measureCssUnblockTime() {
  var cssUnblockTime = measureDuration('css:unblock');
  if (cssUnblockTime) {
    ga('send', 'timing', 'CSS', 'unblock', cssUnblockTime);
  }
}


/**
 * Calculates the time duration between the responseEnd timing event and when
 * the web fonts are downloaded and active, then sends this measurement to
 * Google Analytics via a timing hit. If an error occurs loading the font, an
 * error event is sent to Google Analytics.
 */
function measureWebfontPerfAndFailures() {
  if (window.Promise) {
    new Promise(function(resolve, reject) {
      var loaded = /wf-(in)?active/.exec(document.documentElement.className);
      var success = loaded && !loaded[1]; // No "in" in the capture group.
      if (loaded) {
        success ? resolve() : reject();
      }
      else {
        var originalAciveCallback = WebFontConfig.active;
        WebFontConfig.inactive = reject;
        WebFontConfig.active = function() {
          originalAciveCallback();
          resolve();
        };
        // In case the webfont.js script failed to load.
        setTimeout(reject, WebFontConfig.timeout);
      }
    })
    .then(function() {
      var fontsActiveTime = measureDuration('fonts:active');
      if (fontsActiveTime) {
        ga('send', 'timing', 'Fonts', 'active', fontsActiveTime);
      }
    })
    .catch(function() {
      ga('send', 'event', 'Fonts', 'error');
    });
  }
}


/**
 * Calculates the time duration between the responseEnd timing event and when
 * all images are loaded and visible on the page, then sends this measurement
 * to Google Analytics via a timing hit.
 */
function measureImagesVisibleTime() {
  var imgVisibleTime = measureDuration('img:visible');
  if (imgVisibleTime) {
    ga('send', 'timing', 'Images', 'visible', imgVisibleTime);
  }
}


/**
 * Calculates the time duration between the responseEnd timing event and when
 * all synchronous JavaScript files are downloaded and executed, then sends
 * this measurement to Google Analytics via a timing hit.
 */
function measureJavaSciptExecutionTime() {
  var jsExecuteTime = measureDuration('js:execute');
  if (jsExecuteTime) {
    ga('send', 'timing', 'JavaScript', 'execute', jsExecuteTime);
  }
}


/**
 * Accepts a mark name and an optional reference point in the navigation timing
 * API and returns the time duration between the reference point and the last
 * mark (chronologically). The return value is rounded to the nearest whole
 * number to be compatible with Google Analytics.
 * @param {string} mark The mark name.
 * @param {string=} opt_reference An optional reference point from the
 *     navigation timing API. Defaults to 'responseEnd'.
 * @return {?number} The time duration as an integer or undefined if no
 *     matching marks can be found.
 */
function measureDuration(mark, opt_reference) {
  if (window.__perf) {
    var reference = opt_reference || 'responseEnd';
    var name = reference + ':' + mark;

    // Clears any existing measurements with the same name.
    performance.clearMeasures(name);

    // Creates a new measurement from the reference point to the specified mark.
    // If more than one mark with this name exists, the most recent one is used.
    performance.measure(name, reference, mark);

    // Gets the value of the measurement just created.
    var measure = performance.getEntriesByName(name)[0];

    // Returns the measure duration.
    return Math.round(measure.duration);
  }
}

และไฟล์ index.html สุดท้ายควรมีลักษณะดังนี้

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Performance Analytics Demo</title>

  <!-- Start navigation timing feature detect -->
  <script>window.__perf = window.performance && performance.mark;</script>
  <!-- End navigation timing feature detect -->

  <!-- Start fonts -->
  <script>
  window.WebFontConfig = {
    google: {families: ['Roboto:400,700,400italic']},
    timeout: 10000,
    active: function() {
      __perf && performance.mark('fonts:active');
    }
  };
  </script>
  <script async src="https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
  <!-- End fonts -->

  <!-- Start CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { font-family: Roboto, sans-serif; margin: 1em; }
    img { float: left; height: auto; width: 33.33%; }
    .gallery { overflow: hidden; }
  </style>
  <script>__perf && performance.mark('css:unblock');</script>
  <!-- End CSS -->

</head>
<body>

  <div class="container">

    <!-- Start images -->
    <div class="gallery">
      <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
      <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/2/">
      <img onload="__perf && performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/3/">
    </div>
    <script>__perf && performance.mark('img:visible')</script>
    <!-- End images -->

    <h1>Performance Analytics Demo</h1>
    <p>Real performance data from real users.</p>

  </div>

  <!-- Start JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script>__perf && performance.mark('js:execute');</script>
  <!-- End JavaScript -->

  <!-- Start analytics tracking snippet -->
  <script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
  </script>
  <script async src="https://www.google-analytics.com/analytics.js"></script>
  <!-- End analytics tracking snippet -->

  <!-- Start performance analytics -->
  <script async src="perf-analytics.js"></script>
  <!-- End performance analytics -->

</body>
</html>

หากโหลดหน้านี้และดูคำขอในแผงเครือข่าย คุณจะเห็นข้อมูลต่อไปนี้

Screen Shot 2016-05-10 at 6.57.23 PM.png

ซึ่งเป็นประโยชน์ แต่การดูข้อมูลนี้เป็นคำขอที่เข้ารหัส URL อาจเป็นเรื่องที่ยุ่งยาก และหากคุณไม่เห็นคำขอเหล่านี้ไม่ว่าด้วยเหตุผลใดก็ตาม ก็จะติดตามได้ยากมากว่าเกิดข้อผิดพลาดที่ใด

แนวทางที่ดีกว่าเมื่อพัฒนาในเครื่องคือการใช้ analytics.js เวอร์ชันที่แก้ไขข้อบกพร่อง ซึ่งจะบันทึกข้อมูลการแก้ไขข้อบกพร่องที่เป็นประโยชน์ไปยังคอนโซลเมื่อเรียกใช้คำสั่ง analytics.js แต่ละรายการ หากคุณ

อัปเดต URL ของ analytics.js ใน index.html เป็น analytics_debug.js แล้วเปิดคอนโซลของเบราว์เซอร์ คุณจะเห็นข้อความที่พิมพ์ออกมาซึ่งมีลักษณะดังนี้

Screen Shot 2016-05-10 at 6.54.13 PM.png

ตอนนี้คุณเข้าใจวิธีติดตั้งใช้งานการวัดประสิทธิภาพสําหรับหน้าเดโมนี้แล้ว คุณสามารถลองเพิ่มลงในเว็บไซต์ของคุณเองเพื่อส่งข้อมูลผู้ใช้จริงไปยัง Google Analytics

การรายงานข้อมูลที่คุณรวบรวม

หลังจากรวบรวมข้อมูลประสิทธิภาพเป็นเวลา 2-3 วันแล้ว คุณจะรายงานข้อมูลดังกล่าวเพื่อรับข้อมูลเชิงลึกที่นำไปใช้ได้จริงเกี่ยวกับความเร็วในการโหลดเว็บไซต์และทรัพยากรของเว็บไซต์สำหรับผู้ใช้จริง

หากต้องการไปยังรายงานการจับเวลาของผู้ใช้ใน Google Analytics ให้คลิกแท็บการรายงานที่ด้านบน แล้วเลือก "พฤติกรรม > ความเร็วของเว็บไซต์ > การจับเวลาของผู้ใช้" จากการนําทางแถบด้านข้าง (หรือทําตามวิธีการเพื่อดูรายงานการจับเวลาของผู้ใช้จากศูนย์ช่วยเหลือ)

เมื่อโหลดรายงานการจับเวลาผู้ใช้ใน Google Analytics คุณควรจะเห็นหมวดหมู่การจับเวลาที่สอดคล้องกับข้อมูลที่คุณส่ง คลิกรายการใดก็ได้เพื่อดูภาพข้อมูลการกำหนดเวลาแบบละเอียด รูปภาพต่อไปนี้เป็นตัวอย่างเวลาในการโหลดแบบอักษรในเว็บไซต์จริงที่ใช้ Google Fonts ในช่วง 24 ชั่วโมงที่ผ่านมา

Screen Shot 2016-05-10 at 7.16.07 PM.png

ยินดีด้วย คุณทำโค้ดแล็บนี้เสร็จสมบูรณ์แล้ว หากต้องการเจาะลึกยิ่งขึ้น ส่วนถัดไปจะให้คำแนะนำ 2-3 ข้อเกี่ยวกับวิธีสร้างโค้ดนี้เพื่อรับข้อมูลเชิงลึกมากยิ่งขึ้น

เมตริกประสิทธิภาพที่กล่าวถึงในโค้ดแล็บนี้มีความสําคัญอย่างยิ่งต่อการวัดวิธีที่เว็บไซต์โหลดสําหรับผู้ใช้จริง แต่เป็นเพียงจุดเริ่มต้นเท่านั้น หากต้องการเจาะลึกข้อมูลวิเคราะห์ประสิทธิภาพ ขั้นตอนถัดไปที่ง่ายที่สุดคือการติดตามเมตริกเพิ่มเติม

ในโค้ดแล็บนี้ คุณได้ติดตามเมตริกที่เกี่ยวข้องกับเวลาที่ทรัพยากรพร้อมใช้งานสำหรับผู้ใช้ หากต้องการ คุณสามารถแบ่งย่อยข้อมูลส่วนใหญ่เหล่านี้ได้อีก เช่น แทนที่จะวัดเฉพาะเมื่อ JavaScript ทำงานเสร็จ คุณสามารถวัดเมื่อเริ่มโหลด เมื่อโหลดเสร็จ เมื่อเริ่มทำงาน และเมื่อทำงานเสร็จ เมตริกแต่ละรายการเหล่านี้อาจเผยให้เห็นปัญหาที่เมตริกเพียงรายการเดียวอาจไม่บอก

นอกเหนือจากการเจาะลึกมากขึ้นแล้ว คุณควรคิดถึงกลยุทธ์การวิเคราะห์ประสิทธิภาพทั่วไปในภาพรวมด้วย เป้าหมายคืออะไร ความสำเร็จคืออะไร

เมื่อพูดถึงการวิเคราะห์ทุกประเภท โดยปกติแล้วคุณจะต้องเริ่มด้วยคำถามบางอย่าง จากนั้นจึงหาวิธีใช้ข้อมูลเพื่อตอบคำถามนั้น

ตัวอย่างเช่น ลองพิจารณารายการคำถามต่อไปนี้ และวิธีใช้ความรู้ที่คุณได้รับในโค้ดแล็บนี้เพื่อใช้ข้อมูลวิเคราะห์ในการตอบคำถาม

ค่าของเมตริกที่คุณติดตามลดลงหรือเพิ่มขึ้นเมื่อเวลาผ่านไปหรือไม่
การใช้แคชแบบออฟไลน์ผ่าน Service Worker หรือพื้นที่เก็บข้อมูลในเครื่องจะส่งผลต่อประสิทธิภาพโดยรวมของเว็บไซต์อย่างไร
ระบบโหลดทรัพยากรอย่างเหมาะสมหรือไม่ กล่าวคือ มีช่องว่างขนาดใหญ่ระหว่างเวลาที่ดาวน์โหลดทรัพยากรกับเวลาที่พร้อมใช้งานหรือไม่
ประสิทธิภาพมีความสัมพันธ์กับเมตริกอื่นๆ ที่คุณติดตาม (เช่น อัตราการลงชื่อสมัครใช้ เวลาที่ใช้ในเว็บไซต์ การซื้อ ฯลฯ) หรือไม่

สุดท้ายนี้ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับประสิทธิภาพเว็บหรือ Google Analytics โปรดดูแหล่งข้อมูลที่ยอดเยี่ยมต่อไปนี้เพื่อเริ่มต้นใช้งาน

เครื่องมือและข้อมูลที่จะช่วยคุณสร้างเว็บไซต์ที่มีประสิทธิภาพสูง
https://developers.google.com/speed/
เครื่องมือและ API สำหรับนักพัฒนาซอฟต์แวร์เพื่อใช้ประโยชน์จากแพลตฟอร์ม Google Analytics
https://developers.google.com/analytics/
หลักสูตรออนไลน์ที่สอนวิธีใช้ผลิตภัณฑ์ Google Analytics (สอนโดยผู้ที่ทำงานใน Google Analytics เอง)
https://analyticsacademy.withgoogle.com/