Cut Your Page’s Loading Time In Half With Some Simple jQuery

It is a popular trend at the moment to use almost full-page high resolution super-large images on your portfolio. Which does work effectively as it focusses the user on your best work and clearly highlights how good you are as a designer. So, it looks great and it works great. But, those images are absolutely killing your page speed.

Normally, common practice would be to place all non-essential larger images at the bottom of your page’s HTML so that they will load last, after the rest of the HTML content.
However, this isn’t always possible, because:

  1. Sometimes you need to put your portfolio in the middle of your page, relative to other inline elements.
  2. You may have some crazy-cool jQuery effects that only launch when your page is fully loaded – which means users will be left waiting to see them until your overly large images load.

Why Does It Matter?

  1. Google takes loading time into effect when it is calculating your search ranking.
  2. Mobile devices can be sensitive to page-loading times as they often have much slower connections.

The Fix

You can trick your browser into loading your big images after the entire page is loaded. It does sound a bit crazy, but it’s not really…

How it works

We’re going to remove the images from the HTML, then put them back in using jQuery. Simple as that.

This will allow the images to load after all of your other content has finished – PLUS, there’s an important added benefit: search-engines measure your page-load speed by what’s in your HTML, not what jQuery loads after the fact. That means that when Google measures your site’s loading speed, the page speed result will look significantly better.

This is how to do it:


Remove all of the big images from your HTML (my images just happened to be in an unordered list):

Remove all of the big images from your HTML


Add a jQuery snippet that will add them back into the HTML, after everything else on the page has loaded:

$(window).load(function(){ // This runs when the window has loaded
var img = $("<img />").attr('src', 'YourImagePath/img.jpg').load(function() { 
// When the image has loaded, stick it in a div

var img2 = $("<img />").attr('src', 'YourImagePath/img2.jpg').load(function() {


Check your site out and measure the page loading time.

BOOM! It’s fast!

Your big images should load last, and your content should load FAST (awful rhyme, I’m sorry). I cut the loading time of my site’s content in half just by using this method.

Theoretically, you could remove all of the images from your page and put them back using jQuery, which could make your page appear to be even faster.

Just to prove that this technique does work, here’s the live demo:

Slower Page (loads in about 1.5s)Faster Page (loads in about 0.3s)

Happy coding!

Do you have a ‘Quick Tip’ you would like to share with our readers? If so, get in touch with us here:

(1 Posts)

Casey Ark is the owner of, a full-service custom web design agency located in Harrisburg, PA. Casey has over 9 years of experience in web design, development, and print design. He writes about business management, web security, design and web development.



    I assume this is for static content only? What about news feeds where linking to specific id’s is not available and images might be located in various folders?

  • Brendan Underwood

    The only downside with this method would be if you were wanting Google to index such assets. As I understand it, Google does not index the code after the jquery has done it’s job, only the raw served HTML.

  • Bas

    You can also insert images as text. Saves loading time AND server space! :)

  • Prathap Parameswar


  • fan

    Yes, the page loads faster BUT the images on my portfolio page for example are SEO optimized – means that they have google relevant names, description, title…. And with these images my page ranks on the top 10 for some special keywords. If you remove the image path from your html source code you will lose the good ranking for these images in googles images search. I try to load responsive images from the server depending on the screen size of the client, works also fast for me and I have a good image ranking ;)

  • laychinhan

    in my humble opinion, if we have a lot of images, maybe some of them or even all of them is dynamic(for example – a news/magazine website style), this solution might not be the best one, since we have to print the javascript over and over, or maybe better, you can store the image path (and the element id) in objects or array and load them – but that’s gonna required a lot of element with ID tag, which is not a good practice to have a lot of html element with id in single document.

  • But people without JS won’t see any images now :P
    Interesting trick though!

  • intermedi8

    Nice article. However, you should change the headline: “Cutting your page loading time in half” is technically not correct. The images are still part of your page, so the overall loading time stays the same. It could be even a tiny bit longer, as the browser have to parse additional javascript. Using this method you just change the loading priority and order. But of course its useful ;-)

  • Showing images like this looks like a big SEO mistake. What do you think about that?

  • $(““).attr(‘src’ => $(‘img’).attr(‘src’

  • Hi

    Interesting technique – I would like to give this a try – maybe a bit of a pain, but could be very worth it –

    Just checking, you are doing this just on the page, in the html – and not on a css sheet?

    Will be using this on WordPress, so is there any considerations for inside WP, or it makes no difference?


    Posted By Jon Barry of

  • karks88

    Good tip, Casey!

  • karo

    it’s a great idea, but for using this in a customers website not really handy as they don’t have a possibilty to change anything inside the CMS anymore…cool would be something automated in any way… know to little about jquery if that would be possible…

  • Casey Ark – Plato Web Design

    Thanks, Eric!

  • Casey Ark – Plato Web Design

    Yes – exactly, in the HTML, not the CSS. It should work the same for WordPress too, but you may have to be creative in coding the script to make sure that if users move their images into other folders, the code still works (hopefully that made sense!).

  • Casey Ark – Plato Web Design

    I see what you’re saying – if you have a lot of SEO juice invested in certain big images or tags, it wouldn’t be a good idea to use this technique on them. Luckily though, most of the big, slow-loading images on pages aren’t those used for SEO, they’re usually just cosmetic (portfolio images and such).

  • Casey Ark – Plato Web Design

    Very cool plugin, Ryan!

  • Casey Ark – Plato Web Design

    Yeah – exactly. Good observation.

  • Casey Ark – Plato Web Design

    Yes – this was a pretty simple example and thus would only be really useful for static content – but the idea can definitely be implemented on dynamic pages. You’d need to get information from the news feed images and work it into your jQuery (probably with PHP) – it’d be a hassle, but it could save a lot on Google’s perceived loading time.

  • This is a bad idea – lazyload accomplishes the exact same thing but doesn’t a) keep images from being indexed by Google and Bing and b) make your images invisible to users who don’t have javascript enabled.

    This is a poor solution to a problem that’s already been solved. :-)

  • Noël Jackson

    This is really a bad idea to be brutally honest. Progressive enhancement doesn’t need to be dead. Perhaps instead of removing the images, just give them a class that’s set to “display: none” and then set them to “display: block;” after page load? There are some other ways to do this that aren’t as destructive to your markup.

  • Adeline Boizieau

    I thought this article would give me a good trick to improve the page speed but removing all images in the HTML and loading them with javascript is a very bad practice for accessibility and seo!!
    I would seriously recommend to people doing this only for some images, which are not important for the content of the website.

  • Casey Ark – Plato Web Design

    Thanks for the comment!

    I see what you’re saying, but I believe display:none images still load when the page loads, so you still end up getting the added loading time up front.

    As I said in the article, removing all of your images and replacing them with this code may theoretically make google think your page loads faster – and “theoretically” is the key word in that sentence. Removing images from the page that have some SEO relevance wouldn’t be a good idea – but most people don’t have that problem.

    But I’m sorry if you don’t like it or if you feel that it’s a bad idea. I was just hoping to share a useful tip with the community!

  • Casey Ark – Plato Web Design

    Hi Jason – thanks for posting.

    I hadn’t encountered LazyLoad until it was mentioned in the comments here – but it looks like a great plugin (and it modifies the src attribute, which is an added benefit in respect to my code).

    Sorry if it was a bad solution for you – it’s been very effective for me and my intention was to share a primitive example of this technique with the community, with the hope that it would spark some discussion. Luckily, it has. Thanks, Jason!

  • kuldeepdaftary

    that’s when noscript comes in picture!