Lazy Loading of products on an E-Commerce Website - Options Needed
-
Hi Moz Fans.
We are in the process of re-designing our product pages and we need to improve the page load speed.
Our developers have suggested that we load the associated products on the page using Lazy Loading, While I understand this will certainly have a positive impact on the page load speed I am concerned on the SEO impact.
We can have upwards of 50 associated products on a page so need a solution.
So far I have found the following solution online which uses Lazy Loading and Escaped Fragments - The concern here is from serving an alternate version to search engines.
The solution was developed by Google not only for lazy loading, but for indexing AJAX contents in general.
Here's the official page: Making AJAX Applications Crawlable.The documentation is simple and clear, but in a few words the solution is to use slightly modified URL fragments.
A fragment is the last part of the URL, prefixed by #. Fragments are not propagated to the server, they are used only on the client side to tell the browser to show something, usually to move to a in-page bookmark.
If instead of using # as the prefix, you use #!, this instructs Google to ask the server for a special version of your page using an ugly URL. When the server receives this ugly request, it's your responsibility to send back a static version of the page that renders an HTML snapshot (the not indexed image in our case).It seems complicated but it is not, let's use our gallery as an example.
- Every gallery thumbnail has to have an hyperlink like:
http://www.idea-r.it/...#!blogimage=<image-number></image-number>
- When the crawler will find this markup will change it to
http://www.idea-r.it/...?_escaped_fragment_=blogimage=<image-number></image-number>
Let's take a look at what you have to answer on the server side to provide a valid HTML snapshot.
My implementation uses ASP.NET, but any server technology will be good.var fragment = Request.QueryString[``"_escaped_fragment_"``];``if
(!String.IsNullOrEmpty(fragment))``{``var escapedParams = fragment.Split(``new``[] { ``'='
});``if
(escapedParams.Length == 2)``{``var imageToDisplay = escapedParams[1];``// Render the page with the gallery showing ``// the requested image (statically!)``...``}``}
What's rendered is an HTML snapshot, that is a static version of the gallery already positioned on the requested image (server side).
To make it perfect we have to give the user a chance to bookmark the current gallery image.
90% comes for free, we have only to parse the fragment on the client side and show the requested imageif
(window.location.hash)``{``// NOTE: remove initial #``var
fragmentParams = window.location.hash.substring(1).split(``'='``);``var
imageToDisplay = fragmentParams[1]``// Render the page with the gallery showing the requested image (dynamically!)``...``}
The other option would be to look at a recommendation engine to show a small selection of related products instead. This would cut the total number of related products down. The concern with this one is we are removing a massive chunk of content from he existing pages, Some is not the most relevant but its content.
Any advice and discussion welcome
- Every gallery thumbnail has to have an hyperlink like:
-
Ok, cool. To reiterate - with escaped_fragment you are just serving the same content in a tweaked format and Google recommend it rather than frown upon it. Good to be sure though.
See you at SearchLove!
-
Hi Tom, Thank you for the response,
The concern about serving an alt version is that it would be frowned up from a SEO perspective and may lead to a form of penalty.
I agree that escaped_fragment would be the best approach and just wanted to satisfy my own concerns before I get them working on this.
Thank you and see you at Search Love
-
Hi,
I am not sure I follow your concerns around serving an alternative version of the page to search engines - is that concern based on concerns it will be frowned upon or technical concerns?
Using the escaped_fragment methodology would work for your purposes, and would be the best approach. If you have technical concerns around creating the HTML snapshots you could look at a service such as https://prerender.io/ which helps manage this process.
If that doesn't answer your question, please give more information so we can understand more specifically where you concerns are.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Ranking issue for new website
Hi all, I have got a specific SEO challenge. 6 months ago, we started to build an eCommerce site (located in the UK). In order to speed up the site launch, we copied the entire site over from an existing site based in Ireland. Now, the new UK site has been running for 5 months. Google has indexed many pages, which is good, but we can't rank high (position: between 20-30 for most pages). We thought it was because of content duplication in spite of different regions. So we tried to optimize the pages for the UK site to make them more UK-related and avoid content duplication. I've also used schema to tell google it's a UK-based site and set up Google my business and got more local citations. Besides, If you could give me any suggestions, it'd be perfect.
Intermediate & Advanced SEO | | Insightful_Media
Thank you so much for your time and advice.1 -
Website Redesign - Duplicate Content?
I hired a company to redesign our website.there are many pages like the example below that we are downsizing content by 80%.(believe me, not my decision)Current page: https://servicechampions.com/air-conditioning/New page (on test server):https://servicechampions.mymwpdesign.com/air-conditioning/My question to you is, that 80% of content that i am losing in the redesign, can i republish it as a blog?I know that google has it indexed. The old page has been live for 5 years, but now 80% of it will no longer be live. so can it be a blog and gain new (keep) seo value?What should i do with the 80% of content i am losing?
Intermediate & Advanced SEO | | CamiloSC0 -
We are redesigning our existing website. The domain is staying the same, but the sub-structure and page names are changing. Do I still need to do 301s?
We are redesigning our existing website. The domain is staying the same, but the sub-structure and page names are changing. Do I still need to do 301 redirects or will search engines know to remove the old 404 pages from the SERPs? We are redesigning our existing website. The domain is staying the same, but the sub-structure and page names are changing. Do I still need to do 301s?
Intermediate & Advanced SEO | | GrandOptimizations0 -
Linking to External Websites?
Is it good to link external websites from every page. Since, the on-page grader shows there should be one link pointing to an external source. I have a website that can point to an external website from every page using the brand name of the specific site like deal sites do have. Is it worth having external link on every page, of-course with a no-follow tag?
Intermediate & Advanced SEO | | welcomecure0 -
How to avoid duplicate content with e-commerce and multiple stores?
We are currently developing an e-commerce platform that will feed multiple stores. Each store will have its own domain and URL, but all stores will offer products that come from the same centralized database. That means all products will have the same image, description and title across all stores. What would be the best practice to avoid getting stores penalized for duplicate content?
Intermediate & Advanced SEO | | Agence_Bunji0 -
Canonical Issue need hep
Hi Is my site has any issue with duplicate pages within the site , have i define my canonical tag properly , can any one advise please help. childrensfunkyfurniture.com
Intermediate & Advanced SEO | | conversiontactics0 -
Domain advice needed, please
Could i get a little domain advice please. Launching a new website project and want to put it on a domain we already own (both domains are in the same niche as the larger project). The new project will be aimed at the UK market. The choice is: .co.uk we own with a good name, however it's Domain Authority rank is 7 and it's only about 8 months old. .com domain which is 6 years old, has a Domain Authority rank of 33 but is not as good a domain name. The Competitive Link Analysis tells me that the rivals for the keywords we would be targeting are between 24 and 42. Which domain would people go with? All things equal it would be a fair guess that the older, higher Domain Authority ranked .com will require less work to rank in the engines, however it's not as good brand wise. Thanks Carl
Intermediate & Advanced SEO | | Grumpy_Carl0 -
Production and Priority Issue for SEO and Website Usability
I am a NOVICE .........My website is about 4 months old. My developer/programmer only has 4-6 hours of work a week so it is going to take 4 months to finish two weeks of work. So I have to prioritize the things that are best for SEO (Our architecture is PHP,Apache and Zend) .** If you are interested I would be curious to how you would prioritize some or all of these. Or at least as many as you can until you get bored.** 1. Optimizing Cart/Conversion - 7 hrs - (Extremely low conversion rates)
Intermediate & Advanced SEO | | Boodreaux
2. Optimizing Speed for usability -10+ hrs (Very slow on initial load time) 10-14 sec
3. Filling in all Titles and Metadata - 2 hrs
4. Contact persistence with cookie...enter data only once. - 2 hrs
5. Social panels for sharing content - 3 hrs
6. Custom notifications for those who opt in. for updates - 5 hrs
7. Shorten 12 key URL's and optimize with key words - 3 hrs (I rank this very high)
8. Install Wordpress Blog - 5-10 hrs
9. RSS Feed - 5 hrs ( Run a feed real time on side of page)
10. Create Content Management System for me - 20 hrs (So I can make changes)
11. Keywords for H-1 Tags - 1 hr
12. At tag for images - 1 hr
13. Use of bold /italics - 2 hrs
14. Canonical tag in head - 3 hrs Any expert advice will be greatly appreciated. Boodreaux PS After studying SEO for 1 month I think the priorities should be #7,#3, #2, #1, #5 (on landing pages) #11, #12,#6, #4, #13, #14, #8, #9, #100