Minify HTML Page Output with This Simple PHP Script
PHP If you're building any website, for a business, a client, or even a personal blog, it's best practice to minify HTML output. This helps improve page load times and, in turn, provides a better user experience and could save you money in the long-run.
This article will step you through the process of HTML minification within your PHP web applications.
The Problem: How Do I Minify HTML?
Even though HTML is considered good practice, browsers, even modern browsers, will not minify HTML output automatically, nor should they. The browser will serve the content it receives from the web application server, in this case, PHP, as it is received.
So, say you have a standard HTML page with a title, meta description, and a single paragraph:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Page</title>
<meta name="description" content="This is my HTML page description." />
</head>
<body>
<p>This is the body content.</p>
</body>
</html>
This isn't much code and probably wouldn't make much of a difference as far as page load times go since the HTML content amount is so small, but provides a good example of how the HTML minification process works.
In a real-world example, HTML minification can save you tons of bandwidth and collective page load speeds. One of the articles on this blog loads a total of 27 KB of data alone of unminified HTML content. Once minified, the total drops down significantly to 7.8 KB of data. Again, it's not a lot when thinking smaller picture and only saves 19.2 KB on a single page request. However, if you spread that out over hundreds or thousands of requests, the amount of bandwidth you save becomes much more substantial.
So, how is it done?
The Solution: Minify HTML with a PHP Script
PHP provides a simple solution for HTML minification. I'm going to give you the full example upfront and then break it down piece by piece.
Here's the full example:
function sanitize_output($buffer) {
$search = [
'/\>[^\S ]+/s',
'/[^\S ]+\</s',
'/(\s)+/s',
'/<!--(.|\s)*?-->/'
];
$replace = [
'>',
'<',
'\\1',
''
];
$buffer = preg_replace($search, $replace, $buffer);
return $buffer;
}
ob_start("sanitize_output");Our custom sanitize_output() method accepts one parameter, $buffer, which is the output data held by PHP before sending it to the browser. This output data will be manipulated within this function and returned to the browser for output to the user.
Next, are two arrays. The $search array which contains regular expressions that we'll find in the HTML output received from the processed PHP data, and the $replace array which will replace the found regular expression data with the new data.
Here is a list containing each of the regular expressions and what they'll do in the code:
- Regular Expression 1: strips whitespaces after tags, except for spaces, and replaces with >
- Regular Expression 2: strips whitespaces before tags, except for spaces, and replaces with <
- Regular Expression 3: shortens multiple whitespace sequences and replaces with
\\1which is a backreference to the remaining content so that it's not removed. - Regular Expression 4: removes HTML comments by replacing them with an empty string.
Finally, we'll use PHP's preg_replace() method which will perform the regular expression replacements in the $buffer all at once and then return the desired minified HTML output to the browser.
The ob_start() method is used to fire off our custom method, enabling output buffering and will perform the requested actions before returning the HTML output to the browser.
Setting Up Your PHP Server
Now that the code is completed save this to your desired location on your web server as minify.php. Remember the location of this file, because we'll need it to start serving minified HTML pages on your server. I've placed mine at the following location:
/var/www/minify.php
Open your php.ini file and search for a single occurrence of:
auto_prepend_file = [file_path]
or
;auto_prepend_file =
If this exists, or doesn't exist, either replace with or add this:
auto_prepend_file = /var/www/minify.php
Make sure to remove any prepended semi-colons ; as this will comment out the line in your configuration file.
Finally, restart your PHP server. On Linux, you restart Apache with this command:
sudo systemctl restart apache2
On Windows, open services.msc and restart the process:
World Wide Web Publishing Service
The Final Output
Now we receive the minified HTML content as desired from our PHP script:
<!DOCTYPE html><html lang="en"><head><title>My HTML Page</title><meta name="description" content="This is my HTML page description." /></head><body><p>This is the body content.</p></body></html>
Conclusion
It's best practice to minify all HTML on your production websites, whether the content is short or extremely long. Regardless of the page size, you could save gigabytes of bandwidth over time, which, in turn, improves your user experience and could even save you on data transfer costs if your page sizes are substantial enough.
Comments
Miky
Could you help me please! To add css brackets {}! Because this scripts does not catch brackets!
Josh Rowe