Replacing content instead of loading a new page strategy

Considering a new strategy for a small company website with 100 products.

The index page has a hierarchical product menu on a narrow left column.
The big column on the right contains one product information.
Instead of jumping to a new page for each product, I'm considering just loading the product content div using js. It would act more like a program than jumping between webpages. And it would retain the product menu's state.

A downside is there is only one web page for google to crawl but I can solve that with a sitemap page that links to individual product pages created with these content blocks. That also allows me to have links to individual pages.

This would be more responsive than reloading the entire page every time and resetting the product scroller to maintain it's position.

Looking for valid arguments on both sides.

 

Hi.
This should be useful in your case: https://developers.google.com/webmasters/ajax-crawling/
You can also search for "crawlable ajax" for more information.

 

Don't forget to add a condition to access the detail page, so the user can access by direct URL, no need to browse to get to the detail page.

 

Honestly, this reeks of the typical ajax-tard "pageloads are evil" bull that is nothing more than code bloat. If loading the new markup for a product page takes long enough for throwing MORE code at it in the form of scripttardery or WORSE, stuffing everything into one page-load and sliding around it -- there is something horrifically and terrifyingly wrong with how your site is written.

Of course, that menu state crap? Sounds like you either have bad navigation, or aren't passing proper information between pages, or failing to process where the products are in the menu properly; If it's "REALLY" that complex (like meta info processing) getData or cookies should be all you need... though to be brutally frank, it starts to sound more like you just have badly thought out navigation since if they got to the product, you should know HOW they got to the product and/or the menu hierarchy that product would be under in the first place!

My advice, forget all that goofy trickery BS and just build the site properly / normally.

 

Why is jumping to a completely new page and reloading the header, footer, menu column, js, css "proper", but loading content dynamically not?
I understand why it's "normal", but that's not a powerful argument by itself.

 

Because then it's easier for people to hotlink to specific products -- because then you have properly formed pages and aren't sending DATA you don't need to send... you don't have to even worry about graceful degradation for all the folks who browse with scripting blocked, don't have to worry about how it impacts search, and aren't blindly throwing more code and goofy tricks at something that shouldn't even be an issue in the first place!

... and really since JS, CSS and presentational images are cached across pageloads, that just leaves the markup as the only new thing being sent -- Particularly if pages share a single stylesheet, so you pre-load layout... Unless of course you're doing something jacktardedly stupid like using the STYLE tag, STYLE attribute, outdated presentational crap like CENTER and FONT, TABLEs for layout, and inlining static scripting in the markup -- in which case I might as well be speaking an alien language.

... and if all you're ACTUALLY sending again is markup, well... If you have enough markup in your layout header, footer and menus (basically your non-content template) for re-sending markup to be an issue, you've done something WRONG in your document -- though there's a simple test for that in terms of "is this markup rubbish or not"

Figure out how big your markup is (the size of your .html file if static, save a copy of "view source" if dynamic), then figure out how big your actual CDATA on the page is. (cut/paste from a browser works reasonably well)... What's the ratio? if it's more than 3:1 your markup is bloated halfwit inept rubbish. See your average off the shelf template, turdpress theme or idiotic bloated HTML 5 crap where developer ineptitude seems to truly thrive.

Really if on sub-pages sending 15k of markup -- the ONLY thing that should be requested/sent, and the upper limit of what a well written page of 8-10k of plaintext content and a dozen content images should be -- is going to be less effective than goofy BS navigational and script-tard tricks... there's somethign really wrong.

Of course, if you've got 50-100k of bloated poorly written ineptly developed markup with several hundred K of javascript for NOTHING to deliver 2k of plaintext and a half dozen content images, "throwing more code at it" is probably second nature and might actually seem to provide benefits... though nowhere near the benefits of actually fixing the deeper rooted issues on the page(s).

All comes down to what you're working with. If you're working with manure, dumping a can of shellac on it might at least make it shiny -- doesn't stop it from being bug *** on cow ****.

-- edit -- Admittedly, my viewpoint may be skewed compared to others since my ideal target size for a page template -- not counting content -- is to come in under 72k in 16 files in terms of HTML + CSS + SCRIPTING + IMAGES... with a completed page of content having a upper limit of 144k in 24 files or less; Hence why you won't see me using halfwit bloated idiotic time wasting bandwidth chewing bekaptah nudnik "lets piss all over accessibility" malarkey like jQuery or Bootstrap...

Which laughably the vast majority of websites I've written the average page full of content is closer to my "ideal size without content" of 72k in 16 files. Really if you can't bring a page in under those limits, IMHO you need to throw out whatever you are doing and start over from scratch. There are exceptions -- image galleries being an obvious one -- but for normal pages on a website or forums? Not so much.