เพิ่มประสิทธิภาพการแสดง CSS

กฎนี้จะทำงานเมื่อ PageSpeed Insights ตรวจพบว่าหน้าเว็บมีการบล็อกการแสดงผลสไตล์ชีตภายนอก ซึ่งทำให้เกิดความล่าช้าในการแสดงครั้งแรก

ภาพรวม

ก่อนที่เบราว์เซอร์จะแสดงผลเนื้อหา เบราว์เซอร์ต้องประมวลผลข้อมูลรูปแบบและเลย์เอาต์ทั้งหมดของหน้าปัจจุบันก่อน ดังนั้น เบราว์เซอร์จะบล็อกการแสดงผลจนกว่าจะมีการดาวน์โหลดและประมวลผลสไตล์ชีตภายนอก ซึ่งอาจต้องใช้การส่งข้อมูลไปกลับหลายรอบและหน่วงเวลาในการแสดงครั้งแรก ดู การสร้าง Render-Tree, เลย์เอาต์ และ Paint เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเส้นทางการแสดงผลวิกฤติ และCSS ที่บล็อกการแสดงผลเพื่อดูเคล็ดลับในการเลิกบล็อกการแสดงผลและปรับปรุงการแสดง CSS

การแนะนำวิดีโอ

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

ตัวอย่างการใส่ไฟล์ CSS ขนาดเล็กไว้ในไฟล์

หากเอกสาร HTML มีลักษณะดังนี้ 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
และทรัพยากร small.css มีลักษณะดังนี้ 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
จากนั้นคุณสามารถแทรก CSS ที่สำคัญในหน้าได้ดังนี้ 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

โมดูลการเพิ่มประสิทธิภาพ PageSpeed สำหรับ nginx, apache, IIS, ATS และ Open Lightspeed จะดำเนินการเปลี่ยนรูปแบบนี้ได้โดยอัตโนมัติ ได้แก่ การกำหนด CSS ที่สำคัญ/ไม่สำคัญ การรวม CSS ที่สำคัญ และการโหลด CSS ที่ไม่สำคัญที่มีการเลื่อนเวลา จะดำเนินการได้โดยอัตโนมัติด้วยโมดูลการเพิ่มประสิทธิภาพ PageSpeed สำหรับ nginx, apache, IIS, ATS และ Open Lightspeed เมื่อคุณเปิดใช้ตัวกรอง prioritize_critical_css

โปรดดูฟังก์ชัน loadCSS เพื่อช่วยโหลด CSS แบบไม่พร้อมกัน ซึ่งสามารถใช้ร่วมกับ Critical ซึ่งเป็นเครื่องมือในการดึง CSS ที่สำคัญจากหน้าเว็บ

รูปแบบสำคัญที่จำเป็นในการจัดรูปแบบเนื้อหาครึ่งหน้าบนจะแทรกในบรรทัดและนำไปใช้กับเอกสารทันที ไฟล์ Small.css จะอัปโหลดขึ้นหลังจากการวาดภาพหน้าเว็บครั้งแรก สไตล์ของเอลิเมนต์จะใช้กับหน้าเว็บเมื่อโหลดเสร็จแล้ว โดยไม่บล็อกการแสดงผลเริ่มต้นของเนื้อหาที่สำคัญ

โปรดทราบว่าในเร็วๆ นี้แพลตฟอร์มเว็บจะรองรับการโหลดสไตล์ชีตในลักษณะที่ไม่บล็อกการแสดงผล โดยไม่ต้องเปลี่ยนมาใช้ JavaScript โดยใช้การนําเข้า HTML

อย่าแทรก URI ข้อมูลขนาดใหญ่ในหน้า

โปรดระมัดระวังเมื่อใส่ URI ข้อมูลในไฟล์ CSS แม้ว่าการใช้ URI ข้อมูลขนาดเล็กบางส่วนใน CSS อาจสมเหตุสมผล แต่การระบุ URI ข้อมูลขนาดใหญ่อาจทำให้ขนาดของ CSS ครึ่งหน้าบนมีขนาดใหญ่ขึ้น ซึ่งจะทำให้การแสดงผลหน้าเว็บช้าลง

อย่าแทรกแอตทริบิวต์ CSS ในหน้า

แอตทริบิวต์ CSS ในบรรทัดในองค์ประกอบ HTML (เช่น <p style=...>) ควรหลีกเลี่ยงหากเป็นไปได้ เนื่องจากมักจะทำให้เกิดการทำซ้ำโค้ดที่ไม่จำเป็น นอกจากนี้ CSS ในบรรทัดในองค์ประกอบ HTML จะถูกบล็อกโดยค่าเริ่มต้นด้วยนโยบายรักษาความปลอดภัยเนื้อหา (CSP)

ความคิดเห็น

หน้านี้มีประโยชน์ไหม