How to keep Bootstrap Carousel paused until it enters the viewport

JavaScript
45

You have inlines styles of margin-left:55px and one of 5px that can be moved to these rules.

.cookiealert-container .cookies{
  margin-left:55px;
}
.cookiealert-container .acceptcookies{
  margin-left:4px;
}

Bear in mind those rules must follow after the cookie css or the cookie css overwrites it. (I am not sure why you are doing this anyway as that means the text is no longer perfectly centred in the available space because it is offset by 55px.)

You seem to be making progress :slight_smile:

That’s not really a topic I would like to get involved in and I suggest you copy some of this last post and start a new thread in general web development forum as its a broad subject (and not my forte).

My personal view is that those sort of speed topics are really for larger more intensive sites and if you are using a framework like bootstrap you have negated any efficiency benefits anyway as you are loading a massive framework when you could have used a few lines of basic css. That’s not to say that bootstrap doesn’t have merit but it does come with massive overheads.

When you talk about FCP you would be looking to inline all the code that produces the first content paint of the above the fold content and deferring any scripts etc. I don’t believe that is something that will be useful for a bootstrap site because if you can do that then you would not have needed the framework in the first place (catch 22 again). :slight_smile:

It’s good that you are taking your time to look at these issues though because awareness is key :wink:

46

Hi there! Hope you’re doing okay :slight_smile:

As promised, just posting back with an update on progress.

Over the past few weeks, I’ve continued with the testing of my main site including further optimization of images to reduce their file size, minifying my custom CSS and adding this into one combined stylesheet together with Bootstrap CSS, Cookiebar CSS, and Lazyload CSS.

The test site we’ve been working on is now running with this combined CSS. I’ve also enabled mod_deflate Gzip on my hosting server to compress my web pages before they are sent over the internet.

Testing has been carried out on iPhone and Android, also on desktops and laptops using Firefox, Chrome, Edge, and Opera.

I’ve run each of my 97 pages through the WC3 validator and found only a handful of minor problems including an occasional stray end tag here and there all of which have since been carefully worked through and corrected.

All pages now pass validation apart from the one page using lazyload to delay the loading of about 30 images below the fold and which includes the following kind of code structure

<img class="card-img-top" data-src="img/webp/ukcho-ukhr-ccc.webp" alt="UKCHO, UKHR, CCC, logos"></div>

The validator reports:

Error: Element img is missing required attribute src.

I’m not sure if anything can be done to correct this other than stop using lazyload, which is working just fine because if I replace data src with img src the lazyload won’t work.

I’ve also experimented with https://www.corewebvitals.io/tools/critical-css-generator

Having entered the URL of my index page this tool crawls and extracts from the huge Bootstrap stylesheet only the CSS necessary to run my page. I’ve included this critical CSS into the head of my page, with the link to the main bootstrap CSS deferred using the code suggested by the tool, but my page doesn’t load properly with the carousel, and some other elements below the fold including buttons and text, either failing to load or broken in some way or another.

After much experimentation, I’ve basically given up on this idea and have reverted back to running with my minified and combined CSS which not only works as intended but also improves page loading speed.

I’ve also eventually managed to get my contact page with Google Recaptcha working properly with a working version of this now also up and running in the test site we’ve been working on.

I’m slowly trawling through each and every one of my pages testing it visually across as many different devices as I have available to me, and as I occasionally discover anything that might need a tweak I’ll immediately attend to it. Hopefully, I’ll end up with a site that looks as good as I can make it.

Oh, and I’ve also run link checkers across my site and corrected any broken links.

I’ll post back with further updates as these become available, and thanks again for all your help.

47

Usually you have both but the image src can be a data uri of a 1px x 1px transparent pixel (usually about 80bytes only and no http requests) which the lazyload swaps out for the real source. I didn’t look at what you were using but that’s generally how its done.

These days though I would avoid the js version and just use the native html loading=“lazy” attribute as its supported in modern browsers now.

48

Thanks for the info :slight_smile:

So from what you’re saying I can replace this

<img class="card-img-top" data-src="img/webp/ukcho-ukhr-ccc.webp" alt="UKCHO, UKHR, CCC, logos"></div>

with this

<img class="card-img-top" img src="img/webp/ukcho-ukhr-ccc.webp" loading="lazy" "img/webp/ukcho-ukhr-ccc.webp" alt="UKCHO, UKHR, CCC, logos">

and my image will only load when the user scrolls down and this image enters the viewport.

I can then remove the Lazyload JS and CSS.

Is this correct?

49

Not quite you left some rubbish in there. :slight_smile:

<img class="card-img-top" src="img/webp/ukcho-ukhr-ccc.webp" loading="lazy" alt="UKCHO, UKHR, CCC, logos" width="500" height="300">

You can read about it here:

As to whether its is better or worse than a JS equivalent would need research. I suggest you test both methods to see what works best for you.

You probably want to include the image dimensions in the html tag (or an aspect ratio technique) to avoid reflow problems when the image actually loads.

I’m not a fan of lazy loading of images or deferred loading as I think it just moves the initial delay to some other point in the process. In the end all resources all have to load. I’d much prefer to wait at first load and then be able to scroll up and down without stuff only loading when I scroll to it and then having that jerky scrollbar effect. :wink:

50

Hi again :slight_smile:

In your reply you mention

You probably want to include the image dimensions in the html tag (or an aspect ratio technique) to avoid reflow problems when the image actually loads.

Here is a block of code I am using on my page

<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="img/webp/stress-management.webp" loading="lazy" alt="Stress Management">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Text
</div>
<div class="card-footer">
<a href="" title="" class="btn btn-primary"> &raquo;</a>
</div>
</div>
</div>

The image I am using for each card has dimensions of 300px x 200px which is the size that is specified for this purpose in the original Startbootstrap template my site is based on.

When I test with Pagespeed it suggests

Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

But when I specify a width of 300 and a height of 200 my images appear horizontally stretched when viewed on smaller screens including my iPhone and Android. Removing the width and height instantly corrects this.

Is there any way for me to fix this?

51

No you need to specify the actual dimensions of the image in the attributes (not css). Use the size it was actually created at using attributes as I showed in my example. The browser uses these attributes to work out the aspect ratio and preserve space etc even if changed later by css.

<img class="card-img-top" src="img/webp/ukcho-ukhr-ccc.webp" loading="lazy" alt="UKCHO, UKHR, CCC, logos" width="500" height="300">

That means that width=“500” height=“300” is the real size of the image that you are fetching (change to match the actual size of course).

Then you can change the size in css to match where you place the image but you must maintain aspect ratio. If you say they weren’t squashed before then you must have something in place to do this already (such as img{width:100%;height:auto;} or indeed object-fit:cover if both height and width in css have unit values.).

52

Okay, so at the moment my images are sized at 300px x 200px, and all display perfectly without any signs of stretching or squashing on desktop, laptop, or mobile. When I add width=“300” and height=“200” as in your example the images appear instantly squashed and stretched. I checked out “card-img-top” in the Bootstrap CSS and as far as I can remember it’s showing as {width:100%;height:auto;}.

So from what you’re saying, should I be adding my own “hook” (as you taught me earlier) to the “card-img-top” so that I can set an explicit width and height for the container to 300x200?

What about the Bootstrap auto width and auto height, should these remain or is it likely that this are contributing to the problem?

53

So how are you setting them to those sizes.? They can only be those sizes if you have done something to change them from what they were originally. Otherwise they would be at their natural size.

I’d need to see the example of where you say it is wrong in order that I can fix it :slight_smile:

54

I think perhaps what I was trying to say is that when I saved my images in Photoshop the dimensions were set as 300 x 200 but I guess that unless I specify this in my HTML or CSS the browser will just stretch or squish them as it likes. Although I still don’t understand why it is that if I set the dimensions to 300 and 200 in the HTML attributes the browser still stretches them. To me, this implies that my images are not large enough in the first place if it needs to stretch to fit? Okay, I’ll set up a new test page for this and post back here once this has been done.

1 Like
55

Sorry for the delay :slight_smile: I’ve just put up a new test page including 2 rows with images that highlight the problem we’ve been discussing. Scroll down the page to see the images. The first row has images without a width and height specified and which appear to display properly with no stretching or squashing. The second row has the same images with width and height specified in the attributes. These images appear stretched and squashed. What needs to be done so that width and height can be specified but without my images appearing deformed? Here’s a link to the new test page: https://cleardirectionhypnotherapy.co.uk/index-2.html

56

That’s because you have not allowed the images height top be auto in the css. Flex stretches the image to 100% of its container but as the iimage is 200px high it stays at 200px.

In the first example the browser is nt restricted by that height and treats it as height:auto by default.

You just need to add this:

.card-img-top{
height:auto;
}

To reiterate you need the real image dimensions in the attributes (which you now have on those new images and this will stop reflow and also allow the browser to know how much space to allocate).

Your css is stretching the image to 100% (because of flex) which is why you also need to tell the browser not to make the height:200px but auto so that aspect ratio is maintained. That’s the best way to handle this.

Without the attributes in place the browser won;t know how big the image is (even if it is resized with CSS) and will either wait while the image loads or get on with other stuff leaving the page to reflow awkwardly as images get loaded. Once the browser sees the attributes in place it says ok I need this much room and carries on with other stuff while the image loads.

57

Thanks for the info.

Just to confirm, I should add this

.card-img-top{ height:auto; }

to my custom stylesheet, and not inline or directly to the Bootstrap CSS. Is that correct?

58

I’ve added .card-img-top{ height:auto; } to my custom CSS and my images now display properly without any stretching or squashing. I’ve applied the changes to the test page I put up yesterday. I’ll continue to test my site and report back here with updates throughout the process. Thanks again, Paul.

1 Like
59

Running Pagespeed against my index page and under diagnostics it reports

Avoid large layout shifts 1 element found. These DOM elements contribute most to the CLS of the page. Clear Direction Hypnotherapy.co.uk Home About Fees Online Hypnosis Info More In…

I guess this is due to the Google search box which as it loads and takes up its position pushes all of the navigation links further to the left when viewed on my laptop or desktop.

Is there a way for the search field to remain static and in position all of the time and not for it just to pop into place as Google search loads into it?

60

Sorry that page just hangs on my slow connection from that link you gave with this message.

# Icon for sedo.comsedo.com

## Checking if the site connection is secure

sedo.com needs to review the security of your connection before proceeding.

61

Sorry :slight_smile: The link I’m checking is this https://cleardirectionhypnotherapy.co.uk/index-2.html.

The Google search field becomes visible slightly after the navigation links and pushes navigation links to the left.

The search script link is set to async but even with async removed the bar still loads after the nav links and pushes them left.

Keeping the search field in exactly the same position in the header bar on larger and smaller screens, is it possible for me to take the code for the search field out of the navigation links HTML and put this in its own container to the right of the navigation designated its own permanent space, even if the search script that loads into the search field to make it active still takes a moment or two to become active?

I’m not sure I’ve explained that very well, but maybe you get the general gist of what I’m trying to say. :slight_smile:

62

You can just set a min-width on my-search to hold the space open.

I also notice you have dragged the navbar -85px to the right and you can’t do that without it overflowing and forcing a scrollbar. It also looks very odd not lining up with the rest of the layout. Consistency is the key and you shouldn’t make up different widths for different items as that is not a maintainable structure no matter how nice you think it looks. It looks very odd to me and looks like an error.

Either increase the whole layout which would be bad as then you’d have to re-write bootstrap or instead just make it fit like this.

.my-search{
margin:0 0 0 auto;
min-width:245px;
}
.navbar .container{
padding:0;
}

.navbar .container .gsc-control-cse{
padding-right:0;
padding-left:0;
}

In the end its your choice as long as you can live with the consequences. :slight_smile:

Remember also that flex layouts are slightly prone to reflow because that’s just the way that have to work. I don’t see it as an issue especially on my slow connection as most pages are broken for me. I’m typing this into the Sitepoint window yet there are no edit controls visible as they couldn’t be bothered handling my slow connection. Most images and avatars are missing so its hit and miss if I type this correctly :slight_smile:

63

Thank you for replying and for the useful information. The points you make are duly noted and I’ll go and make the changes you suggest and report back here again when I’ve had an opportunity to get this done. As always, your help is appreciated. :slight_smile:

1 Like
66

Hey there :slight_smile:

Just quickly following up on previous posts and to report back on where I am with the website development since we last communicated.

Having taken your advice I’ve removed the -85px that was dragging the navbar to the right so that it now lines up with the rest of the content.

I’ve spent more time running checks and resolving minor issues, correcting the occasional typo, and improving page speed where possible.

There’s one question I’d like to ask and that is how best to position a full-width bar across the very top of the page above the navigation bar, in a contrasting colour and including a headline message advising of the site launch date, and after the site launch any details of special offers, etc.

I came across this https://getbootstrap.com/docs/4.0/components/alerts/ but not sure if this would necessarily be the best way.

If you see this update I’d appreciate you dropping me a quick reply as and when time allows. Thanks.