--- tags: - wordpress - optimization - http-requests - minification - fetchpriority title: Mastering HTTP Requests: Minification, Combining, and Prioritization --- # 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 ``, Fonts (if preloaded). * **High:** Scripts in `` (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." ```html 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. ```php // 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 `` 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:** 1. Open **DevTools** (F12) and go to the **Network** tab. 2. Right-click on the table headers (Name, Status, Type, etc.). 3. Select **Priority** from the dropdown menu. 4. 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. ## Related Guides * [[wordpress-advanced-css|Deep CSS Optimization]] * [[wordpress-render-blocking|Eliminating Render-Blocking Resources]] * [[wordpress-image-optimization|Mastering Image Optimization]] * [[wordpress-video-optimization|Optimizing Video Embeds with the Façade Pattern]]