Layout Shift by slider on page-with-posts (2)

[MMWBAdmin]

Hi,

if I measure the performance of the homepage of my site www[dot]mmwb[dot]nl with the new GTmetrix (=Lighthouse) it caught my eye that some Layout Shift – 0,08 – is “caused” by

div class=’wvrx-posts’

This page shows the first 4 posts in a slider, followed by another 6 posts. With a 0,1 threshold there is little room for additional layout shifts.

On consecutive pages – [dot]nl/page/2/ etc. with no slider – the overall CLS is 0,04. On these pages-with-posts 10 posts are shown.

Would there be a solution to bring down the CLS on a page-with-posts that has a slider above the fold?

Using WP 5.5.3, PHP 7.4.12, WVRX 4.4.0.1, WVRX+ 4.0, Weaver Show Posts (V 1.5) & Show Sliders Plugins (V 1.4.10)

[Weaver]

Honestly, I am not familiar with much of the terminology in your question, so I don’t understand the metrics nor what the values might mean. I don’t know what you mean by Layout Shift or what threshold values mean.

But, is is very unlikely that there is anything very likely to happen with Show Sliders or Show Posts. Show posts doesn’t really do anything about displaying posts other than setting up the proper arguments WP uses to find and generate the content of posts, so that really depends on the speed of WP.

Show Sliders, in the other hand, is likely using fairly old JavaScript code to generate the sliders. It isn’t likely terribly show, but there might be other sliders that are faster.

I guess one unique thing about Show Sliders is that it can generate its content using Show Posts filters. The two combine to allow fairly complex combinations of post selection plus slider display.

I believer there are other sliders now that know how to display posts in the sliders, but I don’t know about the flexibility to select posts to display.

So, Show Sliders and Show Posts work, and we don’t really have the resources at this point to try to optimize speed, especially since they seem to perform pretty well now.

[scrambler]

I am glad I was not the only one 🙂

 

[MMWBAdmin]

Hi,

My take is that it is caused by the posts 5 to 10 being displayed before the slider with posts 1 to 4. Visible with e.g. Firefox Inspector in mobile modus. This causes a “layout shift” as the screen gets redrawn to insert the slider.

(homepage consists of page-with-post where first n=4 are skipped and a show_slider shortcode.)

[scrambler]

If you are speaking about a visual artefact, then give us the link to the page and describe how to best observe it (steps to take and where to look)

[MMWBAdmin]

Hi,

see the effect in first 3 seconds of this recording. Set speed to 1/4 in bottom right corner.

1.2 sec : posts 5 – 10 displayed

1.6 sec : empty slider appears (posts 5 – 10 pushed down)

1.8 sec : posts 1 – 4 in slider

2.0 sec : done

[scrambler]

We need a  link to the site page in order to inspect the site…

[MMWBAdmin]

http://www.mmwb.nl

[scrambler]

What I am seeing is simply the fact that it takes a tiny fraction of second to load the slider, so yes the page layout first includes the posts, and almost immediately these are pushed down by the slider.

But really, I would not even have noticed if I had not know that was there, so visually it is a non issue.

That said I noticed you are using a page with posts, and mixing a page with posts with a show post slider is not a good idea.

You should try recreating the page using the default template and using one showslider and one showpost shortcode to create the content.

May that will change the way things load.

 

[MMWBAdmin]

?????

Then I misunderstood  the instructions for the WVRX settings on pwp when creating the homepage several years ago.

One of the options allows you to “skip the first n posts and to start with displaying post n+1. Comes in handy when you use a plugin to show first “n” posts (e.g. Post slider)”.

And now you advise me not to use this template. I don’t understand your suggestion of “recreating the page using the default template and using one showslider and one showpost shortcode (????)

Btw. Have you visited my homepage on a mobile device? That way you can’t miss the layout shift.

 

[scrambler]

There are two ways to display posts.

Creating a page using the “page with posts template”, or using a regular page based on the “default” template, then inserting posts in its content using a show post shortcode.
The filter you create for a showposts shortcode has the same options as what you find in the page with posts template, so you can display the same posts in the same way with the show post shortcode.

What weaver explained a while back is that when you add a showpost or showslider posts to a “page with posts” template, you can run into problems with the way the WordPress Loop works.

So what I suggested is the following.

• Create a test page based on the default template.
• Create a Show posts filter that displays posts in the same way your current page with posts does.
• Add both your show slider followed by your newly created Show posts in that test page, and see if it loads any different.

To come back to your loading order issue, there may be a way to force the posts of a page with posts to wait for the slider (I am asking weaver below), but even if that is possible, that would not change the overall loading time.

But trying the above configuration could likely achieve that loading order.

@weaver, is there any way to control the loading order of the Slider added to the page with posts, so that the posts of the page with posts only load after the slider does?

[MMWBAdmin]

Hi Scrambler,

Can’t seem to get it to work … @ https://www.mmwb.nl/annex/test/  (/page/2/ etc)

(paginated > 30 pages)

In the original solution the slider (4 posts) on the pwp homepage is displayed with 6 additional posts (skip 4). On all conseucitive (home)pages just 10 posts (excerpt + FI, 2 columns) are shown.

Now I created a standard page and added 1) a shortcode for the slider and 2) a shortcode for the filter ‘allminus4’ (show all posts except the first 4).

This works fine for the first page (as long as I don’t use -1 in the filter settings to show all posts (?)). It gets paginated, but all pages are the same. On page 2 and following I don’t want to use the slider, just a number of posts (the next 10 posts).

Under the Basic options for the filter I checked the box: Use Paging (posts will be paged using Number of Posts per page). Is this Number of Posts the WP-setting (under Settings -> Read)? But this paging (10 posts) does not seem to work …

 

[MMWBAdmin]

Hi Scrambler,

on the new page the results of the 2nd shortcode (show posts) are displayed earlier than the 1st shortcode (show slider) (???) and the “div class="atw-show-posts atw-show-posts-filter-allminus4"  ” contributes 0.09 to the layout shift.

[scrambler]

You could hide the slider on succeeding pages with the CSS rule below

.page-id-19833.paged #atwkslider-homepslider-1 {display:none;}

But that is no use as it does not solve your loading problem.

@weaver, this thread is raising a few questions.

1) On a page with posts, if adding a slider at the top, the posts load before the slider. Is that normal/changeable?

2) On a default page with two shortcodes, first a showslider then a showpost, the showpost loads first, is that normal/changeable?

The issue with the bottom content (the posts) loading before the top content (the slider) is that it does create a page shift which is unpleasant to a reader. Could the issue be with Showslider that would always load after everything else?

3) If adding a showpost shortcode to a page with content, the content shows on every paginated page not just the first one. Should that be considered a bug, or should you may be have an option of not reloading the page content on succeeding pages triggered by a showpost shortcode?

[Author]

Posts