I have a website which is deployed on Netlify below:
https://hungry-mclean-362570.netlify.com/
Github:
https://github.com/shindosu/mutsuki-portfolio-client
To give a bit of a background, the app is powered with React JS. In the Home page within the <div id="right-side">, I have two React components being rendered. They each are powered by THREE JS, and it is alternating between two pictures infinitely with image transition animations via GSAP. So in total, I have 4 images being rendered on the right hand side. The size of the images are around 13MB total (more images to come)
I also have a slider, where if the value hits >=50 then the styling and the images will change to let the user know the "category" of the images that they are looking at.
Now, it is no where near being done so don't mind the incompleteness. What's bothering me is the loading time of the images (handled by THREE JS, GSAP) is taking an insanely long time to load, which I think is also affecting the loading time of the other elements as well.
How am I able to speed up the loading process?
I tried decreasing the image sizes (it was 60MB before..currently 13MB!); am trying to shred off more but the most I can get down to is around 600~KB/img without losing any substantial quality.
Are there any other way to get around this? This will be a portfolio website so there's more images that will be in the projects page, so I'm assuming if I continue the way that I'm doing right now the outcome is going to be as or more worse than the page that I am working on.
Thank you for your time!
To load images faster in a React application you can use one of the following techniques:
Use lazy loading method --> The image loads only when the user scrolls to it.
Use blur technique --> This loads the images in low resolution initially before the original load
Use JPEG-XR and WebP instead of PNG, JPG etc.
For more details you can refer to https://teacode.io/blog/how-to-speed-up-your-react-app-using-cloudinary-and-lazy-loading
Note: I am not an expert. I was also searching how to increase load speed of images and came across some articles like that mentioned above.
Related
I have a React app that cycles through questions for a user to answer. Each question has a different background image. The questions are cycled through twice so each background image is displayed to the user twice during the user experience.
I was having some issues with image loading lag, so I implemented an 'initial load' cache to put all images into the browsers cache. Similar to what's shown here.
I've confirmed in Dev Tools that the necessary images are being added to cache at the initial load (good!). However I noticed that as a move through the app, each image is added to the cache again. Thus, I still have my loading lag for these images
When I am using these images, I currently import at the top such as:
import redGreenBackgroundImage from 'assets/images/redGreenBackgroundImage.png';
and in the component reference with
<img src={redGreenBackgroundImage}/>
I'm thinking that React/the browser is viewing the image as being different each time, so it's adding to the cache? However I haven't been able to find anything to support that in my Googling.
It is a full screen image.
I use Image component
format of the image: wepb
info about the image in the photo below
What I tried:
used priority={true} next.js priority in image component
tried to compress image, its size, resolution but it still loads slow
<Image
src={"/images/video/bg-image.webp"}
layout={"fill"}
objectFit={"cover"}
alt={"background image"}
/>
The first time I go to the page, I have to wait at least 5-10 seconds to load an image after that the image loads fast. How can I increase loading speed of the image?
first of all you should import Image from next/image not react, If you are testing it at local pay attention for each refresh page you have a request and it is slow, but in production mode it is different and so fast. If you test it online Next.js catches images and have an lazy loading algorithm for the first loading and slow loading may be related to your infrastructures of the web. Also I recommend you use Next.js 12.
There seems to be no problem with LOADING the images. But there is a problem after they are already loaded.
In my app I load card images one by one throughout the game. Once I get to a point that I loaded 40 card images, the whole app becomes slow. It always happens at the 40th image, and when I continue loading more card images after the 40th, it becomes slower after each image load.
Practical details:
React native with expo
Requiring Images from Local folder into an array and importing that array.
Single Image size between 15KB - 120KB, all images together: 3.1MB
Component used for displaying the image: Image (react native simple image component)
Using Array.map to display all images
Switching all the images with ugly images with a total of 300KB - makes the app run fast without any problem
The required array imported:
const CardsUris = [
{uri:require('../assets/AC.png'), key:'AC'},
{uri:require('../assets/AD.png'), key:'AD'},
{uri:require('../assets/AH.png'), key:'AH'},
{uri:require('../assets/AS.png'), key:'AS'}...
]
Component tree structure:
- Base
- Container
- <Image source={CardsUris[index].uri} />
Is there a way I can troubleshoot this problem? I couldn't find anything about such a problem that appears after loading the images.
I feel your pain.
One thing I found that you can try to boost up the performance is bundling the image assets into your binary. To do that with Expo, use the assetBundlePatterns key in the app.json to provide a list of paths in your project directory:
"assetBundlePatterns": [
"assets/images/*"
],
Another approach is to use an alternative package that renders images than the default one. React Native's Image component handles image caching like browsers for the most part. Many times for use-cases like yours I've noticed flickering, low performance loading from the cache and low performance in general.
So what you could try is FastImage - an Image replacement that solves these issues. Below the hood, FastImage is a wrapper around SDWebImage (iOS) and Glide (Android), so that's the secret sauce.
Do you render the images in a <FlatList />? If so, I'd give react-native-optimized-flatlist a shot too. This is an optimized version of React Native's <FlatList /> component that removes every item that is not inside the viewport.
If nothing else helps, I'd go for lower quality thumbnails for the images when they're all 40 in grid view.
I had the same issue. You can try to use FastImage with preloading.
https://github.com/DylanVann/react-native-fast-image#fastimagepreload-source--void
I'm loading 2000+ video cards in a big list (that loads/functions quickly with react-window). This main page can take a while to load the first time but then does fine after that (it's loading then cache-ing 10MB of data). I'm trying to show a spinner (loading animation) while the data loads. In other sites, I've simple done a basic conditional to test to see if the length of the items array I'm loading is greater than 0. But with Gatsby, it seems like the site loads the array just fine so array.length doesn't work here.
Is there some kind of event or way to test that the page-data.json is loaded?
Consider using the official nprogress plugin https://www.gatsbyjs.org/packages/gatsby-plugin-nprogress/
I'm trying to improve the user perception of page load time of some web pages. These web pages take about 5 seconds to complete loading and rendering. The overall time is fine; but on clicking a link to load a page, nothing happens for about 4.5 seconds and then the whole page appears in one shot. This spoils the user experience, since the user is left wondering if anything is happening or not after clicking the link.
As I understand it, browsers are supposed to progressively render web pages as and when the resources available to render portions of the page become available to it. One thing I've seen recommended (by YSlow for eg:) is to put the css in the head and the javascript near the ending body tag - or as near the end of the page as possible. I've done this, but I don't see the initial part of the page rendering and then pausing for the javascript to load. The theory, as I understand it, is that the page will begin rendering progressively once all the CSS is loaded. I also understand that the page will pause rendering when any javascript is being executed/downloaded.
What else can affect progressive rendering on IE, especially on IE7?
I found out that javascript (specifically, some jQuery selectors) were slowing things down and preventing the page from rendering. We first optimized the jQuery code by removing some code which was repeatedly selecting the same elements. Then moved the code down to $.ready so that it executes after the page has loaded.
Overall, this has given us a 2 second boost in page load times as well as allowing more pages to load progressively.
A first step may be to understand what's going on on the network side, a tool like Fiddler will help you. In your case, Timeline display should be a good starting point.
Why not show notifications to users when a link is clicked that the page is currently in loading state.
You can do this:
window.onbeforeunload = function(e){ document.body.innerHTML='loading...';/*or even a better content/* };
I'm having the same load problems because of flash videos on a page. Will somebody tell me why oh my God why can't ie just load pages as nicely as firefox does???
If ie went out of business today, all the hours and days and nights I've wasted would be over.
I think it's about time that ie get with the demands of web maasters in 2009 and change the way they load pages.
If java script is used, people without java will see blank spaces.
Check for unclosed tags.
Check all images have width and height attributes.