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

Ilya Grigorik

คู่มือนี้จะอธิบายกฎ 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() ใหม่มอบวิธีง่ายๆ ในการส่งคำขอข้อมูลแบบไม่พร้อมกัน เนื่องจากฟีเจอร์นี้ยังไม่พร้อมให้บริการในบางพื้นที่ คุณจึงควรใช้การตรวจหาฟีเจอร์เพื่อทดสอบการมีอยู่ตัวพร้อมใช้งานก่อนใช้งาน เมธอดนี้จะประมวลผลการตอบกลับด้วย Promises แทนตัวแฮนเดิลเหตุการณ์หลายรายการ การตอบกลับการดึงข้อมูลเป็นออบเจ็กต์สตรีมที่เริ่มใช้งานใน Chrome 43 ซึ่งต่างจากการตอบกลับ 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 เท่านั้นที่เป็นทรัพยากรในการบล็อก

ความคิดเห็น