Collection items in a Masonry view mode are loading very slow

[Daniel_G]

Dear friends,

I created a WordPress website using Tainacan for the university where I study, which contains students’ projects defined by some metadata and images. I use the collection page to display them using the Blocksy theme and Blocksy Companion for Tainacan.

Unfortunately, the loading time of the projects within the collection (for example, in Masonry view mode) is high: 5-6 seconds for 12 elements and 7-8 seconds when I change to 96 items per page.

This is the page of a collection:

Art&Design Faculty - Projects

Any insight or help will be really appreciated.

I use Docket Cache, WP Super Cache, and a3 Lazy Load, but no improvement so far.

Thank you so much.
Daniel Ghita

[mateus.m.luna]

Hi @Daniel_G, welcome to our community!

Sorry for taking long to reply, I was a bit busy this days.

I really enjoy the customization that you’ve made on the theme, the item page is specially nice! Please don’t hesitate to share your project with us once you fill it is complete, we should definitely have it in our showcase.

While for me the loading does not feel that slow, I can see the /metadata and /items requests taking almost 2 seconds each. These are REST API requests and therefore not always affected by Cache plugins that store mainly file assets such as scripts, style-sheets or pages. I don’t know if maybe one of your plugins offers options to cache REST API results, could be a thing to try…

One thing to investigate is to make sure if your database does not contain trash or content that was loose from import processing and activity logs. If you have access to your server, we have a CLI command for garbage collection. Tainacan uses WordPress database and tables, so if you have thousands of posts, pages, or even activity logs, they may impact your items loading time. Can you figure out how many posts there are in your wp_posts table? I mean posts with any post_type, not only those that arepost.

I know it will sound naive but one small thing that I believe affects the user experience there is that we’re not seeing the loading indicator. That gives the impression that nothing is working while most of the components are already fetch, it’s just the items that are being build. That is a bit my fault. I added a css variable that makes the “skeleton loading component” the same color of the item card. As your item card is white, it is mixed with the background. here is a screenshot of it if the card was light gray:

Those gray boxes blink while the items are not fetch, giving a sense of “work is being done”. I’m planning on fixing that default color in the next releases do separate it from the card color. Meanwhile, you could solve that with custom css via Customizer → Custom CSS:

.theme-items-list {
   --tainacan-skeleton-color: #f2f2f2;
}

Fo further investigations we would need to know more details about your server configuration and system diagnostic. Feel free to bring any other questions!

[Daniel_G]

Dear @mateus.m.luna,

Thank you very much for your reply. We’ll definitely be happy to share our project in your use cases section once it is launched.

Regarding your previous questions and suggestions:

• I applied CSS that makes the boxes blink while loading. That’s awesome, and it also eases the impatience of the viewer a bit.

• I ran the CLI commands that clear the garbage and reindex the database (see CLI.csv)

  CLI.csv (4.9 KB)

• Our database currently looks like this: see wp_posts.csv

  wp_posts.csv (636 Bytes)

• Here is the PHP info page for the server. Since this is a managed server provided by our host, we don’t have root privileges, only access to a shared webspace. Let me know if there is some information you need so I can ask our hosting provider.

  http://stud.ue-germany.de/phpinfo.php

Best regards,

Daniel Ghita

[mateus.m.luna]

Hey @Daniel_G sorry for the lack of answer.

Your CLI commands output and phpinfo seems ok.

Looking in the wp_posts, you can see that the great majority of posts are logs (`tainacan-log`). If you are ok with it, would you ming clearing the older ones? If you have access to the WP CLI you can use it for that, filtering by date and post_type, for example. Aside from that there is not much I can guess by now that could justify too slow loading time.

We have one page in our Wiki (again only in Portuguese, sorry) that covers some tweaks that can be tried to test performance improvements:

Tainacan Wiki

most of them are related to defining some constants in wp-config.php. In our next version (1.0.0), which should be out in a few weeks, those constants will be exposed via UI to be edited, so it will be easier to perform tests and see how they affect the loading speed, In any case, each of them will have its trade offs.

[Daniel_G]

Hi @mateus.m.luna,

Thank you so much for your reply.

Well, the collection (Art&Design Faculty – Projects – search) is coming together nicely with the latest changes I made thanks to your great plugin . I noticed two things while using one of your optimisation suggestions:

a) The apostrophe in the syntax:
define(‘TAINACAN_API_MAX_ITEMS_PER_PAGE’, 96);
is not the one accepted by PHP — just as feedback in case you’d like to update this line on your documentation page.

b) On the other hand, when I changed the maximum limit to 48 items per page for collections, the limit itself updated, but the range did not. I believe this might be a bug. Could it be fixed?

Best,
Daniel

P.S.: I’ve opened another topic regarding metadata URL vs. hyperlinks in metadata text or text area.

[mateus.m.luna]

@Daniel_G

a) The apostrophe in the syntax:
define(‘TAINACAN_API_MAX_ITEMS_PER_PAGE’, 96);
is not the one accepted by PHP — just as feedback in case you’d like to update this line on your documentation page.

Thanks, that is an issue in our documentation, I’ll fix there.

@Daniel_G

b) On the other hand, when I changed the maximum limit to 48 items per page for collections, the limit itself updated, but the range did not. I believe this might be a bug. Could it be fixed?

Uhm… I’ll take a look at that, it does seems like a bug.

[mateus.m.luna]

@Daniel_G please give the pagination another try with Tainacan 1.0.0 released today. You can also get rid of your constant in the wp-config file and use the new “Tainacan” → “Others” → “Settings” screen.

[Daniel_G]

Hi @mateus.m.luna,

Problem solved. Thank you so much! And the new interface looks great!