CODEWITHSUNDEEP
htmlcssminifyminimize
jerry
jerry

Reputation: 2789

How can I minimize HTML for performance using PHP

I'm somewhat new to the concept of minimization, but it seems simple enough. I understand how libraries like jQuery can benefit from minimization, but my question is whether or not it should be extended to HTML and CSS (I've seen CSS resets minimize code, so perhaps the increase in performance has been measured).

First, I have no idea how to measure the increased performance, but I was wondering if any of you had any knowledge or experience about the magnitude of performance increase one could expect when minimizing HTML and CSS code (substantial, negligible, etc).

Finally, I know HTML and especially XHTML should be as readable as possible to whoever maintains the code, which why I was thinking it would be best to minimize this code at the time of rendering only, with PHP. If this is viable, what is the best way of doing this? Just trimming the HTML and CSS ($html = trim($html);)?

Upvotes: 1

Views: 1494

Answers (3)

Tusko Trush
Tusko Trush

Reputation: 430

<?php header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));
header('Content-Type: text/html; charset=utf-8');
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header('X-UA-Compatible: IE=Edge,chrome=1');
function ob_html_compress($buf){
    return preg_replace(array('/<!--(?>(?!\[).)(.*)(?>(?!\]).)-->/Uis','/[[:blank:]]+/'),array('',' '),str_replace(array("\n","\r","\t"),'',$buf));
}
ob_start("ob_html_compress"); ?>
<?php // Your Code ?>
<?php ob_end_flush(); ?>

I'm using my simple php script for optimize HTML in one line

See example: http://cs.lviv.pro/

Upvotes: 1

Shiplu Mokaddim
Shiplu Mokaddim

Reputation: 57650

Yahoo has some high performance website rules. I have quoted some of the rules. Read it carefully. These rules answers your question.

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It's true that the end-user's bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

So minimizing any content thats going to be transferred over HTTP reduces transfer time. Hence gives a head start on rendering. So your website performs faster. If you enable compression, site performance improvement will be noticeable. Also if you compress and minify Javascript, HTML and CSS all things will be faster.

Upvotes: 2

Tiago Peczenyj
Tiago Peczenyj

Reputation: 4623

To measure performance in this case you can use some tool like YSlow (in firefox > firebug) or the Profile tab in Chrome inspector.

There are many things to do to speed up a webpage. If you have many small images (icons) maybe it is a good idea join all in a big image and pick the correct using css. And put css and script tags in order.

Upvotes: 1

Related Questions