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.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.webp135174

SOURCE

  • 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
SourceOpen in new tab
JampackedOpen in new tab
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