Tag Archives | lazy loading

Lazy Widget Loader

Description

The Lazy Widget Loader plugin provides lazy loading for widgets to improve page loading. Use it on slow widgets, especially those where external data is loaded, like widgets from Facebook, Twitter, AdSense, …

What this plugin basically does is to postpone loading the content of those widgets you choose, so that their content is loaded after the main content of the page that is displayed.

You can choose which widgets should be loaded like that, by default the plugin does not “impose” itself on any widget. You may also choose to display a throbber while the content of a widget is loaded.

Advanced lazy loading integration

The Lazy Widget Loader can take advantage of the advanced asynchronous loading mechanism provided by the Itthinx LazyLoader for content and widgets. This plugin helps to optimize site speed by greatly improving page load time and bandwidth usage. Instead of deferred loading in the footer, it provides advanced options that allow to load any content only when needed. These include shortcodes that allow to lazy-load content anywhere on a page, the option to load content on sight and an automatic noscript feature that helps to provide alternative content for visitors that have disabled JavaScript. You can see a demo of the Itthinx LazyLoader here.

Documentation

Continue Reading 36

Itthinx Lazyloader Demo

This is the demo page for the Itthinx LazyLoader plugin … it’s very versatile and able to load virtually any content on demand.

Lazy Loading or Lazy Acquisition defers the acquisition of resources until needed.

All of these examples are embedded within itthinx-lazyload shortcodes, using their original unmodified markup.

These examples include embedded scripts, external scripts, objects, iframes, … the Itthinx LazyLoader is quite flexible and adapts to the content that needs to be embedded.

You have already seen it in action, some of the widgets on the left are loaded thanks to the combined efforts of the Lazy Widget Loader plugin and the Itthinx LazyLoader plugin.

If you scroll down this page, you’ll see more examples of the Itthinx LazyLoader in action, it’s capable of loading any content anywhere on a page.

Also it’s worth to mention that both plugins provide lazy-loading for any content and not just images as quite a few jQuery plugins and solutions do. Anyhow, let’s take a look at the examples … oh and if you’d like to see more examples here, please leave a comment with your suggestions.


Twitter

There are two widgets from Twitter that are on all pages of the site, so no need to add more of them here 😉 You can see them just to the left of this text.

The first one is a Twitter Follow Button, the second one is a Profile Widget.


Facebook

A Facebook Like Box is shown on the left side of every page on the site. It’s located right below the Recent Comments and is loaded on sight. I’m not much of a Facebooker myself so don’t expect to see much of an audience, it’s just to show you that the plugin works nicely with that kind of widget as well. Actually Facebook’s widgets can really slow things down because it often takes quite long to load its content. It’s very useful to load this kind of widget only when it enters the viewport and that’s a good reason to use the Itthinx LazyLoader plugin.

Lazy Widget Loader & Itthinx LazyLoader

Note that the Twitter and Facebook widgets on the left side are actually not loaded using shortcodes but through the Lazy Widget Loader which is capable of lazy-loading widgets on its own and which in this case is using the advanced features of the Itthinx LazyLoader plugin – they really like each other :).


Flickr

There are two types of Flickr badges you can embed in your site, based on HTML and Flash. You can use them to show your own pictures or public pictures by tag.

This is a Flickr HTML Badge showing three mid-sized pictures, it is lazy loaded, given a height and a throbber.

You can make your own Flickr badges here.


Adsense

Ads, a welcome source of income for many, tend to slow down pages when they are embedded in the page’s content. But embedding an ad within the page’s content is often what makes it interesting for the publisher and the advertiser. The catch is that ads which load slowly can have a serious impact on the visitor’s experience. If the ad takes long to load and the content after the ad doesn’t show up unless the ad is fully loaded, you’re in for a lazy-loading solution.

An ad loaded with given height and a throbber.


Google Map

Maps, maps … maps everywhere. Since Google provided us with the marvels of embedded maps, we enjoy putting them anywhere on our pages. And here is another case for lazy-loading: maps can pull substantial amounts of data before they show up. Like the following one, featuring satellite imagery of a neat island. Imagine you really need this map at the top of your page, but want your content below to be available immediately … lazy-loading comes in handy once more.

A map showing Neshobe Island.

This lazy loading container is just given a height.




Neshobe Island? Harpo Speaks!

If you’re intrigued about why on Earth I’d chosen to show you a map featuring Neshobe Island, then do yourself a favor and have the pleasure of reading Harpo Speaks!

Of course, that is an example of embedding an Amazon widget.

Moving pictures. Can you imagine a site that would not embed a video and pretend to be en vogue? If you provide videos hosted on your site or via a CDN and would like to show a string of them on a page, there is no need to load them all at once. You could put them on separate pages or if you prefer to have them on a single page use lazy-loading to pull them in when needed.

Here are two videos along with an ad, all are embedded in the page by lazy-loading through the Itthinx LazyLoader:


Adsense

Vimeo


YouTube


DeviantArt

And here’s a new cool widget from deviantART, it’s fun to watch what comes next and of course, it’s lazy-loaded.

Continue Reading 6

Itthinx LazyLoader

This plugin is currently not available for purchase.

Description

The Itthinx LazyLoader plugin provides a versatile lazy loading mechanism for content that may improve page load time and bandwidth usage. Use it on slow content, especially such where external data is loaded like widgets from Facebook, Twitter, AdSense, …

Advanced lazy loading integration

The Itthinx LazyLoader provides an advanced asynchronous loading mechanism for content and widgets. This plugin helps to optimize site speed by greatly improving page load time and bandwidth usage. Instead of deferred loading in the footer, it provides advanced options that allow to load any content only when needed. These include shortcodes that allow to lazy-load content anywhere on a page, the option to load content on sight and an automatic noscript feature that helps to provide alternative content for visitors that have disabled JavaScript. You can see a demo of the Itthinx LazyLoader here.

In action

To get a clear idea on how the loader affects loading a page, let’s take a look at the following video which shows the loader in action. You can try the demo yourself here.

 

 

So what?

Site Speed

It took 44,85 seconds for the complete page to load, but the onload event ocurred at just 2,92 seconds! Without Itthinx LazyLoader’s help, the onload event would have ocurred much later. Site speed is a very important factor in visitors’ experience surfing your site and search rankings. If you’re not sure why this is so important, read more about it in Using site speed in web search ranking, where Google announced “we’re including a new signal in our search ranking algorithms: site speed“.

Better visitor experience

Often ads and other external content slows down the way your main content is presented to your site’s visitors. To visit a site that just takes too long to show the main thing is simply frustrating and usually results in one-time visitors – they’ve had it and won’t come back. The Itthinx LazyLoader helps you to avoid this mistake by letting your main content be presented before slower content is shown.

Content on demand

The content handled by the loader can be presented on demand or always.
It handles more than just images, virtually any widget or content that is placed within itthinx-lazyloader shortcodes.

Automatic and coding free

The loader works automatically on virtually any content and is completely coding-free. You do not need to understand anything about JavaScript, jQuery or PHP to use it. Just paste the markup within itthinx-lazyloader shortcodes and it will be handled by the loader. The shortcodes admit several options that are used to control how the content is presented.

Documentation

Browser compatibility

Tested and working at least on these and other browsers:

  • Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari

Test environment details

Windows 7 : IE8, IE9, Opera 11.5, Chrome 13, FF 5.0, FF 6.0, FF7, FF8, FF9, FF10, FF11, FF12
Mac OS X : Safari 4, Safari 5

Linux (Debian Squeeze) : FF5, FF6, FF7, FF8, FF9, FF10, FF11, IceWeasel, Opera 11.10, Epiphany 2.30.6

Linux (Debian Lenny) : Iceweasel 3.0.6

Ubuntu : FF4

Android : Opera 11.1, Opera 11.5.3, Browser, FF6, FF7, FF8

Continue Reading 75

Lazy Widget Loader Installation

Install the plugin as usual …

  1. Upload or extract the lazy-widget-loader folder to your site’s /wp-content/plugins/ directory. Or you could use the Add new option found in the Plugins menu in WordPress.
  2. Enable the plugin from the Plugins menu in WordPress.

You’re ready to go. To enable lazy loading for any widget, go to your Widgets section under the Appearance menu and check Lazy Loading on every widget that should be loaded after the main page’s content is ready.

Hey! Now would be a good time to look at the Itthinx LazyLoader, it adds some really cool features like on demand asynchronous loading for content and widgets. Also, both plugins really work together and the additional features that Itthinx LazyLoader provides are available along with Lazy Widget Loader’s standard options on every widget.

Continue Reading 0

Lazy Widget Loader FAQ

What is ‘lazy loading’?

The term lazy loading (also lazy acquisition) refers to a technique that postpones loading (acquisition) of an object (content, resources, …) until it is really needed. In our case, this means that we still have to get the content that is to be displayed in the widget, but we postpone its acquisition until the latest possible moment, so that its possibly negative impact on loading the rest of the page is minimized.

How does Lazy Widget Loader accomplish its goal? The contents of chosen widgets are loaded in the page’s footer and once the page has loaded completely, these contents are moved to where they should appear. As we postpone loading of these contents until the very last moment, our page will render its contents and will not be affected by those contents in slow widgets that take more time to load.

Note that lazy loading is often understood as to retrieve resources when they come into view, for example if you have an image at the bottom of your page and you want to make sure that this image is not loaded, unless the viewer scrolls down to where that image should appear. But that is not this plugin’s strategy; if you want to be able to load content on sight, take a look at the Itthinx LazyLoader.

Can I choose which widget is loaded lazily?

Yes.

Go to the Widgets section under the Appearance menu and check Lazy Loading on those widgets that tend to slow down your page.

Do I get a throbber while the widget loads?

Yes you do if you want to.

Go to the Widgets section under the Appearance menu and check Throbber on those widgets that should show one. Of course, for this to happen, you must also check the Lazy Loading option. Also note that in this case the minimum height of a widget will be set to the height of the throbber or the height given in the appropriate field, whichever is greater.

Does this improve the page loading time of my site?

It improves the way widgets are loaded, especially those that take a while to load. It does not make your pages load faster. So if you have one widget that appears in, say, the middle of a page and this widget really takes a looong time to load, then your entire page will take … looong to load because whatever is displayed in that particular widget takes quite a while to show up. Now here is why you would want to use this plugin. In the case of said widget, you would activate the Lazy Loading option for it. After that, what you should see is that first your page renders, after that, the content of your slow widget will appear as well. The result of that is: your page renders within a reasonable time and the content of the slow widget(s) is displayed when available, without slowing down the visualization of your entire page.

Does this work with more than one widget?

Yes. You can activate lazy loading for any active widget.

Should I enable the ‘Lazy Loading’ option for all my widgets?

No!

Widgets handled by Lazy Widget Loader will be shown after everything on the page has been loaded, including images etc. So widgets that load normally should NOT be loaded using Lazy Widget Loader. Only those that really can slow down page rendering should be loaded using Lazy Widget Loader.

Help!

this is the right place to ask for help.

I really appreciate this, how can I contribute?

Your contribution to the Itthinx LazyLoader will provide you with advanced loading options and support.

Continue Reading 3

Lazy Widget Loader Screenshots

Lazy Widget Loader

These screenshots show the standard options that the plugin offers.
Basic plugin option displayed for a widget: enable/disable lazy loading.
Basic plugin option displayed for a widget: enable/disable lazy loading.

Advanced options can be expanded individually on each widget. These include the option to display a throbber and to set fixed or minimum dimensions.
Advanced options can be expanded individually on each widget. These include the option to display a throbber and to set fixed or minimum dimensions.

Custom Post Widget and Lazy Widget Loader are quite useful together. Embed widgets based on code from external sources like Facebook, Twitter etc. with Custom Post Widget and let Lazy Widget Loader handle the lazy loading.

Itthinx Lazy Loader

These screenshots show the advanced options that the Lazy Widget Loader together with the Itthinx LazyLoader offer.

Basic options displayed for a widget (Lazy Widget Loader + Itthinx LazyLoader):

Advanced options displayed for a widget (Lazy Widget Loader + Itthinx LazyLoader):

Plugin settings

Shortcodes Example – Itthinx LazyLoader

What you see above is the code used to show the DeviantART widget on the Itthinx LazyLoader demo page.

Copyright notice about the Hare logo: Don’t you dare use my hare!

Continue Reading 0

Itthinx LazyLoader Installation

Installation is really easy …

  1. Upload or extract the itthinx-lazyloader folder to your site’s /wp-content/plugins/ directory. Or you could use the Add new option found in the Plugins menu in WordPress.
  2. Enable the plugin from the Plugins menu in WordPress.

You can now enclose content within shortcodes.

Install the Lazy Widget Loader to enable lazy-loading for widgets – yes, you do want to have that one as well. It’s not a must, but sure makes things a lot easier for widgets.

After installing, to use the Itthinx LazyLoader on any widget, go to your Widgets section under the Appearance menu and check Use Itthinx LazyLoader.

Please also visit the Lazy Widget Loader plugin page for the latest info.

Continue Reading 12

Itthinx LazyLoader Screenshots

Stand-alone Itthinx LazyLoader

Plugin settings

Shortcodes Example

This shows an example of using a shortcode to embed lazy-loaded content.

For shortcodes to work with HTML, the editor must be in HTML view.

Also check the manual for more examples and detailed information on how to use the shortcodes.

What you see above is the code used to show the DeviantART widget on the Itthinx LazyLoader Demo page.

Lazy Widget Loader + Itthinx LazyLoader

These screenshots show the advanced options that the Itthinx LazyLoader offers when used with the Lazy Widget Loader plugin.

Basic options

Basic options displayed for a widget (Lazy Widget Loader + Itthinx LazyLoader):

Advanced options

Advanced options displayed for a widget (Lazy Widget Loader + Itthinx LazyLoader):

 

Copyright notice about the Hare logo: Don’t you dare use my hare … at least not without my permission!

Continue Reading 2

Itthinx LazyLoader Manual

Shortcodes

The following enclosing shortcode tells the Itthinx LazyLoader to handle the content it encloses:

[itthinx-lazyload]...[/itthinx-lazyload]

Note that there is no self-closing version of the shortcode, i.e. the content to be lazy loaded must be enclosed by an opening

[itthinx-lazyload]

and a closing

[/itthinx-lazyload]

Important : If you want to enclose HTML you must switch the editor to HTML view first.


Example

The following example embeds Google Adsense code in [itthinx-lazyload] shortcode tags and lets the Itthinx LazyLoader handle its presentation:

[itthinx-lazyload min_height="280" throbber="true"]
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
[/itthinx-lazyload]

This is how it renders:



Attributes

The [itthinx-lazyload] shortcode supports the following attributes:

load_on_sight

Loads the content only when it enters the viewport. Content will only be loaded once it enters the visible part of the page.
Default: true
Possible values: true, false

throbber

Displays a throbber until the content is loaded.
Default: false
Possible values: true, false

auto_noscript

Will try to identify and present <noscript> alternatives for visitors who have JavaScript disabled.
Default: true
Possible values: true, false

offset

If an offset of X is given, the content will start to load when it is X pixels from entering the viewport. This can be used to anticipate loading and make content appear earlier. The value given is in pixels.
Default: 0
Possible values: 0, 1, 2, … measured in pixels

height

Applies a fixed height to the content area.
Default: –
Possible values: positive integer, measured in pixels

width

Applies a fixed width to the content area.
Default: –
Possible values: positive integer, measured in pixels

min_height

Applies a minimum height to the content area.
Default: –
Possible values: positive integer, measured in pixels

min_width

Applies a minimum width to the content area.
Default: –
Possible values: positive integer, measured in pixels

container

Uses a specific container to enclose the content area that is lazy loaded.

class

Applies a specific CSS class to the container of the content area.

id

Applies a specific CSS ID to the container of the content area.

mesosense

Uses an alternative algorithm to lazy-load the content. Do not use this option unless the normal way doesn’t work.
Default: false
Possible values: true, false

show_errors

Displays errors in the content area.
Default: false
Possible values: true, false


Use with widgets

The Itthinx LazyLoader can be used with widgets in two ways:

  • Installing the Lazy Widget Loader to control how widgets present their content.
  • Using the [itthinx-lazyload] shortcode.

The first option is free and easy to use. Get the Lazy Widget Loader plugin.

The second option requires you to have direct control over the HTML of your widget so you can apply shortcodes, for example using the Custom Post Widget plugin.


API

In addition to shortcodes and widgets integration via Lazy Widget Loader, the loader provides the following function that can be used directly in theme template files.

IX_LL_lazyload( $markup, $atts )

The function renders the HTML that you insert where the lazy-loaded content should appear.

Parameters:

$markup string The HTML to lazy-load.

$atts array Attributes that determine lazy-loading options. The same attributes as those used for the [/itthinx-lazyload] shortcode are supported.

Returns:

HTML that lazy-loads the content provided.


Example

$atts = array( "throbber" => "true" );
echo IX_LL_lazyload( $markup, $atts );

Instead of embedding the Adsense example from above using shortcodes, we’ll call IX_LL_lazyload():

<?php
    ob_start();
?>
<div style="border: 1px solid #ccc; background-color: #eee; width: 100%;">
<div style="width: 336px; height: 280px; margin: auto; padding: 10px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<?php
    $markup = ob_get_contents();
    ob_end_clean();
    $atts = array( "throbber" => "true" );
    echo IX_LL_lazyload( $markup, $atts );
?>
Continue Reading 57

Itthinx LazyLoader WordPress plugin released

The Itthinx LazyLoader plugin provides a versatile lazy loading mechanism for content that may improve page load time and bandwidth usage. Use it on slow content, especially such where external data is loaded like widgets from Facebook, Twitter, AdSense, … Advanced lazy loading integration The Itthinx LazyLoader provides an advanced asynchronous loading mechanism for content […]

Continue Reading 0