SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Minifying html/css/javascript - Google Page Speed

    OK - sorry if this is the wrong thread to post in - not sure what the right one would be.

    Has anyone had any experience minifying html/css/javascript for optimising for Google page speed?

    We're building a site out of .php includes - do we have to manually minify each file or is there something that can minify the whole site on the fly or in one go? Does that make sense?

    Same goes for the CSS, javascript etc...

    Cheers all

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Not sure what you mean by "We're building a site out of .php includes"

    I'm not sure of the PHP solutions available but I'll explain how I work.
    For CSS I use Compass which uses Sass for includes. Compass will compile and minify these for you.

    application.scss
    @import 'common/common';
    @import 'common/fonts';
    @import 'common/forms';

    For Javascript because I work with Ruby I use sprockets which works similarly.
    application.js
    //= require jquery
    //= require vendor/prism

    There's a lot different compression tools available, sprockets uses uglify by default.

    You want to aim for one stylesheet / one javascript file.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>untitled</title>
      </link rel="stylesheet" href="css/application.css">
    </head>
    <body>
    
    <script src="js/application.js"></script>
    </body>
    </html>
    The other option for js is dynamically load the scripts depending on the content, e.g. http://requirejs.org/
    This option is becoming more popular but I like the idea of just having one file - unless your application has massive amounts of js.
    It can be the right way to go if there's some large libraries that are only needed for a couple of pages. Things like charting libraries could be good to put into their own js like analytics.js and include it dynamically.

    Hope it helps

  3. #3
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Not sure what you mean by "We're building a site out of .php includes"
    Yeah sorry, that was a woolly description at best - we're building the site in HTML5. The page are then ripped apart and put back together out of .php templates and includes.

    Thanks for the help - I'll look into you solution.

  4. #4
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,541
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    Just out of curiosity, what do you mean by "Google page speed"? I've never come across the term before.

    I've never bothered to minify my pages, because I'm not convinced it does all that much good. Then again, as I have no experience of it, I might be totally wrong about that. Bootfit, I'd be interested to hear how you get on with it, and whether you do in fact improve your "Google page speed" - or any other performance improvement.

    Mike

  5. #5
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mikl View Post
    Just out of curiosity, what do you mean by "Google page speed"? I've never come across the term before.

    I've never bothered to minify my pages, because I'm not convinced it does all that much good. Then again, as I have no experience of it, I might be totally wrong about that. Bootfit, I'd be interested to hear how you get on with it, and whether you do in fact improve your "Google page speed" - or any other performance improvement.

    Mike
    Here you go - https://developers.google.com/speed/pagespeed/insights

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Mikl View Post
    I've never bothered to minify my pages, because I'm not convinced it does all that much good. Then again, as I have no experience of it, I might be totally wrong about that. Bootfit, I'd be interested to hear how you get on with it, and whether you do in fact improve your "Google page speed" - or any other performance improvement.
    minifying(removing white space) is one of the lesser optimisations. Combining files though can make a considerable difference to load times, keeping the number of HTTP requests down is the #1 rule. You could find a lot of before / after timed tests on the net.

    I'm sure you've probably seen this by now but it's always good to reference in these threads.
    http://developer.yahoo.com/performance/rules.html/

  7. #7
    SitePoint Mentor silver trophybronze trophy
    Mikl's Avatar
    Join Date
    Dec 2011
    Location
    Edinburgh, Scotland
    Posts
    1,541
    Mentioned
    63 Post(s)
    Tagged
    0 Thread(s)
    Bootfit,

    I think what you're really saying is that you want your pages to load faster?

    MarkBrown,

    You said "minifying(removing white space) is one of the lesser optimisations". Yes, that's what I thought as well. As you say, there are lots of other ways of optimising a page that would bring better results.

    Just for fun, I might try it one day, and try to measure the result, but I don't see it as a high priority.

    Mike

  8. #8
    SitePoint Zealot Bootfit's Avatar
    Join Date
    Jun 2005
    Location
    Liverpool, UK
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mikl View Post
    Bootfit,

    I think what you're really saying is that you want your pages to load faster?
    Well yeah - they already load pretty quick and are optimised to a high degree but as the site I'm working on is a personal project that I have the time to dedicate to, I'm trying to get as high a score possible on Google page speed. I know the big G places emphasis on page speed for it's SERPs so anything I can learn from this can only benefit me in the future.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,786
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Is the server set to send those file types in a compressed format? If not then turning that on (if you have access to do so) will make a bigger difference than minifying.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    From the sound of "Page Speed", Google is looking to shoehorn its way into the web hosting market.

    https://developers.google.com/speed/pagespeed/service

    PageSpeed Service fetches content from your servers, rewrites your pages by applying web performance best practices and serves them to end users via Google's servers across the globe.

    PageSpeed Service is currently offered free of charge to a limited set of webmasters during this trial period. Pricing will be competitive and details will be made available later. You can request access to the service by filling this web form.
    Now we know why Google started using loading speed as a ranking criteria, huh?

    This whole things sounds plain stupid. If you are on a decent web host, you are not going to save any time, and if you do it won't be much to even justify this silliness.

  11. #11
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Jaipur, Rajasthan, India
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bootfit View Post
    OK - sorry if this is the wrong thread to post in - not sure what the right one would be.

    Has anyone had any experience minifying html/css/javascript for optimising for Google page speed?

    We're building a site out of .php includes - do we have to manually minify each file or is there something that can minify the whole site on the fly or in one go? Does that make sense?

    Same goes for the CSS, javascript etc...

    Cheers all
    You say that you are manually minifying your files.
    I came accross a script that will minify your pages (HTML - inline css/js)on the fly during output.
    You can check that out here:- http://codecanyon.net/item/dynamic-w...ressor/2838376
    Well I never used that. But may help you.

  12. #12
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,806
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Bootfit View Post
    OK - sorry if this is the wrong thread to post in - not sure what the right one would be.

    Has anyone had any experience minifying html/css/javascript for optimising for Google page speed?

    We're building a site out of .php includes - do we have to manually minify each file or is there something that can minify the whole site on the fly or in one go? Does that make sense?

    Same goes for the CSS, javascript etc...

    Cheers all
    According to Google Page Speed minifying is considered Low Priority. (Don't sweat the petty things and only pet the...)


    I use a PHP Framework that fortunately combines all included files into a single string $view.
    I also have a $_SESSION variable which toggles compression so the uncompressed $view is easier to DEBUG

    Anyway I adapted this Method to suit my requirements.

    # Method to Maybe Compress HTML Source
    PHP Code:

    //==============================================
    // 
    // usage:
    //         $this->_maybe_compress_using_reference( $view );
    //  
    //==============================================
    function _maybe_compress_using_reference( & $result=''$return_result=false )
    {
      if ( 
    $_SESSION['jjj']['compress_result'] )
      {
         
    $_SESSION['zzz_after']  = ''// strlen($result);
         
    $_SESSION['zzz_before'] = strlen($result);
         
    $search = array
         (
          
    '/\>[^\S ]+/s',   //strip whitespaces after tags, except space
          
    '/[^\S ]+\</s',   //strip whitespaces before tags, except space
          
    '/(\s)+/s'        // shorten multiple whitespace sequences
          
    );
          
    $replace = array
          (
          
    '>',
          
    '<',
          
    '\\1'
          
    );
          
    $result preg_replace($search$replace$result);
          
    // DOES NOT SHOW ADVERTS ?????
          // $hex=array("\x0D","\x0A");
          // $result=str_replace($hex,'',$result);



          // Optional Cosmetic Stuff to show results at the end of the $view
          
    $_SESSION['zzz_after'] = strlen($result);
          
    # Dab on end
          
    if(LOCALHOST// DABS this on the end after </body?</html>
          
    {
            
    $result str_replace("</body></html>",''$result);
            
    $result .=  '<p class=\'clb\'> Crunched output results:'
                      
    .     jj.js .'Before: '      number_format($_SESSION['zzz_before'])
             .       
    jj.js .'After: &nbsp; 'number_format($_SESSION['zzz_after'])
             .       
    jj.js .'Saving: '      number_format($_SESSION['zzz_before'] - $_SESSION['zzz_after']) .' bytes'
             
    .       jj.js .'Percent: '      
                     
    number_format(100 * ($_SESSION['zzz_before'] - $_SESSION['zzz_after']) / $_SESSION['zzz_before']) .' %'
             
    .   '</p>'
                      
    .     '</body></html>';
          }
      }

      
    #RETURNED BY REFERENCE
      #return $result;
    }//endfunc 


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
  •