2

So I am backend developer who is dipping my toes into developing a responsive site that, for SEO reasons, needs to be able to show up to a 1000 responsive "containers" for search results, ie...

[1]: http://107.6.139.93/Melbourne.homes

So what seems to be happening is that the browser is locking up trying to render all these containers or something? For searches with less then 300 results, the delay is tolerable ie...

[2]: http://107.6.139.93/Viera.homes

To be honest, i'm in somewhat over my head here (im a database guy) and i'm trying to learn, but have no idea if its going to even be possible to improve performance without using pagination (something my clients is very much against)

I'm wondering if anyone here has any insights into my issues.

EDIT - the same "lock-up" delay occurs when you resize the browser and wait for the responsive-ness to kick in

menriquez
  • 239
  • 4
  • 17
  • Try "Web Workers" for loading data from database, it is fairly easy to do. And browser is not "stuck" because JS worked in another thread. – Kyslik Apr 07 '14 at 18:55
  • its not a database issue...the current CSS design is just locking up the browser and we are trying to figure out why. – menriquez Apr 07 '14 at 18:56
  • It's highly unlikely that SEO is requiring you to do this. You're almost certainly doing it wrong. See http://webmasters.stackexchange.com/questions/7383/seo-one-longer-page-vs-several-targeted-subpages and http://webmasters.stackexchange.com/questions/26244/seo-many-small-pages-or-only-one-big – Robert Harvey Apr 07 '14 at 18:59
  • If I monitor the network traffic using Chrome Console (F12), it takes up to 5 seconds for all the images to load when I open the website. It looks like 280 images are being loaded serially before the page renders. There should be a way to load the images dynamically rather than pre-loading all of them with the page. – mellamokb Apr 07 '14 at 18:59
  • 1
    Images aren't part of search-optimization, unless you count Google Image Search. Perhaps you load the textual content, and then [load the images as the page scrolls](http://stackoverflow.com/questions/3723713/load-images-when-the-user-scrolls-down-the-page)? – Robert Harvey Apr 07 '14 at 19:01
  • @RobertHarvey i tried jquery lazy-load...it didn't help at all so i took it out. im convinced the delay/lockup has something to do with the initial rendering (or something...CSS is not my forte) – menriquez Apr 07 '14 at 19:05
  • I know its not database thing, but if you feed page one/100 by one/100 it may help speed up things for "normal viewer". – Kyslik Apr 07 '14 at 19:19
  • @Kyslik ahhhh....hmmmm interesting...my research is telling me that i am simply overloading the browsers ability to recalculate all the responsive elements for so many listings – menriquez Apr 07 '14 at 19:23
  • @menriquez Every test you run is derived from your machine, lets say smartphone user (responsive is mentioned) is accessing your page, well user is going to be in trouble, because you feed data so fast. (IMO) – Kyslik Apr 07 '14 at 19:26
  • try loading the images with an empty `src=""` attribute and have the actual source in a `data-src="xyz.jpg"` attribute. This is phase one for how I like to lazy load images. It should atleast give you insight into if it is the images or something else. `I'm an image` – Jason Lydon Apr 08 '14 at 02:22

1 Answers1

0

I think your overloading the browsers memory, this you can't solve with css. it's the whole package (images and content).

You could solve this by using infinite scroll and thus only load content when the user scrolls. There are some things you have to look in to before throwing yourself into infinite srcolling especially on SEO level.

You might want to read this:

http://googlewebmastercentral.blogspot.nl/2014/02/infinite-scroll-search-friendly.html

Mike
  • 62
  • 6
  • it turns out that this is a browser reflow/render tree issue where due to the large number of elements that are being displayed and the need to dynamically size and position the elements, the rendering of the canvas is simply being overwhelmed. more info [here](http://www.paulirish.com/2011/dom-html5-css3-performance/) – menriquez Apr 08 '14 at 14:03