Skip to main content
mod_pagespeed 1.15 — Cyclone Cache, modernized optimizations, IIS + .NET support, and six years of security updates

Prioritize critical images

Images New in 1.15

Marks the largest above-the-fold image fetchpriority=high so the browser loads it first.

Filter prioritize_critical_images · Filter docs

A mod_pagespeed 1.15 filter. ModPageSpeed 2.0 applies it as part of one always-on pipeline, not as a separate switch.

Original Open in new tab
Optimized Open in new tab

Both frames render identically — that's the goal. The win is in the bytes and requests below, not the look. They're served live by mod_pagespeed 1.15 on demo-httpd-1.1.modpagespeed.com; the optimized frame applies only this filter. Right after a cache purge it may briefly match the original while the worker rewrites it — reload to see the result. This filter is beacon-driven: mod_pagespeed instruments the page, a real browser reports back, then it serves the optimized form and re-measures every few minutes — so the optimized frame can take a reload, or briefly revert to the original, before it reflects the change.

Measured impact

This filter changes how the page is structured or delivered, not its size — so there's no byte or request reduction to chart. The change shows in the source diff below.

What changed in the source

The page's HTML, before and after this filter. Red lines are removed, green lines are added. 

                
                  

                      … 2 unchanged lines …
                    

                            <title>prioritize_critical_images example</title>
                    

                          </head>
                    

                          <body>
                    

                      -     <img src="images/Puzzle.jpg" width="256" height="192" title="A photographic image rendered above the fold. Once the critical-images beacon has reported real-browser data, PageSpeed marks it fetchpriority=high so the browser fetches it first."/><br/>
                    

                      +     <img src="images/Puzzle.jpg" width="256" height="192" title="A photographic image rendered above the fold. Once the critical-images beacon has reported real-browser data, PageSpeed marks it fetchpriority=high so the browser fetches it first." fetchpriority="high"/><br/>
                    

                          </body>
                    

                        </html>

Run this on your own site

This is one of 49 filters mod_pagespeed 1.15 applies in place — self-hosted on Apache, nginx, and IIS. Install and run it: it optimizes right away and adds an X-PageSpeed-Warn: unlicensed header until you license it. Production use requires a commercial license — but the software never locks you out.

Download & run
← All optimization examples