Optimize above the fold

jampack can do extra optimizations to content and assets above the fold.

How is the fold positionned?

The fold position is determined by the following:

  • At the tag <the-fold> if present (recommended)
  • OR, at the tag <main> + 5,000 bytes, if tag <main> is present.
  • OR, at the tag <body> + 10,000 bytes, if tag <body> is present.

Nothing will be treated as above-the-fold if none of the tags above have been found.

The tag <the-fold> should be placed in your HTML pages where you think the fold will be. The tag <the-fold> will be removed from the final output.

What is done differently above-the-fold?

jampack will prioritize content and assets above the fold:

  • Images will be eagerly loaded: no loading="lazy" attribute.
  • Images will have higher priority: set fetchpriority="high" attribute.
  • Images will be converted to JPEG progressive which provide better user experience for content above the fold.
  • Images with alpha (aka transparency) will not be converted to JPEG progressive because this format doesn’t support alpha. Image will be converted to WebP instead.
  • Small images will be embed in HTML
> index.html 
... 
... content above the fold 
...
<the-fold></the-fold>
... 
... content below the fold 
...

Demo

SOURCE

JAMPACKED

_jampackhtml.to.design.jpg23987html.to.design.png76385html.to.design.png76385index.html1040index.html1669music_500x447.png142036music_500x447.png142036music_500x447.webp58184redpanda_500x335.jpg87167redpanda_500x335.jpg27160water_below.jpg229140water_below.jpg228735[email protected]196541[email protected]208632[email protected]140360[email protected]127210[email protected]136430

SOURCE

  • html.to.design.png76385
  • index.html1040
  • music_500x447.png142036
  • redpanda_500x335.jpg87167
  • water_below.jpg229140

JAMPACKED

SourceOpen in new tab
JampackedOpen in new tab
Terminal
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.23.4              |__| by β€Ήdivβ€ΊRIOTS

Options:
{ onlyoptim: true }


 PASS 1 - Optimizing 
β–Ά index.html
Done: 4.989s

 Summary 
╔═══════════╀════════════╀═══════════╀════════════╀════════════╗
β•‘ Action    β”‚ Compressed β”‚  Original β”‚ Compressed β”‚       Gain β•‘
β•Ÿβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β•’
β•‘ .jpg      β”‚      3 / 3 β”‚ 335.42 KB β”‚  276.25 KB β”‚  -59.17 KB β•‘
β•‘ png->webp β”‚      1 / 1 β”‚ 138.71 KB β”‚   56.82 KB β”‚  -81.89 KB β•‘
β•‘ png->jpg  β”‚      1 / 1 β”‚  74.59 KB β”‚   23.42 KB β”‚  -51.17 KB β•‘
β•Ÿβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β•’
β•‘ Total     β”‚      5 / 5 β”‚ 548.72 KB β”‚  356.49 KB β”‚ -192.22 KB β•‘
β•šβ•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•


 Issues 

β–Ά index.html

 fix  Adding missing  to the top of the 


 1 issue(s) over 1 files