Is there a way to eager-load fields in a global set?

Question

I use a header global set to store various thing about my site header, including the company's logo.

I use it in my template like this:

{{ header.globalSetsHeaderLogo.one()logo.getImg() }}

Any idea on how I could eager-load this?

Answer 1

I know you can use this method to eager load fields on injected entry/category variables, so I'm assuming it would work for global sets as well:

{% do craft.app.elements.eagerLoadElements(
    className(header),
    [header],
    ['globalSetsHeaderLogo']
) %}

{{ header.globalSetsHeaderLogo[0].logo.getImg() }}

You can find out more about this method for eager loading in this blog post by Andrew Welch.

Answer 2

Do you mean lazy load or eager load?

Usually you lazy load images via JS to speed up site loading but not I'm not sure doing it to one image across multiple pages is all that beneficial?

After the initial load, the browser should cache that image and "reuse" it. However, querying the global set certainly has a cost on the database.

As far as eager loading, not sure it'll make a huge difference here and it looks like you're not outputting any transforms but you might consider using, say, {% cache globally %} tag on your header. That'll save you some db queries that can have an affect on performance.