⚡Performance Optimization
Page size, image optimization, lazy loading, render-blocking resources, compression, caching, and Time to First Byte explained.
Page speed is a confirmed Google ranking factor for both desktop and mobile.[1] Hugo's performance category runs 8 checks that assess your page's loading characteristics — contributing 12% to the main page score.[1] These checks analyze the raw HTML response, not JavaScript-rendered content.
Page Size
HTML Page Size (KB)
Image Count & Lazy Loading
Hugo counts all images on the page and checks how many use the loading="lazy" attribute.[2] Lazy loading defers off-screen images until the user scrolls near them, significantly improving initial page load.
Image Count (images)
Render-Blocking Resources
Script tags without async or defer attributes block the browser from rendering page content.[3] Hugo counts these render-blocking scripts and flags them.
| Count | Status | Recommendation |
|---|---|---|
| 0 | Pass ✓ | All scripts are properly deferred |
| 1–3 | Info ℹ | Consider adding defer or async attributes |
| 4+ | Warning ⚠ | Too many blocking scripts — prioritize deferring them |
Compression & Caching
Hugo checks the Content-Encoding header for gzip, Brotli (br), or deflate compression. Compressed responses can be 70–90% smaller. It also verifies Cache-Control headers are set to enable browser caching.[4]
Time to First Byte (TTFB)
TTFB (ms)
References
- [1]Google Search Central — Using page speed in mobile search ranking — developers.google.com
- [2]web.dev — Browser-level image lazy loading for the web — web.dev
- [3]MDN Web Docs — <script>: async and defer attributes — developer.mozilla.org
- [4]MDN Web Docs — HTTP compression — developer.mozilla.org
- [5]web.dev — Time to First Byte (TTFB) — web.dev