My woes rendering shape files on web-based mapping application

Question

First, I'd like to let it be known that this is my first journey into developing mapping applications with such a large set of data. So, I am in way locked into the techniques or technologies listed below...

The Overview

What I am trying to accomplish is the ability to load my company's market information for the United States onto some form of web-based mapping software. Currently I am trying to accomplish this with Google Maps JS api and GeoJSON data, but am not against other alternatives. There are roughly 163 files (ranging from 6MB to 200KB) that I have exported from ArcGIS into GeoJSON files, and then loaded into a database (currently as GeoJSON strings). We have developed a UI that loads the data based on the current map bounds and Max/Min calculations in the corresponding records.

The problem I'm running into is the render time on the map itself, which is annoying when switching between different regions, states, or zoom levels. The API calls to load the data are acceptable in regards to the size of the data being retrieved. My boss said it is great for a proof of concept, but would like to see it much, much faster.

The Questions

What suggestions could you offer to increase the render time?

Are there better options (3rd party libs, techniques, etc) for what I'm trying to accomplish?

It was suggested by a co-worker to export the map shapes and just use the images for overlaying the information based on the coords. Any input on this?

Edit #1

The shapes consist of polygons and multi-polygons. They essentially trace around all of our markets with distinctive opaque fill and border.

The interactive ability would be nice, to be able to click on a given area and retrieve property, tract, and other data points, but is not essential to it's success. I could overlay the data if necessary.

Answer 1

The file sizes you are using are far too big to be using GeoJSON rendered as vectors on the client-side. It will be slow to download and also bog down the browser as it struggles to render all of the geometry.

The best practice for medium to large size datasets is to render them as images on the server and send those images to the client.

I build a lot of web mapping systems, if the specs are very specific I build a custom app with a PostGIS/GeoServer/Leaflet stack. When the specs are straight forward like yours I use a hosted solution (usually Mango), that takes care of all the tile rendering and functionality for you.

Here's one of the sample maps from Mango homepage, it looks like the kind of thing you need when you click on a feature.