1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS CSS optimization

Discussion in 'Web Development' started by navyfalcon, Jul 11, 2013.

  1. navyfalcon

    navyfalcon Well-Known Member Verified Member

    CSS optimization is to have the same look and feel of the website but with less code so it loads faster.
    Also using CSS sprites to reduce the photos loadtime.
    I am changing from table layout to CSS so I can use CSS sprites. I would like some information on how to optimize the CSS code (in "http://freetutorials.name/Reference1/RedCrab Manual.html"). I only need some information and examples so I can change it. I want to be able to see how much it can be reduced with proper coding and how much faster loading, then with sprites, how much faster.
    -
    Any help will be appreciated
    falcon
     
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    The results of your page analyzed by YSlow
    concentrating on fixing these will net a greater increase in speed - them proceed to CSS and Sprites

    Compress components with gzip
    "There are 3 plain text components that should be sent compressed"
    http://freetutorials.name/Reference1/RedCrab Manual.html
    http://freetutorials.name/Reference1/2 col.css
    http://gostats.com/js/counter.js
    Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip.

    Add an Expires or a Cache-Control Header
    "There are 80 static components without a far-future expiration date."
    Web pages are becoming increasingly complex with more scripts, style sheets, images, and Flash on them. A first-time visit to a page may require several HTTP requests to load all the components. By using Expires headers these components become cacheable, which avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often associated with images, but they can and should be used on all page components including scripts, style sheets, and Flash.

    Reduce the number of DOM elements
    "There are 3809 DOM elements on the page"
    A high number of DOM elements can be a symptom that there's something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there's a better and more semantically correct way to do your markup.

    Avoid HTTP 404 (Not Found) error
    "There are 19 requests that are 404 Not Found"
    HTTP requests are expensive so making an HTTP request and getting a useless response (i.e. 404 Not Found) is totally unnecessary and will slow down the user experience without any benefit.
    Some sites have helpful 404s "Did you mean X?", which is great for the user experience but also wastes server resources (like database, etc). Particularly bad is when the link to an external JavaScript is wrong and the result is a 404. First, this download will block parallel downloads. Next the browser may try to parse the 404 response body as if it were JavaScript code, trying to find something usable in it.

    Do not scale images in HTML
    "There are 56 images that are scaled down"
    Web page designers sometimes set image dimensions by using the width and height attributes of the HTML image element. Avoid doing this since it can result in images being larger than needed. For example, if your page requires image myimg.jpg which has dimensions 240x720 but displays it with dimensions 120x360 using the width and height attributes, then the browser will download an image that is larger than necessary.
     
  3. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Thank You iskey
    will try and use some if not all suggestions
    falcon
     
  4. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Reduced comments (didn't want to remove them completely) used less "-" and used abbreviations
    Reduced by 742 bytes.
    -
    Removed blank lines (lines with no text or code)
    Reduced by 960 bytes.
    -
    I will be using the suggestions from ishkey soon
    -
    is there a better way to do this
    <style type="text/css">
    .col { border: 0px solid darkblue; }
    .leftcol { border: 0px solid darkblue; }
    .rightcol { border: 0px solid darkblue; }
    .lftcol { border: 0px solid darkblue; }
    .midlftcol { border: 0px solid darkblue; }
    .midcol { border: 0px solid darkblue; }
    .midrtcol { border: 0px solid darkblue; }
    .rtcol { border: 0px solid darkblue; }
    </style>
    -
    the external style sheet is for multiple pages (should I use a separate external style sheet for this page)
    -
    line 258, 259, 260
    &nbsp;&nbsp;&nbsp;1. Enter the expression 17 + 4 + X<br>
    &nbsp;&nbsp;&nbsp;2. Enter the assignment X = 43<br>
    &nbsp;&nbsp;&nbsp;3. For result press <strong>Ctrl+Enter</strong><br>
    -
    is there a better way to do this. I use several 3 spaces in the page. Can it be done better with CSS
    -
    Thank You
    falcon
     
  5. navyfalcon

    navyfalcon Well-Known Member Verified Member

    from SEO chat:
    Does how quickly your page loads affect your position in Google? That question may remain unanswered, but it is certainly true that websites that rank highly in the search engine load quickly — and are often commercially successful, because visitors don’t like to be kept waiting. How fast should your website load to keep up with these online stars? Keep reading for the results of our study.

    There has been an increasing importance laid on the website loading time when it comes to user experience and its potential effect on a site’s Google search engine ranking. This is because Google is becoming serious in the campaign to load websites faster. Remember that in Google Webmaster Tools, a new section has recently been added:
    -
    from Quicksprout
    Don’t you hate it when websites load slowly? I know I do. And to make matters worse, do you even come back to websites that load slow? The chances are, you don’t!
    For that very reason, in April 2010, Google started to take load time into account when they rank sites. It wasn’t because you wouldn’t go back to those sites that load slowly… instead saw a trend, in which when they ranked slow websites, you would use Google less. And if you used Google less that meant they would make less money from ads and you would start to use other search engines.
    -
    Load time is getting more important.
    -
    falcon
     
  6. navyfalcon

    navyfalcon Well-Known Member Verified Member

    What Google says about website load speed
    http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
    -
    It is getting very important ! Maybe the forum should include an area about site optimization (or site load speed)
    -
    Now I am trying to reduce it manually before zipping it. I will be optimizing all my web pages on my site so I can maintain first page for my site (freetutorials). I am noticing how it is getting harder to obtain and maintain "First Page" for the search engines (and the rules are changing).
    -
    falcon
     
  7. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Another area (for the forum) would be the "Best Free software to optimize (or speed up your download speed) your website".
    I will be testing several for my site (but many, like HTML Editors, need to be tested first). Each has its own merits and faults. Therefore, I need to know what I want (by doing it manually) before checking the software. Sometimes, manually is the only way to effectively obtain the desired results.
    -
    falcon
     
  8. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Tried:
    free online HTML optimizers
    http://iwebtool.com/html_optimizer
    -
    Checking a website section at a time
    Banner - removed 79 bytes (displayed the same)
    Contents - removed 211 bytes (displayed the same)
    -
    Want to clean up some of the website before doing more (need to correct some of the pictures that Ishkey listed.
    -
    falcon
     
  9. navyfalcon

    navyfalcon Well-Known Member Verified Member

    -
    This is where "sprites" come in. The 3809 DOM elements become one (or just a few) download elements. They are grouped according to size.
    I will try and fix this soon
    -
    Thank You ishkey
    falcon
     
  10. navyfalcon

    navyfalcon Well-Known Member Verified Member

    free online HTML optimizers
    http://iwebtool.com/html_optimizer
    -
    The optimizer changed this:
    <style type="text/css">
    .col { border: 0px solid darkblue; }
    .leftcol { border: 0px solid darkblue; }
    .rightcol { border: 0px solid darkblue; }
    .lftcol { border: 0px solid darkblue; }
    .midlftcol { border: 0px solid darkblue; }
    .midcol { border: 0px solid darkblue; }
    .midrtcol { border: 0px solid darkblue; }
    .rtcol { border: 0px solid darkblue; }
    </style>
    to this:
    <style type="text/css"> .col { border: 0px solid darkblue; } .leftcol { border: 0px solid darkblue; } .rightcol { border: 0px solid darkblue; } .lftcol { border: 0px solid darkblue; } .midlftcol { border: 0px solid darkblue; } .midcol { border: 0px solid darkblue; } .midrtcol { border: 0px solid darkblue; } .rtcol { border: 0px solid darkblue; } </style>
    -
    falcon
     
  11. navyfalcon

    navyfalcon Well-Known Member Verified Member

    line 258, 259, 260
    &nbsp;&nbsp;&nbsp;1. Enter the expression 17 + 4 + X<br>
    &nbsp;&nbsp;&nbsp;2. Enter the assignment X = 43<br>
    &nbsp;&nbsp;&nbsp;3. For result press <strong>Ctrl+Enter</strong><br>
    -
    is there a better way to do this. I use several 3 spaces in the page. Can it be done better with CSS
    -
    I am trying to clean up as much as I can before compression. Is there a better way to insert spaces (maybe with CSS)
    into a line other than using the HTML space ? Since there are many, it would be a way to reduce the code.
    -
    thank you
    falcon
     
  12. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Finally used inline style sheets
    <p style="margin-left:3%">Sin()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Trigonometric_functions">sine</a><br>
    Cos()&nbsp;&nbsp;&nbsp; <a href="http://www.clarku.edu/~djoyce/trig/functions.html">cosine</a><br>
    Tan()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Tangent">tangent</a><br>
    ArcSin()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Inverse_trigonometric_functions">inverse sine</a><br>
    ArcCos()&nbsp;&nbsp;&nbsp; <a href="http://www.themathpage.com/atrig/inverseTrig.htm">inverse cosine</a><br>
    ArcTan()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Inverse_tangent">inverse tangent</a><br>
    Deg()&nbsp;&nbsp;&nbsp; <a href="http://www.teacherschoice.com.au/maths_library/angles/angles.htm">convert radians to degrees</a><br>
    Rad()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.mathinary.com/degrees_radians.jsp">convert degrees to radians</a><br>
    Cot()&nbsp;&nbsp;&nbsp;&nbsp; cotangent<br>
    <a href="http://en.wikipedia.org/wiki/E_(mathematical_constant)">Exp()</a>&nbsp;&nbsp;&nbsp;&nbsp; exponent to Euler's constant : 2.71828182845904452...<br>
    Ln()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Natural_logarithm">natural logarithms</a> to base e (2,71828182845904 452...)<br>
    Log()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Common_logarithm">logarithms base 10</a><br>
    Log2()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Binary_logarithm">logarithms base 2</a><br>
    Log8()&nbsp;&nbsp;&nbsp;&nbsp; logarithms base 8<br>
    Log16()&nbsp;&nbsp;&nbsp;&nbsp; logarithms base 16<br></p><br>
    -
    lines 225 - 239 (inline style sheets)
    can it be assigned a label and use it as an internal page style instead of inline style ??
    -
    falcon
     
  13. navyfalcon

    navyfalcon Well-Known Member Verified Member

    I don't know about all tables and/or CSS, but I changed some of my tables to CSS and it took less code. That should make it load faster. Also removed extra <br>s and end of paragraph periods (which decreased the code even more).
    -
    I am trying to reduce much as possible before zipping. Some things must be removed by hand.
    -
    falcon
     
  14. navyfalcon

    navyfalcon Well-Known Member Verified Member

  15. navyfalcon

    navyfalcon Well-Known Member Verified Member

    http://freetutorials.name/Reference1/RedCrab Manual.html
    location: 3.2 Scientific Panel
    Display: Scientific Functions

    Sin() sine
    Cos() cosine
    Tan() tangent
    ArcSin() inverse sine
    ArcCos() inverse cosine
    ArcTan() inverse tangent
    Deg() convert radians to degrees
    Rad() convert degrees to radians
    Cot() cotangent
    Exp() exponent to Euler's constant : 2.71828182845904452...
    Ln() natural logarithms to base e (2,71828182845904 452...)
    Log() logarithms base 10
    Log2() logarithms base 2
    Log8() logarithms base 8
    Log16() logarithms base 16
    - - - - - - - - - - - - - - -
    Display: Code; Note: the spaces [&nbsp;] What is a better way to do this with CSS (that will
    reduce the amount of code)
    Code:
    <strong>Scientific Functions</strong><img src="../Images/SciPnl.jpg" width="20%" height="30%" align="right" alt="SciPnl"><br><br>
    <p style="margin-left:5%">Sin()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Trigonometric_functions">sine</a><br>
    Cos()&nbsp;&nbsp;&nbsp; <a href="http://www.clarku.edu/~djoyce/trig/functions.html">cosine</a><br>
    Tan()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Tangent">tangent</a><br>
    ArcSin()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Inverse_trigonometric_functions">inverse sine</a><br>
    ArcCos()&nbsp;&nbsp;&nbsp; <a href="http://www.themathpage.com/atrig/inverseTrig.htm">inverse cosine</a><br>
    ArcTan()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Inverse_tangent">inverse tangent</a><br>
    Deg()&nbsp;&nbsp;&nbsp; <a href="http://www.teacherschoice.com.au/maths_library/angles/angles.htm">convert radians to degrees</a><br>
    Rad()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.mathinary.com/degrees_radians.jsp">convert degrees to radians</a><br>
    Cot()&nbsp;&nbsp;&nbsp;&nbsp; cotangent<br>
    <a href="http://en.wikipedia.org/wiki/E_%28mathematical_constant%29">Exp()</a>&nbsp;&nbsp;&nbsp;&nbsp; exponent to Euler's constant : 2.71828182845904452...<br>
    Ln()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Natural_logarithm">natural logarithms</a> to base e (2,71828182845904 452...)<br>
    Log()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Common_logarithm">logarithms base 10</a><br>
    Log2()&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://en.wikipedia.org/wiki/Binary_logarithm">logarithms base 2</a><br>
    Log8()&nbsp;&nbsp;&nbsp;&nbsp; logarithms base 8<br>
    Log16()&nbsp;&nbsp;&nbsp;&nbsp; logarithms base 16<br></p><br>
    
    - - -
    The optimizer software leaves the spaces in (I think manual optimization is the best way for this problem)
    Thank You
    falcon
     
  16. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,

    When you've finished will you let us know the improvement in download speed?
     
  17. navyfalcon

    navyfalcon Well-Known Member Verified Member

    I can give you the number of bytes I saved and how. The speed will be faster but I don't know if I saved the original.
    I will need to check to see. So far (minus 6767 bytes of code, without zipping and before sprites).
    -
    falcon
    -
    P.S. I am checking on some software that changes automatically, but it seems bloated. Also checking some manual tips on how to change. But I am still having some issues. Most of the people with table layouts do not seem to want to change, and many of the CSS do not seem to want to optimize (it is work), so this may be a lost item.
    By the way (BTW) I like your logo.
     
  18. navyfalcon

    navyfalcon Well-Known Member Verified Member

    The problem I am presently having is the page displays correctly on my desktop but not when I upload it.
    I have tried several corrections but none of them work.
    The first section displays on top and the second and third display below it.
    It might have something to do with the image, I don't know.
    The link is in post #15
    Thank You
    falcon
    -
    Code:
      <p class="clear"></p>
    <!--== lft col==--> <dl class="licoll"><p class="ex1"> Sin()<br> Cos()<br> Tan()<br> ArcSin()<br> ArcCos()<br> ArcTan()<br> Deg()<br> Rad()<br> Cot()<br> Exp()<br> Ln()<br> Log()<br> Log2()<br> Log8()<br> Log16()<br></dl>
    <!--== mid col ==--> <dl class="micol">
    <a href="http://en.wikipedia.org/wiki/Trigonometric_functions">sine</a><br>
    <a href="http://www.clarku.edu/~djoyce/trig/functions.html">cosine</a><br>
    <a href="http://en.wikipedia.org/wiki/Tangent">tangent</a><br>
    <a href="http://en.wikipedia.org/wiki/Inverse_trigonometric_functions">inverse sine</a><br>
    <a href="http://www.themathpage.com/atrig/inverseTrig.htm">inverse cosine</a><br>
    <a href="http://en.wikipedia.org/wiki/Inverse_tangent">inverse tangent</a><br>
    <a href="http://www.teacherschoice.com.au/maths_library/angles/angles.htm">convert radians to degrees</a><br>
    <a href="http://www.mathinary.com/degrees_radians.jsp">convert degrees to radians</a><br>
    cotangent<br>
    <a href="http://en.wikipedia.org/wiki/E_%28mathematical_constant%29">Exp()</a>exponent to Euler's constant : 2.71828182845904452...<br>
    <a href="http://en.wikipedia.org/wiki/Natural_logarithm">natural logarithms</a> to base e (2,71828182845904 452...)<br>
    <a href="http://en.wikipedia.org/wiki/Common_logarithm">logarithms base 10</a><br>
    <a href="http://en.wikipedia.org/wiki/Binary_logarithm">logarithms base 2</a><br>
    logarithms base 8<br>
    logarithms base 16<br>
    </dl>
    <!--==== rt col ==-->
    <dl class="ricol">
    <img src="../Images/SciPnl.jpg" width="20%" height="30%" align="left" alt="SciPnl"></dl>
    <p class="clear"></p>
    
     
  19. Geoff Tyrer

    Geoff Tyrer Member

    Hi falcon,
    I came across this Google page about a Google Analytics report that you can get on your site's speed. Have you (or anyone) tried this? I've put it on my To Do list...
    There is also this Google page - which seems to be a re-use of the PageSpeed tool. When I ran it it said I should "leverage browser caching" by using things like "Expires" and "Last-Modified" on HTTP headers. Have you done anything like this?
     
  20. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Checked web page speed using Gomez website performance test
    "http://www.gomez.com/google-adwords/instant-test/?gclid=CNG8or7s3LgCFe1_Qgod5ksA8A"
    before and after using website optimizer
    http://iwebtool.com/html_optimizer

    before: 1.504 sec.
    http://freetutorials.name/Reference1/Algebra tutorials 1.html

    after: 0.732 sec.
    http://freetutorials.name/Reference1/Algebra tuts.html

    The site was CSS (not tables) used Optimizer to improve (not a bad improvement) but I think
    manual optimization prior to using software will get better results.
    will be checking other methods
    -
    hope this helps
    falcon