Load time issues with multiple carousels in modals on one html page

Question

I have this page all good and working, but the problem lies with load time. I originally thought oh duh lazy loading but doing so makes the carousels stutter.

Just asking how you'd remedy this, js? Other idea I had is to have the modals be on separate pages & have them called but I'm not sure how to go about that.

I'm just going to post what I have about x 15 here and put the rest in a fiddle

https://jsfiddle.net/cso9yz21/

<article class="installs_article">

  <div class="col-12 installs_title">
    <h1>Installs</h1>
  </div>

  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 installs_row">
    <div class="col albumThumb">
      <div class="card w-100 mx-auto">
        <a href="#" data-toggle="modal" data-target="#hyundaiElantraModal">
          <img src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/thumb.jpg" class="card-img-top" alt="2016 Hyundai Elantra">
          <div class="card-body">
            <h5 class="card-title">2016 Hyundai Elantra Install</h5>
            <p class="card-text">Double Din Radio, Amp, Subwoofer, Custom Box &#38; Backup Camera</p>
          </div>
        </a>
      </div>
    </div>

    <div class="modal fade" id="hyundaiElantraModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg modal-installs" role="document">
        <div class="modal-content">
          <div class="modal-header">2016 Hyundai Elantra Install
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
          </div>
          <div class="modal-body">
            <div id="hyundaiElantraCarousel" class="carousel slide" data-interval="false" data-wrap="false">
              <ol class="carousel-indicators">
                <li data-target="#hyundaiElantraCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#hyundaiElantraCarousel" data-slide-to="1"></li>
                <li data-target="#hyundaiElantraCarousel" data-slide-to="2"></li>
                <li data-target="#hyundaiElantraCarousel" data-slide-to="3"></li>
                <li data-target="#hyundaiElantraCarousel" data-slide-to="4"></li>

              </ol>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/fuse.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/dash.jpg" alt="Second slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/amprack.jpg" alt="Third slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/trunk.jpg" alt="Fourth slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/backupcam.jpg" alt="Fifth slide">
                </div>
              </div>
              <a class="carousel-control-prev" href="#hyundaiElantraCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#hyundaiElantraCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
          <div class="modal-footer mx-auto text-center">
            <i>Head Unit: Kenwood DDX-6704s <br> Amp: Rockford Fosgate Prime r500-x1d <br> Subwoofer: JL Audio 10W3v3 <br> Custom Sealed Box <br> Steering Wheel Control Install Mod <br> Backup Camera: Coolint CT-107B</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

I was gonna update the snippet but it's just easier to a provide a link the example in question I guess.

https://www.caraudioinc.com/installs

Answer 1

These are some ways to speed up your image heavy website:

1. Resize your images locally

Resize your images to exactly what is required on website. And resize it on the server before sending it to browser not in code with CSS/HTML.

2. Use proper image format

JPG, PNG, GIF and SVG image formats are most common on the web. WebP is relatively new format gaining popularity nowadays:

• JPG - perfect for photographs, or complex images as they have a huge color pallet. JPGs are lossy, bad at high contrast areas, edges.

• PNG - best suited for logos or high quality images with few colors and transparency. Their types: PNG-8 - smaller in size, but with limited color palette of 256 colors. PNG-24 - no restriction on color palette, but the file size will be larger.

• GIF - popular years ago, mostly used for animations. GIFs have a limited color palette of 256 colors and tend to be bigger in size. Don't use them.

• WebP - they combines the best of JPG, PNG and GIF, is 30% smaller in size and is supported on almost 75% of the modern browsers.

• SVG - vector graphics, small in size, and display beautifully on retina screen. SVGs can also be used inline in HTML, which will save an HTTP request. They can also be inserted as regular images.

Given the huge performance benefits, you should deliver your images in SVG or WebP format wherever possible.

3. Save your image properly

If your image editor if there is an option for saving image for web, use it. For example, in Adobe Photoshop, you must use Save For Web option. It optimizes images to be displayed online.

Also save images as Progressive quality because it will let the image fade in waves until completely loaded. This will improve user experience because there will be something happening on the screen while the full image loads, instead of it being blank.

4. Make your site responsive

You can make your images responsive by 2 ways in HTML.

• Using srcset and sizes attributes of the <img> tag

    <img src="big.jpg" 
         srcset="small.jpg 450w, medium.jpg 960w, big.jpg 1500w" 
         sizes="(max-width: 552px) 450px, (max-width: 1062px) 960px, 1500px"
         alt="Demo Image" />

Firstly we specified src attribut, which is a fallback option if the browser doesn’t support srcset attribute.

Secondly, inside srcset we are defining 3 image sources separated with a comma. But right after the image source, we define the actual width of the image in pixels with w appended, which is important because browser now knows the actual size of the image before downloading it first.

Finally, inside sizes we declare at which viewport widths we want a particular image to be downloaded.

• Using <picture> and <source> tags

<picture>
   <source media="(max-width: 552px)" srcset="small.jpg">
   <source media="(max-width: 1062px)" srcset="medium.jpg">
   <img src="big.jpg" width="1500" height="400" alt="Demo Image">
</picture>

Here, we are using media attribute inside <source> to strictly determine which image browser has to use on a certain device width. Browser uses first source that has a rule that matches and ignores the rest.

Finally, we used a regular <img> tag that will be used by default if browser doesn’t support <picture> element or if all rules defined using source failed.

Major difference is that when we use <picture> browser won’t make a decision on it’s own.

4. Load fewer resources

Even after all optimization, loading too many images is bound to slow down your website. There are cases where we can avoid using images.

For example, instead of image, we can create buttons, gradients and other advanced elements using CSS.

The other more important technique that you can use is lazy loading for your images. Lazy loading defer loading of images that are not required immediately. Typically, any image that is not visible to the user on the viewport, can be loaded later i.e. when it enters the viewport.

JS libraries like jQuery Lazy can be used to achive Lazy Loading.

5. Use a good CDN for image delivery

CDN (Content Delivery Networks) are a set of globally distributed caching / proxy servers. They caches your images on their servers. When a user requests an image from your website, then instead of getting that image from your server, the CDN delivers it from a node closest to that user. This cuts down the round trip time needed to load an image.

Check this list of Notable CDNs on Wikipedia.

When selecting your CDN, make sure it support HTTP/2. HTTP/2 is a new protocol for delivering content on the web that can help speed up the loading time significantly by using techniques like multiplexing, header compression and server push to reduce page load time.

Check this list of HTTP/2 supporting CDN on Wikipedia. Check this Video on Youtube to see performance diffrence between HTTP/2 and HTTP/1.1

Answer 2

You can use the native loading="lazy" in image tags, example:

<img loading="lazy" class="d-block w-100" src="https://ik.imagekit.io/aic9lfogz1/images/installs/16hyundaiElantra/backupcam.jpg" alt="Fifth slide">

But make sure to add a width and height attribute to the image so that the content doesn't shift

Also make sure this is supported on browsers you want to suppport.

https://caniuse.com/#search=lazyloading

Answer 3

I would suggest compressing all of your images, a site like Tinypng would do the job just fine.