Page with Matrix field slow to load

Question

I am fairly new to Craft CMS but have a good understanding of it. I have a page that has a Matrix field to display staff photos and their roles.

On the initial load of this page, it is slow, it takes nearly 22 seconds. It is only 1meg of data.

Some stats on the initial load: • DB queries 200 • 22 seconds to load

Once it has been loaded into the cache it is much better: • DB queries 165 • 1.6 seconds to load

I have tried eager loading the image field and image transform with no speed increase:

{% set teamMembers = entry.teamMembers.with([
        ['blockType:image', {
            withTransforms: ['teamMemberSmall']
        }]
    ]).all() 
%}

It's not a huge amount of data so I would have thought this could be much faster. Based on the profiling it looks like it is the asset transform generation that is killing the page. Any tips or tricks I can do to get that initial page load faster? Can the assets be pre-generated?

Server stats:

• PHP 7.2
• MYSQL 5.5
• Memory Limit 256mb

Answer 1

I used to have the same issue then I started using Eager Loading Element. It allows you to speed up your craft cms templates by fetching matrix from the database more efficiently.

You can refer to this link which might help you for further understanding of Eager Loading.