Speed Up Your Site by Lazy Loading Images

Why load images that your visitors aren’t viewing? If you’re a photographer who posts images and galleries online, the vast majority of your website’s page load time is probably taken up by loading images.

In this tip, I’ll show you how you can avoid loading images unless the user is viewing them, saving a lot of bandwidth and speeding up page load times. No coding required! We’ll be using the Lazy Load plugin for WordPress.

But first, lets cover some best practices for posting images online:

  • Only upload the largest image that you are willing to let others download, save and copy from your site. If you upload the original image into WordPress, everyone can download it.
  • Don’t insert the original, high-resolution image into your post. Insert the medium or large version when in the WordPress uploader.
  • WordPress compresses your images during the upload/save process. Don’t compress your JPG images below 10 when saving images for the web.
  • Name your image files something descriptive. This helps with SEO and file recognition down the road.

Lazy Load Images

The more images you post on your site, the longer it will take visitors to load your website. Lazy loading images improves page load times by loading only those images that are visible to the user. Here’s how to get it:

  1. Back ‘Er up.

    Hold up! Before making any changes to your site, remember to back up your site. We know it’s a pain. Go on, do it anyway. Try using one of these handy plugins to automate the process.

  2. Get, Install, and Activate the Lazy Load Plugin.
    • Option 1. Navigate to Plugins > Add New from your WordPress dashboard sidebar. Search for “Lazy Load” (without quotes) in the search box. The first plugin to pop up in the search results should be by Dave Artz. Find that plugin and click “Install Now.”  Once the plugin has been installed, click “Activate Plugin.”
    • Option 2. Follow this link for the Lazy Load plugin for WordPress and click on the Download button. Do not unzip the file! Navigate to Plugins > Add New > Upload and upload the saved .zip file from your computer and click “Install Now.” Once the plugin has been installed, click “Activate Plugin.”
  3. That’s It!

    The Lazy Load plugin will improve page load times and decrease overall server bandwidth. Your site visitors will thank you.

8 responses to “Speed Up Your Site by Lazy Loading Images”

  1. WordPressians Avatar

    I am also using this plugin in my WordPress blog that is very good to use and saved a lot of time to load all the images while users see the browser’s view port via this lazy load image plugin,/a>.

  2. silverfox Avatar
    silverfox

    Tell me, did the LazyLoad images is bad for indexing images in search engines? Since the SRC attribute does not get the true picture, eg.

    It would be helpful to use to put the picture with the SRC attribute to help index the images correctly?

  3. Prabhakar Shelke Avatar
    Prabhakar Shelke

    I am not getting the images while activating lazy loader pluign. Please help me.

    1. Will Fischer Avatar
      Will Fischer

      You could also use a method without loading the Jquery file, which should be even faster: http://www.giftofspeed.com/lazy-load-images/ Hope it helps!

  4. StefsterNYC Avatar
    StefsterNYC

    Can’t get this to work Thad. Nothing happening.

    1. TheTruthAsIKnowIt Avatar
      TheTruthAsIKnowIt

      That’s because your a self absorbed cretin

Leave a Reply

Your email address will not be published. Required fields are marked *