javascriptwordpresscustom-pages

specific contents should not load on page load


I have created a wp theme. here is one of its page http://www.durgeshsound.com/gallery/

When you click on any view album then it opens it corresponding pics of that album. Each album consists 10-12 pics and hence on whole page, around 80-90 images are there.

The problem is its takes too much time to open the pages because of 80-90 images. Is there any way to load only cover image when page loads and load album pictures one by one when view album is clicked? Please note that cover picture is set as featured image and other album pictures are added in media in post.

here is my codes

Javascript: http://pastie.org/9658839 Page template code in wp : http://pastie.org/9658843 CSS: http://pastie.org/9658847

please help.thanks in advance


Solution

  • There are few steps to optimize the performance of your site when you are using images in your page.

    1. Use Lazy Loading
    2. Use sprite image to avoid multiple http request for small images.
    3. Use Caching for static images. that will help to avoid unnecessary http requests.

    Sprite Example: You can see that SO also using sprite image in this site. enter image description here