กฎและคำแนะนำของ PageSpeed

Ilya Grigorik

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

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

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

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

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

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

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

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

หลีกเลี่ยงการเรียกใช้เซิร์ฟเวอร์แบบซิงโครนัส

ใช้เมธอด navigator.sendBeacon() เพื่อจำกัดข้อมูลที่ส่งโดย XMLHttpRequests ในเครื่องจัดการ 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() จะแสดงผล Promise ด้วย

<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 จำเป็นสำหรับการสร้าง Render Tree และ JavaScript มักจะบล็อก CSS ในระหว่างการสร้างหน้าเว็บในตอนแรก ตรวจสอบว่าได้ทำเครื่องหมาย CSS ที่ไม่จำเป็นว่าไม่สำคัญ (เช่น การพิมพ์และการสืบค้นสื่ออื่นๆ) และปริมาณ CSS ที่สำคัญและเวลาในการแสดงผลมีค่าน้อยที่สุดเท่าที่จะเป็นไปได้

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

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

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

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

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

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

ความคิดเห็น