กฎ 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 เท่านั้นที่เป็นทรัพยากรในการบล็อก

ความคิดเห็น