What is the reasonable size for a single responsive web page

I am developing a Website which is designed to have lots of large images as background.

I am also using media-query because it should be responsive and have a different background for each screen sizes. The total size of the images themselves is 10MB excluded the small images which may file up to 300KB only.

The scripts (bootstrap, jQuery and custom js), styles (bootstrap and my custom css) and HTML are just less than 1MB.

In conclusion I am loading a more or less 11MB web page this is just the Index page. The assets are already compressed and is placed in a CDN on my server.

My problem here is when someone visited the website for the first time it takes too much time to load the page, specially when the visitor's internet connection is slower than standard speed. It almost takes more than 20sec to load the entire page in worse cases more than a minute and obviously there is something wrong.

Is there a reasonable or standard size for a single web page to follow? I am also using symfony2 maybe there's a plugin or alike that can help me.

Here by the way is the website. LINK Thanks.