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