Hi Everyone…
Please help me with this…
I am not sure what I did but all of a sudden my website background is loading up very slow in Firefox.
It was okay before but now I really have to wait for it… But the footer loads before my main background image…
My background image is 105kb … is this too much?
Website loads up fast in IE… not sure why it is slow in Firefox?
Can you give me any suggestions…?
Website link is http://www.rajeevthomas.com
Thanks you for your help…
This is what i got from the Chrome network timeline
18 requests ❘ 1.57MB transferred
Currently you have a lot of images that are well over 100kb which can be compressed to around 60kb/s which will not only save a lot of time loading the page but should allow the background to load more promptly as currently it’s been pushed into last place.
Hi…thank you for replying. As an experiment I uploaded some huge files . If the image size was the problem I was thinking it will take longer to load the background. Am I right?..but I didn’t see any noticeable difference. Also I am not seeing the site getting slower and slower with the addition of images…Is there something we can do to load the bacground image first? Or bacground images by default loads last? Thank you for helping me… people on this forum are amazing…
You may have a good internet connection. For users with slower connections—and they’re in the majority—every extra byte you use is extra waiting time.
Your background image is definitely too heavy in size. Your photographs could also do with some file reduction. There are plenty of tools to help you with that.
As for loading a background image first, that’s not the job of CSS but rather Javascript. If you like, I can move the thread over to the Javascript forum.
I was trying to post the reply from my day job from my not so fancy phone …did not work!Hence the incomplete post. But is 105kb too much for a background? What is the appropriate size for a background?
I’d call 105k too heavy, but I consider 70k TOTAL for HTML+CSS+IMAGES+SCRIPTS to be the ideal for the skin of a site, and 140k the upper limit for an entire page on a site with content – unless of course it’s something like a gallery page full of thumbnails… as such at 105k it’s almost 50% larger than I’d allow for the entire skin.
Mind you, there are megabyte plus monstrosities out there masquerading as web sites, but such sites are so useless to most end users it’s a miracle they get anything more than bounce visits… which is why I call such use of images “non-viable for web deployment” – as no matter how pretty they are, they ultimately serve no tangible purpose and just get in the way of the entire point of having a website – delivering content to users.
Large images, particularly on something as pointless as a background just suck on bandwidth for nothing, and can in the long term cost you not just visitor retention, but hosting costs as well should you have content of sufficient value that people visit it despite the problems.
My rule of thumb is for standard pages (background images, CSS, HTML, and scripts) to not exceed 100kb, though this excludes special feature containers on a single page with extra background or foreground images and gallery-like pages that naturally weigh a lot more.
There really is no standard and some people will tell you that 200-300kb is fine while others will scream if you have 90kb.
Thank you guys… so I deleted ALL my images from the site ( now they are back ) … 58 MB of it (since this is a landscape photo gallery…I have a lot of images…) … and tested it… yes I see the difference! So I will need to learn to compress the images but still keep decent quality… I would like to learn about loading the background first…
Also …since this is a PHP gallery I thought weight of the site really doesn’t slow it down to compare to a static site…am I right?
Thank you so much for the GREAT info and help…
Static or dynamic shouldn’t make any difference when it comes to how fast the page loads – except that dynamic may be slower due to the HTML taking longer to be created… but in terms of page size from things like thumbnails or skin images, zero difference as the browser just says HTML is HTML or CSS is CSS, regardless of if you build the markup with scripting server-side via PHP/ASP/CF/PERL/PYTHON/whatever, or the server is just sending a flat HTML file.
@deathshadow60 - Very interesting info… so what is the advantage of a PHP gallery besides the fact that I can dynamically add images and info to it…? Is there any advantages at all? Thank you for the help…
Well, PHP is best used as the glue between HTML and a SQL database – and that’s where the real advantage lies. That info for the image? Put that into a database – date, title, category – and you can sort them, you can automatically delimit the sorted lists into pages. You can add or remove them from what’s being shown by category. That’s what PHP + SQL really are for…
Another advantage is that you can have PHP automatically create your thumbnails for you… It’s always a good idea to use separate files as your thumbs to save bandwidth (or at least connection load) instead of trying to have HTML handle auto-resizing of massive image files. PHP with the GD library available can be programmed to make your thumbnails when you upload your image – in multiple sizes if necessary.
But in terms of the output to HTML, the browser doesn’t care if it’s a static HTML file or generated by the server using a language like PHP or ASP… It’s all HTML/CSS to the browser regardless of what it came from.
@deathshadow60 …thank you for explaining it… I reduced the background image to 75kb… AND I see the difference already… thank you for your tips. About PHP … I also heard that for a gallery it doesn’t load the entire collection of images at once like HTML galleries but just “call” the file that is requested by the user which helps with the speed of web page? Is that true…? Sorry for my entry level questions… I would like to learn PHP and CSS ground up…are there any books or courses you recommend for absolute beginners like myself? Thanks again…
you forgot to optimize photo1.jpg … photo10.jpg
85% quality is enough for previews
besides, those previews… why can’t user view larger versions?
You are right I need to do that… I just learned to do the optimization right
Previews? Do you mean thumbnails? http://www.rajeevthomas.com/viewgallery.php?cid=2 Like on that page?
If you are asking about thumbnails …if you click on them …you can go to the larger versions…
May be I didn’t understand your questions? …
Thank you for your reply…
Don’t know where you heard that, but it’s probably a disreputable source or someone running their mouth about something they don’t understand… PHP and other server side scripts just output HTML – as such there is ZERO difference client-side between the output of the server side script and a static HTML file - you could copy that PHP output to a HTML file and run it as a static page. Again, if anything it’s SLOWER because the server has to build the page using the script instead of just sending you the flat HTML file.
There is no “just call the file that is requested by the user” just because it’s PHP instead of HTML, because PHP outputs HTML!
Which is why some back-end coders piss me off – that they somehow seem to learn PHP before they learn proper HTML/CSS (and are disinclined to do so) meaning they have no business writing PHP; as they aren’t qualified to have it actually do anything. PHP is there to output HTML, if they don’t know HTML what the devil business do they have writing PHP?
Thank you… so much for all the info…your replies really opened my eyes. I now need to start learning HTML, CSS and then PHP… thanks again…