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

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

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

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

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

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

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

ความคิดเห็น