WordPress.org

1. ctree
   Member
   Posted 5 years ago #

   I have noticed that some browsers will begin to render the page before all the graphics have loaded, so that some page elements will momentarily show up as a bunch of colored (fallback) containers before they are replaced with the graphics.

   Is this a caching problem? Is it down to (subjectively 'excessive') graphics file sizes, so that the browser simply won't wait for the graphics to download? Or is it something to do with the way certain browsers are 'tuned' (I only noticed this on Safari and FF/Mac and FF/Ubuntu)?

   Am I right in assuming that file sizes are the most likely culprit? -- I use a gently modified Kubrick; with the exception of the header image, my graphic elements are similar in size to the ones that come with Kubrick, i.e. pretty small - 500Byte to 2KB. Unfortunately, the header graphic is currently somewhat bloated at ~140KB png (vs Kubrick's 8KB jpg). I haven't yet figured out how to reduce the file size on it; my graphics editor insists on changing the hues when I try to convert from png to jpg so that the colors don't match with the rest of the page.

   If it is down to filesize and if I want to avoid seeing a half-rendered page in certain circumstances, I suppose I'd have to go back and try to reduce the size of the header image. But then I wonder whether that 140KB file size really is the issue here? -- I suppose it may well be on a 56k connection...

   SO.

   I wonder if there's a way to force browsers to finish loading the graphics first (i.e. to delay rendering until they have loaded), preferably from within the stylesheet or inside the relevant page template?

   Any suggestions much appreciated. :-)

2. vkaryl
   Member
   Posted 5 years ago #

   Are you specifying the height and width of all graphics on the page?

   If not, that could be the root of the problem.

3. KatGirl
   Member
   Posted 5 years ago #

   I wonder if there's a way to force browsers to finish loading the graphics first

   If I had to wait for all graphics to download first before I saw one slip of content, I'd hit the back button within a microsecond. And, I wouldn't return.

   When there's thousands of other websites out there, most probably peddling the near same thing, graphics first or content first is something to consider very carefuly. Personally, I wouldn't wait for the graphics to load just to see if the website I clicked is the one I want.

   I suggest google-ing for another graphics editor that's free - there's heaps. I use PhotoFire - and compress that image to an acceptable size.

4. ctree
   Member
   Posted 5 years ago #

   KatGirl: I see your point, and I agree with what you're getting at. However, I've just - very gently and shall we say lovingly - modified the Kubrick theme for my purposes. No fat graphics anywhere - except for that big fat header of course. I'm mostly curious why I get this noticeably different performance out of default Kubrick and my modifications, and right now I'm assuming it's that 140KB header img because I can't find any other reason. Well, I suppose it's obvious, huh?

   If it looks like a duck and quacks like a duck..

   Duh.

   Also, I am using the Gimp. Right now I just can't be bothered to go back and re-import the picture I'm using as a jpeg instead of png, merge layers, index colors blah-di-blah.. unless someone can re-assure me that that is what I should be doing. :-)

   vkaryl: Ehm. Good question. Let's see. :-)

   
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Georgia, Palatino, 'Times New Roman', Times, Serif;
background-color: #8b4513;
color: #333;
text-align: center;
line-height: 1.8em;
background-image: url(img/6a622f/kubrickbgcolor.png);
margin: 0;
padding: 0;
}
#page {
padding: 0;
width: 760px;
border: 1px solid #959596;
margin: 20px auto;
background-color: #f5f5f5;
text-align: left;
background-image: url(img/6a622f/kubrickbg.png);
background-repeat: repeat-y;
border: 0px;
}
#header {
background-color: #999966;
margin: 0 !important;
margin: 0 0 0 0px;
padding: 0px;
height: 170px;
width: 760px;
background-image: url(img/6a622f/kubrickheaderv3170.png);
background-repeat: no-repeat;
clear: both;
}
. . .
/* Begin Structure */
#headerimg {
margin: 0;
height: 170px;
width: 100%;
}
.narrowcolumn {
float: left;
padding: 0 0 20px 45px;
margin: 0px 0 0;
width: 450px;
}
.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}
.post {
margin: 0 0 40px;
text-align: justify;
}
.widecolumn .post {
margin: 0;
}
.narrowcolumn .postmetadata {
padding-top: 5px;
}
.widecolumn .postmetadata {
margin: 30px 0;
}
#footer {
background-color: #d9d9ba;
padding: 0;
margin: 0 auto;
width: 760px;
height: 63px;
clear: both;
background-image: url(img/6a622f/kubrickfooter.png);
background-repeat: no-repeat;
border-bottom: 0;
}
#footer p {
margin: 0 0;
padding: 15px 0;
text-align: center;
line-height: 1.4em;
}
/* End Structure */

5. vkaryl
   Member
   Posted 5 years ago #

   uhhhhmmmmm..... if you're using kubrick, I'm outta here. I don't know anything about it and I don't WANT to know anything about it.

   KatGirl.... go for it....

6. KatGirl
   Member
   Posted 5 years ago #

   eeek! Sorry V - but I'll pass on Kubrick as well.

   I don't like it - I don't use it and I don't play with it.
   I did offer a suggstion re: new editor. That's about the extent of my help here.

   Other than that, I noticed that ctree mentioned the header image is 140KB - that's awfully heavy. You really need to compress it, so it downloads as fast as the other images.

   Simple maths, really.

   One image = 2kb V One image = 140kb
   My money's on 2kb

7. ctree
   Member
   Posted 5 years ago #

   KatGirl: I suppose you're right.

   Great. Back to fiddling with the Gimp then.

   Anyway, thanks mucho :-)

8. KatGirl
   Member
   Posted 5 years ago #

   Sorry ctree - its not much help. Maybe someone else who uses Kubrick template can help you.

Topic Closed

This topic has been closed to new replies.