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.
Small images will be embed in HTML

Recommended use

> 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 1743music_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

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

Source

Jampacked

Terminal

__                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  \__  \  /     \\____ \__  \ _/ ___\|  |/ /
    |  |/ __ \|  Y Y  \  |_> > __ \\  \___|    < 
/\__|  (____  /__|_|  /   __(____  /\___  >__|_ \
\______|    \/      \/|  |       \/     \/     \/
 v0.32.0              |__| by ‹div›RIOTS

Options:
{ onlyoptim: true }


 PASS 1 - Optimizing 
▶ index.html
Done: 5.129s

 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