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

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

ภาพรวม

ก่อนที่เบราว์เซอร์จะสามารถแสดงเนื้อหา เบราว์เซอร์ต้องประมวลผลข้อมูลรูปแบบและการจัดวางทั้งหมด หน้าปัจจุบัน ด้วยเหตุนี้ เบราว์เซอร์จะบล็อกการแสดงผลจนกว่าสไตล์ชีตภายนอกจะ ดาวน์โหลดและประมวลผลซึ่งอาจต้องส่งข้อมูลไป-กลับหลายครั้งและทำให้การแสดงภาพครั้งแรกล่าช้า โปรดดู การสร้างแผนผังเรนเดอร์ เลย์เอาต์ และระบายสีเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเส้นทางการแสดงผลวิกฤติ และการแสดงผล การบล็อก 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>

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

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

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

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

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

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

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

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

ความคิดเห็น

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