Make the largest element on the page load faster on Apache

Why it matters

Largest Contentful Paint is how long visitors wait before the main image or heading shows, and the value is above the good threshold. A few changes to the main image and caching usually bring it into the good range.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

1. Enable compression for text files (mod_deflate) and give files whose names change with their content a long cache lifetime (mod_headers). Use the long lifetime only for fingerprinted files such as app.3f9c2a.js; for others use a shorter max-age.
2. Reload Apache and check the Cache-Control and Content-Encoding headers with curl -I.

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json image/svg+xml
</IfModule>
<IfModule mod_headers.c>
    <FilesMatch "\.(?:css|js|woff2|avif|webp|png|jpe?g|svg)$">
        Header set Cache-Control "public, max-age=31536000, immutable"
    </FilesMatch>
</IfModule>

Read the documentation ↗(opens in a new tab)

Related

• Reported by the Core Web Vitals check
• Make the largest element on the page load faster
• Stop the page layout from jumping while it loads
• Stop the page layout from jumping while it loads
• Make the page respond faster to clicks and taps
• Make the page respond faster to clicks and taps
• Reduce the JavaScript that blocks the page while it loads
• Reduce the JavaScript that blocks the page while it loads
• Collect real-user speed data for your site