-1

I am trying to speed up my website which has too much content as well as multiple slider with high resolution images. I studied many articles/blogs and applied like:

1) Host on a good server.
2) compressed images  
3) sprite images for icon 
4) compress js and css also attach css in header section and js at bottom etc.

same like from blogs. But my problem are by images. Is there any plugin which can load page/images faster same like static site or any other solution.

Anup
  • 3,283
  • 1
  • 28
  • 37
  • Keep all your images in Cache. So that, if the web page load again it will be fast. – Samir Jun 22 '16 at 10:40
  • i need first time also – Anup Jun 22 '16 at 10:40
  • Caching and adding expires headers would help. – naththedeveloper Jun 22 '16 at 10:40
  • used this both solution sir, is there any way or plugin for images – Anup Jun 22 '16 at 10:41
  • Try to load all you images through CSS background-image – Samir Jun 22 '16 at 10:41
  • ya i did for which it was possible but what about slider's and main images – Anup Jun 22 '16 at 10:42
  • 1
    You can also use base64 encoding, which mean there isn't more HTTP request for images. Lazyloading might be useful too and sometimes if there is too many high res images it's good to load low res one first so there is no empty images spaces and load high res after (like google image does) – GillesC Jun 22 '16 at 10:44
  • yes it can, i didn't tried with base64 – Anup Jun 22 '16 at 10:48
  • You are only thinking about technologies. Think about users. Page will be fast if user see that it is fast (but not you "ms" improvement). Doing improvements through technologies improvements you will not gain really big speed improvement in a short term. Async is the answer :) – Sharikov Vladislav Jun 22 '16 at 11:09

2 Answers2

1

You should try one of the libraries that lazy-load images. These libraries load images only when the page scrolls and the image comes into the view port.

example search: https://www.google.com/search?q=lazy+load+images

Tsahi Asher
  • 1,767
  • 15
  • 28
0

Use jQuery.Lazy to lazy load content only when the user reaches them by scrolling. Especially Images, but even iFrames, Videos, YouTube, and maybe some other content e.g. in Tabs or something via AJAX. It's simple HTML and JS. No big deal. ;)

For images it' simple, use data-src instead of src:

<img class="lazy" data-src="image.jpg" />

And then just call the Plugin:

$(function() {
    $("img.lazy").Lazy();
});

You could even think about to use a low-res placeholder and load the high-res version whenever the user is viewing it. So the user don't have to wait for everything is loaded. You could even add some effects, to make it feel more dynamic. ;) This could even be done by Lazy.

<img class="lazy" src="lowres.jpg" data-src="highres.jpg" />

Good Luck!

eisbehr
  • 12,243
  • 7
  • 38
  • 63