modal-dialogoverlaysinglepagepage-load-timehugo

website load time is too long because of too many image links on the main page


I have a website that is built using Hugo Static site generator. The theme I have used is called Dimension and is a single page theme. I have a number of pages each written in a markdown file (.md file) but when I use hugo it combines all the files in the index.html. The theme uses overyal (modals) to create different pages. Here is an example of how it works and looks. Here for example if you click on INTRO link you go to this URL: http://themes.gohugo.io/theme/dimension/#intro and the content of intro is inside intro.md file. So the INTRO page is called modal or overlay.

As I have a lot of links to web images (about 1000) and as all of them are placed in `index.html' it takes a long time to load, although I don't need all of them at once. Is there a way to load only images that are needed for a specific overlay?


Solution

  • Try out the Lazysizes script. It's lightweight and powerful: https://github.com/aFarkas/lazysizes