What is slowing down my site?

kindly see https://botanicgardentravelers.org/

my “banner” and slide show take forever to load

as does https://botanicgardentravelers.org/on-the-go.html

the other pages have a background image too, please take a look

i have a guess… i have a TON of images NOT in the slideshows but are on the site… could that be slowing me down?

too many slides?

or is it something else?

in Photoshop my images are saved with a small file size, then those images go into the code

anything else the problem i have not thought of?

BTW yes, i searched before posting, saw nothing specific to my post

i sincerely appreciate any and all help!

THANKS!

Have you tried opening up the dev tools on Chrome or Firefox and looking at what the network tab is telling you?

1 Like

It doesn’t seem unduly slow on my 20Mb/s connection.

btw - an unrelated issue - when you hover over the menu items there is a gap underneath those that have fewer lines of text in them - you can correct this by adding to your

a {

}
height: 100%;

This makes the

<a href=....

tags the full height of the containing

<li>
1 Like

This image is 1 and a half megabytes!

That’s much too big and should only be a 200k at most. You have a load of images to load and it all adds up. You have the images created at 3000 x 2000 wide but the max width of the slide show is only 1000px. You need to go back in to photoshop and optimise them right down.

Seeing as you have 25 images in your slider you might look for some JS to defer loading most of them until the rest of the page has loaded.

2 Likes

I was curious about that!

thanks!

1 Like

PaulOB

thanks for the guidance!

will correct my images :grinning:

tell me, what’s a good number of images for a slide show? what wont slow down the loading?

2 Likes

None :slight_smile:

You would be better off having 25 small thumbnails (or a thubmnail slider) instead of that one big picture and then let the user choose the one they want to see. Then only load the large image when they click the thumbnail.

If you do really want the carousel effect then I would suggest only loading the first image by default and then using js to lazy load the remaining images after the page has loaded. There’s always a trade off between form and function so in the end it’s really doing the best you can.

3 Likes

i am confused

on https://botanicgardentravelers.org/ i have 25 “circles”. click on that circle, the corresponding image appears. allowing the user to choose an image

is that what you mean?

if not, kindly provide all the code i need to make your method work, or point me in the right direction

i sincerely thank you!

All 25 images in your slider are being loaded on page load. Just because you set them to display:none doesn’t stop them getting loaded (in most browsers).

I was suggesting a couple of different ways of handling this.

In your current setup you could only load the first image by default and have all the other images as 1px x 1px blank gif. You could apply a data-src attribute to each image with the full image address. When you click the dot then JS would swap the value from the data-src into the actual src of the image and the image would load only then. The JS for that would be quite easy to implement.

Obviously this would incur a slight delay each time an image is clicked for the first time but this would be better than slowing the whole page down from the start.

Alternatively you do the same as above but once the page is loaded then you add back in the rest of the images. That would be more complicated and a question for the jS forum.

The other suggestion was much the same but instead of dots you had thumbnail images and then the user can see what they are selecting. Once a thumbnail is clicked then you load the actual image by setting the correct src in the image tag again.

You can find tips on lazy loading here but are not specific to your example but may prove useful.

In the end images have to load so the only question is you make the user wait at the beginning or you make them wait when they click the image.

1 Like

Here’s a rough example of your slideshow using the data-src method I mentioned.

Only the first image is loaded by default and if you look at the network tab in devtools you will see only one request. The image is only loaded once you click it and hence the slight delay. Once the image is loaded you can click it again and it will be cached. You can see how long it takes one image to load so you can easily work out why the page was taking a long time to initially load when you had 25 of them loading first.

As I said in the previous post the assets have to load at some time so you either wait at the start or wait when you click the image. Most users would prefer the page to load fast. You could of course find a script to load the images in the background after the page load but again that’s really a js forum question. My JS is pretty basic.

Some things to note:

All those inline click handlers in the html should be removed and a click event listener used in the js instead and therefore keep js in the js not the html.

All those span dots should preferably be generated by the JS based on the number of images you have. If you add more or less images then you have to remember to change the spans. This can be confusing as time goes by so best to automate it from the start. Also the spans should really be buttons so that keyboard users or assistive devices can tab through and use the slider.

If you want to take that approach then that’s a question for the JS forum :slight_smile:

Note that you had the slideshow script in your page twice! You only need it once and indeed twice could cause it not to work.

Its best to add image width and height attributes in the html with their intrinsic width and height as the browser uses those to calculate the image’s aspect ratio even if you change it with css later on.

Your media queries are all badly nested and have missing end tags. You have also repeated the media queries multiple times when there was no need. You can put all the relevant styles in the same media query. Also its best to put the max-width media queries in descending order when you have many grouped together to avoid over-writing something you have already changed.

You are also missing lots of closing quotes in the html and they need to be fixed.

Run your css and html through the validator to correct and identify these as one missing bracket can kill a whole stylesheet in some cases.

2 Likes

https://validator.w3.org/nu/?doc=https%3A%2F%2Fbotanicgardentravelers.org%2F

WOW!

thanks, Paul!

of course i should delete the code from my previous slideshow (including the CSS), and put in the code you provided, yes?

and delete the JS that was written twice

and thank you for pointing out my errors… a bit embarrassing, but lesson learned!

not sure what this means, please explain : )

i will be sure to keep you informed!

MANY THANKS!!!

The only CSS code I added was from line 663 downwards in my codepen.

/*Spinner borrowed from:
https://projects.lukehaas.me/css-loaders/
*/

.mySlides[style="display: block;"]:before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 10em;
  height: 10em;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.6);
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.mySlides img {
  z-index: 2;
  position: relative;
}
.slideshow-container {
  position: relative;
}
.numbertext,
.prev,
.next {
  z-index: 3;
}
h1 {
  text-align: center;/* you don't need this one */
}
.mySlides img {
  width: 100%;
  height: auto;
}

The rest of the css was a blanket copy of your css file and I didn’t change it apart from trying to tidy up the media queries but I did it in a rush so will need checking and validating.

You will need the html of course for the slider as I changed every image and added the odd class.

The new js is in the js panel of the codepen and that replaces the 2 (same) scripts that you had in the page. You should be able to easily identify them as the one n the codepen doesn’t have that many changes. I suggest you form my codepen and keep it for reference. (I will probably delete it later or if I get time change the images to placeholder images.)

These onclick attributes are JS.

<span class="dot" onclick="currentSlide(25)"></span>

They should be removed and instead us an event listener that watches for clicks on the element without mixing js into the html.

I’ll try and give you an example later on when I get some spare time :slight_smile:

OK here’s what I meant,

The inline click handlers have been removed and the dots and numbertext are created by the js.

My JS is pretty basic and I’m sure the JS forum could refine it a lot more as there is room for much improvement as its not organised well:)

The js is all in the side panel of the codepen and replaces the previous slide code completely. The CSS is once again just added from the bottom down although you can just copy the whole file and replace yours.

getting there

1000 x 750

“image options” to
“quality”… what should be used here? it says file “small” to “large”

and what should my “format options” be?

In photoshop I believe there is a “Save to web” option.

Have you tried batch file uploading all images and resizing? One online utility amongst many:

1 Like

Paul, sorry!

“quality”… what should be used here? it says file “small file” to “large file”

“pixel dimensions” 2.15M (i think the actual file size is smaller)
“Width” 1000px “height” 750px

“document size”
“width” 19.54 cm
“height” 14.65 cm
“resolution” pixel / inch? (now at 130)

“scale styles”
“constrain proportions” (checked)
“resample image” (checked)

image zoomed out to 100%? THEN save?

drop down after that… i think i should leave that be… you let me know if you need to know that… “Bicubic”? “bilinear”"

thank you SO much!

“Save to web” is still in Photoshop but only as “legacy”, under the Export menu.

There is now “Export As” in the file menu.

@OBXjuggler, if you use “Export As” then the settings you can change to alter your file siuze are the pixel dimensions and the quality setting. When you alter these then you will see the file size on the upper left side of the screen and a preview of the image saved with those settings. So opt for the lowest quality that you find acceptable to achieve the smallest possible image size.

3 Likes

Also to consider is a new (ish) file format from Google called .webp. The image size is said to be about a third less for the same quality level as .jpeg.

You need to download a plugin to save in the format in Photoshop.

It is not supported in all browsers but is getting there (https://caniuse.com/webp). You can write the html in such a way that the browser will use the .webp if it is able to but will default to .jpeg if it doesn’t recognise .webps, using the

<picture>

tag (https://css-tricks.com/using-webp-images/). Doing it this way you, of course, have to upload both a jpeg and a webp version of each image.

1 Like

Thanks wake689!

do I owe you a $0.25 now?

1 Like