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.
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
-
Website Not Performing after switch to HTTPS
We recently switched our client's website to HTTPS but after the move, we've experienced a huge decrease in rankings (off the map), and traffic. Our metas for the homepage are not being picked up by Google, although it was appearing correctly before the switch. We've implemented all redirects, resubmitted URL to Google, and updated GSC. GSC is also reporting errors in our XML stating there are no URLs to crawl. Has anyone had any issues similar? What do you all recommend? Help greatly appreciated
Intermediate & Advanced SEO | | SMRTCHInteractive0 -
With the New Panda update supposedly only weeks away, is it wise to No Index my products I have not had time to rewrite the product descriptions for ?
Hi Mozzers, I read on SEJ yesterday than apparently the Panda update was due in the 2 - 4 weeks. I still have a large of my products which I have not got around to rewriting unique product descriptions for. I know these product descriptions are duplicated on other affiliate sites so do it think it in light of the panda update coming , would it wise to put a NO INDEX Meta tag on these product pages until I get around to rewriting the descriptions. That way, I may not hit my Panda and it will buy me a bit more time. Just an idea , but thought I'd run it by. thanks Pete
Intermediate & Advanced SEO | | PeteC120 -
Training Website Improvements...
Hi Folks, I'm in the process of going over our corporate website with a view to improving on-page optimisation, layout, design and user experience and I would like your feedback on what you think I should improve or change with respect to SEO. Some of my ideas include: Restructure Home Page to Better Show Our Services Possibly Add a Slider to the Home Page (I know engagement rates with these are generally low) Restructure the Course Pages Completely (https://purplegriffon.com/courses/itil-training/itil-foundation-training/itil-foundation) Restructure the Events Pages Completely (https://purplegriffon.com/event/2028/itil-foundation) Improve & Streamline the Booking Process AJAXIFY the Booking Process Improve Responsive Elements I'm also interested in conducting user testing before I go ahead and make any changes. What are your thoughts? What would you change? Thanks. Gaz
Intermediate & Advanced SEO | | PurpleGriffon0 -
Do you get links from new websites?
There's a new industry specific website that looks decent. It's clean and nothing spammy. However, it's so new it's DA is under 10. Is it worth pursuing a link from a site like this? On one hand, there's nothing spammy and it is industry specific. On the other...it's just DA is so terrible (worse than any of our other links), I don't want it to hurt us. Any thoughts? Ruben
Intermediate & Advanced SEO | | KempRugeLawGroup1 -
Same website, seperate subfolders or separete websites? 12 stores in two cities
I have a situation where there are 12 stores in separate suburbs across two cities. Currently the chain store has one eCommerce website. So I could keep the one website with all the attendant link building benefits of one domain. I would keep a separate webpage for each store with address details to assist with some Local SEO. But (1) each store has slightly different inventory and (2) I would like to garner the (Local) SEO benefits of being in a searchers suburb. So I'm wondering if I should go down the subfolder route with each store having its own eCommerce store and blog eg example.com/suburb? This is sort of what Apple does (albeit with countries) and is used as a best practice for international SEO (according to a moz seminar I watched awhile back). Or I could go down the separate eCommerce website domain track? However I feel that is too much effort for not much extra return. Any thoughts? Thanks, Bruce.
Intermediate & Advanced SEO | | BruceMcG0 -
Best E-commerce CMS from a SEO perspective
Hello fellow mozzers, I have a lot of experience with Magento and a little bit of experience with Prestashop and i am quite aware of their strengths and weaknesses regarding SEO. I was wondering which E-commerce CMS is the best for SEO. I am talking about the CMS as you download it. There are hundreds of plugins for the popular systems which improve their SEO power tremendously, but i'm interested in which CMS is the best right out-of-the-box. Let me know what you think and why you think so. Thanks in advance 🙂
Intermediate & Advanced SEO | | WesleySmits1 -
New Website. Changing TLD or not?
Hi, At my company we are making a new website because the days of the old one are numbered. We already decided that the folder structure will be changed so we have more "clean" url's. Now we also would like to change from .net/nl to .nl . Since we already are redirecting all url's (>10.000), we think this is the moment to switch the TLD. What do you guys think? Is their anyone who has some kind of experience/tip they would like to share?
Intermediate & Advanced SEO | | SEO_ACSI0 -
Duplicity Problems - What to do with similar products in e-commerce?
Hello, I have an eCommerce website with hundreds of similar products. On some occasions, besides for their measurements they are completely identical. The titles are kept different by using the stock reference and the meta descriptions also use their measurements. However, I'm gettingDuplicate Page Content errors by the MOZ crawler. This is more than understandable since the products are very similar -
Intermediate & Advanced SEO | | BeytzNet
WHAT SHOULD I DO??? I noticed a similar situation in BlueNile (the diamond ecommerce site) - They have numerous almost identical pages, see example: http://www.bluenile.com/round-diamond-1-carat-or-less-ideal-cut-g-color-vs1-clarity_LD02424873 http://www.bluenile.com/round-diamond-1-carat-or-less-ideal-cut-g-color-vs1-clarity_LD02430168 For some reason, they did on each page a canonical to it's self... I wanted to add... It is impossible to add different descriptive texts due to the amount of products and to the rapidness they are sold (each product is unique - similar to the diamonds in the BlueNile example).0