We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you agree to our cookie-policy

SEO ENQUIRY

First, we need your contact details…

SEO ENQUIRY

Which SEO services are you interested in?

SEO ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

SEO ENQUIRY

What budget guidance are you working on this project?

SEO ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

WEB DESIGN ENQUIRY

First, we need your contact details…

WEB DESIGN ENQUIRY

Which web design services are you interested in?

WEB DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

SEO ENQUIRY

How soon are you looking to kick off this project?

WEB DESIGN ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

The end-to-end delivery of bespoke web project akin to the style and quality of our portfolio typically start from £25,000.

Based on your budget guidance, we’d recommend exploring Yellowball Lite – our flexible WordPress theme that is perfect for small businesses, startups, consultancies and charities. Learn more about Yellowball Lite and speak to one of our specialists on this dedicated site. It’s all the best from Yellowball, now fast, affordable and available anyone, anywhere.

VISIT YELLOWBALL LITE

Step 1

of 5

GRAPHIC DESIGN ENQUIRY

First, we need your contact details…

GRAPHIC DESIGN ENQUIRY

Which design services are you interested in?

GRAPHIC DESIGN ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

GRAPHIC DESIGN ENQUIRY

How soon are you looking to kick off this project?

GRAPHIC DESIGN ENQUIRY

What budget guidance are you working to on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
GRAPHIC DESIGN ENQUIRY

Most design projects at Yellowball are typically more than £500 and our agency-wide hourly rate is £145 plus VAT.

We’re probably not a good strategic fit for this project but you could try the freelancer networks at Fivver.com or upwork.com.

Step 1

of 5

PPC ENQUIRY

First, we need your contact details…

PPC ENQUIRY

Which PPC services are you interested in?

PPC ENQUIRY

Anything you’d like to share with us at this stage?
A brief, technical scope, supporting documents or anything else?

PPC ENQUIRY

How soon are you looking to kick off this project?

PPC ENQUIRY

What budget guidance are you working on this project?

PPC ENQUIRY

What budget guidance are you working on this project?

THANK YOU

Thank you for getting in touch with Yellowball!

We’ve received everything and one of our team will be in touch very soon with the next steps. If your enquiry is urgent, you can call us on 020 8064 1832 – we’re open 9am – 6pm Monday to Friday.

BACK TO HOMEPAGE
YELLOWBALL LITE

Unfortunately, you don’t qualify for a bespoke project, but there is good news!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

VISIT YELLOWBALL LITE

Step 1

of 6

Mobile Menu
Mobile Menu

Award-winning work, focussed on results

Web Design

Faith Ibiza

Web Design

Forj

Web Design

Adara

Web Design

Tomatin

SEE All PROJECTS
Mar 2020
2 MIN READ

Should you lazy-load your content?

todd bishop

Page speed is a hot topic for SEO in 2020. The speed of a webpage (or a whole site, for that matter) plays a significant role in conversion rates. In fact, 40% of people abandon a website that takes more than 3 seconds to load, and a 1-second delay in a page’s response reduces conversions by 7%. And page speed’s role is only going to increase. So, shaving a few milliseconds here and there off of your load time can have profound effects on your business. One method for improving page speed is lazy-loading. 

What is lazy-loading?

Lazy-loading is a technique where elements on a webpage aren’t loaded until they are needed. In other words, images, contact forms, and videos that are below the fold are cached by your browser, so it knows where each will go, but they will not start loading until the user scrolls down to reveal them. This allows the elements that are immediately required (i.e. above the fold) to load uninterrupted by lower-priority elements. You’ve probably come across it before as many large websites and social media platforms use this technique. It speeds up the initial load time of a webpage so that users aren’t left with a blank or unresponsive page for long, and it also denotes that more content is loading by way of a placeholder image. Placeholder images are often a low-resolution or blurred version of the image, or a “loading” icon. 

Reasons to use lazy-loading

Faster webpages 

As we’ve mentioned already, lazy-loading offers enormous speed benefits for webpages. Deferring the loading of certain on-page content makes the page itself responsive much faster. It’s especially beneficial for webpages that contain many images or other “heavy” elements further down the page. Consider a blog page which has a contact form at the bottom. The main focus of the page is the blog article itself, and users will want that to load as quickly as possible. If the page were to load in its entirety (including the contact form) during the initial load, this would delay the appearance of the content. With lazy loading, the blog article can load incredibly quickly, and the “heavy” contact form will only be triggered when it’s required – once the user has finished reading the article and scrolls down to leave a comment or get in touch. 

Improved user experience (and data saving)

With increased speed comes a better user experience. A page that loads its visible content and becomes responsive quickly is more enjoyable to use. We’ve all experienced clunky websites that take ages to become responsive because they’re loading every single element on the page all at once – whether we want it or not. Lazy-loading prevents this from happening, only loading the elements we need, making for a faster and more responsive web experience. For a business’s website, a better user experience translates to more conversions and more returning visitors. Lazy-loading is also kinder on a user’s data plan. If a user doesn’t need to see the entire webpage, it won’t be loaded, thus saving your precious mobile data. 

SEO

As with all things that are good for users, it’s also, by extension, good for SEO. Search engines rank websites that offer a good user experience more highly so people keep using them to search. Think about it, if Google, for example, consistently returns fast and responsive websites for your search queries, you’re going to trust and keep using Google for your internet searches instead of going to an alternative search engine. Speed has been a key ranking factor for a number of years, and lazy-loading provides a way for even the biggest webpages to seem lightning-fast for users and search engines. 

Reasons not to lazy-load

It appears so far that lazy-loading can do no wrong, but we’d be doing you a disservice if we didn’t consider the other side. Lazy-loading isn’t a fool-proof answer to every website’s speed issues; it comes with some caveats. 

Bugs on older browsers

For users on an older browser (or even with a poor internet connection), lazy-loading can actually be a hindrance. For example, the loading of elements further down the page may not be triggered as quickly on an older browser. Therefore, users may have to wait a couple of seconds each time they scroll down for the rest of the page to load, making for a sluggish, clunky experience. 

Content that’s needed but not loaded

If lazy-loading is used too frivolously, content that’s above the fold may not load until the javascript is executed (i.e. the user scrolls a little). The result is a webpage that appears even less responsive than if lazy-loading were avoided altogether. It’s also important to recognise the difference between how your site looks on a mobile device compared with on a desktop computer. Certain elements that are below the fold on mobile may be above the fold on desktop, or vice versa, and wrongfully lazy-loading content that’s required immediately makes for a bad user experience. This can also affect the way search engines crawl your site. Important content can be missed by a search engine crawler if it’s lazy-loaded incorrectly, harming the ranking potential of that page. Only apply lazy-loading to items that are below the fold on all devices. 

Alternative methods may be more effective

Depending on the contents and purpose of a webpage, you may see greater speed benefits from alternative methods to lazy-loading. For example, if you’re lazy-loading a particular piece of JavaScript, then once the user scrolls down to it, the browser must send a HTTP request to fetch this element. A large number of HTTP requests can affect the speed, latency and responsiveness of a page. Alternatively, by minifying and compressing this script, and bundling it together with other scripts on the page, it can all be loaded quickly during the initial load of the webpage. This would remove any latency issues, reduce the number of HTTP requests made, and can allow all of these scripts to be cached by a browser, saving even more time for returning visitors to your site. 

How to implement lazy-loading

There are a number of plugins and apps that can handle the lazy-loading for you via your CMS. If your website uses one of the larger providers, such as WordPress, Shopify, or Squarespace, then you have plenty of options to choose from, some free and some for a minimal cost. Each one offers a number of different functions and customisation options, so it’s best to try some out and see which is right for your website. Here are some examples:  There are also ways to add lazy-loading manually into the code of your website, but unless you have a developer on-hand, it’s far easier to use a plugin. Lazy-loading is undoubtedly a great way to increase the speed of your website, but it’s important to know when to use it. Applying it to the right pages, such as those with lots of images, will be more beneficial than a sweeping “apply to all” approach. Overall, lazy-loading is a win-win – users enjoy a faster, more responsive website, and your website attracts more users, retains them better, and encourages more conversions. Page speed optimisations are just some of the technical SEO services we offer here at Yellowball. Get in touch with us today to find out how we can add value to your website and help you achieve your wider business goals. 
BACK TO ALL POSTS

Let's work together

Ready to start your next project? Call, live chat or send us a message today. We're here 9am to 6pm Monday to Friday






    I would like to receive news and information from Yellowball