กฎ 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() จะส่งคืนคำสัญญาด้วย

    <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 ลงในส่วนหัวของเอกสาร

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

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

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

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

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

ความคิดเห็น