Lazy Load jQuery for Image loading faster with Page speed improve

Website page load time play an important part for get daily total number of visitor and good rank in search engine like Google, Yahoo Bing. if your site developed according to SEO standard with good quality content with proper maintained keyword ration, images etc but page loading time more compare to average than it is enough to dropped your daily number of visitor, As per survey record if page load time more than 4 sec than 70%  user quit that website and move on another result which are loading quickly.

To decrease website page load time you may follow some techniques that help you reduce your overall page loading time like.

- Divide number of HTTP request on diff diff domain and reduce load on single server
- use Yahoo smushit.com to compress images size maximum possible.
- Combine all possible js and css into one with Minify each.
- use Lazy load jQuery plugin script


Lazy load jQuery plugin load only images which are available in user viewport. while outside of view port images load one by one on user scroll down action. hence it helpful for long page with many images to load page  faster by calling images as per visibility on user screen instead of calling all at once.

jQuery lazy load plugin developer Mika Tuupola also added that "Use of Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. "
in Wordpress, jQuery lazy load plugin easily integrate by using wp plugin jquery image lazy loading

using below jQuery script you should also achieve almost same benefit. here we assigning images src from image attr on jQuery document loading load event with windows load. add below code in js file or inside page and add class lazy-show to all images element which you want to load with lazy load techniques


Deferring images without lazy loading or jQuery

I'm big fan of Patrick Sexton as he developed many tools that helpful to all like me and other web developer also his every article very powerful with full analysis details. during follow his article i see one of the very good use full article that play big role to load your web page fast even you have many images by loading image without lazy loading or jQuery

How ?

here is the sample script and html for images that he suggest to use like for images 1st load only small image with its binary code
Title of image
Once page load finish replace Image src to original image that you want to render in your web page

for a complete guideline how to load image with out lazy load & jQuery you may visit Patrick Sexton article How to defer images



Post a Comment

0 Comments