WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
Montezuma dimensions for header image, re Speed (7 posts)

  1. ConsiderThis1
    Member
    Posted 3 months ago #

    http://www.health-boundaries.com/fingernail-linesridges/

    GTMetric tells me that my pages load slowly because my images don't specify dimensions. Images from the image library have dimensions attached, but my header image, even though it's from my library, didn't fetch with dimensions. So I figured out how to add dimensions, I think,

    `<div id="banner-bg" class="cf">
    <div id="banner" class="row">
    <img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetterTEXTScaled.jpg"
    width: 950px;
    height: 169px;

    />

    </div> '

    Only when I ran GTMetrix again there were these thick red lines, top and bottom, as if they were a warning... Maybe they were b/c I ran the test so many times? I couldn't find a way to find out what they meant. Do you know?

    In any case, The PageSpeed part of my score went from an A to a B, while the YSlow part went from a C to a B....

    Why does one change affect each of the two scores in the opposite way?

  2. ConsiderThis1
    Member
    Posted 3 months ago #

    Thanks, Esmi ~~~

    The thing is I think i tried again, I thought I'd done the questions wrong because I'd forgotten to put in a link to my site...

    So, there may be a duplicate post.

    Karen

  3. CrouchingBruin
    Member
    Posted 3 months ago #

    Hi, Karen:

    Here's what your code looks like (please remember to put code inside backticks so the formatting isn't lost):

    <img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetterTEXTScaled.jpg" width: 950px; height: 169px; />

    Browsers can be very picky when it comes to the correct syntax, which may be why GTMetrix isn't picking up your change.

    There are two ways of specifying the dimensions of an image: attributes and CSS styles. The way to do it through attributes would be:

    <img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetterTEXTScaled.jpg" width="950" height="169" />

    The way to set it through an inline CSS style would be:

    <img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetterTEXTScaled.jpg" style="width:950px;height:169px;" />

    Since you already know the dimensions of the image, you should use the attributes format. This will let the browser know ahead of time how much space to set aside for the image, so rest of the page can be loaded. Plus, you should also avoid using inline CSS styles because they are hard to override in external stylesheets.

  4. ConsiderThis1
    Member
    Posted 3 months ago #

    Okay... Sounds good.

    I wondered why the back ticks I used didn't work... the backtick is the thing under the wavy line, right. Was I also supposed to choose "code" from the options above...?

    So it can be in a straight line, rather than on separate lines???

    <div id="banner-bg" class="cf">
    <div id="banner" class="row">
    <img id="headerImage" src="http://health-boundaries.com/wp-content/uploads/2013/10/NowBetterTEXTScaled.jpg"
    width: 950px;
    height: 169px;

    />

    </div> '`

    I'm trying it with "code" from the tabs above...

  5. ConsiderThis1
    Member
    Posted 3 months ago #

    My backticks aren't working... You can faintly see them in my first post... I've tried again using that code, but still not working.

    I can't get the code from my site right now because iPage is down...

  6. ConsiderThis1
    Member
    Posted 3 months ago #

    Okay... the grade results are the same. How long do the caching things last... I didn't undo what W3 did, so there are caches... in several places...

    Except your way of writing it seems to have taken two seconds off the load time... without changing the grades...

    I've got to say, I do NOT understand. two seconds off is almost half... so why are the grades the same?

    And, why is it two seconds faster when the message about no dimensions on my header image remains the same...

  7. ConsiderThis1
    Member
    Posted 3 months ago #

    Happiness, CrouchingBruin ~~

    Using the things you taught me early on, and with the help of iPage's new WPEssential, I've got a lot more things under control.... or, maybe I mean Better Understood.

    The techs are saying my pages load quickly, 1.3 seconds, for instance, but that I keep getting the warning messages because my site doesn't comply with best programming practices.

    That makes sense.

    Also, the caching time is apparently around 10 hours, so in a bit I can check and see if the tests are still showing that I don't have dimensions on my header image, when in fact I put in the code the way you showed it, not the style approach, the other one.

    Without everything you taught me about Montezuma CSS and files, early on, I would not have been able to achieve the results which... it looks like... are in existence.

    Thank you!!!!!

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.