-2
I developed a website for a customer who has a feed store, with HTML5 and CSS3, nothing with backend and database, he just wants to publicize the products, prices and etc. The /img folder is 125MB and the client is complaining about the delay to load the page and the images, what do I do? Is there any way to optimize this?
3
First it is necessary to check whether the total size of these images is due to total amount or if they are poorly optimized.
Also, thinking of the side of user, let’s assume that this feed site has 200 photos in catalog. Surely in a "look" in the section Products it is impossible to visualize and understand the 200 items. And imagine that a user is seeking the price of the X ration for his dog, so he needs to see 20 fishery products?
The ideal is for you to create a paging structure to load only what is necessary. And with this structure you can create search filters to further improve the user experience.
Note that I am suggesting simple practices that do not require frameworks or complex code creation.
User experience goes far beyond optimization and performance.
I will follow your recommendation and the others who commented above, thank you!
That’s right @Arthur!
Browser other questions tagged html5 css3 media-queries jpg
You are not signed in. Login or sign up in order to post.
Which backend you use? If possible send your website to see me.
– Maury Developer
If you do not treat the images when using on the site, they will have the size that is sent. If the customer sends a photo of a product with 5Mb the page will get heavy even. The good thing would be if you resize this image to the correct size and then optimize it using some service like Kraken.io or some app like Imageoptim. The best scenario would be to have a backend that makes these adjustments for you when sending any image to the site.
– fernandosavio
Site is https://casaderacoespassaroforte.000webhostapp.com but I will not use backend, it is not necessary
– Arthur
@fernandosavio the images it sends is on average 70kb, but I’m optimizing putting width="200px" height="200px"> I leave them in a relatively good size to view and are not so heavy... I will optimize with some service or app as you said
– Arthur
The image size and the size it shows on the screen are two different things, you can upload a 5MB image that has 5000x2000px and use with the tag
<img src="minha_imagem.png" width="50" height="20">.. The image will continue being 5000x2000px and 5Mb, you are only showing it in a smaller size.– fernandosavio
Take a look at the Lazyload. It will load the images only when they are visible on the screen, and not all at once. It already gives a considerable performance gain.
– Sam
Dude, you need to rethink the structure of the site... Your page carries more than 100MB and makes more than 100 requests... It took 2 minutes to load everything. Have you thought about paging and/or having separate pages for different product categories?
– fernandosavio
I’ll try the lazyload @Sam, thank you!
– Arthur
good @fernandosavio, really good i rethink the structure.. Thanks for the tip
– Arthur
Use thumbnails in the image. The first image I picked up the attributes was a 30% compressed jpg with 617kb in memory it has the impact ~2.025kb and that is 27 lines of 4 photos (this because I ignored a hit of photos that were not in line 4). So it’s 66MB underneath (may be reaching 100MB) to load your page and impact on user memory is 218.7MB underneath, because it may be reaching 300MB because I calculated it based on a picture of birdseed.
– Augusto Vasques