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
Recommended use
> index.html
...
... content above the fold
...
<the-fold></the-fold>
...
... content below the fold
...
Demo
SOURCE
JAMPACKED
_jampackhtml.to.design.png76385html.to.design.png76385html.to.design.png.jpg23987index.html1040index.html1683music_500x447.png142036music_500x447.png142036music_500x447.png.webp58184redpanda_500x335.jpg87167redpanda_500x335.jpg87167redpanda_500x335.jpg.jpg27160water_below.jpg229140water_below.jpg229140water_below.jpg.jpg228735water_below@1112w.avif196538water_below@1112w.webp208632water_below@812w.avif141087water_below@812w.jpg127813water_below@812w.webp135174SOURCE
- html.to.design.png76385
- index.html1040
- music_500x447.png142036
- redpanda_500x335.jpg87167
- water_below.jpg229140
JAMPACKED
- _jampack
- html.to.design.png76385
- html.to.design.png.jpg23987
- index.html1683
- music_500x447.png142036
- music_500x447.png.webp58184
- redpanda_500x335.jpg87167
- redpanda_500x335.jpg.jpg27160
- water_below.jpg229140
- water_below.jpg.jpg228735
- water_below@1112w.avif196538
- water_below@1112w.webp208632
- water_below@812w.avif141087
- water_below@812w.jpg127813
- water_below@812w.webp135174
Terminal
__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
v0.20.2 |__| by βΉdivβΊRIOTS
Options:
{ onlyoptim: true }
PASS 1 - Optimizing
βΆ index.html
Done: 6.676s
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