Add width and height to reactions

[Ibai]

Hi,

Another thing I always change in every template I customize is the size of the reaction icons. This is sth suggested and reported by PageSpeedTest.

You can find in reactionOverview template bit, for instance:

<img src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}" loading="lazy">

I always change for the folloging

<img src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}" loading="lazy" width="28" height="28">

There is another template bit to change: searchReaction.

Any chances to have this as standard? Do you think it's a good idea?

Cheers,

Ibai

[Adlago]

17 minutes ago, Ibai said:

Hi,

Another thing I always change in every template I customize is the size of the reaction icons. This is sth suggested and reported by PageSpeedTest.

You can find in reactionOverview template bit, for instance:

<img src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}" loading="lazy">

I always change for the folloging

<img src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}" loading="lazy" width="28" height="28">

There is another template bit to change: searchReaction.

Any chances to have this as standard? Do you think it's a good idea?

Cheers,

Ibai

1. Loading = lazy makes loading icons delay, but does not onload them after loading the page, data-src should be added

2. Actual size of icons is 24 x 24, so this size should be specified in link

3. For responsive rendering, you should also add, for example, class=react, respectively, add the necessary in the custom css, and neutralize the original max sizes from the framework css.

4. Link should be edited in templates reactionBlurb and reactionOverview

I use this:
Link edited

<img class="react" src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$reaction->_icon->url}' alt='{lang="reaction_title_{$reaction->id}" escape="true"}' width="24px" height="24px" loading="lazy">

Custom css

.react{width:28px;height:28px}
.ipsReact_reactCount img {max-width: 28px;max-height: 28px;}
@media screen and (max-width: 767px) {
 .react{width:20px;height:20px}
}  

 

[Rikki]

21 hours ago, Adlago said:

. Loading = lazy makes loading icons delay, but does not onload them after loading the page, data-src should be added

Yes it does - loading="lazy" is a browser-native lazy loading approach, so you just include the src as normal. The data-src version is if you're using the custom JS lazy loading approach (and there's no benefit of doing that for reaction images).

[Adlago]

1 hour ago, Rikki said:

Yes it does - loading="lazy" is a browser-native lazy loading approach, so you just include the src as normal. The data-src version is if you're using the custom JS lazy loading approach (and there's no benefit of doing that for reaction images).

I had a period of previous versions where I used a custom JS. But since a few versions ago, I found that your original JS processes data-src. I.e. no custom JS required.
As for Reaction images, there are many sites that are overloaded with too many of these images - ie. using the mechanism I mentioned above, these images are loaded after page rendering, which even slightly speeds up site loading.

[Rikki]

1 hour ago, Adlago said:

I found that your original JS processes data-src. I.e. no custom JS required.

Well, by custom JS I meant the JS inside IPS4. It doesn't make sense to rely on JS at all for lazy loading simple images these days, so I'd go with loading="lazy".

[Adlago]

22 minutes ago, Rikki said:

Well, by custom JS I meant the JS inside IPS4. It doesn't make sense to rely on JS at all for lazy loading simple images these days, so I'd go with loading="lazy".

Of course, loading=" lazy" provides a delay, but within an rendering site time, ie. such images are loaded after other resources but before site rendering,  i.e. influence of lazy load used for loading image is small. But when data-src is added to the link as I have indicated, of course also with lazy load, then images are loaded after the site is rendered - and this creates site acceleration.

[Ehren]

Thanks for your feedback @Ibai. The next major version of Invision Community will be focusing on performance improvements such as this (adding width/height attributes, using native lazy loading, etc). We don't have any information to share yet, but things like this will be implemented by default in the future 🙂

 

On 3/14/2023 at 6:47 AM, Adlago said:

I use this:

Link edited

<img class="react" src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$reaction->_icon->url}' alt='{lang="reaction_title_{$reaction->id}" escape="true"}' width="24px" height="24px" loading="lazy">

 

The width and height tags only support numerical values. Adding units will make them invalid. Instead, you should simply use width="24" height="24"