In How to Optimize Your Website's Loading Time and Performance I covered some of the basics about Page Speed and Optimization.

On top those tips — minifying scripts and stylesheets, optimizing images, and taking advantage of caching — there are several other tips and tricks that can help improve the performance of your website. Some of these techniques may not be suited for all types of content but where they are, you can see dramatic improvements in page speed and functionality.

Lazy Loading

lazy-loading

You've probably seen this technique used before without even realizing it.

So, what is Lazy Loading?

It's the programming practice of loading or initializing an object only on demand.

Instead of loading all your assets as soon as a page is called, it allows you to load specific ones only when they need to be delivered to the user.

For example, if you have a large image gallery you may want to load the first ten images, but lazy load the rest. Doing so takes the weight of the additional images off your browser on page load, and when the user scrolls down or clicks a "More" link the next set of images will be displayed.

This technique is great for pages with a large amount of content. I used the picture gallery page as an example, but I have used this technique countless times on blog archive pages, or any page that has a large amount of content "below the fold".

If you want to install this functionality for images on a WordPress site, check out Lazy Load in the WordPress Plugin Repository.

Want to apply Lazy Loading to your WordPress posts themselves? Check out the Infinite Scroll plugin.

WP Smush.it

If you find yourself dealing with a lot of images, you might also want to look into the WP Smush.it plugin. Once installed, WP Smush.it will optimize your images for online viewing. It reduces the file size of your images, thus improving your loading times. No additional steps are needed: whenever you upload a new image it will automatically be optimized!

WP Smush.it can be used in conjunction with any other plugins, like Lazy Loading, or on its own.

Don't Over Do It With Plugins

I know this may sound like it goes against what I just told you, but you another thing you always needs to keep in mind is keeping things simple. Limit the amount of plugins you use.

If you use one, make sure it is efficient and provides a vital function on your WordPress website. It's very easy to get carried away with plugins, and they can really be resource hogs. I strongly encourage any website owner to keep things as simple as possible.

Conclusion

Tese are still only some basic starting points to optimize a website's performance. There are countless other techniques that you can use to speed up a slow site or to make an already fast site even faster.

Do your research and determine what areas of your website need improvements. From there, take it step by step, and remember to keep it simple! Good luck, and happy optimizing!

Ryan Cowles

Ryan Cowles is a WordPress / Front End Developer living in Los Angeles, California. Along with a passion for building creative websites, he also enjoys photography, design, travel and the great outdoors. You can view his personal website by visiting http://ryanscowles.com. To see what he has been up to lately, check out his blog at Metacom Creative.

Ryan S. Cowles

You May Also Like

15 Responses to “Lazy Loading, WP Smush It, and Optimizing Your Website's Performance”

  1. Ryan-

    Very interesting read. Thank you. I have some questions. You have answered my question about plugins and that you should clean them up and get rid of ones you aren't using but does adding a bunch of excess code which in my opinion WP does effect the loading time of your site thusly effecting user experience and possible SEO?

    Thanks,

    sean

    • Ryan Cowles says:

      Hey Sean,

      Thanks for reading! I'm glad you found the article helpful. What kind of excess code are you referring to? Excess code in general should be avoided, whether it be generated by a plugin or added manually. The reason I point out excess plugins is due to the fact that a lot of them have additional features that you may not use. Also, I love the WordPress community, and the Plugin Repository, but one drawback is the fact that with so many contributors, you do run into poorly coded plugins that can hog resources.

  2. Ryan

    Thank you so much for your reply. I am an HTML developer that has just been using WordPress for about 3 months and I have noticed that my WP sites load a little slower than the hand coded HTML sites. I think it might have something to do with all the plugins I am using that is why your article was so useful to me. I cleared out some of the plugins and it runs a little better and I added a cache plugin that seems to help.

    Thanks for the great article. It really did helped.

    thnks

    sean

    • Ryan Cowles says:

      Sean,
      I'm just glad I could help. One thing that may be playing into your speed issues is the fact that prior to WordPress, you've just been working with static HTML. WordPress is built using PHP, which is part of what allows it to be dynamic. It allows for communication between the frontend of your site and your database (where your posts, pages, site info, etc. are stored). Since this is a dynamic language, rendered server side, it can cause some speed issues if not used correctly.

      I wrote another article a couple months ago that also deals with page speed and optimization. http://www.searchenginepeople.com/blog/improve-site-speed-performance.html

      Again, thanks for reading!

  3. Paul says:

    Nice article I've recently been working on getting my web site to load quickly.

    When I started my WordPress site was on average taking 9 seconds to load pages, when I finished I get an average of 1.5 seconds to load the page.

    I didn't take away any plugins because I only use the ones that I have to use.

    One of big differences I made was changing the theme. I went from an image heavy theme to a clean minimal theme and this made a massive difference. Changing the theme reduced it from 9 seconds to 5 seconds.

    I got it down to 1.5 seconds by installing a CDN.

    I haven't tried WP smush it so hopefully I can get it down even more.

    • Ryan Cowles says:

      Hey Paul,

      Thanks for the reply! Your theme definitely plays a big role in loading time as well. I like to build most of my themes myself, so that way I can include only what I need. I recently replaced a client's Paid Theme with a custom one, and it significantly reduced loading time. The paid theme was using TimThumb to generate all the images, and each call to resize an image was taking between 1-2 seconds. On a page with a lot of thumbnails, that could get ugly, haha.

      Anyways, I'm glad to hear that you've been improving your loading times. Let us know if you come across any other tips or tricks!

    • Ruud Hein says:

      1.5 is really, really good. That's your Paul Und site?

    • Paul says:

      Hi Ryan

      I've noticed a big difference in moving from Premium themes to custom themes as well. The main problem with premium sites is WordPress strength in terms of flexibility. Premium WordPress themes from top theme marketplaces have now become massive they allow you to do so many things with your WordPress theme. All this functionality does come at a cost, this is why custom themes will always be quicker.

      I've recently gone through my theme and tried to remove WordPress functions which aren't needed by custom themes, such as the bloginfo function can be replaced hardcoded values.

      Hi Ruud
      Yes Paulund is my site, it was 1.5 before the weekend had to make a change as had a problem with my hosting company, get about 2/2.5 now.

      Thanks
      Paul

      • Ryan Cowles says:

        HI Paul,

        You are completely correct about Premium Themes as well. Even some Theme Frameworks can be overkill, and that's why I find myself creating WordPress themes on a per website basis. That way there is no excess, only what is needed for that site in particular.

        And 1.5 is outstanding…

        Thanks again for the reply!

  4. Affan Ruslan says:

    Hi,

    Does lazy load have bad affect on SEO?
    I've heard a rumour about this from other blogger, but upon searching about it, I can't find any readable and reliable article.

    • Ryan Cowles says:

      Hi Affan,

      Lazy Loading can have an affect on SEO, although it will probably be very minimal. Your initial images will load with the page. You may miss out on a few alt tags from additional images lower on your page, but in most cases, I imagine the loss in SEO would be negligible. It's all about weighing out the positives and negatives on a case by case basis.

      Thanks for the reply!

  5. Cory says:

    Great read, but do you know of any lazy load plugins that can be disabled for mobile viewing? I find lazy loading really doesn't work well for long image based posts, they seem to have to scroll, stop and wait while loading, then scroll and continue, rather than being able to scroll smoothly like on a desktop site. I just haven't found a plugin capable of doing that. Great post though all around!

    • Ryan Cowles says:

      Cory,

      I don't know any plugins that do this "out of the box." However, if the Lazy Loading is specific to your theme, you could serve a different/altered theme to mobile visitors.

      Thanks for reading!

  6. Matt Smith says:

    I know what you mean about having too many plugins, but I think WP Smush It might be a good one to put on, provided it doesn't interfere with any of my existing plugins. thanks!!

    • Ryan Cowles says:

      Hey Matt,

      I'm glad to hear you found this useful! It's definitely a good idea to keep an eye on the number of plugins you are using, but it's more so weighing out the pro's and cons of each.

      Thanks for the comment!