กฎ PageSpeed และคำแนะนำ

Ilya Grigorik

เผยแพร่เมื่อวันที่ 17 สิงหาคม 2018

คู่มือนี้จะอธิบายกฎ PageSpeed Insights ในบริบท: สิ่งที่ต้องให้ความสนใจเมื่อเพิ่มประสิทธิภาพเส้นทางการแสดงผลวิกฤติ และเหตุผล

นำ JavaScript และ CSS ที่บล็อกการแสดงผลออก

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

เพิ่มประสิทธิภาพการใช้ JavaScript

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

ต้องการทรัพยากร JavaScript แบบอะซิงโครนัส

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

หลีกเลี่ยงการเรียกเซิร์ฟเวอร์แบบซิงค์

ใช้เมธอด navigator.sendBeacon() เพื่อจํากัดข้อมูลที่ส่งโดย XMLHttpRequest ในตัวแฮนเดิล unload เนื่องจากเบราว์เซอร์จำนวนมากกำหนดให้คำขอดังกล่าวต้อง แบบซิงโครนัส อาจทำให้เปลี่ยนหน้าช้าลงได้ในบางครั้ง ดังต่อไปนี้ แสดงวิธีใช้ navigator.sendBeacon() เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ใน ตัวแฮนเดิล pagehide แทนตัวแฮนเดิล unload

<script>
  function() {
    window.addEventListener('pagehide', logData, false);
    function logData() {
      navigator.sendBeacon(
        'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
        'Sent by a beacon!');
    }
  }();
</script>

เมธอด fetch() ให้วิธีที่ดียิ่งขึ้นในการขอข้อมูลแบบไม่พร้อมกัน fetch() ประมวลผลการตอบกลับโดยใช้ Promises แทนตัวแฮนเดิลเหตุการณ์หลายรายการ การตอบกลับ fetch() เป็นออบเจ็กต์สตรีม ซึ่งต่างจากการตอบกลับ XMLHttpRequest ซึ่งหมายความว่าการเรียกใช้ไปยัง json() จะแสดงข้อความ "สัญญา" ด้วย

<script>
  fetch('./api/some.json')
    .then(
      function(response) {
        if (response.status !== 200) {
          console.log('Looks like there was a problem. Status Code: ' +  response.status);
          return;
        }
        // Examine the text in the response
        response.json().then(function(data) {
          console.log(data);
        });
      }
    )
    .catch(function(err) {
      console.log('Fetch Error :-S', err);
    });
</script>

เมธอด fetch() ยังจัดการคำขอ POST ได้ด้วย

<script>
  fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  }).then(function() { // Additional code });
</script>

เลื่อนเวลาการแยกวิเคราะห์ JavaScript

เพื่อลดปริมาณงานที่เบราว์เซอร์ต้องดำเนินการเพื่อแสดงผลหน้าเว็บ ให้เลื่อนสคริปต์ที่ไม่จำเป็นซึ่งไม่สำคัญต่อการสร้างเนื้อหาที่มองเห็นได้สำหรับการแสดงผลครั้งแรก

หลีกเลี่ยงการใช้ JavaScript ที่ใช้เวลานาน

การเรียกใช้ JavaScript เป็นเวลานานจะบล็อกเบราว์เซอร์ไม่ให้สร้าง DOM, CSSOM และการแสดงผลหน้าเว็บ ดังนั้นให้เลื่อนไปก่อนหลังตรรกะการเริ่มต้นที่ไม่จำเป็นสำหรับการแสดงผลครั้งแรก หากต้องเรียกใช้ลําดับเริ่มต้นที่ยาว ให้พิจารณาแบ่งออกเป็นหลายระยะเพื่อให้เบราว์เซอร์ประมวลผลเหตุการณ์อื่นๆ ในระหว่างนั้น

เพิ่มประสิทธิภาพการใช้ CSS

CSS จําเป็นต่อการสร้างต้นไม้การแสดงผล และ JavaScript มักจะบล็อก CSS ในระหว่างการสร้างหน้าเว็บครั้งแรก ตรวจสอบว่า CSS ที่ไม่จำเป็นมีสถานะ "ไม่สำคัญ" (เช่น การค้นหาสื่อสิ่งพิมพ์และสื่ออื่นๆ) และจำนวน CSS ที่สำคัญและเวลาในการนำส่งมีน้อยที่สุด

ใส่ CSS ลงในส่วนหัวของเอกสาร

ระบุทรัพยากร CSS ทั้งหมดภายในเอกสาร HTML ให้เร็วที่สุดเพื่อให้เบราว์เซอร์ค้นพบแท็ก <link> และส่งคำขอ CSS โดยเร็วที่สุด

หลีกเลี่ยงการนําเข้า CSS

คําสั่งการนําเข้า CSS (@import) ช่วยให้สไตลชีตหนึ่งนําเข้ากฎจากไฟล์สไตลชีตอื่นได้ อย่างไรก็ตาม โปรดหลีกเลี่ยงคำสั่งเหล่านี้เนื่องจากจะเพิ่มการไปกลับไปยังเส้นทางที่สำคัญ: ระบบจะค้นพบทรัพยากร CSS ที่นำเข้าหลังจากที่ได้รับและแยกวิเคราะห์สไตล์ชีต CSS ที่มีกฎ @import เท่านั้น

รวม CSS การบล็อกการแสดงผลไว้ในหน้า

เพื่อประสิทธิภาพที่ดีที่สุด คุณอาจต้องใส่ CSS ที่สำคัญลงในเอกสาร HTML โดยตรง การลบออกรอบเพิ่มเติมในเส้นทางสำคัญ และหากดำเนินการอย่างถูกต้อง ก็สามารถส่งข้อมูลแบบ "ไป-กลับ 1 ครั้ง" ได้ ความยาวเส้นทางวิกฤติซึ่งมีเฉพาะ HTML ที่เป็นทรัพยากรการบล็อก

ความคิดเห็น