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 tool and <script> tags seems to work fine. — Fabrizio Mele
– Fabrizio Mele, Commented Jan 11, 2018 at 11:17
@fabriziomele see my edit above for the script that i have been using. — Run
– Run, Commented Jan 11, 2018 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
– Niet the Dark Absol, Commented Jan 11, 2018 at 12:51

symcbean · Accepted Answer · 2018-01-11 12:40:15Z

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, 2018 at 12:40

symcbean

48.4k6 gold badges63 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Niet the Dark Absol Over a year ago

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.

Run Over a year ago

it seem that compressing html actually slowing down the page loading a bit.

Run Over a year ago

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.

symcbean Over a year ago

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)

Collectives™ on Stack Overflow

PHP minifiying HTML - skip reading JavaScript code and CSS?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related