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:

> index.html 
... 
... content above the fold 
...
<the-fold></the-fold>
... 
... content below the fold 
...

Demo

SOURCE

JAMPACKED

_jampack html.to.design.png 76385 html.to.design.png 76385 html.to.design.webp 22402index.html 964 index.html 1783music_500x447.png 142036 music_500x447.png 142036 music_500x447.webp 58184redpanda_500x335.jpg 87167 redpanda_500x335.jpg 87167 redpanda_500x335.webp 28420water.jpg 229140 water.jpg 228735 [email protected] 196541 [email protected] 208632 [email protected] 140360 [email protected] 127210 [email protected] 136430

SOURCE

  • html.to.design.png 76385
  • index.html 964
  • music_500x447.png 142036
  • redpanda_500x335.jpg 87167
  • water.jpg 229140

JAMPACKED

Source Open in new tab
Jampacked Open in new tab
Terminal
__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.24.4              |__| by β€Ήdivβ€ΊRIOTS

Options:
{ onlyoptim: true }


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

 Summary 
╔═══════════╀════════════╀═══════════╀════════════╀════════════╗
β•‘ Action    β”‚ Compressed β”‚  Original β”‚ Compressed β”‚       Gain β•‘
β•Ÿβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β•’
β•‘ jpg->webp β”‚      1 / 1 β”‚  85.12 KB β”‚   27.75 KB β”‚  -57.37 KB β•‘
β•‘ png->webp β”‚      2 / 2 β”‚ 213.30 KB β”‚   78.70 KB β”‚ -134.60 KB β•‘
β•‘ .jpg      β”‚      2 / 2 β”‚ 447.14 KB β”‚  446.63 KB β”‚  -526.00 B β•‘
β•Ÿβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β•’
β•‘ Total     β”‚      5 / 5 β”‚ 745.57 KB β”‚  553.08 KB β”‚ -192.49 KB β•‘
β•šβ•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•§β•β•β•β•β•β•β•β•β•β•β•β•β•


 βœ” No issues