3

I am currently working on an entertainment website and I am having issues with page load time. I would love to know if there is any method I can use to remove blank spaces from PHP, JS , CSS scripts running via the website.

As I believe this will reduce load time efficiently. Also please any pointers to how can I significantly reduce page load time. I am currently using Cloudflare CDN nameservers.

5
  • Do you mean to uglify/minify the scripts ?
    – bravokeyl
    May 26, 2016 at 7:35
  • Yes @bravokeyl .... You took the word right out of my fingers.
    – proton
    May 26, 2016 at 7:50
  • no, it will not reduce load time in any detectable way. It is worth doing only after all other optimizations were done May 26, 2016 at 7:55
  • @MarkKaplun Can you give me a list of other optimizations to be done? So i will cross check with the ones i have done.
    – proton
    May 26, 2016 at 7:58
  • 2
    use php7, use object caching, use page caching (which you actually do) put css and JS at proper place in the html, reduce the size of images. All the rest is just masturbation, even if it has some minor impact it probably doesn't worth the pain of implementing them unless you have a truly big site May 26, 2016 at 8:06

2 Answers 2

4

I write one php code what totaly filter all html elements but is integrated in main index.php on the root. That made rendering a little faster but you also can do CDN for all your images and media. That will speedup your page a mutch better. I normaly point /wp-content/uploads/ to subdomain and my WP get all media from that subdomain what made WP 20 times faster.

UPDATE

I made one great regex what can work inside buffer. Copy/Paste this script in your theme functions.php and see magic.

NOTE: If your source contain bad javascript or css what's not follow rules, this may broke website. But I use it on arround 100 templates, I never experience some issue. Work nice With Elementor and WC Builder

/* ----------------------------------------------------------------------------

   W3C Fix and HTML minifier by Ivijan-Stefan Stipic <infinitumform@gmail.com>

---------------------------------------------------------------------------- */
add_action('wp_loaded', 'atm_output_buffer_start');
add_action('shutdown', 'atm_output_buffer_end');

function atm_output_buffer_start() { 
    ob_start("atm_output_callback");
}

function atm_output_buffer_end() { 
    ob_get_clean();
}

function atm_output_callback($buffer) {
    if(!is_admin() && !(defined('DOING_AJAX') && DOING_AJAX))
    {
        // Remove type from javascript and CSS
        $buffer = preg_replace( "%[ ]type=[\'\"]text\/(javascript|css)[\'\"]%", '', $buffer );
        // Add alt attribute to images where not exists
        $buffer = preg_replace( '%(<img(?!.*?alt=([\'"]).*?\2)[^>]*?)(/?>)%', '$1 alt="" $3', $buffer );
        $buffer = preg_replace( '%\s+alt="%', ' alt="', $buffer );
        // clear HEAD
        $buffer = preg_replace_callback('/(?=<head(.*?)>)(.*?)(?<=<\/head>)/s',
        function($matches) {
            return preg_replace(array(
                '/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', // delete HTML comments
                /* Fix HTML */
                '/\>[^\S ]+/s',  // strip whitespaces after tags, except space
                '/[^\S ]+\</s',  // strip whitespaces before tags, except space
                '/\>\s+\</',    // strip whitespaces between tags
            ), array(
                '',
                /* Fix HTML */
                '>',  // strip whitespaces after tags, except space
                '<',  // strip whitespaces before tags, except space
                '><',   // strip whitespaces between tags
            ), $matches[2]);
        }, $buffer);
        // clear BODY
        $buffer = preg_replace_callback('/(?=<body(.*?)>)(.*?)(?<=<\/body>)/s',
        function($matches) {
            return preg_replace(array(
                '/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', // delete HTML comments
                /* Fix HTML */
                '/\>[^\S ]+/s',  // strip whitespaces after tags, except space
                '/[^\S ]+\</s',  // strip whitespaces before tags, except space
                '/\>\s+\</',    // strip whitespaces between tags
            ), array(
                '', // delete HTML comments
                /* Fix HTML */
                '>',  // strip whitespaces after tags, except space
                '<',  // strip whitespaces before tags, except space
                '> <',   // strip whitespaces between tags
            ), $matches[2]);
        }, $buffer);
        $buffer = preg_replace_callback('/(?=<script(.*?)>)(.*?)(?<=<\/script>)/s',
        function($matches) {
            return preg_replace(array(
                '@\/\*(.*?)\*\/@s', // delete JavaScript comments
                '@((^|\t|\s|\r)\/{2,}.+?(\n|$))@s', // delete JavaScript comments
                '@(\}(\n|\s+)else(\n|\s+)\{)@s', // fix "else" statemant
                '@((\)\{)|(\)(\n|\s+)\{))@s', // fix brackets position
                //'@(\}\)(\t+|\s+|\n+))@s', // fix closed functions
                '@(\}(\n+|\t+|\s+)else\sif(\s+|)\()@s', // fix "else if"
                '@(if|for|while|switch|function)\(@s', // fix "if, for, while, switch, function"
                '@\s+(\={1,3}|\:)\s+@s', // fix " = and : "
                '@\$\((.*?)\)@s', // fix $(  )
                '@(if|while)\s\((.*?)\)\s\{@s', // fix "if|while ( ) {"
                '@function\s\(\s+\)\s{@s', // fix "function ( ) {"
                '@(\n{2,})@s', // fix multi new lines
                '@([\r\n\s\t]+)(,)@s', // Fix comma
                '@([\r\n\s\t]+)?([;,{}()]+)([\r\n\s\t]+)?@', // Put all inline
            ), array(
                "\n", // delete JavaScript comments
                "\n", // delete JavaScript comments
                '}else{', // fix "else" statemant
                '){', // fix brackets position
                //"});\n", // fix closed functions
                '}else if(', // fix "else if"
                "$1(",  // fix "if, for, while, switch, function"
                " $1 ", // fix " = and : "
                '$'."($1)", // fix $(  )
                "$1 ($2) {", // fix "if|while ( ) {"
                'function(){', // fix "function ( ) {"
                "\n", // fix multi new lines
                ',', // fix comma
                "$2", // Put all inline
            ), $matches[2]);
        }, $buffer);
        // Clear CSS
        $buffer = preg_replace_callback('/(?=<style(.*?)>)(.*?)(?<=<\/style>)/s',
        function($matches) {
            return preg_replace(array(
                '/([.#]?)([a-zA-Z0-9,_-]|\)|\])([\s|\t|\n|\r]+)?{([\s|\t|\n|\r]+)(.*?)([\s|\t|\n|\r]+)}([\s|\t|\n|\r]+)/s', // Clear brackets and whitespaces
                '/([0-9a-zA-Z]+)([;,])([\s|\t|\n|\r]+)?/s', // Let's fix ,;
                '@([\r\n\s\t]+)?([;:,{}()]+)([\r\n\s\t]+)?@', // Put all inline
            ), array(
                '$1$2{$5} ', // Clear brackets and whitespaces
                '$1$2', // Let's fix ,;
                "$2", // Put all inline
            ), $matches[2]);
        }, $buffer);

        // Clean between HEAD and BODY
        $buffer = preg_replace( "%</head>([\s\t\n\r]+)<body%", '</head><body', $buffer );
        // Clean between BODY and HTML
        $buffer = preg_replace( "%</body>([\s\t\n\r]+)</html>%", '</body></html>', $buffer );
        // Clean between HTML and HEAD
        $buffer = preg_replace( "%<html(.*?)>([\s\t\n\r]+)<head%", '<html$1><head', $buffer );
    }

    return $buffer;
}

For CDN read THIS article.

9
  • How can i get this php code to filter all html elements to make rendering faster.
    – proton
    May 26, 2016 at 12:22
  • Also how do i do CDN for all multimedia and also point the /wp-content/uploads/ to a subdomain and also is it possible to filter out a particular file type from the /wp-content/uploads to point to a subdomain. for example if i want all audio files to be stored in music.example.com and all .jpg and .png files in pictures.example.com. How do i do about this?
    – proton
    May 26, 2016 at 12:25
  • Look updated content May 26, 2016 at 15:28
  • Hi, i have followed the step to set up the CDN but i still cant access the subdomain. The media library url points to the sub domain files but i cant access them,. Its not displaying
    – proton
    May 26, 2016 at 18:24
  • Well you need to check or .htaccess or file permissions. Try to see if you can access manualy to some image. If can, you need to setup wordpress. If you can't then is htaccess problem. May 26, 2016 at 18:27
0

You should install Wp total Cache plugin and configure it as instructed on this page https://gtmetrix.com/wordpress-optimization-guide.html

WP total cache minify settings will remove blank spaces from css and js files but it will not remove blank spaces from php code and for that you can use php beautifier. There are many free online tools available, google for it.

If you are using cloudflare flexible ssl then enable it on only specific pages that require security (checkout, my account, login pages etc)

You should also optimize all of the images on your site. You can use EWWW image optimizer or WP Smush plugin for this.

Please note site speed also depends upon hosting server so if you are using a shared hosting, you can have site speed increases upto a limit.

2
  • I am using the free version of cloudflare and i once had issues with WP Smush plugin slowing down my site. @absikandar
    – proton
    May 26, 2016 at 7:59
  • You only need to activate it for image optimization and once its done, you can deactivate it. If not then you can use Ewww image optimizer instead of wp smush
    – bakar
    May 26, 2016 at 8:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.