<link> গুলোকে <head> এ রাখা
<head> এ <link> গুলোকে রাখা একটি অপ্টিমাইজড ওয়েবসাইট তৈরির সঠিক স্পেসিফিকেশনের অংশ। যখন একটি পৃষ্ঠা প্রথম লোড হয়, তখন 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 উপাদানগুলিকে ম্যানিপুলেট করতে হবে তা ত্রুটি ফেলবে না এবং পুরো স্ক্রিপ্ট বন্ধ করবে না। যদি আপনাকে <head> এ <script> গুলোকে রাখতে হয়, তাহলে defer অ্যাট্রিবিউট ব্যবহার করুন, যা HTML পার্স হওয়ার পরেই স্ক্রিপ্ট চালানোর একই প্রভাব অর্জন করবে কিন্তু ব্রাউজার স্ক্রিপ্টটি আগে ডাউনলোড করতে পারবে।
মনে রাখবেন যে ক্লোজিং </body> ট্যাগের ঠিক আগে স্ক্রিপ্ট স্থাপন করলে এমন একটি বিভ্রম তৈরি হবে যে পৃষ্ঠাটি একটি খালি ক্যাশে দ্রুত লোড হয় (কারণ স্ক্রিপ্টগুলি ডকুমেন্টের বাকি অংশ ডাউনলোড ব্লক করবে না)। তবে, যদি আপনার কাছে কিছু কোড থাকে যা পৃষ্ঠা লোডের সময় চালাতে চান, তবে এটি পুরো পৃষ্ঠা লোড হওয়ার পরেই কার্যকর হওয়া শুরু করবে। যদি আপনি সেই স্ক্রিপ্টগুলি <head> ট্যাগে রাখেন, তবে তারা আগে কার্যকর হওয়া শুরু করবে - তাই একটি প্রাইমড ক্যাশে পৃষ্ঠাটি আসলে দ্রুত লোড হতে দেখাবে।
<head> এবং <body> ট্যাগগুলি এখন ঐচ্ছিক
HTML5 স্পেসিফিকেশন অনুযায়ী, <head> এবং <body> এর মতো কিছু HTML ট্যাগ ঐচ্ছিক। গুগল এর স্টাইল গাইড এমনকি বাইট সংরক্ষণের জন্য সেগুলিকে সরিয়ে ফেলার পরামর্শ দেয়। তবে, এই অভ্যাসটি এখনও ব্যাপকভাবে গৃহীত হয়নি এবং পারফরম্যান্স লাভ সম্ভবত ন্যূনতম হবে এবং বেশিরভাগ সাইটের জন্য এটি সম্ভবত কোনো ব্যাপার হবে না।