Gallery loading very slow (no thumbnails?)

Hi @einexperte,

I have investigated the issue on gtmetrix.com. It seems that the slow page loading speed is not related to Foogallery but errors as shown in the screenshot at https://monosnap.com/file/AuSbGz6blgPCKDEUNhhUYLHjwu7Dy3. For more information, please visit https://gtmetrix.com/reports/drehmalerei.de/ueW1660S.

To troubleshoot the errors, you can try the following troubleshooting steps:

1. To optimize the images, you can use a plugin such as shortpixel(https://shortpixel.com/)

2. For serving scaled images, try using a plugin such as the WP-Smushit plugin(https://www.ads-software.com/plugins/wp-smushit/)

3. For the leverage browser caching, try using a plugin such as the leverage browser caching plugin(https://www.ads-software.com/plugins/leverage-browser-caching/).

4. For the defer parsing javascript, try using a plugin such as the async javascript(https://www.ads-software.com/plugins/async-javascript/)

You can then re-run the test again on gtmetrix to confirm if the errors are fixed.

Kind regards,
Blaise.

Thank’s for your reply.

Before I dive into your suggestions, I would like to ask you if my understanding of FooGallery is correct:

My expectation is that FooGallery generates thumbnails itself and only loads the full size images on demand, e. g. when the user clicks on the thumbnails.

That’s why I installed Imagick, which FooGallery asked for – so it can generate thumbnails.

But: Thumbnail-generation obviously does not happen / work properly. I deduce that by the transfered data of 35 MB, which is far too much for 80 Photos of a thumbnail size of 150×150 pixels.

I generated a thumbnail be hand in gimp (150x150px) and saved it with jpeg quality 90, which resulted in a 10 kB jpeg file. The overall size of 80 pictures should be around 800 kB to 1 MB.

So either my expectation about thumbnail generation is wrong or something with FooGallery ist not working the way it should.

—-

Anyway, I’ll reply to your suggestions:

First, please take a look at:
https://gtmetrix.com/reports/drehmalerei.de/DcGeKhh3
The result is almost perfect, three “bigger” images included (517 kB total).

1. The images are optimized the way I want them to be. There’s no need for another plugin to fiddle around with them.

2. I don’t want to serve “scaled” images. I want FooGallery to serve thumbnails (150×150 pixel) and the full size image when the user clicks it.

3. I don’t need and don’t want caching plugins. I already tried a couple of them and none of them did a significant improvement.

4. Javascript is not the problem. It’s just 143 kB of 35+ MB data. And 96 % of that apparently is full-size-images server by FooGallery when it should serve thumbnails.

Please look into this again, I still believe there’s something wrong with the thumbnail generation.

Best regards,
Christoph

• This reply was modified 4 years, 2 months ago by einexperte. Reason: typo

By the way I – tried the shortpixel image “optimization” service which you recommended.

They claim “Resulted smaller images are no different in quality from the original.”

That claim doesn’t stand a proper analysis. The images get blurry, you can even see this from their example plane image. They just use a higher compression ratio and image quality _obviously_ declines.

I strongly discourage the use of that service.

hi @einexperte

My expectation is that FooGallery generates thumbnails itself and only loads the full size images on demand, e. g. when the user clicks on the thumbnails.

– this is correct. FooGallery includes a library that wraps the build-in WP libraries for both Imagick and GD image libraries, which need to be installed on the server.

That’s why I installed Imagick, which FooGallery asked for – so it can generate thumbnails.

Yes, FooGallery needs either GD or Imagick in order to generate thumbs.

But there is still something that is not right with your setup, because looking at the page source, I can see that no thumbs are being used, and rather the full-size images are being used in their place.

Can you confirm what your System Info is? You can get it from FooGallery -> System Info

But there is still something that is not right with your setup, because looking at the page source, I can see that no thumbs are being used, and rather the full-size images are being used in their place.

That’s what I told you in the first place ??

Apparently the thumbnails are either not generated or not used.

Here’s the system info (in German). I added a few translations:

FooGallery-Version : 1.9.31
WordPress-Version : 5.0.10
Aktiviertes Theme : Astra
WordPress-URL : https://drehmalerei.de
PHP-Version : 7.3.19-1~deb10u1
PHP GD : Geladen (V2) # translation: loaded
PHP Imagick : Geladen
PHP Open SSL : Geladen
PHP HTTP Wrapper : Gefunden # translation: found
PHP HTTPS Wrapper : Gefunden
HTTPS Mismatch : Keine
PHP Config[allow_url_fopen] : 1
PHP Config[allow_url_include] : 1
WP Image Editor : WP_Thumb_Image_Editor_Imagick
Vorschaubild-Erzeugungstest : https://drehmalerei.de/wp-content/uploads/2019/09/IMG_5113-cs6-2400.jpg
Erweiterungs-Endpunkt : https://raw.githubusercontent.com/fooplugins/foogallery-extensions/master/extensions.json?v=dh9zDKQt&c6J
Erweiterungsfehler : Nein, alles gut # translation: Errors: No, everythings fine
Erweiterungen : 
Aktive Erweiterungen : Array
(
    [0] => default_templates
    [1] => foobox
)

Galerie-Vorlagen : Array
(
    [0] => default
    [1] => image-viewer
    [2] => justified
    [3] => masonry
    [4] => simple_portfolio
    [5] => thumbnail
    [6] => polaroid_promo
    [7] => grid_promo
    [8] => slider_promo
)

Lightboxes : Array
(
    [foogallery] => FooGallery PRO Lightbox (Not installed!)
    [foobox] => FooBox
)

Einstellungen : Array
(
    [gallery_template] => default
    [gallery_sorting] => 
    [default_gallery_settings] => 0
    [caption_title_source] => caption
    [caption_desc_source] => desc
    [thumb_jpeg_quality] => 50
    [default_crop_position] => center,center
    [thumb_resize_upscale_small_color] => rgb(0,0,0)
    [language_images_count_none_text] => Keine Bilder
    [language_images_count_single_text] => 1 Bild
    [language_images_count_plural_text] => %s Bilder
    [default_retina_support] => Array
        (
            [2x] => false
            [3x] => false
            [4x] => false
        )

)

Aktive Plugins : Array
(
    [0] => foogallery/foogallery.php
    [1] => astra-addon/astra-addon.php
    [2] => classic-editor/classic-editor.php
    [3] => contact-form-7-honeypot/honeypot.php
    [4] => contact-form-7/wp-contact-form-7.php
    [5] => disable-comments/disable-comments.php
    [6] => disable-wp-rest-api/disable-wp-rest-api.php
    [7] => easy-table-of-contents/easy-table-of-contents.php
    [8] => foobox-image-lightbox/foobox-free.php
    [9] => foogallery/foogallery.php
    [10] => wp-admin-notification-center/index.php
    [11] => wp-postviews/wp-postviews.php
    [12] => wp-simple-firewall/icwp-wpsf.php
)

Thanks for that @einexperte

It looks like you also have GD loaded, so please can you goto FooGallery Settings -> Images tab and enable “Force GD Library”.

Then look at System Info again to ensure WP Image Editor : WP_Thumb_Image_Editor_GD and then reload the gallery again to see if that works now

Thanks for your reply,
I did exactly what you told me to do.

The line in the system info now looks like this:

WP Image Editor : WP_Thumb_Image_Editor_GD

I also restartet the apache2 webserver.

I did the thumbnail generation test, whicht worked successfully.

I checked the filesystem, the thumbnails are there.

Still the problem persists, the HTML code for the thumbnail points to the full size images.

Here’s the Link to the thumbnail of the first image:

https://drehmalerei.de/wp-content/uploads/2019/11/A79FED23-53FD-4920-8328-9C20BA2382C1-150×150.jpeg

@einexperte

There is still something that is not right.

That thumb that you linked to is the default 150×150 thumb that WP creates when you first upload the image. The thumbs that FooGallery generate are within a “cache” folder within “uploads” so the problem could be a permissions issue whereby the “uploads/cache” folder cannot be created.

The thumbs for that image should be located in this folder:

https://drehmalerei.de/wp-content/uploads/cache/2019/11/A79FED23-53FD-4920-8328-9C20BA2382C1/

If you are only going to use 150×150 thumbs, then you could try editing the gallery, scrolling down to the Thumbnails metabox on the right and click Clear Thumbnails and enable “Force Original Thumbs” and then saving the gallery.
The thumbs

The thumbs for that image should be located in this folder

They are:

https://drehmalerei.de/wp-content/uploads/cache/2019/11/A79FED23-53FD-4920-8328-9C20BA2382C1/1138994264.jpeg

https://drehmalerei.de/wp-content/uploads/cache/2019/11/A79FED23-53FD-4920-8328-9C20BA2382C1/1046624637.jpeg

OK that is a good sign.

But the output Gallery HTML is still pointing to the wrong location. Can you edit the gallery, and save it again. This deletes any HTML cache for the gallery.

When you preview the gallery when editing, is it loading the generated thumbs or the same as the page on the frontend?

When you preview the gallery when editing, is it loading the generated thumbs or the same as the page on the frontend?

It loads the “wordpress-thumbnail” 150×150 px (not the one in cache directory).

I deleted the first photo from “Energie der Tiere” and saved the gallery. Then I re-added it and saved again.

The Gallery still loads the full size images.

When editing the gallery, under the Gallery Items metabox, there is the “Manage Items” view, or the “Gallery Preview” view. Make sure you have the “Gallery Preview” selected.

In that view, does the preview of the gallery load the correct thumbs?

1)
Ah, now I get you ??

In preview mode the gallery loads the correct thumbnails from the cache directory.

2)
I created a test page with only one gallery:

https://drehmalerei.de/test/

3)
Some strange behaviour:

I was keen enough to hit the “delete thumbnail cache” button on the lower right in the gallery editor.

After that, the thumbnails from that gallery were loaded correctly in the frontend – from the cache directory ??

… but …

Then I thought … ok, that’s the way to go. So I switched back to imagick and hit the “delete thumbnail cache” button again, expecting everything would be fine now. I was wrong. Full size images again.

Ok, no problem, seems to be an imagick problem, so I switched back to force gd. I go and hit “delete thumbnail cache” again, expecting to see the 150px thumbnails … again, my hope is shattered.

So I’ve finally seen FooGallery work correctly ONCE, but I have no clue how to motivate it to repeat that behaviour.

4)
Thanks for your help and quick replies. Please keep going until it’s fixed ??

Ok, now I’m totally confused ??

I did the same steps as before:
1. Removed one photo from the gallery and save
2. Re-Add the photo and save
3. Hit the delete thumbnail cache button
4. I looked at the test gallery page in the frontend from my pc – 150 px thumbnails – nice
5. Looked at the same page from my mobile – takes ages to load, probably the full size images
6. Looked at the same gallery WITHOUT MAKING ANY CHANGES from my pc – now it loads the full size images again – REALLY?

So I’ve seen it work correctly TWICE now ??

Did you implement some random behaviour to sometimes load the full size images? ??

• This reply was modified 4 years, 2 months ago by einexperte.