SoftLayer Blog » optimize

Tips and Tricks – jQuery Lazy Load Plugin

Cassandra Wolff — Wed, 26 Sep 2012 14:00:25 +0000

In the late 90′s, web pages presented their information in a relatively structured fashion, with little concern on how “pretty” the content looked. To a certain extent, that was a result of available technology and resources being a little more limited, but much of the reason was probably because we had no idea what was possible. We’ve come a long way, my friend. These days, it’s tough to spend an hour online without coming across a gorgeous web site with huge animations, a pallet of every color possible, full-width backgrounds and high definition detail.

Those sites may be aesthetically pleasing, but they can be a big pain from a developer’s perspective.

How much load does all of that stuff put on the server every time that web page is visited? As developers, it’s our job to think about both what the visitor sees AND the visitor’s experience in seeing it. Even the most beautiful sites will be ignored if a page takes too long to load. We spend hours optimizing every detail so users can fluidly browse without having to wait. It was in one of these optimization sessions that I discovered “lazy load.”

To be honest, I wasn’t too fond of the word “lazy” in the name, and I especially wasn’t fond of having to explain to my boss that *I* wasn’t being lazy … The jQuery plugin is *named* “Lazy Load.” Lazy Load effectively allows large pieces of content to stay in the backlog until they’re needed. To give you an example of what that looks like, let’s say you have a website with three humungous images, but they’re all in different locations. Instead of pushing the entire load onto the user when they first land on your page, we can break them up and have them load only when the user goes to view them. We’re not reducing the size of the web page; we’re merely helping it work smarter.

Without Lazy Load, a normal web page loads each item when its page is visited. If a website has videos, music, images and some neat user interactivity applications, each of those items will load at the same time:

If you take into consideration how large each of those items are, you can sense the problem. The user only has so much bandwidth to load these items, and something’s gotta give. Usually, it means long loading times. We can’t control how fast each user’s ISP is, but we can reorder our items and let Lazy Load help us prioritize items and load the page more efficiently.

After we snag Lazy Load on Github (jquery.lazyload.js), we put our jQuery scripts in the of our page:

<script src="jquery.js" type="text/javascript">script> 
<script src="jquery.lazyload.js" type="text/javascript">script>

Now that the plugin is available to us, we need to determine what we want to load lazily. Images are probably one of the most bothersome page elements, so let’s apply Lazy Load to the images we load in the belazy class. In the of your page (or in the footer if you prefer your JavaScript entries there), you’ll add:

<script type="text/javascript">$("img.belazy").lazyload();script>

As a result of that function, all image tags with a class of belazy will have Lazy Load run on them. This helps us ensure that we’re not loading ALL of our images lazily. Now we need to choose which images we want to apply Lazy Load to.

Let’s say the image tag of the largest image on one of our page looks like this:

<img src="bighonkingimage.png"/>

To have the lazyload function apply to it, we just have to make a couple tweaks:

<img class="belazy" src="bighonkingimage.png" data-original="bighonkingimage.png"/>

We added class="belazy" to trigger the lazyload function, and we added data-original="bighonkingimage.png" to line up with the formatting required by the newest version of Lazy Load (it’s simply a repeat of the source).

When a user visits our page, bighonkingimage.png will load only when it’s needed!

Pretty neat, eh?

-Cassandra

Cedexis: Tech Partner Spotlight

Guest Blog — Wed, 04 Jul 2012 14:40:25 +0000

This guest blog features Cedexis, a featured member of the SoftLayer Technology Partners Marketplace. Cedexis a content and application delivery system that offers strategies and solutions for multi-platform content and application delivery to companies focused on maximizing web performance. In this video we talk to Cedexis Co-Founder Julien Coulon.

Company Website: www.cedexis.com
Tech Partners Marketplace: http://www.softlayer.com/marketplace/cedexis

A Multi-Cloud Strategy – The Key to Expansion and Conversion

Web and mobile applications have collapsed geographic barriers to business, bringing brand and commerce experiences ever-closer to increasingly far-flung customers. While web-based business models are powerful enablers for global expansion, they also create new a new challenge in managing availability and performance across diverse and distributed markets: How do you ensure consistent web performance across all markets without investing in physical infrastructure in all of those markets?

Once a business gets its core business on a consistent and reliable provider like SoftLayer, we typically recommend that they consider a multi-cloud strategy that will spread availability and performance risk across a global infrastructure of public and private data centers, delivery networks and cloud providers. Regardless of how fantastic your core SoftLayer hosting is, the reality is that single-source dependency introduces significant business risk. Fortunately, much of that business risk can be mitigated by adding a layer of multi-cloud architecture to support the application.

Recent high-profile outages speak to the problem that multi-sourcing solves, but many web-based operations remain precariously dependent on individual hosting, CDN and cloud providers. It’s a lot like having server backups: If you never need a backup that you have, that backup probably isn’t worth much to you, but if you need a backup that you don’t have, you’d probably pay anything to have it.

A multi-cloud strategy drives revenue and other conversions. Why? Because revenue and conversions online correlate closely with a site’s availability and performance. High Scalability posted several big-name real-world examples in the article, “Latency is Everywhere and it Costs You Sales.” When an alternative vendor is just one click away, performance often makes a difference measured in dollars.

How Cedexis Can Help

Cedexis was founded to help businesses see and take advantage of a multi-cloud strategy when that strategy can provide better uptime, faster page loads, reliable transactions, and the ability to optimize cost across a diverse network of platforms and providers. We built the Cedexis Radar to measure the comparative performance of major cloud and delivery network providers (demo), and with that data, we created Openmix to provide adaptive automation for cloud infrastructure based on local user demand.

In order to do that effectively, Cedexis was built to be provider-agnostic, community-driven, actionable and adaptive. We support over 100 public cloud providers. We collect performance data based on crowd-sourced user requests (which represent over 900 million measurements per day from 32,000 individual networks). We allow organizations to write custom scripts that automate traffic routing based on fine-grained policies and thresholds. And we go beyond rules-driven traffic routing, dynamically matching actual user requests with the most optimal cloud at a specific moment in time.

Getting Started with Cedexis

Join the Community
Get real-time visibility into your users’ performance.
Compare the Performance of Your Clouds and Devliery Network
Make informed decisions to optimize your site performance with Radar
Leverage Openmix to optimize global web performance
Optimize web and mobile performance to serve global markets

The more you can learn about your site, the more you can make it better. We want to help our customers drive revenue, enter new markets, avoid outages and reduce costs. As a SoftLayer customer, you’ve already found a fantastic hosting provider, and if Openmix won’t provide a provable significant change, we won’t sell you something you don’t need. Our simple goal is to make your life better, whether you’re a geek or a suit.

-Julien Coulon, Cedexis

This guest blog series highlights companies in SoftLayer’s Technology Partners Marketplace.
These Partners have built their businesses on the SoftLayer Platform, and we’re excited for them to tell their stories. New Partners will be added to the Marketplace each month, so stay tuned for many more come.