SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Web Compression

  1. #1
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)

    Web Compression

    I am not entirely sure if this is the right section to post this up on the forum.

    Basically I have a web template I've created but as I've used a wide variate of script I wish to compress them, including both CSS and JS preferably into a single file. What is the easier was to go about web compression outside a content management system.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Nah, not really a content question, so I've moved it to web design.

    See if this helps:

    http://robertnyman.com/2010/01/19/to...-environments/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member VSDan's Avatar
    Join Date
    Feb 2004
    Location
    Vancouver, BC, Canada
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I assume you mean combine CSS and JS into respective single files since cannot combine CSS and JS into a single file.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Are there different assets delegated to separate pages or are all the assets included on every page request?

    If all the assets are included on every page you could write script to crawl the page and write the css and js to a single file. Than you might be able to copy and paste that into a compressor and save to a separate file. Though for ease of maintenance it is probably best to use a helper library such as; assetic or build something similar in whatever application language you are using.

    Of course, this becomes much more difficult and involved if different scripts are delegated on a page by page basis.
    The only code I hate more than my own is everyone else's.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I just did this to my site. Just copy and paste them all into two files. One for css and one for js. Keep them in the same order they currently are called in your working page. Don't erase any of the original files until you've tested that all is working.

  6. #6
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Thanks guys for your feedback.

    I thought of your method @EricWatson ; which would do what I want. The only issue is there would still be white spacing in the file.

    Quote Originally Posted by oddz
    Are there different assets delegated to separate pages or are all the assets included on every page request?
    It's for a fully featured theme so it would make sense to include them on all the pages. Currently they are included on all the pages. Thanks for the link, this would prove useful in this theme. Not sure if you can have this on the WordPress installation. My original intention is to have a single CSS and a single JS file which would run all the scripts on the website. I feel if I was to run assestic it would automatically give me the minify version of each.

    The only trouble is some scripts are needed before the header and other before the body, so I would be a little puzzled on wether two files would be needed to make sure everything runs as it shou;d.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just google "css compresser" and "javascript compresser". Google will have 100 online tools to remove the white space. This is my favorite javascript compressor http://compressorrater.thruhere.net/. I don't bother with compressing css. The speed difference would be in the 1/1000 of mil seconds. Not worth the effort of maintaining two separate files. In order to really see a huge difference in website speed, compress and cache it via htacces. Here is how. Just did that too. http://www.visibilityinherit.com/cod...ur-website.php

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Doesn't the WordPress SEO plugin aggregate asset files?
    The only code I hate more than my own is everyone else's.

  9. #9
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by oddz View Post
    Doesn't the WordPress SEO plugin aggregate asset files?
    It's more for maintanability. With CSS I can have @import and place all the CSS together, which is okay, but when it comes down to the scripts, there is nothing much I can do, unless I go down the PHP path. For the WordPress version I will keep things in different files, as they can easily fix this on the WP file. I personally use W3TC for WordPress and it does an amazing job!
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  10. #10
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    I just came across this - http://headjs.com/, I will play around with this a little to see what makes of it.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  11. #11
    Community Advisor silver trophy

    Join Date
    Nov 2006
    Location
    UK
    Posts
    2,547
    Mentioned
    40 Post(s)
    Tagged
    1 Thread(s)
    Why not just use mod_deflate and make it functional on all text based files?

  12. #12
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,377
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by EastCoast View Post
    Why not just use mod_deflate and make it functional on all text based files?
    I have solved my issue now. With the CSS I use a single file and within this file have a dozen or so imports to the various CSS files. For the scripts I now use head.js.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!


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
  •