Hi - I've been given the directive to fix a problem who's cause I'm oblivious to and hope someone has seen something similar and can give me a hint or two as to the problem. Here's the issue: As the page loads, the banner image is HUGE. after a second or two it resizes to the intended size. Looks like Hell before it resizes. The platform is Big Commerce. The usl is http://www.christianstrong.com If anyone has any clue as to what the issue could be, I would greatly appreciate it if you would share your insights. Thanks.
Massive images too big to be on a website in the first place, endless pointless bloated scripttardery loading in the head where it's actually blocking the CSS render, massively ridiculous amounts of CSS... Of course it's gonna behave that way! Look at the markup, see ALL those <script> before the </head> -- see how it's using so many separate CSS files? Images are content, content loads before style... scripts that output or modify markup will often block the loading/application of CSS... You put massive images, with massively ridiculous amounts of scripttardery and bloated poorly written style, issues like this are just the tip of the iceberg. With other issues like the inaccessible fixed metric fonts, scaling images that probably shouldn't be allowed to scale since they have TEXT in them, dubious colour contrasts in some places... The site consists of 2 MEGABYTES of scripttardery spanning 53 files, 490k of CSS spanning 26 separate files, and a ridiculous 65k of HTML to deliver two dozen images and 2.1k of plaintext... Basically what probably shouldn't take more than 12k of markup, 48k of JavaScript (in one file) and from what I'm seeing of the site, 32k of CSS (in one file per media target, and since you're only targeting screen media design-wise... that's one file) for the ENTIRE SITE! It's a 5.6 megabyte monstrousity spanning 115 files, taking over 45 seconds to load here, and I seem to be having decent ping times to the server -- Joe help anyone with bad ping times where that page could take up to two minutes or more. OF COURSE it loads sloppy. My advice would be to pitch that entire disaster in the trash and start over. There is little if anything I would save from that mess as it was clearly built by people who didn't know enough HTML, CSS, JavaScript, or accessibility to be building a website. Between the "let the PSD jockey delude themselves into thinking they're a designer" artsy fartsy bull, the "slop together off the shelf solutions any-old-way" development methodology, and the giant double bird the entire site is flipping at accessibility norms, it doesn't have a prayer. Apologies if that sounds harsh, but the truth often is.
It looks horrible even when the page is finished loading - on a full-HD, maximized window, the image is stretched, the text IN THE IMAGE (why the fuck isn't the text... well, TEXT?) is blurry... it's horrible. First off, ditch the image with the text, use an image without text, and place it as a background on the heading/h1, and have the text ON TOP of that image. And so forth and so on... learn to web, please. And read the previous comment by @deathshadow, please.
This can likely be fixed by specifying media queries to differently sized images for each screen size.