Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Join Date
    Jun 2008
    Location
    Ontario, Canada
    Posts
    57
    Plugin Contributions
    0

    Default Default CSS Optmization - How do I change CSS File name in header of all pages?

    Hello,

    I just launch my site, and I'm looking to streamline it a bit. I have been trying to find out a good way to compress my CSS files...which are pretty large.
    I found this site after some searching and though it looks like a pretty good method. But I am not quite sure how to implement it into Zen Cart.

    http://www.ethanandjamie.com/blog/43...gzip-css-files

    The part I am unsure of is how to: "update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created"

    Does this look like a good way to you? Maybe this could help a lot of people...but I can't figure out how to do this.

    Thanks for you time,

    Adrian

  2. #2
    Join Date
    Jun 2008
    Location
    Ontario, Canada
    Posts
    57
    Plugin Contributions
    0

    Default CSS Optmization - How do I change Css File name in header of all pages?

    Hello,

    I posted this in general questions a day ago and thought this might be a better place to post this question.

    I just launch my site, and I'm looking to streamline it a bit. I have been trying to find out a good way to compress my CSS files...which are pretty large.
    I found this site after some searching and though it looks like a pretty good method. But I am not quite sure how to implement it into Zen Cart.

    http://www.ethanandjamie.com/blog/43...gzip-css-files

    The part I am unsure of is how to: "update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created"


    Thanks for your time,

    Adrian

  3. #3
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: CSS Optmization - How do I change Css File name in header of all pages?

    Quote Originally Posted by Beama View Post
    Hello,

    I posted this in general questions a day ago and thought this might be a better place to post this question.

    I just launch my site, and I'm looking to streamline it a bit. I have been trying to find out a good way to compress my CSS files...which are pretty large.
    I found this site after some searching and though it looks like a pretty good method. But I am not quite sure how to implement it into Zen Cart.

    http://www.ethanandjamie.com/blog/43...gzip-css-files

    The part I am unsure of is how to: "update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created"


    Thanks for your time,

    Adrian
    If you keep the name stylesheet.css and location (includes/templates/YOUR_TEMPLATE/css

    Then there is nothing more you need to do.

    Zen Cart will find your optimized stylesheet as it normally does.

  4. #4
    Join Date
    Jun 2008
    Location
    Ontario, Canada
    Posts
    57
    Plugin Contributions
    0

    Default Re: CSS Optmization - How do I change Css File name in header of all pages?

    The recommendation that this guy gives is to:

    ..."create a file called styles.php in the same folder as your CSS files."

    then you place the php code he has created, and...

    "You will then need to update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created."

    That's why I would like to know how to change Css File name in header. I'm not just trying to optimize the code that is in the stylesheet.

    Thanks

  5. #5
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: CSS Optmization - How do I change Css File name in header of all pages?

    Quote Originally Posted by Beama View Post
    The recommendation that this guy gives is to:

    ..."create a file called styles.php in the same folder as your CSS files."

    then you place the php code he has created, and...

    "You will then need to update the path to the CSS file in the head of your HTML or PHP file to point to the styles.php file that you created."

    That's why I would like to know how to change Css File name in header. I'm not just trying to optimize the code that is in the stylesheet.

    Thanks
    Here are a couple of on-line optimizers that don't require anything more than inputing your stylesheet information and getting an optimized version of the same file.

    www.cssoptimiser.com/

    www.cleancss.com/

  6. #6
    Join Date
    Jun 2008
    Location
    Ontario, Canada
    Posts
    57
    Plugin Contributions
    0

    Default Re: CSS Optmization - How do I change Css File name in header of all pages?

    Thank you. What I was also trying to do is compress the CSS files with GZip or something.

    do you have any tips for that?

    (by the way...i really appreciate you getting back to me so quickly. thanks!)

  7. #7
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: CSS Optmization - How do I change Css File name in header of all pages?

    Quote Originally Posted by Beama View Post
    Thank you. What I was also trying to do is compress the CSS files with GZip or something.

    do you have any tips for that?

    (by the way...i really appreciate you getting back to me so quickly. thanks!)
    Not really no.

    I usually just try to optimize my stylesheets using either of the on-line options I've mentioned.

  8. #8
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: CSS Optmization - How do I change Css File name in header of all pages?

    Hi Clyde,

    I just ran the default 1.3.8a stylesheet through the first of those processes. It went from 13,995 bytes to 10,992 bytes on disk. But I've no idea to what extent that would improve the user's experience. Can you estimate how much faster the file would load? I've often wondered whether such optimization would be useful.

    Rob

  9. #9
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Default CSS Optmization - How do I change CSS File name in header of all pages?

    Quote Originally Posted by rstevenson View Post
    Hi Clyde,

    I just ran the default 1.3.8a stylesheet through the first of those processes. It went from 13,995 bytes to 10,992 bytes on disk. But I've no idea to what extent that would improve the user's experience. Can you estimate how much faster the file would load? I've often wondered whether such optimization would be useful.

    Rob
    Rob,

    Sorry, I can give you an estimate.

    But since the stylesheet has to load completely before anything will be displayed any reduction in size will help the loading time.

    Most people when writting their css usually end up with declarations that look like this:

    #alert {
    margin 0;
    padding:0;
    color:red;
    font-weight:bold;
    }
    #important {
    margin 0;
    padding:0;
    color:red;
    font-weight:bold;
    }

    un-optimized 12 lines of code have to be read

    Optimized only one line needs to be read

    #alert, #important {margin 0;padding:0;color:red;font-weight:bold;}

    And don't forget that you may be loading more than one stylesheet so any reduction in file size is going to help.

  10. #10
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: Default CSS Optmization - How do I change CSS File name in header of all pages?

    Hi again,

    Ever curious, I decided to test the theory. I loaded the home page (of my retail site, below), then a category page and then a product page. In each case, after the page first loaded, I reloaded it twice more.

    Then I used the first of the two tools mentioned by Clyde above to optimize both the stylesheet.css and the stylesheet_css_buttons.css files. (I have no others that would load.)

    Each time I reloaded the page I recorded the page parse time. (You can turn that on in admin/Configuration/Logging.) Here's the results...

    Code:
    Home    Cat.    Product
    1.380   4.193   1.885
    0.585   1.384   0.832
    0.518   1.371   0.801
    (0.9152)
    And after optimization...

    Code:
    Home    Cat.    Product
    0.617   1.389   0.883
    0.513   1.389   0.867
    0.519   1.423   0.874
    (0.9308)
    If you discard the first line in each test because it's the initial loading into memory for many elements, including images, then you can see that there is no significant difference attributable to the css files being optimized. (I didn't purge the browser cache before running the second set of tests, so many of those elements were still in memory.)

    The last number in each set, the one in brackets, is the average of the last two figures in each of the three columns above it. It indicates that the set using the optimized css file was slightly slower than the first set. I expect that is attributable to vagaries in transmission time between the server and me, but it might conceivably be due to the fact that the optimized file is not valid CSS and the browser has to work harder to parse it. But I don't know if that's the case.

    These results confirm what I've read elsewhere, that such forms of optimization operate on the least problematic part of the problem, the loading into memory of the textual page elements. Server load and back-end code optimization -- the sort of thing being greatly improved in ZC v2 -- are much more likely to yield useful improvements.

    YMMV

    Rob

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. layout changed after installed CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Feb 2014, 04:02 PM
  2. v151 How to uninstall CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 15 Feb 2014, 07:39 AM
  3. What to name the CSS files for Product pages?
    By thebigkick in forum Templates, Stylesheets, Page Layout
    Replies: 10
    Last Post: 10 Jan 2012, 05:33 PM
  4. how to get different header for different pages? - Without CSS
    By markpr9 in forum Templates, Stylesheets, Page Layout
    Replies: 6
    Last Post: 15 Apr 2009, 04:34 PM
  5. CSS on specific pages, Javascript on all pages
    By banswidthjunkie in forum General Questions
    Replies: 6
    Last Post: 22 Dec 2007, 07:31 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR