Slow loading blurry placeholder image and big file size on live server

[john-szetho]

Having issues with blurry image loading speed on my live server. From the dev tools waterfall I can see the total loading time is 12.08s and the file size of resources ranges between 1-4mb. On my local environment this isn't an issue, the "data:image/svg+xml..." file sizes are about 1.2kb.

This is severely affecting image loading times on my site, see live working link: https://jamesbraund.com/people

For reference, here are img tag snippets and config below:

<img
    src="<?= $image->placeholderUri() ?>"
    data-srcset="<?= $image->srcset('webp_portrait')?>"
    data-lazyload
    sizes="(max-width: 720px) 100vw, 50vw"
    >

'thumbs' => [
    'srcsets' => [
        'driver'    => 'im',
        'quality'   => 100,
        'bin'       => '/usr/local/bin/convert',
        'interlace' => true,
        'webp_landscape' => [
            '2400w'  => ['width' => 2400, 'format' => 'webp'],
            '1600w'  => ['width' => 1600, 'format' => 'webp'],
            '800w'  => ['width' => 800, 'format' => 'webp']
            ],
        'webp_portrait' => [
            '1800w'  => ['width' => 1800, 'format' => 'webp'],
            '1200w'  => ['width' => 1200, 'format' => 'webp'],
            '600w'  => ['width' => 600, 'format' => 'webp']
            ],
        ]
    ],
    'kirby-extended.blurry-placeholder' => [
        'pixel-target' => 60,
        'srcset' => [
            'enable' => true,
        ],

Any ideas what's the cause and/or any fixes?

[johannschopplich]

No idea what causes the increased page payload. Seems like the thumbnails for the blurry placeholder aren't created properly on your production server. Seems like the original files are embedded in the data URI. Can you check thumbs in general (JPGs) are generated properly?

[john-szetho]

Hi Johann, thanks for the quick reply!

Hmmm, as far as I can tell the thumbs are generating correctly. WebP's are created in the media folder, responsively, based on the srcsets and sizes. I don't have a default configuration that creates a JPEG.

The default image is the original as uploaded (usually JPEG or PNG), then the thumbs convert to WebP based on the srcsets and sizes. This seems to work.

Is there another way I can check this?

The setup is pretty much as posted earlier. Let me know if there's any code I can provide that might help decifer the issue :-)

[john-szetho]

Also noting:

When I swap the blurry placeholder for a static asset such as src="/assets/img/placeholder.png", the payload is super quick.

When I swap the blurry placeholder for its original image by replacing: src="<?= $image->placeholderUri() ?>" with src="<?= $image->url() ?>" the payload is much slower; about 20s.

This is probably expected but I guess, as you pointed out, it seems the original image is being loaded as well as the blurry placeholder, which shouldn't happen? ...any idea why these images might be embedding themselves in the data URI?

[johannschopplich]

I'm afraid it's probably a misconfiguration on the server, since this plugin just accesses the Kirby thumb method, which itself uses the server one's. <?= $image->url() ?> being slow also suggests, there's something not working correctly.

Is GD or ImageMagick configured properly? Can you provide a minimal reproducible example? It's probably not related to this plugin.

[john-szetho]

Woah ok. So I managed to resolve this by removing the media folder on the production server and letting it rebuild itself (which is triggered by visiting each page for the first time time). Seems to have fixed the payload problems and is super fast now !!

Not sure exactly why, but perhaps it has something to do with file linking or cache or the server being confused. Thanks so much for the help.

Ps loving the blurry placeholders plugin :-)

[johannschopplich]

Glad to hear you like the plug-in and solved the issue. 🙌