ภาพรวม
ก่อนที่เบราว์เซอร์จะสามารถแสดงเนื้อหา เบราว์เซอร์ต้องประมวลผลข้อมูลรูปแบบและการจัดวางทั้งหมด หน้าปัจจุบัน ด้วยเหตุนี้ เบราว์เซอร์จะบล็อกการแสดงผลจนกว่าสไตล์ชีตภายนอกจะ ดาวน์โหลดและประมวลผลซึ่งอาจต้องส่งข้อมูลไป-กลับหลายครั้งและทำให้การแสดงภาพครั้งแรกล่าช้า โปรดดู การสร้างแผนผังเรนเดอร์ เลย์เอาต์ และระบายสีเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเส้นทางการแสดงผลวิกฤติ และการแสดงผล การบล็อก CSS เพื่อดูเคล็ดลับในการเลิกบล็อกการแสดงผลและปรับปรุงการแสดงโฆษณาของ CSSคำแนะนำ
หากทรัพยากร CSS ภายนอกมีขนาดเล็ก คุณสามารถแทรกทรัพยากรเหล่านั้นลงในเอกสาร HTML โดยตรง ซึ่งเรียกว่าในบรรทัด การจัดบรรทัด CSS ขนาดเล็กด้วยวิธีนี้จะช่วยให้เบราว์เซอร์ดำเนินการแสดงผลหน้าเว็บต่อไปได้ โปรดทราบว่าหากไฟล์ CSS มีขนาดใหญ่ การรวม CSS ไว้ในหน้าแรกทั้งหมดอาจทำให้ PageSpeed Insights เตือนว่าครึ่งหน้าบน ส่วนของหน้าเว็บมีขนาดใหญ่เกินไปเนื่องจากจัดลำดับความสำคัญเนื้อหาที่มองเห็นได้ ในกรณีของไฟล์ CSS ขนาดใหญ่ คุณจะต้องระบุและแทรก CSS ที่จำเป็นสำหรับการแสดงผลเนื้อหาครึ่งหน้าบน และเลื่อนเวลาโหลดสไตล์ที่เหลือออกไปจนกว่าจะจบเนื้อหาครึ่งหน้าบน- ตัวอย่างการแทรกไฟล์ CSS ขนาดเล็ก
- อย่าแทรก URI ของข้อมูลขนาดใหญ่ในบรรทัด
- อย่าแทรกแอตทริบิวต์ 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; }
<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)
ความคิดเห็น
หน้านี้มีประโยชน์ไหม