قرار دادن <link> ها در <head>
قرار دادن <link> ها در <head> بخشی از مشخصات صحیح در ساخت یک وبسایت بهینهشده است. هنگامی که یک صفحه برای اولین بار بارگذاری میشود، HTML و CSS به طور همزمان تجزیه میشوند؛ HTML DOM (Document Object Model) را ایجاد میکند و CSS CSSOM (CSS Object Model) را ایجاد میکند. هر دو برای ایجاد عناصر بصری در یک وبسایت مورد نیاز هستند، که به زمانبندی سریع "اولین رندر معنادار" کمک میکند. این رندر تدریجی یک دسته بهینهسازی است که سایتها در امتیازات عملکرد خود با آن اندازهگیری میشوند. قرار دادن شیوه نامهها در پایین سند چیزی است که رندر تدریجی را در بسیاری از مرورگرها ممنوع میکند. برخی مرورگرها رندر را مسدود میکنند تا از نیاز به بازآرایی عناصر صفحه در صورت تغییر استایل آنها جلوگیری کنند. کاربر سپس به تماشای یک صفحه سفید خالی گیر میکند. در مواقع دیگر ممکن است فلشهایی از محتوای بدون استایل (FOUC) وجود داشته باشد که یک صفحه وب را بدون اعمال استایل نشان میدهد.
قرار دادن <script> ها درست قبل از </body>
تگهای <script> تجزیه HTML را در حین دانلود و اجرا مسدود میکنند که میتواند صفحه شما را کند کند. قرار دادن اسکریپتها در پایین به HTML اجازه میدهد تا ابتدا تجزیه و به کاربر نمایش داده شود.
یک استثنا برای موقعیتیابی <script> ها در پایین، زمانی است که اسکریپت شما حاوی document.write() باشد، اما امروزه استفاده از document.write() یک روش خوب نیست. همچنین، قرار دادن <script> ها در پایین به این معنی است که مرورگر نمیتواند دانلود اسکریپتها را تا زمانی که کل سند تجزیه شود شروع کند. این تضمین میکند که کد شما که نیاز به دستکاری عناصر DOM دارد، خطا ایجاد نکند و کل اسکریپت را متوقف نکند. اگر نیاز دارید <script> ها را در <head> قرار دهید، از ویژگی defer استفاده کنید که همان اثر اجرای اسکریپت تنها پس از تجزیه HTML را به دست میآورد اما مرورگر میتواند اسکریپت را زودتر دانلود کند.
به خاطر داشته باشید که قرار دادن اسکریپتها درست قبل از تگ پایانی </body> توهمی را ایجاد میکند که صفحه با یک حافظه پنهان خالی سریعتر بارگذاری میشود (زیرا اسکریپتها دانلود بقیه سند را مسدود نمیکنند). با این حال، اگر کدی دارید که میخواهید هنگام بارگذاری صفحه اجرا شود، تنها پس از بارگذاری کامل صفحه شروع به اجرا خواهد کرد. اگر آن اسکریپتها را در تگ <head> قرار دهید، آنها زودتر شروع به اجرا میکردند - بنابراین در یک حافظه پنهان آماده، صفحه واقعاً سریعتر بارگذاری میشود.
تگهای <head> و <body> اکنون اختیاری هستند
طبق مشخصات HTML5، برخی از تگهای HTML مانند <head> و <body> اختیاری هستند. راهنمای استایل گوگل حتی حذف آنها را برای صرفهجویی در بایتها توصیه میکند. با این حال، این عمل هنوز به طور گستردهای پذیرفته نشده است و افزایش عملکرد احتمالی ناچیز است و برای اکثر سایتها احتمالاً اهمیت چندانی نخواهد داشت.