Tips for optimizing large image files on a basic HTML, CSS, and JavaScript website to improve site speed and ensure optimal loading times

Currently, my site is live on Digital Ocean at this link: and you can find the GitHub code here: https://github.com/Omkarc284/SNsite1. While it functions well in development, issues arise when it's in production. My website contains heavy images, including meta human renders that are necessary for my client's requirements. Utilizing 3D models has proved to be challenging, so I have opted for image sequences. However, being relatively new to UI design, I am seeking ways to enhance the performance of the site.

I attempted to incorporate a loading screen using a gif that runs for 10 seconds before fading out, but I would prefer a smoother loading experience or at least an effective wait time mechanism to optimize user experience.

javascripthtmlcssuser-interfacegsap

Answer №1

Enhancing website speed and user satisfaction requires optimizing large images for the web without sacrificing quality. Follow these steps to achieve this:

  1. Selecting the Right Image Format:

    • Utilize modern image formats like WebP, JPEG 2000, or AVIF for better compression and quality. Ensure fallbacks for unsupported browsers are provided.

  2. Resizing Images to Optimal Dimensions:

    • Identify the necessary display size for your image on the website and resize accordingly to prevent unnecessary load time delays.

  3. Utilizing Compression Tools:

    • Use tools like Adobe Photoshop, online services such as TinyPNG, or plugins like Smush to compress images without compromising quality.

  4. Enabling Browser Caching:

    • Enable browser caching on the server to store images in the cache for quicker loading in subsequent visits.

  5. Applying Image Compression Formats:

    • Adjust compression levels for JPEG, utilize PNG-8 for simple graphics, and consider using WebP for improved compression ratios.

  6. Optimizing for Retina Displays:

    • Create high-resolution versions of images for Retina displays and use responsive techniques to serve the appropriate image based on device resolution.

  7. Implementing Lazy Loading:

    • Load images only when they enter the user's viewport to enhance initial page load times.

  8. Considering Content Delivery Networks (CDNs):

    • Utilize CDNs to serve images from servers closer to users, reducing latency and improving loading speeds.

  9. Optimizing Image Metadata:

    • Remove excess metadata like EXIF data to reduce file size.

  10. Testing and Monitoring:

    • Evaluate website performance using tools like Google PageSpeed Insights regularly and adjust optimization strategies as needed.

Strive to find a balance between image quality and file size for an optimal web experience that is both fast and visually appealing.

Answer №2

Your recent implementation of webp images with significantly reduced file sizes is a positive step forward. It's great that you have over 300 images loading via JS, but consider optimizing their delivery for different devices. You could benefit from using a responsive image optimization plugin to ensure the right image size is loaded based on the device and screen resolution.

Another suggestion for improvement includes implementing blurhash to quickly load the initial content on the screen, followed by a spinner until all images are loaded to enable smooth scrolling. Additionally, enhancing your cache policy beyond the current "10s" setting could further boost performance. You may find this resource helpful in understanding more efficient cache policies: https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve a variable from a separate TypeScript document

A scenario arises where a TypeScript script contains a variable called enlightenFilters$: import { Component, Input, OnInit } from "@angular/core"; import { ConfigType, LisaConfig } from "app/enrichment/models/lisa/configuration.model"; ...

javascripthtmlangulartypescript

Having trouble with my jQuery .hover() code not running as expected

Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...

javascriptjqueryhtmlcssjquery-hover

The Lerna command for adding packages fails with an error message stating that the packages are not related

Currently, I am utilizing lerna to manage a multirepo containing interrelated packages. This issue only arose after installing a new operating system. Whenever I attempt to utilize lerna add to add a dependency from one package to another, an error occurs ...

javascriptnode.jslinuxnpmlerna

The data retrieved using Ionic 3 Angular Fire's payload.val() seems to be returning

Is it possible to determine whether a profile is filled in or empty when using Firebase Database for storing profile information? Currently, I am utilizing profile.payload.val(), but it seems to return null in both cases instead of true when the profile is ...

javascriptangularfirebaseionic-frameworkfirebase-realtime-database

What is the best way to remove bootstrap when transitioning to a new microfrontend?

Our team is facing an issue with styling when using a combination of React, Bootstrap, and Tailwind. The problem arises when linking our micro frontend to modules that use Tailwind, as the Bootstrap styles persist despite the change. Since both Tailwind an ...

cssreactjswebpackbootstrap-4

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

TS roomList = [{ name: 'Room2' }] HTML <div class="Layout-body"> <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="Room1" [ngTemplateOutletContext]="{ data: dt, i: i }&qu ...

javascriptangulartypescript

The mesh's position has become invalid due to the dynamic change in vertices' positions

When attempting to create a mesh using PlaneGeometry, I encountered an issue where after dynamically changing the geometry's vertices, the mesh's position and rotation were no longer correct. Is there a way to update these properties properly to ...

javascriptthree.js

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

javascriptjqueryhtmlangularjs

Turn off padding in material ui card

Currently, I am utilizing a material UI card and upon inspecting the card, I noticed the presence of this unique class: "MulticardContent-root". This class adds padding of 16 which I would like to remove. Strangely, it is not located within the styles co ...

cssmaterial-ui

What are the steps to launching a node.js application on CyberPanel?

I have a node.js application developed and running on my server with cyberpanel installed. While I have found numerous examples of how to deploy a node application in cyberpanel, I am unsure about how to access it from the browser. Currently, my vHost con ...

javascriptnode.jscyber-panel

What is the process for retrieving a value from JSON utilizing JavaScript?

Unfortunately, I am completely stumped when it comes to Javascript. I'm attempting a few solutions based on online resources. If anyone could offer some assistance, that would be greatly appreciated. Below is the JSON data provided. It has been conde ...

javascriptjson

HtmlWebpackPlugin can cause issues with loading relative path files on websites that are not located in the root directory

I have set up webpack and the HtmlWebpackPlugin to automatically include bundled js and css files in an html template. new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' ...

javascriptexpresswebpackreact-router

Encountering a problem where PDF is displaying squares instead of text while using ReactDOM.createPortal to

Currently, I'm working on a React application where I am using createPortal in ReactDOM to open certain components in new windows. Everything seems to be functioning correctly, except when I try to render PDF files. Strangely, everything works fine wh ...

javascriptreactjspdf

The Parse.com cloudcode refuses to enter the success or error state

Running this code in my Parse cloud, I noticed that when I call it from my app, it never enters the success or error statement. Could it be because the .save method isn't working? Any assistance would be greatly appreciated :) This is how I invoke t ...

javascriptiosparse-platformcloud

Is it possible to keep content visible in Bootstrap tab by adding CSS?

Having an issue with the "formbox" class that is causing unexpected behavior when applied to a form. When removed, everything works as expected. I've tried narrowing down the issue by removing each CSS rule individually and testing it out but haven&ap ...

htmlcsstwitter-bootstrap

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Having trouble showing the success message following row edits in jqgrid

I'm currently developing a web-based application with Bootstrap and I'm facing a challenge with implementing inline editing in my grid upon page load. The issue arises when displaying the success or failure message after performing an edit functi ...

javascriptjquerytwitter-bootstrapjqgrid

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

I'm struggling to display an image on my website. I have the necessary code parts, but it's not working as expected. function showImage() { $('.img').addClass('display'); } function hideImage() { $('.img'). ...

javascripthtmlcss

Showing JSON information in an Angular application

Upon page load, I am encountering an issue with retrieving and storing JSON data objects in Angular scope for use on my page and in my controller. When attempting to access the value, I receive the error message: angular.js:11655 ReferenceError: data is ...

javascriptangularjsjsonpost

Error: The function $compile does not exist

Currently, I am working on developing an AngularJS directive using TypeScript. While testing my code in the browser, I encountered the following error: TypeError: $compile is not a function at compileComponent.js:14 Interestingly, the TypeScript compiler ...

javascriptangularjstypescript