PHP minifiying HTML - skip reading JavaScript code and CSS?

Question

Using the answer from this thread, I am able to 'minify' html,

function sanitize_output($buffer) {

    $search = array(
        '/\>[^\S ]+/s',     // strip whitespaces after tags, except space
        '/[^\S ]+\</s',     // strip whitespaces before tags, except space
        '/(\s)+/s',         // shorten multiple whitespace sequences
        '/<!--(.|\s)*?-->/' // Remove HTML comments
    );

    $replace = array(
        '>',
        '<',
        '\\1',
        ''
    );

    $buffer = preg_replace($search, $replace, $buffer);

    return $buffer;
}

ob_start("sanitize_output");

But it breaks the html pages that have incline JavaScript code and CSS.

So how can I skip processing JavaScript code and CSS? Any thoughts?

EDIT:

Below is my HTML with JS code:

<!DOCTYPE html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <title>Google Maps Multiple Markers</title>
      <script src="http://maps.google.com/maps/api/js?sensor=false"
              type="text/javascript"></script>
    </head>
    <body>
      <div id="map" style="width: 500px; height: 400px;"></div>
    
      <script type="text/javascript">
        var broadway = {
            info: '<strong>Chipotle on Broadway</strong><br>\
                        5224 N Broadway St<br> Chicago, IL 60640<br>\
                        <a href="#">Get Directions</a>',
            lat: -33.890542,
            long: 151.274856
        };
    
        var belmont = {
            info: '<strong>Chipotle on Belmont</strong><br>\
                        1025 W Belmont Ave<br> Chicago, IL 60657<br>\
                        <a href="#">Get Directions</a>',
            lat: -33.923036,
            long: 151.259052
        };
    
        var locations = [
          [broadway.info, broadway.lat, broadway.long, 0],
          [belmont.info, belmont.lat, belmont.long, 1],
          // [sheridan.info, sheridan.lat, sheridan.long, 2],
        ];
    
        // var locations = [
        //   ['Bondi Beach', -33.890542, 151.274856, 4],
        //   ['Coogee Beach', -33.923036, 151.259052, 5],
        //   // ['Cronulla Beach', -34.028249, 151.157507, 3],
        //   // ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        //   // ['Maroubra Beach', -33.950198, 151.259302, 1]
        // ];
    
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: new google.maps.LatLng(-33.92, 151.25),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: [{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]
        });
    
        var infowindow = new google.maps.InfoWindow();
    
        var marker, i;
    
        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
    
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      </script>
    </body>
    </html>

can you provide an example? I tried using [this](https://www.functions-online.com/preg_replace.html) tool and ` — Fabrizio Mele, Jan 11 '18 at 11:17
@fabriziomele see my edit above for the script that i have been using. — Run, Jan 11 '18 at 12:06
So in this case your code is "breaking" because the `//` starts a comment until the end of the line, and you're removing line breaks... — Niet the Dark Absol, Jan 11 '18 at 12:51

score 2 · Answer 1 · answered Jan 11 '18 at 12:40

2

But it breaks the html pages that have incline JavaScript code and CSS.

Inline Javascript and CSS is generally considered bad practice for performance (not cacheable unless the entire HTML is cacheable), maintainability and security.

You can't parse html with regex. Having said that I am a little curious as to how this breaks inline javascript and CSS.

You could run the HTML DOM parser over the code and remove comments and trim the leaf entities, but that's getting rather complicated.

Have you actually tried to measure the benefit of your efforts? If you are compressing the HTML, then the overall difference in size will not be that great. And bandwidth is not usually the most important determinant of perceived performance (1).

1) while I said that inlining is bad practice, used appropriately it can avoid the BIG performance hit of network latency

answered Jan 11 '18 at 12:40

symcbean

47,736
6
59
94

Personally I just do a global removal of `/\r?\n\t*/` and while the savings may be small, they add up fast. Definitely agree on the security point though. – Niet the Dark Absol Jan 11 '18 at 12:45
it seem that compressing html actually slowing down the page loading a bit. – Run Jan 11 '18 at 12:51
though, `Inline Javascript and CSS is generally considered bad practice` that is a bit of debate I guess - react & vue practise inline inline Javascript and CSS. – Run Jan 11 '18 at 12:53
Something is very wrong with at least one end of your connection if compression has a measurable negative impact across a network with >10ms RTT (i.e. most of them) – symcbean Jan 11 '18 at 15:25

PHP minifiying HTML - skip reading JavaScript code and CSS?

1 Answers1