Minify JS & CSS in WordPress

gray clock

02 jun 16

comments

geen reactie

author

Xavier

In deze blogpost vertel ik jullie meer over hoe je JS & CSS moet minifien in wordpress. Dit zal er voor zorgen dat uw WordPress site beter zal presteren. Er zijn tal van plugins beschikbaar die dit (al dan niet correct) doen voor jullie, maar daarover vertel ik jullie meer over in een andere blogpost. Er zijn verschillende redenen waarom je, als developer, het toch volledig zelf wilt doen:

  1. Als developer wil je vaak zelf meer controle over alles
  2. Je bent minder afhankelijk van plugins
  3. Geen vrees voor het breken van uw website na een update van deze plugins
  4. Plugins doen het niet altijd 100% correct, of er duiken problemen op
  5. Uiteindelijk is het een vrij eenvoudige taak

Vandaar dat we even kijken hoe we dit zelf doen. Zoals vaak het geval is, begin je er best mee van in het begin. Als je achteraf alle JS & CSS files moet minifien, kan dit een vervelend werk zijn.

Uit gemak gebruiken we een taskrunner die ons zal helpen om de bestanden te minifien. Dit voorbeeld zal Grunt gebruiken.

1) Install Grunt

Documentatie

Indien je Grunt nog niet hebt staan, voer dan eerst dit commando uit:

npm install -g grunt-init

Maak daarna 2 files aan: Gruntfile.js en package.json

Je kan zelf kiezen waar je deze file wilt plaatsen:

  • in de root
  • in een plugin folder
  • in een thema folder

Hou er gewoon rekening mee dat je vanuit de locatie van Gruntfile.js moet refereren naar alle javascript en css bestanden. Vandaar dat vanuit de root iets makkelijker kan zijn. Maar indien je liever alle eigen bestanden in uw eigen thema/plugin houdt, dan is dit even goed. In deze tutorial, zet ik het in de root.

package.json

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
  }
}

gruntfile.js


'use strict';

module.exports = function (grunt) {

    grunt.initConfig({

    });

    grunt.registerTask('default', []);

};

Nu dat de opzet achter de rug is, kunnen we onze taken beginnen toevoegen die grunt moet uitvoeren. Omdat deze blogpost gaat over minifien, zullen we enkel uglify (voor de javascript bestanden) en cssmin (voor de css bestanden) gebruiken. Maar uiteraard kan je meerdere taken instellen.

npm install grunt-contrib-uglify —save-dev

npm install grunt-contrib-cssmin --save-dev

We passen meteen de gruntfile aan:

'use strict';

module.exports = function (grunt) {
    grunt.initConfig({
        uglify: {
            dist: {
                files: {
                    'dist/output.min.js': [
                        // hier zullen alle WordPress JS bestanden komen
                    ]
                }
            }
        },
        cssmin: {
            dist: {
                files: {
                    '../dist/output.min.css': [
                        // hier zullen alle WordPress CSS bestanden komen
                    ]
                }
            }
        }
    });

    grunt.loadNpmTasks(‘grunt-contrib-uglify’);

    grunt.loadNpmTasks('grunt-contrib-cssmin');

    grunt.registerTask('default', ['uglify', 'cssmin']);

};

2) Ingeladen Javascript en CSS bestanden opzoeken

Tot nog toe is dit allemaal standaard opzet om JS en CSS te minifien in ieder project. Het probleem bij WordPress is echter het hoge aantal JS & CSS bestanden die door plugins wordt ingeladen. Manueel alle bestanden opzoeken die worden ingeladen zou een lijdzame karwei zijn. Er zijn gelukkig hulpmiddelen die ons hierbij helpen.

Optie 1: via een plugin

Asset Queue Manager is een simpele plugin die u alle scripts (zowel header als footer) en styles toont die worden ingeladen (in volgorde). Bovendien wordt bij iedere script en stylesheet zijn bestandslocatie getoond. We kunnen daarom gewoon het path kopiëren en plakken in onze gruntfile.

Wordpress

Optie 2: manueel

Er is natuurlijk ook de manuele optie. In WordPress worden alle scripts en stylesheets in een queue gezet, die WordPress dan zal inladen. We gebruiken daarom de hook ‘wp_enqueue_scripts’, en zorgen ervoor met onze derde parameter dat onze callback als allerlaatste wordt opgeroepen.

add_action('wp_enqueue_scripts', ‘show_scripts', 999999);

function show_scripts() {
    global $wp_scripts;
    global $wp_styles;

    var_dump($wp_scripts);
    var_dump($wp_styles);
}

 

Wordpress

We krijgen in principe hetzelfde te zien zoals de Asset Queue Manager plugin, maar dan met veel meer informatie. Zoek naar de “queue” key in het gedumpte object. Je krijgt netjes een lijst te zien met alle scripts die zullen ingeladen worden in volgorde. De values dat je ziet zijn de handles, een unieke key die een script voorstelt. Om de bestandslocatie te vinden, zoek je simpelweg op de pagina (en met zoeken, bedoel ik letterlijk CTRL + F of CMD + F op de pagina waar je $wp_scripts gedumpt hebt) naar de handle. Je zal een object tegenkomen met desbetreffende handle en ‘src’ key met bestandslocatie.

Je voegt nu alle scripts toe die je wilt samenvoegen en minifien in het grunt bestand.

        uglify: {
            js: {
                files: {
                    './wp-content/themes/dist/output.min.js': [
                    './wp-includes/js/jquery/jquery.js',
                    './wp-includes/js/jquery/jquery-migrate.min.js',
                    './wp-includes/js/jquery/ui/widget.min.js',
                    './wp-includes/js/jquery/ui/mouse.min.js',
                    './wp-includes/js/jquery/ui/slider.min.js',
                    './wp-includes/js/comment-reply.min.js',
                    './wp-includes/js/jquery/ui/core.min.js',
                    './wp-includes/js/jquery/ui/datepicker.min.js',
                    './wp-content/themes/custom/js/custom.js',
                    …
                    ]
                }
            }
        },
        cssmin: {
            target: {
                files: [{
                    src: [
                        './wp-content/themes/custom/css/theme-head.css',
                        './wp-content/plugins/qtranslate-slug/assets/css/qts-default.css',
                        './wp-content/themes/custom/css/bootstrap.min.css',
                        './wp-content/themes/custom/css/fonts.css',
                        './wp-content/plugins/mailchimp-for-wp/assets/css/form-basic.min.css',
                        './wp-content/themes/custom/css/jquery-ui.css',
                        './wp-content/themes/custom/css/main.css',
                        …
                    ],
                    dest: './wp-content/themes/custom/style.css'
                }]
            }
        }

Opmerking: voor cssmin heb ik het bestand “theme-head.css” waarin het comment-block staat die WordPress gebruikt als informatie voor custom themes. We laden deze als eerste in, zodat in de style.css deze comment-block vanboven staat. Om ervoor te zorgen dat deze comment block netjes geminified wordt, gebruik je deze notatie:

 

/*!  
Theme Name: Custom
…
*/

We laden het bestand in

wp_enqueue_style('css', ‘path/to/output.min.css');
wp_enqueue_script('js', ‘path/to/output.min.js', array(), false, true);

* Aan de hand van de laatste parameter, zetten we het JS bestand in de footer.

3) De originele bestanden uit de queue plaatsen

Er is nog één probleem: alle scripts en stylesheets worden nog eens apart ingeladen.

We moeten wordpress meegeven dat we deze bestanden niet meer willen inladen. Je kan uiteraard niet zomaar overal de wp_enqueue_script functie in iedere plugin verwijderen.

Indien je voor optie 1 gekozen hebt, kunnen we de plugin hiervoor gebruiken. Wanneer je klikt op een script of stylesheet, verschijnt een knop om de stylesheet te dequeuen.

Ik raad echter af om het via de plugin te doen. Als je perongeluk een belangrijk script, of een script van de admin gedequeued hebt, kan het zijn dat je een wit scherm krijg, en moet je de plugin resetten. Het resetten doe je door rechtstreeks naar wp-admin/plugins.php te surfen, en op “Restore Dequeued Assets” te klikken.

Om dit te vermijden, doen we het manueel via wp_dequeue_script().

function dequeue_scripts() {
    $scripts = array(
        'angularjs',
        'angularjs-route',
        'angularjs-gettext',
        'jquery',
        'jquery-core',
        'jquery-migrate',
        'jquery-fileupload-progress',
        'jquery-fileupload-angular',
        'ui-utils',
        'jquery-file-uploader',
        'jquery-file-angular-uploader',
        'my-scripts',
        'my-controllers',
        …
    );

    foreach ($scripts as $script) {
        wp_dequeue_script($script);
    }

    $styles = array(
        'qts_front_styles',
        'bootstrap',
        'fonts',
        'genericons',
        'jquery-style',
        'application',
        'project',
        …
    );

    foreach ($styles as $style) {
        wp_dequeue_style($style);
    }
}

add_action('wp_enqueue_scripts', 'dequeue_scripts', 1000);

Conclusie

Het lijkt een beetje omslachtig in het begin, maar het is allemaal best wel easy. In de praktijk loopt het niet altijd 100% van een leien dakje, maar persoonlijk heb ik nog geen grote problemen tegengekomen. Het is vooral opletten in welke volgorde je alles inlaadt. Pas ook op dat je geen admin scripts mee minified. Dit kan onverwacht gedrag triggeren, en deze hebben sowieso niets te zoeken in het output bestand voor de eindgebruiker. Het is kwestie van in het begin alles goed bij te houden, en vanaf je een nieuwe plugin installeert, controleer als er scripts mee moeten geminified worden.

Loading...

Daag ons uit!

Daag ons uit met jouw project, laat het ons weten!