Latest posts by Winston Ong (see all)
- A Look Back at SEO Predictions - January 1, 2017
- Are you completely misreading time on site in Google Analytics? - July 11, 2016
- Happy Mobile New Year – AMP (Accelerated Mobile Pages) - January 1, 2016
Looking for my SEO experiment on original content? Check out 45wn343on
Does Lazy Loading Images Hurt SEO?
Important Update! Make sure you read my super popular related post on using noscript to add keywords even when there is no associated image – the results were pretty amazing
Lazy loading is a technique to defer the display and resource loading of images on a web page until the time the image appears in the user’s viewport. Under certain circumstances, it can have a significant effect on page load speed and efficiency. In particular, long web pages with many large images.
If the scroll distance between images is large as well, lazy loading is a particularly ideal solution because getting the top content immediately seen by the user to load faster will also improve the perceived load speed as well as the page’s actual efficiency.
Google Comments That Lazy Loading May Cause Crawling Issues
In the below Google Webmasters Central Hangout from 43:40 – John Mueller states that Google bot is unlikely to scroll down to the end of the page to trigger content loads. Therefore, images appearing below the fold and appearing via lazy load will probably not be crawled and indexed.
About a week ago, I decided to implement lazy loading of all images on my personal blog, which is a single page index page composed of a number of travel photos I’ve taken stacked on top of each other. You can click into each individual post, but there’s no additional content.
Lazy load images appear only after entering the viewport – www.winstonong.com
Before implementing this, I wanted to run a simple SEO test to confirm Google’s ability to crawl and index img alt tag content attached to lazy loaded images.
Firstly, to demonstrate that img alt tag content is indexed and Google recognises its keyword content to match against a user’s search query, I inserted a lengthy, unique phrase as the alt text for an image in my SEO Case Studies post:
Google also chooses to display the alt text in the result preview snippet area instead of the meta description.
But how does Google fair picking this same keyword phrase when inserted into a lazy loaded image?
After implementing lazy loaded images on www.winstonong.com, I inserted the keyword into the img alt text of an image located about 9/10s down from the top of the homepage. It is also the 2nd last image from the bottom for its respective post page.
Therefore, from all pages, this image must always load after the first initial view of the page and wait for the viewport to hit the src tag.
I then fetched my homepage in GWT and re-submitted it to the Google index.
After 3 days, the category, post and homepage of winstonong.com are all served in SERPs for the unique keyword query.
This demonstrates three SEO relevant points about using the img alt tag for keyword optimisation when using lazy loading images:
- Google has no issue crawling keywords in lazy loaded image alt tags
- Google has no issue indexing keywords in lazy loaded image alt tags
- Google uses keywords in lazy loaded image alt tags as on-page relevancy signals
What About John Mu’s Comment?
<noscript><img class="alignnone wp-image-307 size-large" src="http://www.winstonong.com/wp-content/uploads/2014/06/seattle-space-needle-1024x682.jpg" alt="parameters appearing larger in size than the mirror would allow with a gorilla" width="1024" height="682" /></noscript>
From the test results, we can see that this method successfully allows us to get the keyword content indexed and served for a search of the query. Even if Google bot is not scrolling down the page to trigger the image tag via lazy load, it will still crawl and respect the content within a <noscript> tag.
*A note about on-page experiment references: if you follow the listed links to pages used in these experiments, you’ll notice the tags I’ve written about are no longer present. This is because I don’t wish to run experiments counter to the spirit of Google’s guidelines than necessary to demonstrate a point and take the required screenshot.