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
JPEGprogressive which provide better user experience for content above the fold. - Images with alpha (aka transparency) will not be converted to
JPEGprogressive because this format doesn’t support alpha. Image will be converted to WebP instead. - 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
html.to.design.png76385html.to.design.png76385html.to.design.png.jpg23987html.to.design@660w.jpeg15211index.html1040index.html1769music_500x447.png142036music_500x447.png142036music_500x447.png.webp58184redpanda_500x335.jpg87167redpanda_500x335.jpg87167redpanda_500x335.jpg.jpg27160water_below.jpg229140water_below.jpg229140water_below.jpg.jpg228735water_below@1112w.avif196541water_below@1112w.webp208632water_below@812w.avif141037water_below@812w.jpg127813water_below@812w.webp135174SOURCE
- html.to.design.png 76385
- index.html 1040
- music_500x447.png 142036
- redpanda_500x335.jpg 87167
- water_below.jpg 229140
JAMPACKED
- html.to.design.png 76385
- html.to.design.png.jpg 23987
- html.to.design@660w.jpeg 15211
- index.html 1769
- music_500x447.png 142036
- music_500x447.png.webp 58184
- redpanda_500x335.jpg 87167
- redpanda_500x335.jpg.jpg 27160
- water_below.jpg 229140
- water_below.jpg.jpg 228735
- water_below@1112w.avif 196541
- water_below@1112w.webp 208632
- water_below@812w.avif 141037
- water_below@812w.jpg 127813
- water_below@812w.webp 135174
Source
Jampacked
Terminal
__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
v0.12.2 |__| by ‹div›RIOTS
Options:
{ onlyoptim: true }
PASS 1 - Optimizing
▶ index.html
Done: 6.438s
Summary
╔═══════════╤════════════╤═══════════╤════════════╤════════════╗
║ Action │ Compressed │ Original │ Compressed │ Gain ║
╟───────────┼────────────┼───────────┼────────────┼────────────╢
║ jpg->jpg │ 3 / 3 │ 394.02 KB │ 276.42 KB │ -117.60 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 │ 607.32 KB │ 356.67 KB │ -250.65 KB ║
╚═══════════╧════════════╧═══════════╧════════════╧════════════╝
✔ No issues