การวาง <link> ไว้ใน <head>
การวาง <link>s ใน <head> เป็นส่วนหนึ่งของข้อกำหนดที่เหมาะสมในการสร้างเว็บไซต์ที่ได้รับการปรับปรุงให้ดีที่สุด เมื่อหน้าเว็บโหลดครั้งแรก HTML และ CSS จะถูกแยกวิเคราะห์พร้อมกัน HTML สร้าง DOM (Document Object Model) และ CSS สร้าง CSSOM (CSS Object Model) ทั้งสองสิ่งนี้จำเป็นสำหรับการสร้างภาพในเว็บไซต์ ทำให้เกิดช่วงเวลา "first meaningful paint" ที่รวดเร็ว การแสดงผลแบบ Progressive นี้เป็นการเพิ่มประสิทธิภาพประเภทหนึ่งที่ไซต์ถูกวัดในคะแนนประสิทธิภาพ การวาง Stylesheet ไว้ใกล้ส่วนท้ายของเอกสารคือสิ่งที่ขัดขวางการแสดงผลแบบ Progressive ใน Browser จำนวนมาก Browser บางตัวจะบล็อกการแสดงผลเพื่อหลีกเลี่ยงการวาดองค์ประกอบของหน้าใหม่หาก Style เปลี่ยนแปลง ผู้ใช้ก็จะติดอยู่กับการดูหน้าว่างเปล่าสีขาว ในบางครั้งอาจมี Flash ของเนื้อหาที่ไม่มี Style (FOUC) ซึ่งแสดงหน้าเว็บที่ไม่มี Style นำมาใช้
การวาง <script>s ไว้ก่อน </body>
แท็ก <script> บล็อกการแยกวิเคราะห์ HTML ในขณะที่กำลังดาวน์โหลดและดำเนินการ ซึ่งอาจทำให้หน้าเว็บของคุณช้าลง การวาง Script ไว้ที่ด้านล่างจะช่วยให้ HTML ถูกแยกวิเคราะห์และแสดงผลต่อผู้ใช้ก่อน
ข้อยกเว้นสำหรับการวางตำแหน่งของ <script>s ที่ด้านล่างคือเมื่อ Script ของคุณมี document.write() แต่ทุกวันนี้การใช้ document.write() ไม่ใช่แนวทางปฏิบัติที่ดี นอกจากนี้ การวาง <script>s ที่ด้านล่างหมายความว่า Browser ไม่สามารถเริ่มดาวน์โหลด Script ได้จนกว่าเอกสารทั้งหมดจะถูกแยกวิเคราะห์ สิ่งนี้ช่วยให้มั่นใจได้ว่าโค้ดของคุณที่ต้องการจัดการองค์ประกอบ DOM จะไม่เกิดข้อผิดพลาดและหยุด Script ทั้งหมด หากคุณต้องการวาง <script>s ใน <head> ให้ใช้ Attribute defer ซึ่งจะให้ผลเช่นเดียวกันในการรัน Script หลังจาก HTML ถูกแยกวิเคราะห์แล้ว แต่ Browser สามารถดาวน์โหลด Script ได้เร็วกว่า
โปรดจำไว้ว่าการวาง Script ไว้ก่อนแท็ก </body> ที่ปิดจะสร้างภาพลวงตาว่าหน้าเว็บโหลดเร็วขึ้นใน Cache ที่ว่างเปล่า (เนื่องจาก Script จะไม่บล็อกการดาวน์โหลดเอกสารที่เหลือ) อย่างไรก็ตาม หากคุณมีโค้ดบางอย่างที่คุณต้องการรันระหว่างการโหลดหน้าเว็บ โค้ดนั้นจะเริ่มดำเนินการหลังจากโหลดหน้าเว็บทั้งหมดแล้วเท่านั้น หากคุณวาง Script เหล่านั้นในแท็ก <head> Script เหล่านั้นจะเริ่มดำเนินการก่อน - ดังนั้นใน Cache ที่พร้อมใช้งาน หน้าเว็บจะดูเหมือนโหลดเร็วขึ้นจริงๆ
แท็ก <head> และ <body> เป็นทางเลือกแล้ว
ตามข้อกำหนดของ HTML5 แท็ก HTML บางอย่างเช่น <head> และ <body> เป็นทางเลือก แนวทาง Style ของ Google ยังแนะนำให้ลบออกเพื่อประหยัด bytes อย่างไรก็ตาม แนวทางปฏิบัตินี้ยังไม่เป็นที่ยอมรับอย่างกว้างขวาง และประสิทธิภาพที่ได้รับอาจน้อยมาก และสำหรับเว็บไซต์ส่วนใหญ่แล้วอาจไม่สำคัญ