Mastering HTTP Requests: Minification, Combining, and Prioritization
Every file your website needs (CSS, JS, Images, Fonts) requires a separate HTTP Request. The more requests you have, and the larger they are, the slower your site loads.
Optimizing requests involves three strategies: Reduce (Minify/Combine), Defer (Lazy Load), and Prioritize (Fetch Priority).
1. Minification: Cutting the Fat
Minification removes whitespace, comments, and unnecessary characters from code files without breaking functionality.
- CSS/JS: Tools like Autoptimize, WP Rocket, or a build step (Gulp/Webpack) handle this.
- HTML: HTML minification saves bytes but can sometimes break inline JS if not careful.
Impact: Reduces file size (bytes downloaded) and parsing time.
2. Combining Files: The HTTP/2 Nuance
In the old days (HTTP/1.1), browsers could only download ~6 files at once per domain. Combining 20 CSS files into 1 style.css was mandatory to prevent blocking.
Modern HTTP/2 allows "Multiplexing" (downloading many files at once over one connection).
When to Combine?
- Don't Combine: If you have a few medium-sized files (e.g.,
style.css,woocommerce.css). Keeping them separate helps caching (if you update Woo, you don't invalidate the theme cache). - Do Combine: If you have 50+ tiny files from various plugins. The overhead of HTTP headers for each request still adds up.
3. Browser Priority: Who Goes First?
Browsers assign a priority to every request to decide what to download first.
- Highest: Main HTML, CSS in
<head>, Fonts (if preloaded). - High: Scripts in
<head>(unless deferred), LCP Image (sometimes). - Low: Images, Async scripts, Footer scripts.
Controlling Priority
You can manually override the browser's default logic to speed up the Largest Contentful Paint (LCP).
A. fetchpriority="high" (The LCP Booster)
Use this on your Hero image or the first slide of a slider. It tells the browser: "Even though this is an image, download it ASAP."
<!-- Good for LCP -->
<img src="hero.jpg" fetchpriority="high" alt="Hero">B. fetchpriority="low"
Use this for images in a carousel that are off-screen or secondary content.
C. loading="lazy" vs eager
lazy: Browser waits until the user scrolls near the image. (Default for WordPress images below the fold).eager: Browser downloads immediately. Must be used for the LCP image.
Example: Optimizing a Slider
When building a custom slider loop, you should treat the first slide differently than the rest.
// First slide: High Priority, No Lazy Load
if ( 1 === $count ) {
$atts['fetchpriority'] = 'high';
$atts['loading'] = 'eager';
$atts['decoding'] = 'sync';
}
// Other slides: Low Priority, Lazy Load
else {
$atts['fetchpriority'] = 'low'; // Optional, but explicit
$atts['loading'] = 'lazy';
$atts['decoding'] = 'async';
}D. rel="preload"
Use this in <head> for critical assets discovered late (like fonts or background images in CSS).
Visualizing Priority in DevTools
By default, the "Priority" column is hidden in the browser's Network tab. Here is how to enable it to verify your optimizations.
Chrome / Edge:
- Open DevTools (F12) and go to the Network tab.
- Right-click on the table headers (Name, Status, Type, etc.).
- Select Priority from the dropdown menu.
- Reload the page. You will see Highest, High, Low, etc.
Firefox: Firefox does not currently expose a simple "Priority" column in the Network tab UI. It is recommended to use Chrome or Edge to debug Core Web Vitals and fetch priorities.