When is a page considered loaded by search engines so I can enhance it without a page-speed penalty?

Question

I'm working on a website that has some high quality images that need to load. Of course, my goal is to get the site to load as quickly as possible so we don't slow down the user experience and I don't take a page rank hit for being a slow loading website.

I'd like to initially load a low quality version of the pictures so the page loads quickly and then enhance them with a second wave of downloads using JavaScript after the page has completely loaded.

I know I can detect when the page has loaded using jQuery ready() but I want to make sure Google considers the page loaded before I start enhancing things. I'm worried that if I keep adding content with ready(), Google will think the page load is still happening and penalize me for a slowly loading page.

So, another way to ask this question is "When does Google consider the page loaded and when can I start adding more elements without Google thinking it's still part of the initial page load?"

Answer 1

If you want to know when the page has fully loaded, then you need to use the window.onload (or $(window).load()) event, not jQuery's $(document).ready() event.

$(document).ready() is triggered as soon as the HTML document has finished downloading and the DOM is ready. But the images and other resources aren't done loading at this point.

If you want to know how Google sees your page's performance, PageSpeed Insights would be a good place to start. PageSpeed measures the loading time of your page starting from the initial request to when the last embedded resource (JS, CSS, images, etc.) has finished loading.

So that's essentially when $(window).load() is triggered.