[eme_events] Performance / Load times / Loading Animation?

[Anonymous]

Hello Franky,
a couple of questions regarding performance.
Our event count is growing, at the moment we are at 180 total, each in one of 20 unique EME categories. Not too many, but not exactly nothing either.
Our main event listing page takes 15 categories as parameters and shows 81 events at the moment, using the shortcode [eme_events category=1,2,4,5,6,7,8,9,10,11,12,13,14,15]
So far, so good.

Right now, this takes around 15 seconds before we see the browser do anything. From the perspective of the user, it “just sits there” for this amount of time, before it starts painting the page.
So am I right in assuming that this idle/wait time is the time EME/PHP needs to read and process all events from the database? Because I noticed this time decrease with fewer events being displayed on our other pages, using single categories as shortcode parameters.

Please understand that I’m not complaining here or even the time the loading needs. Also, I’m aware that there are many factors outside EME at play, too, like the web host and database performance etc.

But here’s my question. Since it might not be the best user experience to see nothing happening, plus the time needed to show the events only will get longer and longer with our increased number of events:
is there a way to have some sort of progress bar or a text loader info coming from EME? Like “Stand by while events are loading” or similar?
We do use a page loading animation for all pages on our site, but this only kicks after EME(PHP?) has processed the page.
Any thoughts or ideas on this?

Finally, are there any additional general tips/settings one might use to make sure performance is not hindered?

Thanks!

[Franky]

Well, the reason is the subpar method EME currently uses to find events belonging to a certain category.
Currently it is all inside 1 column, but the sql uses FIND_IN_SET for each of your mentioned categories, causing this latency.
I’m thinking about changing that, feel free to motivate me 😉

[Anonymous]

Of course, I’m happy to sponsor this, as always.

But before, 2 questions:
1) Can we be sure that it is in fact the FIND_IN_SET / looking for categories causing this? Because I experience the same latency if I use [eme_events] without any parameters whatsoever. Takes even longer, in fact, because when all events are shown, there’s a latency of nearly 30 seconds for us with 180 events…

2) Is there a way you (or I myself) can implement a loader info, regardless? Even when the latency gets decreased, it probably will still take a few seconds, right?

[Franky]

Sorry, the way wordpress is implemented limits certain things. Showing info on 180 events causes a lot of extra database lookups as well, in fact almost all related to category lookups. I wasn’t even aware it was that bad …
This query happens for each event if you decide to show/use the category name somewhere.

SELECT category_name
FROM wp_eme_categories, wp_eme_events where event_id = 1787
AND FIND_IN_SET(category_id,event_category_ids)

Each query takes (in my case) on average 0.0005 seconds, so in total for 180 events that will be about 0,1 sec. But next to those, other queries happen (although I do try to minimize these).

You can always install the tool called Query Monitor, which allows you to visualize/check all queries made (deactivate it when not needed), even per plugin.

I’m evaluating my code too btw …

[Anonymous]

So I installed Query Monitor (great tip, btw) – and then something strange happened: there are some EME event pages that don’t render at all anymore, when Query Monitor is activated. If I’m logged in as admin, on Chrome, I get an HTTP 500 Error, Firefox just shows a blank page. If logged out, all renders fine, and no PHP errors whatsoever.
What’s strange is, that other EME event pages that use fewer categories and therefore show fewer events everything work fine, and I can see the Query monitor stats:
for an event page that shows 36 events, I see around 2,400 SQL queries. I have to admit that my event template uses the #ESC_EVENTCATEGORYIDS and #_EVENTCATEGORYIDS placeholders quite heavily, which probably might lead to this enormous number of queries, correct?

I then suspected that there might be a plugin conflict with Query Monitor, so I deactivated everything except EME and Query Monitor and then the pages loaded again. After reactivating the plugins one by one, it seemed that Jetpack and EWWW Image Optimizer don’t play nice with Query monitor.

And now, having gone through all this, the page load speed for one test page is now down from 15s to 8s and the full 181 events page loads now in 23s instead of 30s. Perhaps de- and reactivating the plugins made a difference.

Anyway, the performance issue seems indeed coming from the category lookups, am I seeing this correctly?

But like I said, I can live with the way things are – if I had a way of showing a progress bar or something of that nature – that starts when EME starts the queries and finishes just before the results get sent to the browser… Would that be possible?
Thanks!

[Franky]

36 events and 2400 SQL queries will indeed bring your system to a halt. I’m very curious in the template you use, maybe optimization is possible …
A wordpress shortcode loading animation is not something that I’ll do though. I checked around and found nothing that hints on how to do that (so not even sure it is possible in wordpress).

[Anonymous]

Thank you for following up!
Too bad about the laoding animation, but again – thank you very much for investigating and spending the time!

Finally, here’s my event listing template – it might look a little weird at first, but I need to show a custom display format for the event dates, depending on the event category.
Also, I created my own JavaScript filter for events, and a custom excerpt, too, and so that’s why there’s even more category based business on the opening div with the [data-to-filter data-tags] attributes…

<!-- Eventlist  Template -->
<div class="now-eventList-event nowProgramType-#_EVENTCATEGORYIDS" data-to-filter data-tags="#_CONTACTFULLNAME||[eme_if tag='#ESC_EVENTCATEGORYIDS' eq=1][eme_if2 tag='#ESC_FIELDVALUE{17}' eq='1+2']Session 1 & 2||Tuesday 23/08||Wednesday 24/08||Friday 26/08||Saturday 27/08[/eme_if2][eme_if2 tag='#ESC_FIELDVALUE{17}' eq='1']Session 1 only||Tuesday 23/08||Wednesday 24/08[/eme_if2][eme_if2 tag='#ESC_FIELDVALUE{17}' eq='2']Session 2 only||Friday 26/08||Saturday 27/08[/eme_if2][/eme_if][eme_if tag='#ESC_EVENTCATEGORYIDS' ne=1]#_STARTDATE{l d/m}[/eme_if]||#_EVENTCATEGORIES||#_FIELDVALUE{4}||Workshop Style: #_FIELD{5}||#_FIELD{6}">
    <dt class="now-eventName">#_LINKEDNAME</dt>
    <dd>
        <div class="now-presenterColumn">
            <p class="now-presenterImage"><a title="View #_CONTACTFULLNAME's Detail Page" class="icon" href="/presenter-details/?prid=#_CONTACTRANDOMID">#_CONTACTIMAGETHUMB</a></p>
            <p class="now-presenterName" data-presenter="#_CONTACTFULLNAME"><a title="View #_CONTACTFULLNAME's Detail Page" href="/presenter-details/?prid=#_CONTACTRANDOMID">[eme_if tag="#ESC_CONTACTFIELD{21}"]#_CONTACTFIELD{21} [/eme_if]#_CONTACTFULLNAME</a> <br>
                <span class="now-presenterFrom">[eme_if tag='#ESC_CONTACTFIELD{13}']#_CONTACTFIELD{13},
                    [/eme_if]#_CONTACTFIELD{12}</span>
            </p>
        </div>
        <div class="now-eventDescriptionColumn">
            <h3 class="nowProgramType-#_EVENTCATEGORYIDS now-eventName"><a title="View Event Details" href="#_EVENTPAGEURL">#_EVENTNAME</a></h3>
            <p class="now-excerpt"></p>
            <div class="now-emeDescription">#_EXCERPT</div>
        </div>
        <div class="now-eventDataColumn">
            <p class="now-date-location">
                <span class="now-eventCategory">[eme_if tag="#ESC_EVENTCATEGORYIDS" ge=4][eme_if2 tag="#ESC_EVENTCATEGORYIDS" le=6]<a title="View All Workshops" href="/events-workshops">#_EVENTCATEGORIES</a>[/eme_if2][/eme_if]
                    [eme_if tag="#ESC_EVENTCATEGORYIDS" lt=4]<a title="View All #_EVENTCATEGORIES_CSS Events" href="/events-#_EVENTCATEGORIES_CSS">#_EVENTCATEGORIES</a>[/eme_if]
                    [eme_if tag="#ESC_EVENTCATEGORYIDS" gt=6]<a title="View All #_EVENTCATEGORIES_CSS Events" href="/events-#_EVENTCATEGORIES_CSS">#_EVENTCATEGORIES</a>[/eme_if]</span>
                <span class="now-eventDate">[eme_if tag="#ESC_EVENTCATEGORYIDS" eq=1][eme_if2 tag="#ESC_FIELDVALUE{17}" eq="1+2"]Tue 23 & Wed 24 (Session 1)<br> Fri 26 & Sat 27 (Session 2)[/eme_if2][eme_if2 tag="#ESC_FIELDVALUE{17}" eq="1"]Tue 23 & Wed 24 (Session 1)[/eme_if2][eme_if2 tag="#ESC_FIELDVALUE{17}" eq="2"]Fri 26 & Sat 27 (Session 2)[/eme_if2][/eme_if][eme_if tag="#ESC_EVENTCATEGORYIDS" eq=2][eme_if2 tag="#ESC_FIELD{18}" contains="REPEATING"]Tuesday through Saturday[/eme_if2][eme_if2 tag="#ESC_FIELD{18}" notcontains="REPEATING"]#_STARTDATE{l, d F Y}[/eme_if2][/eme_if][eme_if tag="#ESC_EVENTCATEGORYIDS" gt=2]#_STARTDATE{l, d F Y}[/eme_if]</span><br>
                <span class="now-eventTime">[eme_if tag="#ESC_EVENTCATEGORYIDS" eq=1][eme_if2 tag="#ESC_FIELDVALUE{17}" eq="1+2"]9-11h & 15-17h (Session 1)<br> 15-17h & 9-11h (Session 2)[/eme_if2][eme_if2 tag="#ESC_FIELDVALUE{17}" eq="1"]9-11h & 15-17h[/eme_if2][eme_if2 tag="#ESC_FIELDVALUE{17}" eq="2"]15-17h & 9-11h[/eme_if2][/eme_if][eme_if tag="#ESC_EVENTCATEGORYIDS" eq=2][eme_if2 tag="#ESC_FIELD{18}" contains="REPEATING"]9-11h / 15-17h / 9-11h<br> 15-17h / 9-11h[/eme_if2][eme_if2 tag="#ESC_FIELD{18}" notcontains="REPEATING"]#_STARTTIME h - #_ENDTIME h[/eme_if2][/eme_if][eme_if tag="#ESC_EVENTCATEGORYIDS" gt=2]#_STARTTIME h - #_ENDTIME h[/eme_if]</span><br>
                <span class="now-location">#_LOCATIONNAME</span>
            </p>
            <div class="now-eventDetails">
                <p class="now-wsCatTitle">CATEGORIES<br><span class="now-WorkshopCategories">#_FIELDVALUE{4}</span></p>
                <p class="now-WorkshopStyle">#_FIELDVALUE{5}</p>
            </div>
            <div class="now-wsStyle">
                <p>WORKSHOP STYLE</p>
                <div class="now-rangeSlider">
                    <div class="now-rangeIndicator">▼</div>
                    <p class="caption1">Fully Practical</p>
                    <p class="caption2">Lecture</p>
                </div>
            </div>
            <p class="now-WorkshopOpen">OPEN FOR<br>
                <span class="now-OpenFor">#_FIELDVALUE{6}</span></p>
        </div>
        <div class="now-detail-button">
            <p><a href="#_EVENTPAGEURL" class="eme_submit_button now-eventButton" title="#_EVENTNAME">View[eme_if tag='#ESC_EDITEVENTURL']/Edit [/eme_if] Details</a>
        </div>
    </dd>
</div>

[Franky]

Well, using that template I got a whopping 9000 queries on my list 🙂
Seems that it is not really the category causing the problem, but more getting the person info and the custom field info.
Adding some internal caching brought it down to 252 queries. So, if you’re interested … 😉

[Franky]

Even brought it down to 90 queries now, more optimizing would become too much.

[Franky]

I hope you like the just released version, it should be a considerable speed gain for your page loading 🙂

[Anonymous]

Sorry, for being out of touch, I had been travelling.

But – WOW!

You are a true master, and the performance gain is amazing.
Outstanding work, I’m really grateful.
And I just sent a ‘Thank You” your way.
👍

[Franky]

Glad to be of help. I’m curious though: what is the performance gain? And what is the current number of queries?

[Anonymous]

It is really amazing – with browser caching the loading time of the “biggest” page with all our relevant events went down from 30 seconds to less than 4 seconds now – with EME doing 467 queries, whereas before I couldn’t even tell because the page wouldn’t load with Query Monitor active.
The second-largest page came down from 15s to 2.6s, queries from 2400 down to a meager 234! And that with 42 events now on this page, compared to 36 from last week.

There is another page (https://now2022.de/presenters-all/) where we show presenters (and some event categories they are doing) – here the gain is also quite good. I don’t have the exact numbers from before, but on the page where there are all presenters (currently 58, with the template below) we have a loading time of 4.5s now with 799 EME queries.

So all in all a big win. Thank you again!
A.

Here’s the template for our presenters list

<ul>
 	<li class="now-presenters-list-presenter" data-to-filter="" data-tags="#_FULLNAME||[eme_events category=1,2,4,5,6,7,8,9,10,11,12,13,14,15 contact_person=#_PERSONWPID template_id=58]">
<div class="now-eventDescriptionColumn">
<div class="now-presenterHeader">
<div class="now-presenterColumn">
<p class="now-presenterImage">#_IMAGETHUMB{thumbmail}</p>

</div>
<h2 class="now-presenterName now-eventName" data-presenter="#_FULLNAME">[eme_if tag="#ESC_FIELD{21}"]#_FIELD{21} [/eme_if]#_FULLNAME
<span class="now-presenterFrom">[eme_if tag='#ESC_FIELD{13}']#_FIELD{13}, [/eme_if]#_FIELD{12}</span></h2>
</div>
<ul class="now-eventCategoryList">[eme_events category=1,2,4,5,6,7,8,9,10,11,12,13,14,15 contact_person=#_PERSONWPID template_id=31]</ul>
<div class="now-detail-button">

<a class="eme_submit_button now-eventButton" title="View #_FULLNAME's Detail Page" href="/presenter-details/?prid=#_RANDOMID">Presenter Details</a>

</div>
</div>
<!-- Hidden Presenter Category for JavaScript to change Person's color scheme -->
<p class="now-presenterCategory">[eme_events contact_person=#_PERSONWPID template_id=17]</p>
</ul>

[Franky]

I’m willing to try and bring down the queries there too. But using several [eme_events] shortcodes on one page is limiting me of course 🙂 Which shortcode do you use to render your list of presenters?

[Anonymous]

That would be amazing, of course. Even though I didn’t mean to imply that
But all the more very appreciated 🙏

This is the shortcode I’m using
[eme_people group_id=1,6,7,25 order="firstname ASC" template_id=1 template_id_header=15 template_id_footer=16]

[Franky]

I implemented some small optimizations in dev, feel free to test out dev.

[Anonymous]

Very nice! Thank you.

With the dev version, the EME queries for my template came down from 828 to 591. Like you were not too huge but an improvement nonetheless. And the overall performance has already improved significantly.
So I’m a happy camper now 🙂

Thanks again for all your hard work

[Franky]

Well, queries down 28%, so all in all not that bad 🙂

[Anonymous]

Absolutely, yes – didn’t do the math, but you are right: 28% is really something.
Great job. Thanks!

[Author]

Posts