The loading time of a website is as important as its functionality. You might have a great website, but who wants to wait for it to load? Website optimization experts recommend that webmasters try to minify CSS files to reduce the number and size of HTTP requests required to serve web pages.
What is Minification?
Minification refers to the process of removing all unnecessary characters from a file while keeping the basic functions of the code. The final result is a new file that is smaller than the original but identical for the machine. The main benefit to smaller files is that they require less bandwidth and are faster for the client to download. Although not intended, the shrinking expertise can make reading code more difficult for humans, so shrinking can also be seen as a mild obfuscation.
On-the-fly Minification
We can use PHP to minify the CSS file before serving it to users. This approach offers all the advantages of minimizing (smaller files that require less bandwidth for users) without disadvantages (forcing our developers to work with gigantic blobs that are hard to read). Thus, we make it easy to debug legibility and performance.
There many scripts floating around the web that can be more hurtful than useful. Most of these scripts failed to generalize functionality and find the sweet spot. They may reduce the size a lot but almost all of the copy-paste scripts will fail to work after minification. The error seems to be around content: '' because it can have any string including spaces.
Instead of going in the dangerous area of broken css, I will simple work around the lines, with safer approach.
<?php
/* Add your CSS file */
$buffer = file_get_contents("path/to/your/css/file.css");
// Trim whitespace around lines
$buffer = implode("\n", array_map('trim', explode("\n", $buffer)));
// Remove empty lines
$buffer = implode("\n", array_filter(explode("\n", $buffer)));
// Remove whitespace
$buffer = str_replace(array("\r\n", "\r", "\n", "\t"), '', $buffer);
// Remove space after colons
$buffer = str_replace(': ', ':', $buffer);
// Shorten units
$buffer = str_replace('0px', '0', $buffer);
// Remove unnecessary semicolons
$buffer = str_replace(':}', '}', $buffer);
// Enable GZip encoding.
ob_start("ob_gzhandler");
// Enable caching
header('Cache-Control: public');
// Expire in one day
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
// Set the correct MIME type, because Apache won't set it for us
header("Content-type: text/css");
// Write everything out
echo($buffer);
?>How to implement?
Create a file containing the above code and save it as minified.css.php, then link to this file as you normally would for your CSS file:<link href="assets/css/minified.css.php" rel="stylesheet">
The CSS file you reference within the script is minimized at runtime.
This not only makes your website faster, but also allows you to work with readable files during development without having to manually compress before going into production.