Angular Firebase scroll issue in chrome due to images

Question

Angular 6: Images takes time to load in chrome

This issue is specifically in chrome and not in any other browser.

We have used Firebase in our project, and used snapshotchange method to fetch the image to angular project from the same, the image urls are like this https://firebasestorage.googleapis.com/v0/b/test-4a5d9.appspot.com/o/download.jpg?alt=media&token=a78321fc-eb9c-496a-a690-e8b2ccddf6c6 . There is something wrong due to which, image loads very slowly and the screen becomes blank when we scroll up and down in the browser, here we have used "ngx-infinite-scroll".

I have also tried by concatenating .jpg extension after the image but the scenario remains the same.

First, I thought the problem is with the size of image which is affecting the loading speed, so then I have replaced the images with https://upload.wikimedia.org/wikipedia/commons/b/b9/Pizigani_1367_Chart_1MB.jpg which is a heavy size of image, but here the website run's smoothly without any issue.

But it does not scroll smoothly when image urls are like this https://firebasestorage.googleapis.com/v0/b/test-4a5d9.appspot.com/o/download.jpg?alt=media&token=a78321fc-eb9c-496a-a690-e8b2ccddf6c6

Here is the code to set images in one list item:

<div class="slider">
                      <div class="slideshow-container" id="{{works.id}}_" *ngIf="works.media">
                        <div class="imgSlides imgsss active" *ngIf="works.media.aFront != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.aFront}}" alt="front img" />
                            </div>
                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.bBack != undefined">
                          <div class="content">
                            <div>
                              <img src="{{works.media.bBack}}" alt="back img" />
                            </div>

                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.cLeft != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.cLeft}}" alt="left img" />
                            </div>

                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.dRight != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.dRight}}" alt="right img" />
                            </div>

                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.ePanoroma != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.ePanoroma}}" alt="panoroma img" />
                            </div>
                          </div>
                        </div>
                        <div class="imgSlides imgsss" *ngIf="works.media.fDetail != undefined">
                          <div class="content">
                            <div>

                              <img src="{{works.media.fDetail}}" alt="detail img" />
                            </div>
                          </div>
                        </div>
                        <!-- arrow -->
                        <div *ngIf="works.imageCount>1">
                          <a class="next arrow-control" (click)="plusSlide(1,works.id + '_')"> <img src="assets/image/backward.png" alt="previous arrow" /> </a>
                          <a class="prev arrow-control" (click)="plusSlide(-1,works.id + '_')">  <img src="assets/image/forward.png" alt="next arrow" /> </a>
                        </div>
                        <p class="sold-btn" *ngIf="works.isSold">{{'Sold'}}</p>
                      </div>
                      <div class="slideshow-container" *ngIf="isEmptyObject(works.media)">
                        <div class="content">
                          <div [ngStyle]="{'background-image': 'url(' + defaultimg + ')'}" class="img-thumb"></div>
                        </div>
                      </div>

                      <div style="text-align:center;display:none;" class="bullets">

                      </div>
                    </div>

Here is the video of the problem:

https://drive.google.com/file/d/1Ipl-34rOE2ZcscF3jrPYw2C9WfgnA29U/view?usp=sharing

Answer 1

Do the images need to be private?

You don't have any caching enabled on your images. If you check the headers for the image they have Cache-Control: private.

Since the browser isn't allowed to cache the images, it might affect the performance quite a bit.

Potential fix

I would suggest allowing the user to cache the images for at least an hour. You will need to set the correct cache headers when uploading the images. But you can easily via googles gsutil set the headers for all files in a folder

This is what I use: Where in this case we cache the images for 1year and make them immutable causing the browser to always use the cached version

gsutil -m setmeta -h "Cache-Control:public,max-age=31536000,immutable" 'gs://my-storage-bucket-name/myimagefolder/**/*.{jpg,png}'

Hopefully this could make the app more performant, but you will have to try to know.