Why included images in a thymeleaf layout takes a long time to being displayed?

Question

I am working on a java app, works fine and all, but at the frontend, I am using thymeleaf (first time I use it, moving on from primefaces).

What Ive noticed is that the page loads (working locally) pretty fast, as expected, since the information is not reelevant and no DB is being used by now.

What surprises me is that the images load probably 2 seconds later, I have no idea why, they are stored locally on the app assets folder.

I am incluiding them this way:

<img th:src="@{/assets/images/myimage.png}" />

Is there anyway to make it faster? (Of course, I will later set more memory to my JVM, but this sort of stuff shouldnt take that long...)

Any caching or faster ways?

I am using spring 4 mvc

Thanks.

Answer 1

There are so many variable to this i am not going to list all of them but a few:

• Distance between Client and Server
• Efficiency of your application
• Size of images
• Browser and all extensions/plugins attached to it
• Power of server
• Power of client machine
• Delivery method
• Potential javascripts that manage loading of images
• Malware

As mentioned there is a lot more that I haven't listed and it really is a process of elimination.

Some things we have on our application that avoids the delay in images include

• server memory increase from 512 to 1024
• Changing location of server to a more local source
• changing the location from where the application is sourcing the images (faster raid disks)
• delaying full page display until everything is preloaded on client machine (look into Flash of Unstyled Content Fixes)
• Performance improvements on web application itself

What you need to do is explore each option and start improving on it and eventually you will get the results you need.

Fyi if you want to avoid loading images from server have them hosted on a CDN for speed of transfer.